ioBroker HABPanel – Teil 14 – Template Wissenssammlung

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

Der 14. Teil der Artikelreihe wird in Form einer Wissenssammlung aufgebaut, in dem ich von mir verwendete Template-Beispiele veröffentliche. Die einzelnen Scripts werden kategorisch dargestellt und fortlaufend erweitert.

 

Inhaltsverzeichnis

1. Numerische Werte
2. Zugriff auf Datenpunkte (Objekte)
3. Icons und Grafiken

 

 

1. Numerische Werte

 

Formatierung von Werten

Mit sprintf kann die Darstellung von Werten auf der Visualisierung verändert werden. In der ersten Ausgabe wird der Wert mit zwei Nachkommastellen ausgegeben. Die zweite Ausgabe erfolgt ohne Nachkommastellen.

{{'%.2f' | sprintf:itemValue('zigbee.0.00158d000245ad9e.humidity')}}
{{'%.0f' | sprintf:itemValue('zigbee.0.00158d000245ad9e.humidity')}}

 

2Werte auf der Visualisierung umrechnen/berechnen

 
{{'%.2f' | sprintf:itemValue('zigbee.0.00158d000245ad9e.pressure') * 2}} 

 

 

 

2. Zugriff auf Datenpunkte (Objekte)

 

Mit einem Button einen Datenpunkt verändern

Mit folgendem Template erstellen wir einen Button, mit dem über die Funktion sendCmd() ein Datenpunkt verändert werden kann.

<button type="button" class="btn btn-default btn-lg attention-table-btn" ng-click="sendCmd('Datenpunkte.0.Test.Teststring', 'Hallo')>
   Test
</button>

 

 

3. Icons und Grafiken

 

Icons und Grafiken einfügen

Mit folgendem Template können wir integrierte Icons und Grafiken verwenden:

<widget-icon iconset="'eclipse-smarthome-classic'" icon="'sun'" size="80"/>

Folgende Icon-Sammlungen sind bereits integriert:

• eclipse-smarthome-classic
  Als iconset muss „eclipse-smarthome-classic“ sowie der entsprechende Icon-Name verwendet werden. Eine vollständige Liste der Icons findest Du in der Dokumentation.

 

 

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