ioBroker Jarvis – Teil 11 – Widget – iFrame

In diesem Artikel zeige ich Dir, wie Du das Widget iFrame auf Deiner Visualisierung einsetzen kannst.

In den letzten Artikeln haben wir bereit Geräte zu unserer Visualisierung hinzugefügt, das Layout definiert und zusätzlich einige Widgets kennen gelernt. In diesem Artikel zeige ich Dir das Widget iFrame, mit dem Du z.B. Webseiten oder andere Web-Elemente in Deiner jarvis-Visualisierung integrieren kannst.

Im Artikel zeige ich Dir, wie ich meine Visualisierung des Heizöltank-Status als ioBroker VIS-View in javris integriere. Aufwändige oder spezielle Views kannst Du so in VIS belassen, und diese dann per iFrame-Widget in javris integrieren.

In VIS habe ich die folgende View erstellt, auf der Informationen zur Heizung sowie zum Füllstand des Heizöl-Tanks dargestellt werden. Diese View belasse ich so und nutze später davon den rechten Teil für jarvis.

Im ersten Schritt erstelle ich nun ein neues Projekt, in dem ich nur Views für jarvis ablegen möchte.

Ich kopiere nun die benötigten Windets auf die neue View und passe die Farbe bzw. Größe noch ein wenig an (Größe etwas verkleinert).

Wenn wir das Projekt jetzt über den Pfeil oben rechts im Web-Browser öffnen, sehen wir die folgende Anzeige. Hier kannst Du Dir direkt die URL zur View in die Zwischenablage kopieren.

Jetzt können wir mit der Konfiguration der Visualisierung beginnen. Dazu klicke wir oben rechts auf das Zahnrad-Icon.

Ich möchte das Widget auf einer bereits bestehenden Tab-Seite hinzufügen. In der jeweiligen Spalte klicke ich dann auf Widget hinzufügen.

In der Widget-Konfiguration habe ich zunächst einen Titel definiert und dann den Modul-Typ auf iFrame gesetzt. Das Icon sowie die Icon-Styles habe ich hier nicht geändert. Die vorher kopierte URL zur VIS-Seite können wir jetzt im Feld URL einfügen. Die Höhe steht standardmäßig auf 100%, ich habe den Wert hier so belassen.

Wenn wir nun die Konfiguration speichern und die Visualisierung öffnen, wird das neue Widget wie folgt dargestellt.

Ich finde das iFrame-Widget relativ praktisch, da ich so aufwändige Visualisierungen oder Anzeigen, die aktuell in jarvis noch nicht möglich sind, so problemlos in VIS belassen kann, und diese dann später implementieren kann. Ein Nachteil ist hier natürlich die Tatsache, das die Views nicht wirklich responsive reagieren. Daher würde ich die Verwendung von VIS-Views wirklich nur dann in Betracht ziehen, wenn es nicht anders gelöst werden kann.

Ich hoffe Dir gefällt der Artikel. Über Kommentare, Anregungen oder Ideen freue ich mich wie immer 🙂