In dieser Artikelreihe zeige ich Dir eine weitere Visualierungsoberfläche für ioBroker.
Im 10. Teil der Artikelreihe verwenden wir das Frame-Widget zur Einbindung einer VIS-View. Evtl. nutzt Du ein Widget in VIS, für das es keinen Ersatz in HABPanel gibt. Für dieses Problem gibt es eine einfache Lösung, denn wir können über das Frame-Widget Webseiten, also auch eine bestehende VIS-View einbinden. Für die separate Darstellung der View habe ich eine extra View in VIS angelegt, welche ich dann auch vom Style her an HABPanel anpassen kann.
Im folgenden Screenshot siehst Du die betroffene View, welche ich in HAPPanel integrieren möchte.
In der Ausführung der View kopieren wir uns die URL der VIS View in die Zwischenablagen, diese benötigen wir später zur Konfiguration des Widgets.
Im ersten Schritt habe ich dazu ein neues Dashboard erstellt, Du kannst das Frame Widget aber natürlich auch auf einem bestehenden Dashboard einfügen.
Für den Artikel vergebe ich nun hier den Namen „VIS-Beispiel“ und speichere das Dashboard mit der Schaltfläche „OK“.
Nun wechseln wir im Dashboard in den Bearbeitungsmodus.
Im Menü unter „Add Widget“ wählen wir das Frame-Widget aus.
Nach dem Einfügen des Widgets öffnen wir den Bearbeitungsmodus des Widget.
In den Widget Einstellungen können wir nun einen Namen, die URL Source sowie die eigentliche URL definieren. Die URL kann entweder statisch „Static URL“, oder per „String-Item“ definiert werden. Somit kann die URL auch über einen Datenpunkt gesteuert werden. Zudem kann hier noch ein Aktualisierungsintervall (Sekunden) eingestellt werden. Dieses Intervall benötigen wir für VIS-Views aber nicht, da diese sich automatisch Client-seitig aktualisieren.
Nach dem Speichern des Widgets wird nun die View folgendermaßen dargestellt. Der einzige Nachteil ist die Ladezeit der View.
ioBroker HABPanel
- Teil 1 – Installation und Grundlagen
- Teil 2 – Dashboard und Widgets
- Teil 3 – Custom Widgets
- Teil 4 – Custom Widgets importieren (JSON-Format)
- Teil 5 – Custom Widgets anpassen und erweitern
- Teil 6 – Eigenes Widget erstellen
- Teil 7 – Unterstützung von verschiedenen Geräten und Auflösungen
- Teil 8 – Tür-/Fensterkontakt visualisieren
- Teil 9 – Das Chart Widget
- Teil 10 - Mit dem Frame-Widget eine VIS-View einbinden
- Teil 11 - Script über Button starten
- Teil 12 - Das Timeline-Widget
- Teil 13 - Das Template-Widget
- Teil 14 - Template Wissenssammlung
- Teil 15 – Das Slider-Widget
- Teil 16 – Das Dummy-Widget
- Teil 17 – Das Knob-Widget
- Teil 18 – Das Clock-Widget
- Teil 19 – Das Button-Widget
- Teil 20 – iCal Termine HTML-Darstellung
- Teil 21 – OpenWeatherMap Widget
- Teil 22 – Image Widget
- Teil 23 – Selection Widget
- Teil 24 – Online-Status Widget
Ich hoffe Dir gefällt der Artikel. Ich freue mich über Deinen Kommentar 🙂