In dieser Artikelreihe zeige ich Dir eine weitere Visualierungsoberfläche für ioBroker.
Im 20. Teil der HABPanel-Artikelreihe schauen wir uns das Widget Template genauer an. Mit dem Template-Widget können wir uns mit HTML sowie den Datenpunkt-Bindings (Object-Bindings) ein eigenes Widget für unser Dashboard erstellen. Im ersten Schritt öffnen wir die Konfiguration des HABPanels und navigieren auf das Dashboard, auf dem wir das Widget einfügen möchten. Über die Plus-Schaltfläche oben rechts (Add Widget) fügen wir dann das Widget Template zu unserem Dashboard hinzu.
Nach dem Einfügen des Widgets, können wir nun mit der Konfiguration des Widgets beginnen. Dazu klicken wir auf die Bearbeitungsfunktion Edit oben rechts im Menü des Sandwitch-Buttons.
Im neuen Fenster können wir nun das Widget bearbeiten. In den Template Einstellungen können wir nun den anzuzeigenden Namen sowie das eigentliche Template in Form von HTML-Code bearbeiten.
Im Template fügen wir nun das folgende HTML-Snippet ein. Mit dem Snippet wird ein Paragraph-Element (p) in das Widget eingefügt, welches über die itemValue-Definition sowie die ng-bind-html-Richtlinie den Wert des Datenpunkts „ical.0.date.html“ in dem Widget darstellt. Mittels den Styling-Optionen des Paragraph-Elements wird zudem der Abstand zum oberen Rand verändert sowie die Textausrichtung auf links gesetzt.
Weitere Informationen zum Thema Object-Binding mit AngularJS findest Du auch hier:
https://www.w3schools.com/angular/ng_ng-bind-html.asp
In der Visualisierung wird das Widget jetzt folgt dargestellt:
Über das Object-Binding wird die komplette HTML-Definition des Datenpunkts „ical.0.date.html“ im Widget dargestellt. Über diese Vorgehensweise können wir recht einfach HTML-Definitionen in unser Dashboard übernehmen.
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 🙂