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 🙂