ioBroker HABPanel – Teil 10 – Mit dem Frame-Widget eine VIS-View einbinden
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.
Ich hoffe Dir gefällt der Artikel. Ich freue mich über Deinen Kommentar 🙂
Ist zufällig eine Folge in Planung die erklärt wie man eine Wetteranzeige umsetzt? Ich tue mich etwas schwer damit und würde mich freuen wenn du dich der Sache annehmen würdest. Danke für die bisherigen Folgen zum Thema HABPanel. Haben mir schon sehr weitergeholfen.
Gruß U.Palme
Ich hab den Adapter von „das wetter“ installiert und anschliessend ein eigens Widget erstellt:
.myWeatherstyle {
border-collapse:collapse;
border-spacing:0;
font-family: sans-serif;
}
.myWeatherstyle td{
font-size:12px;
padding:0px 0px;
overflow:hidden;
word-break:normal
}
.th1{
font-size:12px;
font-weight:normal;
padding:0px 0px;
overflow:hidden;
word-break:normal
}
.th2{
font-size:12px;
font-weight:normal;
overflow:hidden;
word-break:normal;
padding:0px 0px
}
{{itemValue(config.string_item_Day1)}}
{{itemValue(config.string_item_Symbol1)}}
{{itemValue(config.string_item_maxTemp1)}}°C / {{itemValue(config.string_item_minTemp1)}}°C
{{itemValue(config.string_item_Wind1)}}
{{itemValue(config.string_item_Day2)}}
{{itemValue(config.string_item_Symbol2)}}
{{itemValue(config.string_item_maxTemp2)}}°C / {{itemValue(config.string_item_minTemp2)}}°C
{{itemValue(config.string_item_Wind2)}}
{{itemValue(config.string_item_Day3)}}
{{itemValue(config.string_item_Symbol3)}}
{{itemValue(config.string_item_maxTemp3)}}°C / {{itemValue(config.string_item_minTemp3)}}°C
{{itemValue(config.string_item_Wind3)}}
<!–
{{itemValue(config.string_item_Day4)}}
{{itemValue(config.string_item_Symbol4)}}
{{itemValue(config.string_item_maxTemp4)}}°C / {{itemValue(config.string_item_minTemp4)}}°C
{{itemValue(config.string_item_Wind4)}}
–>
Top! Ich bin derzeit auch dabei ein eigenes Widget für das Wetter zu implementieren 🙂