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
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.
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 🙂