QuikView - HTML-Übersicht für Sonoffs

Supermicha

Nachtrag......

iframe {

border: 2px solid #1fa3ec;

border-radius: 5px;

padding: 0px;

margin: 0px;

box-shadow: 3px 3px 5px #0e70a4;

background-color: #C6E2FF;

transform: scale(1);

transform-origin: left top 0;

}

Ich habs mal mit eingefügt.... wer mag, kann damit die Größe der eingebetteten iFrames ändern....

dann müssen natürlich alle anderen px Angaben auch entsprechend geändert werden.

Athen2004

schön gemacht Supermicha.

Da ich nicht der Superprofi bin, was HTML betrifft, eine Frage an die Profis hier im Forum.

Einen separaten Text direkt in das iframe setzen ist wohl nicht möglich.

siehe Bild neben dem Wort Relais zB den Text xxxxxxxxxxx

gerty

Zitat von Athen2004

schön gemacht Supermicha.

Da ich nicht der Superprofi bin, was HTML betrifft, eine Frage an die Profis hier im Forum.

Einen separaten Text direkt in das iframe setzen ist wohl nicht möglich.

siehe Bild neben dem Wort Relais zB den Text xxxxxxxxxxx

Supermicha:

großes Lob an Dich für deinen Fleiß, die Übersicht ist echt hilfreich und ist für mich absolut ausreichend

Athen2004:

ich bekomme dir Größe nicht hin wie bei dir,

was hast du eingegeben?

Supermicha

Text IM iFrame funktioniert nicht... Möglicherweise mit Javascript als Overlay, da bin ich aber raus....

Ich hab's gestern nicht mehr getestet, aber ich glaube mit dem Zoom aus meinem letzten Beitrag wird's noch Probleme geben, da müsste wohl der div-Container manuell angepasst werden...

Ich guck mir das heut Abend nochmal an..

Athen2004

hallo Gerty

Hier die Datei ,so wie ich sie vor der Änderung von Supermicha verändert habe.

musst nur die Dateiendung von txt auf html ändern.

Einfach mit den Werten rumspielen.

Habe einige Info kommentiert

Beispiel des Kommentars

Supermicha

So ich hab nochmal ein bischen gebastelt und das mit dem Zoom gelöst.

so passen ein paar mehr Geräte aufs Display.

Ich lasse jetzt auch alle Container gleich groß anzeigen, sieht doch etwas aufgeräumter aus.

Athen2004 das mit den Kommentaren war eine sehr gute Idee. Hab meinen Code auch mal vollkommentiert, damit es vielleicht etwas ersichtlicher ist, was zu tun ist, wenn viel angepasst werden soll...

Hier mal die upgedatete Version.

Spoiler anzeigen

<!DOCTYPE html>

<html>

<head>

<title>Geräteübersicht</title>

iframe { /*Hier werden die iFrames optisch angepasst*/

border: 2px solid #1fa3ec; /*Breite und Farbe*/

border-radius: 5px; /*Radius der Ecken*/

padding: 0px;

margin: 0px;

box-shadow: 3px 3px 5px #0e70a4; /*Schatten Größe und Farbe*/

background-color:#C6E2FF; /*Hintergrundfarbe*/

transform: scale(0.65); /*Maßstab für Vergrößerung oder Verkleinerung*/

transform-origin: left top 0;

}

/*Hier werden die Fenstergrößen der einzelnen Gerätetypen angepasst*/

/*Achtung: die Padding Werte dienen dazu, die unterschiedlich großen Fenster auf eine einheitliche Größe zu kriegen*/

/*ich verwende als Gesamtbeite und Gesamthöhe jeweils 400px*/

/*also width + padding-left + padding-right = 400 und height + padding-bottom = 400*/

/*Bei Änderungen der Größe müssen die padding-Werte mit angepasst werden*/

.Basic { /*Gerätetyp*/

width:370px; /*Breite des Fensters*/

height:325px; /*Höhe des Fensters*/

padding-left:15px;

padding-right:15px;

padding-bottom:75px;

}

.Dual {

width:370px;

height:320px;

padding-left:15px;

padding-right:15px;

padding-bottom:80px;

}

.FourCh {

width:400px;

height:370px;

padding-left:0px;

padding-right:0px;

padding-bottom:30px;

}

.LED {

width:370px;

height:400px;

padding-left:15px;

padding-right:15px;

padding-bottom:0px;

}

div { /*Hier wird der Container um das iFrame definiert*/

text-align:center; /*Überschrift/Text zentriert (alternativ left oder right*/

float:left;

margin-left:15px; /*Seitenabstand (links)*/

margin-bottom:15px; /*Abstand nach unten*/

/*Hier muss der Skalierungsfaktor der iFrames berücksichtigt werden (siehe oben)*/

width:260px; /*Breite des gesamten Containers. Breite(400) x Skalierungsfaktor = 260*/

height:280px; /*Höhe des gesamten Containers. Höhe(400) x Skalierungsfaktor + 20px für die Überschrift = 280*/

/*Bei größerer Schrift muss etwas mehr Platz gelassen werden*/

}

a { /*Hier wird der Link in der Überschrift formatiert*/

color:#1fa3ec; /*Farbe*/

text-decoration:none; /*nicht unterstrichen*/

font-weight:bold; /*fett*/

font-family:Arial, Helvetica, sans-serif; /*Schriftart*/

}

footer { /*Dient nur dazu, meinen Namen unten hübsch anzuzeigen*/

text-align:center;

color:#1fa3ec;

font-weight:bold;

font-family:Arial, Helvetica, sans-serif;

position:fixed;

padding:10px;

bottom:0px;

left:0px;

right:0px;

background-color:white;

}

</style>

</head>

</iframe></div>

</iframe></div>

</iframe></div>

</iframe></div>

</iframe></div>

</iframe></div>

</iframe></div>

</iframe></div>

</iframe></div>

</iframe></div>

<footer>created 2019 by Supermicha<br></footer>

</body>

</html>

Athen2004

Hallo Supermicha

Klasse Leistung , hast du gut hinbekommen.

Hast dir eine Menge Fleißarbeit beim dokumentieren gemacht.

Vielleicht als Anregung für das Wiki, sollte man solchen Toolś

(Sonweb ,App ś wie Http shortcuts, Yeti usw ) im Wiki

eine Untergruppe geben.

Wäre schade, wenn nach einiger Zeit keiner sich mehr daran erinnert.

Im Wiki schaut man doch eher hin nach solchen Dingen.

PS natürlich bleibt der Schriftzug stehen.

HoerMirAuf

Muss mich anschließen.

Wirklich gut gelungen!

- kein großer Aufwand

- Übersichtlich

- schaut schick aus

... jetzt müsste JoergZ eigentlich nur noch ne Routine in sein soncheck bash script einbauen das diese Seite automatsich generiert wird

Supermicha

Ja, falls JoergZ oder sonst wer Lust und Ahnung hat, kann er das gerne mit dem ein oder anderen Script versehen, was die Konfiguration einfacher macht.

Ich hatte auch schon in der Art überlegt, vielleicht ein Dropdown Menü zu integrieren, welches den Zoom regelt, aber da scheitert es an der Anpassung der Werte von div-Container...

Athen2004

Der Vorteil bei Tasmota Geräten ist, vorausgesetzt man hat scrolling auf yes gestellt .

Man kann überall auf Konsole gehen und hat bei Problemen sofort alle Meldungen im Blick und muss nicht ständig hin und her switchen.( zB.Verbindungs Aussetzern)

NoitaercX

Zitat von Athen2004

Man kann überall auf Konsole gehen

Oder man bastelt sich eine extra Seite,

bei der gleich die Konsolen angezeigt werden

"src="http://192.168.x.x/cs"

auch jedes andere Unter-Menü von Tasmota wäre direkt möglich...

Athen2004

noch besser

Supermicha

oder du packst einen kleinen Button unter den iFrame, der die Konsole im Extra-Fenster aufruft.

Supermicha

Das hat mir jetzt keine Ruhe gelassen und ich hab weiter gebastelt....

Ich gebe meinen Versionen ab jetzt Nummern... um den Überblick zu behalten...

....siehe 2 Posts weiter.....

Athen2004

habe es kurz überflogen,einfach genial, weil so simple. Da ich das ganze WE unterwegs bin, schaue ich es mir Montag genauer an.

Supermicha

Hab grade noch einen kleinen Formatierungsfehler gefunden.

und Poste es nochmal neu.

Spoiler anzeigen

<!DOCTYPE html>

<html>

<head>

<title>Geräteübersicht</title>

iframe { /*Hier werden die iFrames optisch angepasst*/

border: 2px solid #1fa3ec; /*Rand Breite und Farbe*/

border-radius: 5px; /*Eckenradius*/

padding: 0px;

margin-top: 5px;

box-shadow: 3px 3px 5px #0e70a4; /*Schatten Größe und Farbe*/

background-color:#C6E2FF; /*Hintergrundfarbe*/

transform: scale(0.65); /*Maßstab für Vergrößerung oder Verkleinerung*/

transform-origin: left top 0;

}

/*Hier werden die Fenstergrößen der einzelnen Gerätetypen angepasst*/

/*Achtung: die Padding Werte dienen dazu, die unterschiedlich großen Fenster auf eine einheitliche Größe zu kriegen*/

/*padding ist Abstand links UND rechts (jeweils) und padding-bottom ist Abstand nach unten*/

/*ich verwende als Gesamtbeite und Gesamthöhe jeweils 400px*/

/*also width + padding-left + padding-right = 400 und height + padding-bottom = 400*/

/*Bei Änderungen der Größe müssen die padding-Werte mit angepasst werden*/

.Basic { /*Gerätetyp*/

width:370px; /*Breite des Fensters*/

height:325px; /*Höhe des Fensters*/

padding-left:15px;

padding-right:15px;

padding-bottom:75px;

}

.Dual {

width:370px;

height:320px;

padding-left:15px;

padding-right:15px;

padding-bottom:80px;

}

.FourCh {

width:400px;

height:370px;

padding-left:0px;

padding-right:0px;

padding-bottom:30px;

}

.LED {

width:370px;

height:400px;

padding-left:15px;

padding-right:15px;

padding-bottom:0px;

}

div { /*Hier wird der Container um das iFrame definiert*/

text-align:center; /*Überschrift/Text zentriert (alternativ left oder right*/

float:left;

margin-left:15px; /*Seitenabstand (links)*/

margin-bottom:15px; /*Abstand nach unten*/

/*Hier muss der Skalierungsfaktor der iFrames berücksichtigt werden (siehe oben)*/

width:260px; /*Breite des gesamten Containers. Breite(400) x Skalierungsfaktor = 260*/

height:310px; /*Höhe des gesamten Containers. Höhe(400) x Skalierungsfaktor + 50px für die Überschrift und Buttons = 300*/

/*Bei größerer Schrift muss etwas mehr Platz gelassen werden*/

}

a { /*Hier wird der Link in der Überschrift formatiert*/

color:#1fa3ec; /*Farbe*/

text-decoration:none; /*nicht unterstrichen*/

font-weight:bold; /*fett*/

font-family:Arial, Helvetica, sans-serif; /*Schriftart*/

}

footer { /*Dient nur dazu, meinen Namen unten hübsch anzuzeigen*/

text-align:center;

color:#1fa3ec;

font-weight:bold;

font-family:Arial, Helvetica, sans-serif;

position:fixed;

padding:10px;

bottom:0px;

left:0px;

right:0px;

background-color:white;

}

body { /*Hintergrundfarbe der gesamten Seite*/

background-color:white;

}

.button { /*Aussehen der Buttons*/

padding:2px 5px; /*Abstand Rand-Text oben/unten und links/rechts*/

margin:2px; /*Abstand zwischen den Buttons*/

border:1px solid black; /*Rand Breite und Farbe*/

border-radius: 3px; /*Eckenradius*/

background:#1fa3ec; /*Hintergrundfarbe*/

box-shadow: 3px 3px 5px #0e70a4; /*Schatten Größe und Farbe*/

color:white; /*Schriftfarbe*/

text-decoration:none; /*nicht unterstrichen*/

font-size:small; /*Schriftgröße*/

}

</style>

</head>

<body>

<!-- Hier kommen jetzt die Geräte rein

BEISPIEL

<div><a href="http://IP DES GERÄTES FÜR DEN LINK" target="_blank">TEXT</a><br> Hier gehts direkt zum Gerät (Hauptseite)

<a class="button" href="http://IP DES GERÄTES/in" target="_blank">Info</a> Hier gehts zur Infoseite

<a class="button" href="http://IP DES GERÄTES/tm" target="_blank">Zeitplan</a> Hier gehts zur Timereinstellung

<a class="button" href="http://IP DES GERÄTES/cs" target="_blank">Konsole</a> Hier gehts zur Konsole

<a class="button" href="http://IP DES GERÄTES/co" target="_blank">sonstiges</a><br> Hier gehts zu sonstiges

Wer keinen Link in der Überschrift möchte: alles von inklusive <a href .... bis inklusive </a> löschen

Wer einen Button nicht braucht, entsprechende Zeile löschen

Bei Gerätetyp auf Groß-und Kleinschreibung achten

Für Sonoff: Wer den Login aktiviert, die Links derart anpassen: http://admin:PASSWORT@IP -->

<a class="button" href="http://192.168.10.102/tm" target="_blank">Zeitplan</a>

<a class="button" href="http://192.168.10.102/cs" target="_blank">Konsole</a>

<a class="button" href="http://192.168.10.102/co" target="_blank">sonstiges</a><br>

</iframe></div>

<a class="button" href="http://192.168.10.101/tm" target="_blank">Zeitplan</a>

<a class="button" href="http://192.168.10.101/cs" target="_blank">Konsole</a>

<a class="button" href="http://192.168.10.101/co" target="_blank">sonstiges</a><br>

</iframe></div>

<a class="button" href="http://192.168.10.105/tm" target="_blank">Zeitplan</a>

<a class="button" href="http://192.168.10.105/cs" target="_blank">Konsole</a>

<a class="button" href="http://192.168.10.105/co" target="_blank">sonstiges</a><br>

</iframe></div>

<a class="button" href="http://192.168.10.114/tm" target="_blank">Zeitplan</a>

<a class="button" href="http://192.168.10.114/cs" target="_blank">Konsole</a>

<a class="button" href="http://192.168.10.114/co" target="_blank">sonstiges</a><br>

</iframe></div>

<a class="button" href="http://192.168.10.100/tm" target="_blank">Zeitplan</a>

<a class="button" href="http://192.168.10.100/cs" target="_blank">Konsole</a>

<a class="button" href="http://192.168.10.100/co" target="_blank">sonstiges</a><br>

</iframe></div>

<a class="button" href="http://192.168.10.103/tm" target="_blank">Zeitplan</a>

<a class="button" href="http://192.168.10.103/cs" target="_blank">Konsole</a>

<a class="button" href="http://192.168.10.103/co" target="_blank">sonstiges</a><br>

</iframe></div>

<a class="button" href="http://192.168.10.108/tm" target="_blank">Zeitplan</a>

<a class="button" href="http://192.168.10.108/cs" target="_blank">Konsole</a>

<a class="button" href="http://192.168.10.108/co" target="_blank">sonstiges</a><br>

</iframe></div>

<a class="button" href="http://192.168.10.112/tm" target="_blank">Zeitplan</a>

<a class="button" href="http://192.168.10.112/cs" target="_blank">Konsole</a>

<a class="button" href="http://192.168.10.112/co" target="_blank">sonstiges</a><br>

</iframe></div>

<a class="button" href="http://192.168.10.104/tm" target="_blank">Zeitplan</a>

<a class="button" href="http://192.168.10.104/cs" target="_blank">Konsole</a>

<a class="button" href="http://192.168.10.104/co" target="_blank">sonstiges</a><br>

</iframe></div>

<a class="button" href="http://192.168.10.107/tm" target="_blank">Zeitplan</a>

<a class="button" href="http://192.168.10.107/cs" target="_blank">Konsole</a>

<a class="button" href="http://192.168.10.107/co" target="_blank">sonstiges</a><br>

</iframe></div>

<footer>Version 1.6 - created 2019 by Supermicha<br></footer>

</body>

</html>

und hier der Quellcode

Coyote-NB-CA

nett gemacht
schoen das dich mein anfang auf den weg gebracht hat

weiter so

dicken daumen hoch

HoerMirAuf

Echt krass !! Das entwickelt sich wirklich zu nem richtig schicken kleinen Projekt .... klasse mit den Buttons für die anderen Menüseiten

MOCKI010

WOW - Das wird immer BESSER - TOLL !! Jetzt wünsch ich mir noch ein KOMPLETT-TUTORIAL für Anfänger - für einen neuen Sonoff BASIC vom Flashen welche Software bis zur fertigen Installation auf nem WIN 10 Rechner und Tablet - Das wäre Grande !!

Athen2004

mit einer komplett Anweisung ist so ne Sache. Das sind ja mehr wie drei Dinge auf einmal. Meine Erfahrungen waren Google,YouTube,forum und jetzt das Wiki hier.

Man muss sich damit beschäftigen und viel probieren. .Auf jedenfallnicht gleich aufgeben. Beschäftige mich auch erst 10 Monate mit diesen Dingen.