ioBroker HABPanel – Teil 6 – Eigenes Widget erstellen

In dieser Artikelreihe zeige ich Dir eine weitere Visualierungsoberfläche für ioBroker.  

Im 6. Teil der Artikelreihe bauen wir uns ein eigenes Widget für HABPanel. Ich benötige für meine Visualisierung ein Widget, mit dem ich 4 Zeichenfolgen inkl. variablem Titel untereinander in einem Widget darstellen möchte. Dazu habe ich kein passendes Widget gefunden, also schreiben wir uns das Widget eben selber. Das Widget soll später folgenden Aufbau haben:

 

Um ein neues Widget zu erstellen gehen wir nun im Bearbeitungsmodus auf den Bereich „Custom Widgets“ und klicken hier auf die Schaltfläche „New widget“.

 

Auf dem Fenster geben wir einen eindeutigen Identifier für das Widget an. Ich habe hier den Namen „smarthometricks-widget4string“ gewählt.

Nun wurde ein leeres Widget angelegt, welches wir mit einem Klick auf die Bezeichnung verändern können.

 

Nach dem Klick auf das Widget öffnet sich nun die Widget-Einstellungen, mit denen das Widget definiert werden kann. Die Einstellungen umfassen den Code, die Einstellungen (Settings) und die Vorschau (Preview) des Widgets. Im Bereich Code platzieren wir die HTML-Definition für die Visualisierung des Widgets. In den Einstellungen (Settings) kann der Name des Widgets sowie die einzelnen Platzhalter für Konstanten oder Variablen mit Datenpunkt-Anbindung erstellt werden. In der Vorschau sehen wir das definierte Widget, wie es später in der Ausführung aussieht.

 

 

 

 

 

 

Im ersten Schritt beginnen wir mit den Settings des Widgets. Für unsere Darstellung von 4 Leerungsterminen und den entsprechenden Labels benötigen wir 4 Item Einstellungen für die Anbindung der Datenpunkte sowie 4 String Einstellungen für die Überschriften (Bio, Restmüll, …).

Im Detail sieht ein Eintrag für die Überschrift folgendermaßen aus:

Die Einstellung für die Anbindung des Datenpunktes schaut so aus:

Von beiden Einstellungen benötigen wir insgesamt 4 Einstellungen:

• string1_label (Type String)
• string2_label (Type String)
• string3_label (Type String)
• string4_label (Type String)

und für die Anbindung der Datenpunkte:

• string1_item (Type Item)
• string2_item (Type Item)
• string3_item (Type Item)
• string4_item (Type Item)

 

Nach dem wir nun die Einstellungen der einzelnen Konstanten und Datenpunkte abgeschlossen haben, können wir uns nun um die HTML-Definition kümmern. Für die Darstellung des Widgets habe ich folgendes HTML verwendet:

<style>
.smht_widget4string_itemlabel {
  color: rgb(0, 204, 102); font-size: 18px;
}
</style> 

<div class="smarthometricks_widget4string_widget">

<div class="title-label" ng-if="(config.top_label)">{{config.top_label}}</div>





<div class="row" style="padding-bottom:15px;">

<div class="col col-xs-9 text-left">
<span ng-if="(config.string1_label)">{{config.string1_label}}</span>

<div class="smht_widget4string_itemlabel">
<span>{{itemValue(config.string1_item)}}</span>
</div>

</div>

</div>



<div class="row" style="padding-bottom:15px;">

<div class="col col-xs-9 text-left">
<span ng-if="(config.string2_label)">{{config.string2_label}}</span>

<div class="smht_widget4string_itemlabel">
<span>{{itemValue(config.string2_item)}}</span>
</div>

</div>

</div>



<div class="row" style="padding-bottom:15px;">

<div class="col col-xs-9 text-left">
<span ng-if="(config.string3_label)">{{config.string3_label}}</span>

<div class="smht_widget4string_itemlabel">
<span>{{itemValue(config.string3_item)}}</span>
</div>

</div>

</div>



<div class="row" style="padding-bottom:15px;">

<div class="col col-xs-9 text-left">
<span ng-if="(config.string4_label)">{{config.string4_label}}</span>

<div class="smht_widget4string_itemlabel">
<span>{{itemValue(config.string4_item)}}</span>
</div>

</div>

</div>

</div>

 

Nach dem Speichern des Widgets können wir nun das Widget auf unserem Dashboard einfügen und entsprechend konfigurieren. Dazu öffnen wir das Dashboard auf dem wir das Widget einfügen möchten und klicken im Bearbeitungsmodus auf „Add Widget“. In der Liste taucht nun im Bereich „Custom Widgets“ das erstellte Widget „smarthometricks-widget4string“ auf. Mit einem Klick auf das Widget wird es auf dem Dashboard eingefügt.

 

 

Im nächsten Schritt klicken wir auf die Schaltfläche „Edit..“ um das Widget zu konfigurieren.

 

 

In den Einstellungen des Widgets können wir hier nun die Label-Überschriften sowie die anzuzeigenden Datenpunkte auswählen.

 

Das war es schon, so einfach haben wir unser erstes Widget für HABPanel erstellt.

 

Alternativ kann das Widget auch als JSON-Datei heruntergeladen werden.

HABPanel Widget - Widget4string (3793 Downloads)

Die heruntergeladene Zip-Datei muss entpackt und das Widget im JSON-Format importiert werden.

 

 

Ich hoffe Dir gefällt der Artikel. Ich freue mich über Deinen Kommentar 🙂