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 🙂

Matthias Korte

Hauptberuflich Software-Entwickler und seit einigen Jahren Smart-Home Fan. Angefangen hat alles mit einem RaspberryMatic und einer schaltbaren Steckdose. Mittlerweile habe ich einige Steckdosen, Sensoren, und Thermostate sowie ioBroker zur Visualisierung im Einsatz.

Ein Gedanke zu „ioBroker HABPanel – Teil 20 – iCal Termine HTML-Darstellung

  • 2. Mai 2019 um 19:59
    Permalink

    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

    Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich akzeptiere