QuikView - HTML-Übersicht für Sonoffs

  • Moin. Ich hab vor einiger Zeit hier einen Post gelesen, wo jemand eine Tabelle mit iFrames gebastelt hat um eine kleine Übersicht über seine Sonoffs zu haben...


    Das hat mich inspiriert sowas auch mal zu bauen. Fernab von SonWeb / TasmoAdmin oder ioBroker.

    Einfach eine simple HTML-Seite mit iFrames für die einzelnen Sonoffs.


    Der Unterschied zum Ideengeber... die iFrames sind in der Größe für die einzelnen Geräte angepasst und die Seite passt sich automatisch der Fenstergröße an.

    Sollte also auch auf Handys oder Tablets laufen.





    Ich hängs mal als Code und als Datei an



    Das Anpassen ist auch recht simpel.


    hinter 'src' kommt einfach die IP eurer Geräte

    hinter 'class' kommt die Art des Gerätes.

    Die Art ist weiter oben mit Höhe und Breite definiert


    Das lässt sich natürlich beliebig für andere Geräte erweitern oder anpassen, falls bei euch was so nicht passt.



    Falls jemandem das Aussehen der einzelnen iFrames ändern möchte, z.B. die Hintergrundfarbe oder die Ränder

    dann ist das ganz oben zu finden.


    Mehr Einträge lassen sich hinzufügen, indem einfach dieser 2zeiler kopiert und eingefügt wird


    Ich hoffe euch gefällts und der ein oder andere kanns nutzen.

    Ich finds ganz pratisch, da bei mir TasmoAdmin nicht ständig läuft und ich so einfach mal blitzschnell ne Übersicht habe um irgendwas zu schalten.


    Freue mich auf Reaktionen... :)

  • Gefällt mir.


    Gleichmal bei mir umgesetzt. :thumbup:


    Als Tipp:

    Wer mit Login arbeitet beim Sonoff, den link folgendermaßen im link source eintragen:

    <iframe src="http://admin:password@192.168.10.107" scrolling="no" class="Basic"></iframe>


    Und als Ergänzung für die RF Bridge:

    Code
    1. .BRIDGE {
    2. width:363px;
    3. height:395px;
    4. }
    5. <iframe src="http://admin:<password>@<IP>" scrolling="no" class="BRIDGE"></iframe>

    Tasmota 6.5.0 - Arduino-IDE - 1.8.7

    Sonoff-Basic / Sonoff-RF / Sonoff-Touch / PowStro / HomeMagic / Sonoff-RF-Bridge mit diversen 433MHz RF Sender/Empfänger

    Sensoren: BME280/BMP280/HC-SR501

    mosquitto/bash/html/cgi auf RPI 2B+/Sprachsteuerung via IFTTT/2xGoogle-Home-Mini

    Einmal editiert, zuletzt von HoerMirAuf ()

  • Das macht ja einen Guten Eindruck - Könnte "MANN" ein komplettes TUT für Anfänger machen was muß wo und wie installiert sein und und .. Muß man die SONOFFS auch noch löten usw ? - Danke gruß

  • Wobei die Anleitung für mich nicht gerade sehr zielführend ist. Warum soll ich da zuerst im Browser an den Werten basteln, wenn ich das gleich in der HTML Datei erledigen kann? Ich hab länger gebraucht um zu verstehen, was das ganze soll, als für das erstellen der HTML Datei^^


    Wie geschrieben, es steht alles was man brauch schon im ersten Post und mehr braucht man da auch nicht wirklich.

  • So hab jetzt mal auf die schnelle ein bischen gebastelt und Überschriften so einfach wie möglich integriert...


    Da bei den Tasmotas die Namen ja sowieso dastehen hab ich für meine Fälle mal die IP's als Überschriften genutzt und auch anklickbar gemacht.




    hier mal das HTML in Textform



    Wen es interessiert:

    Da die div-Container anders angeordnet werden, mussten die jetzt alle die gleich Höhe kriegen. Deswegen unter den Einträgen im <style> bei den meisten Geräten ein "padding-bottom"...

    Wenn ihr was an den Größe ändert, ist das quasi die Differenz zum größten (höchsten) iFrame.


    Falls weitere Erklärungen notwenig sind... morgen nach dem Ausschalfen... ;)