ioBroker HABPanel – Teil 20 – iCal Termine HTML-Darstellung
In dieser Artikelreihe zeige ich Dir eine weitere Visualierungsoberfläche für ioBroker.
Im 20. Teil der Artikelreihe schauen wir uns das Template-Widget genauer an. Mit dem Template-Widget können wir uns mit HTML sowie den Datenpunkt-Bindings ein eigenes Widget für ein Dashboard erstellen. Im ersten Schritt fügen wir dazu nun im gewünschten Dashboard das Widget über die Schaltfläche „Add Widget“ hinzu.
Über die Bearbeitungsfunktion können wir nun den Inhalt des Widgets direkt bearbeiten.
In den Template Einstellungen können wir nun den anzuzeigenden Namen sowie das eigentliche Template bearbeiten.
Im Template fügen wir nun den folgende HTML-Snippet ein. Damit wird ein Textblock eingefügt, welcher den Inhalt des Datenpunktes „ical.0.date.html“ linksbündig darstellt.
<p style="margin-top: 12px; text-align:left;" ng-bind-html="itemValue('ical.0.data.html')"></p>
Die Ausführung sieht nun so aus:
Ich hoffe Dir gefällt der Artikel 🙂 Ich freue mich über Deinen Kommentar!
Hallo
weis du zufällig wie man die Widgetgröße ändert, man kann nur über das untere rechte weiße Dreieck die Größe einstellen. Geht das noch anders ?
Auf den Bilder sieht das immer kleiner aus….
Z.B. Überschrift (Label) und die Wigets darunter und daneben….
Hoffe das du mich verstehst….
Gruss