ioBroker HABPanel – Teil 24 – Online-Status Widget

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.

 

 

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