In dieser Artikelreihe zeige ich Dir eine weitere Visualierungsoberfläche für ioBroker.
Im 24. Teil der Artikelreihe erstellen wir uns ein eigenes Widget zur Darstellung des Online/Offline Status unserer Netzwerk-Geräte wie z.B. des NAS oder IP-Kameras. Da ich für diesen Zweck kein passendes Widget gefunden habe, erstellen ich nun ein eigenes Widget. Das Widget soll dazu folgende Eigenschaften erhalten:
- Anzeige eines Namens
- Icon des jeweiligen Gerätes
- Anzeige des Online/Offline Status in grün/rot
Im nächsten Schritt erstellen wir uns das Widget. Dazu klicken wir im Bereich „Custom Widgets“ auf „New Widget“ und vergeben einen Namen für das Widget. Ich habe als Name „smarthometricks-widgetonlineofflinestatus“ gewählt, hier könnt ihr aber auch einen anderen Namen verwenden.
Das Widget wird nun im Konfigurationsmodus geöffnet. Im ersten Schritt wechseln wir nun auf die Tab-Lasche „Settings“ um die benötigten Konfigurations-Felder für das Widget anzulegen. Folgende Einstellungen müssen erstellt werden:
- Type: String – ID: device_name – Label: Device Name
- Type: Item – ID: device_status – Label: Ping Status
- Type: Icon – ID: device_icon – Label: Icon
Im nächsten Schritt wechseln wir auf die Tab-Lasche „Code“ und fügen den unten angezeigten Code ein.
Code:
<div class="smarthometricks_widgetonlineofflinestatus"> <div style="color:white">{{config.device_name}}</div> <widget-icon iconset="config.device_icon_iconset" icon="config.device_icon" size="50"></widget-icon> <div style="color:green" ng-if="itemValue(config.device_status) == 'true'"><strong>Online</strong></div> <div style="color:red" ng-if="itemValue(config.device_status) == 'false'"><strong>Offline</strong></div> </div>
Nun haben wir das Widget fertig implementiert und können es im nächsten Schritt bereits auf unserem Dashboard einsetzen. Dazu wechseln wir auf das gewünschte Dashboard und fügen das neue Widget über die Schaltfläche „Add Widget“ oben rechts hinzu. In der Liste der Custom Widgets findet ihr das soeben erstellte Widget anhand des vergebenen Namens.
In den Widget Einstellungen können wir nun den Device-Namen, den Datenpunkt mit dem Online-Status (true/false) sowie ein entsprechendes Icon einstellen. Die Datenpunkte wurden aus dem Adapter ping verwendet.
Ich habe zur Visualisierung ein weiteres Dashboard „Netzwerk-Status“ erstellt. Auf diesem Dashboard werden nun alle Geräte angezeigt.
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 🙂