ioBrokerioBroker LovelaceioBroker Tutorials

ioBroker Visualisierung mit lovelace – Teil 21 – Das iFrame Widget

In diesem Artikel zeige ich Dir die Einsatz-Möglichkeiten des iFrame Widgets in Deiner Lovelace Visualisierung.

Mit dem iFrame Widget können externe Webseiten in die Lovelace Visualisierung integriert werden. Ich nutze das Widget z.B. für die Darstellung von Flot-Diagrammen in der Visualisierung. Über das Widget kann jede beliebige Webseite eingebunden werden. Im Artikel zeige ich Dir, wie ich für den Verlauf der Bodenfeuchtigkeit ein Flot-Digramm angelegt habe und wie ich dieses Diagramm in der Visualisierung darstelle.

Im ersten Schritt habe ich nun den Datenpunkt der Bodenfeuchtigkeit für den History-Adapter aktiviert.

Ich gehe hier nur kurz auf dieses Thema ein, da ich den History-Adapter bereits in anderen Artikeln ausführlicher erklärt habe. Für die Aktivierung einfach die CheckBox Aktiviert anklicken.

Im nächstem Schritt können wir nun die Flot-Umgebung starten und mit der Konfiguration des Diagramms beginnen. Hierzu gehen wir zunächst auf den Bereich Eingangsdaten und wählen unseren Datenpunkt für das Diagramm.

Im nächsten Schritt müssen für das Diagramm die automatische Aktualisierung aktivieren um somit das Digramm auf dem aktuellen Stand halten zu können. Wenn diese Option nicht aktiviert ist, wird das Diagramm nur beim Laden der Visualisierung einmalig geladen. Den Autoupdate habe ich hier zu Testzwecken so hoch gesetzt, ich würde den Update je nach Verwendungszweck auf mehrere Minuten einstellen.

Im Bereich Optionen aktivieren wir dann noch die Option Kein Edit Knopf, da ansonsten im Diagramm ein zusätzliches Icon eingeblendet wird. Zudem habe ich die Animation deaktiviert.

Wir müssen nun den direkten Link zum Diagramm aus dem hier gelb markierten Feld in die Zwischenablage kopieren.

Im nächsten Schritt wechseln wir nun in die Konfiguration der Lovelace Visualisierung und fügen über die Plus-Schaltfläche das iFrame-Widget hinzu.

Nach dem Hinzufügen des Widgets wird direkt die Konfiguration geöffnet. In der Konfiguration müssen wir die vorher kopierte Diagramm-URL (Link) aus Flot einfügen. Optional können wir zudem einen Titel sowie das Seitenverhältnis definieren. Mit dem Seitenverhältnis wird die Höhe des Widgets gesteuert. Bei einem Wert von 50% wird die externe Webseite halb so hoch wie breit dargestellt 😉

Nach dem Einfügen der URL wird das Widget jetzt wie folgt angezeigt. Ich habe hier noch die Achsbeschriftung für die X-Achse entfernt.

Ich hoffe ich konnte Dir damit weiterhelfen und freue mich wie immer über Deine Fragen, Anregungen oder Kommentare zum Thema 🙂

Matthias Korte

Hauptberuflich Software-Entwickler und seit einigen Jahren Smart-Home Fan. Angefangen hat alles mit einem RaspberryMatic und einer schaltbaren Steckdose. Mittlerweile habe ich einige Steckdosen, Sensoren, und Thermostate sowie ioBroker zur Visualisierung im Einsatz.

2 Gedanken zu „ioBroker Visualisierung mit lovelace – Teil 21 – Das iFrame Widget

  • Michael

    Hallo Matthias,

    deine lovelace Reihe ist wirklich gut und hat mir schon viele gute Denkanstöße gegeben.
    Dafür erst einmal vielen Dank.
    Ich weiß natürlich nicht, was du noch so geplant hast. Ich für meinen Teil hätte großes Interesse an einem Bericht bzgl. der Steuerung von Rollos und der Änderung des Themes der kompletten lovelace Umgebung.

    Vielen Dank und viele Grüße
    Michael

    Antwort
  • Thorsten

    Hallo Matthias,

    deine ganze Website ist wirklich sehr gelungen und ich habe schon einige deiner Tutorials umgesetzt.
    Vielen Dank dafür!!!
    In der Visualisierung mit Lovelace habe ich zwei Fragen. 1. Kann man im IFRAME die Scroll Bars ausblenden?
    2. Ich würde gerne das Historie Widget verwenden, bekomme aber immer die Meldung „Integration Historie deaktiviert“. Wo muss man das aktivieren. Im ioBroker habe ich den Historie Adapter angelegt und dort werden auch schon die gewünschten Werte protokolliert. Nur im Lovelace klappt das leider nicht.

    Vielen Dank und Gruß
    Thorsten

    Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert