ioBroker HABPanel – Teil 2 – Dashboard und Widgets

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

Im zweiten Teil fügen wir nun die ersten Widgets zu unserem Dashboard „Home“ hinzu. Dazu fahren wir mit dem Cursor über den Name des Dashboard. Neben dem Namen wird dann ein Stift-Symbol für die Aktivierung des Bearbeitungsmodus eingeblendet.

 

Im Bearbeitungsmodus stehen folgende Funktionen zur Verfügung:

 

Im ersten Schritt möchte ich einen eigenen Datenpunkt mit einer Zeichenfolge anzeigen. In meiner Visualisierung in VIS nutze ich diese Datenpunkte zur Anzeige des Fenster-und Türstatus. Für die Anzeige von Zeichenfolgen klicken wir nun einfach im Menü Add Widget auf Dummy.

 

Nun wird das Dummy-Widget auf dem Dashboard dargestellt. Über die Bearbeiten-Schaltfläche oben rechts im Widget können wir die Bearbeitungsfunktion Edit aufrufen.

 

In den Einstellungen des Widgets können wir nun einen neuen Namen sowie das anzuzeigende Item auswählen. Zudem stehen Format-Optionen sowie Einstellungen für optionale Icons zur Auswahl. Im ersten Schritt passen wir hier nun den Namen und das Item über die Datenpunkt-Auswahl an.

 

Nach dem Auswählen des entsprechenden Datenpunktes sehen die Einstellungen des Widgets so aus:

 

Ich habe zudem noch ein zweites Dummy-Widget für den Fensterstatus eingefügt.

 

Im nächsten Schritt können wir die Größe des Widgets noch entsprechend anpassen. Da hier nur relativ kurze Text-Informationen dargestellt werden, kann ich hier die Größe minimieren.

 

Nun können wir die Konfiguration speichern und zurück in die Visualisierung gehen. Die Anzeige der beiden Dummy-Widgets schaut nun so aus:

 

Im nächsten Schritt legen wir uns ein weiteres Dashboard für die Beleuchtung an. Auf diesem neuen Dashboard möchte ich die komplette Beleuchtung des Smart-Home steuern.

 

 

 

Im Dashboard Beleuchtung klicken wir oben rechts wieder auf Add Widget und wählen das Widget Switch aus.

 

Über die Widget Einstellungen können wir dann den Namen sowie das zu schaltende Licht auswählen:

 

Ich habe im ersten Schritt die Beleuchtung für den Flur und das Esszimmer hinzugefügt.

 

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

Matthias Korte

Hauptberuflich Software-Entwickler und seit einigen Jahren Smart-Home Fan. Angefangen hat alles mit einem RaspberryMatic und einer schaltbaren Steckdose. Mittlerweile habe ich einige Steckdosen, Sensoren, und Thermostate sowie ioBroker zur Visualisierung im Einsatz.

9 Gedanken zu „ioBroker HABPanel – Teil 2 – Dashboard und Widgets

  • 27. Februar 2019 um 18:17
    Permalink

    Hallo Matthias – super Deine neue Serie! Eine Frage / Bitte gleich vorweg: könntest Du auch in einem Beitrag das Einbindungen der Homematic Rollladen Autoren mit erörtern – das wäre prima. Bei VIS und Material UI klappt das nicht so gut, daher wäre es prima wenn das hier bei HABPanel gut realisierbar wäre …. Vielen Dank!

    Antwort
    • 27. Februar 2019 um 20:31
      Permalink

      Hallo Olaf, danke für den Kaffee 🙂
      Ich habe leider keine Homematic-Rollladen im Einsatz, werde mir das Thema aber sehr gerne anschauen und theoretisch nachbauen. Ich habe schon etwas dazu gefunden, sollte also machbar sein.
      Viele Grüße,
      Matthias

      Antwort
  • 28. Februar 2019 um 7:57
    Permalink

    Hi, cooles Tutorials.
    Bin schon gepannt auf mehr.
    Weißt du ob es ein Widget dafür gibt, mit dem man HTML (formatiert) ausgeben kann.
    Kann es ein, dass das ganze noch nicht kleine Display (Smartphone) ausgelegt ist.
    Hab es mal probiert, ist aber alles koplett verschoben.

    Danke und Grüße

    Antwort
  • 2. März 2019 um 13:10
    Permalink

    Hallo Matthias,
    schönes Tutorial, freue mich über die nächsten. 🙂
    Sag mir bitte mal, wie du es hinbekommen hast, dass im Tür- und Fensterbeispiel unter dem Status in Textausgabe steht, dass nichts geöffnet ist. Wo legst du den Text zum Anzeigen an?
    Und besonders klasse wäre es, wenn du uns mitteilen könntest, wie der Remote Zugriff funktioniert.
    Vielen Dank – auch für die super Arbeit. 🙂

    Antwort
  • 6. März 2019 um 11:32
    Permalink

    Hallo,

    ich möchte mich der Frage von Dennis anschließen. Habe gerade angefangen mit IOBroker und dem HABPanel. In der Anzeige meiner Fenstersensoren erscheint nur True oder False. Wo muss ich meinen individuellen Text hinterlegen?
    Ansonsten super erklärt, bin über die Anleitung erst zum HABPanel gekommen.

    Antwort
  • 24. März 2019 um 19:39
    Permalink

    Vielen Dank für die Erklärung, aber ich hätte eine Frage:

    Wenn ich die Osram Steckdose per HABPanel ein und ausschalte passt der Zustand, schalte ich die Steckkose aber direkt an der Steckdose, dann aktualisiert sich der Zustand im HABPanel nicht – hast du eine Idee?

    Grüße

    Antwort
  • 2. April 2019 um 18:12
    Permalink

    Moin alle zusammen

    Auch ich würde gerne wissen wo man den Text unter der Anzeige ändern kann. Bei mir steht „false“ aber ich hätte auch gerne „Keine Tür geöffnet“ oder so.

    Gruss un Danke
    Nico

    Antwort
  • 12. Mai 2019 um 11:38
    Permalink

    Hallo

    die Frage wie meine Vorgänger habe ich auch…wie geht das ??

    Viele >Grüße

    Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich akzeptiere