ioBroker Visualisierung mit lovelace – Teil 1 – Installation und Grundlagen

In dieser Artikelreihe zeige ich Dir, wie Du eine Visualisierung mit lovelace UI erstellen kannst.

Mit Lovelace kannst Du Visualisierungsoberflächen für ioBroker einfach und schnell konfigurieren. Die Visualisierung kommt ursprünglich von der Home-Assistant Plattform und wurde nachträglich auch für ioBroker verfügbar gemacht. In der aktuellen Version funktionierten noch nicht alle Widgets vollständig, eine einfache Visualisierung kann aber ohne Probleme erstellt werden. In der Artikelreihe werde ich die Grundlagen sowie die Möglichkeiten der Visualisierung darstellen. Im ersten Teil werden wir nun mit der Installation und den Grundlagen von lovelace beginnen.

 

Inhaltsverzeichnis

  1. Voraussetzungen und Installation
  2. Konfiguration der Navigation
  3. Weitere Funktionen

 

1. Voraussetzungen und Installation

Bevor wir mit der Installation und Konfiguration des Adapters beginnen können, müssen folgende Voraussetzungen überprüft und erfüllt sein:

  • Mindestens Node.Js 8.x
  • Aktuelle Version des Controllers
  • ioBroker Haupteinstellungen – Verwahrungsort auf „latest“ einstellen

Der Adapter ist aktuell noch nicht im Produktiv-Stand von ioBroker enthalten. Daher müssen wir den Adapter über Github installieren. Dazu wechseln wir auf den Bereich „Adapter“ und klicken auf die Schaltfläche „aus eigener URL installieren“.

 

 

Auf der neuen View können wir nun auf der Lasche „Von Github“ den Adapter „lovelace“ auswählen und installieren.

 

Nach der Installation des Adapters sollte der Adapter jetzt in der Liste der „Instanzen“ aufgelistet sein. Bitte darauf achten, dass der Status auf auf OK steht und der Adapter fehlerfrei gestartet ist. Die Konfiguration vom lovelace kann dann über die Adapter-Webseite gestartet werden.

2. Konfiguration der Navigation

Nach dem Start der Adapter-Webseite sehen wir nun eine leere Umgebung, welche wir über den Sandwich-Button oben rechts konfigurieren können. Um die Konfiguration zu starten klicken wir nun also im Menü auf den Eintrag „Benutzeroberfläche konfigurieren“.


 

In der Konfiguration können wir nun die einzelnen Laschen konfigurieren. Auf den Laschen können z.B. Gewerke, Räume oder sonstige logische Untergliederungen der Haussteuerung dargestellt werden. Ich erstelle meine Visualisierungen auf der obersten Navigationsebene nach den Gewerken (Licht, Temperatur, Status, etc…).

 

Im nächsten Schritt klicke ich dazu nun auf die Plus-Schaltfläche um eine weitere Lasche hinzuzufügen.

 

In der Konfiguration kann nun ein Titel für die Lasche definiert werden. In das Feld Icon können wir alternativ zum Titel auch ein entsprechendes Icon definieren. Dazu müssen wir folgende Notation verwenden:

mdi: {Icon-Name}

Den Platzhalter {Icon-Name} müssen wir mit dem entsprechenden Namen des Icons ersetzen. Eine Liste aller unterstützten Icons findest Du hier:

https://materialdesignicons.com/

Ein Beispiel-Icon für die Beleuchtung schaut dann so aus:

mdi:lightbulb-on

 

Auf der Lasche „Badges“ kannst Du Entitäten z.B. Sensoren auswählen, die dann am oberen Bildschirmrand der Visualisierung dargestellt werden. Hier könnte man z.B. wichtige Informationen des jeweiligen Gewerkes einblenden. Optional wäre es auch möglich die Navigation nach Räumen zu gliedern und so in den Badges z.B. alle Sensorwerte darzustellen und in den Widgets die entsprechenden Aktoren zur Steuerung von Geräten.

 

3. Weitere Funktionen

Mit den Pfeilen links und rechts neben der Bezeichnung der Lasche kann die Lasche in der Navigationsstruktur nachträglich verschoben werden.

 

 

Wir können nun so unsere Grundstruktur der Visualisierung aufbauen und festlegen. Im zweiten Schritt fügen wir im nächsten Artikel nun die entsprechenden Widgets ein, mit denen wir Informationen darstellen oder Aktoren steuern können.

Ich hoffe euch gefällt dieser Artikel. Über Kommentare unterhalb des Artikels oder per E-Mail freue ich mich wie immer 🙂

 

 

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.

12 Gedanken zu „ioBroker Visualisierung mit lovelace – Teil 1 – Installation und Grundlagen

  • Pingback:ioBroker Visualisierung mit lovelace – Teil 3 – Widgets für Sensorinformationen – smarthome-tricks.de

  • 25. August 2019 um 13:14
    Permalink

    Hi, bei mir scheitert’s an der Installation von loveLace. Es läuft alles durch aber unter den Instanzen finde ich nichts!
    Ideen???
    Gruß
    Paul

    Antwort
    • 25. August 2019 um 13:24
      Permalink

      Hallo Paul,
      welche NodeJS Version nutzt Du? Steht im Log etwas?

      Antwort
      • 30. August 2019 um 18:31
        Permalink

        Hallo Matthias,
        Node.js: v10.16.3
        NPM: 6.9.0

        Install-LOG:

        $ ./iobroker url „https://github.com/ioBroker/ioBroker.lovelace/tarball/master“ lovelace
        install https://github.com/ioBroker/ioBroker.lovelace/tarball/master
        npm install https://github.com/ioBroker/ioBroker.lovelace/tarball/master –production –save –prefix „/opt/iobroker“ (System call)
        npm WARN bl@0.7.0 requires a peer of stream-browserify@* but none is installed. You must install peer dependencies yourself.npm WARN bl@0.7.0 requires a peer of stream-browserify@* but none is installed. You must install peer dependencies yourself.
        npm WARN @typescript-eslint/eslint-plugin@1.12.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
        npm WARN @typescript-eslint/parser@1.12.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
        npm WARN bl@0.7.0 requires a peer of stream-browserify@* but none is installed. You must install peer dependencies yourself.

        npm WARN optional SKIPPING OPTIONAL DEPENDENCY: osx-temperature-sensor@1.0.3 (node_modules/osx-temperature-sensor):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for osx-temperature-sensor@1.0.3: wanted {„os“:“darwin“,“arch“:“any“} (current: {„os“:“linux“,“arch“:“arm“})

        got /opt/iobroker/node_modules/iobroker.lovelace/admin
        upload [6] lovelace.admin /opt/iobroker/node_modules/iobroker.lovelace/admin/words.js words.js application/javascript
        upload [5] lovelace.admin /opt/iobroker/node_modules/iobroker.lovelace/admin/tab_m.html tab_m.html text/html
        upload [4] lovelace.admin /opt/iobroker/node_modules/iobroker.lovelace/admin/style.css style.css text/css
        upload [3] lovelace.admin /opt/iobroker/node_modules/iobroker.lovelace/admin/lovelace.png lovelace.png image/png
        upload [2] lovelace.admin /opt/iobroker/node_modules/iobroker.lovelace/admin/js-yaml.min.js js-yaml.min.js application/javascript
        upload [1] lovelace.admin /opt/iobroker/node_modules/iobroker.lovelace/admin/index_m.html index_m.html text/html
        upload [0] lovelace.admin /opt/iobroker/node_modules/iobroker.lovelace/admin/custom_m.html custom_m.html text/html
        process exited with code 0

        iOBroker – LOG:

        host.raspberrypi 2019-08-30 18:28:43.525 info Update repository „latest“ under „http://download.iobroker.net/sources-dist-latest.json“
        iobroker 2019-08-30 18:28:43.338 info exit 0
        iobroker 2019-08-30 18:28:43.246 info upload [0] lovelace.admin /opt/iobroker/node_modules/iobroker.lovelace/admin/custom_m.html custom_m.html text/html
        iobroker 2019-08-30 18:28:43.175 info upload [1] lovelace.admin /opt/iobroker/node_modules/iobroker.lovelace/admin/index_m.html index_m.html text/html
        iobroker 2019-08-30 18:28:43.010 info upload [2] lovelace.admin /opt/iobroker/node_modules/iobroker.lovelace/admin/js-yaml.min.js js-yaml.min.js application/javascript
        iobroker 2019-08-30 18:28:42.894 info upload [3] lovelace.admin /opt/iobroker/node_modules/iobroker.lovelace/admin/lovelace.png lovelace.png image/png
        iobroker 2019-08-30 18:28:42.834 info upload [4] lovelace.admin /opt/iobroker/node_modules/iobroker.lovelace/admin/style.css style.css text/css
        iobroker 2019-08-30 18:28:42.769 info upload [5] lovelace.admin /opt/iobroker/node_modules/iobroker.lovelace/admin/tab_m.html tab_m.html text/html
        iobroker 2019-08-30 18:28:42.684 info upload [6] lovelace.admin /opt/iobroker/node_modules/iobroker.lovelace/admin/words.js words.js application/javascript
        iobroker 2019-08-30 18:28:42.657 info got /opt/iobroker/node_modules/iobroker.lovelace/admin
        iobroker 2019-08-30 18:28:42.528 info
        iobroker 2019-08-30 18:28:42.524 info npm WARN optional SKIPPING OPTIONAL DEPENDENCY: osx-temperature-sensor@1.0.3 (node_modules/osx-temperature-sensor):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for osx-temperatu
        iobroker 2019-08-30 18:28:42.521 info npm WARN bl@0.7.0 requires a peer of stream-browserify@* but none is installed. You must install peer dependencies yourself.
        iobroker 2019-08-30 18:28:42.521 info npm WARN @typescript-eslint/parser@1.12.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
        iobroker 2019-08-30 18:28:42.521 info npm WARN @typescript-eslint/eslint-plugin@1.12.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
        iobroker 2019-08-30 18:28:42.521 info npm WARN bl@0.7.0 requires a peer of stream-browserify@* but none is installed. You must install peer dependencies yourself.npm WARN bl@0.7.0 requires a peer of stream-browserify@* but none is instal
        iobroker 2019-08-30 18:27:32.596 info npm install https://github.com/ioBroker/ioBroker.lovelace/tarball/master –production –save –prefix „/opt/iobroker“ (System call)
        iobroker 2019-08-30 18:27:31.289 info install https://github.com/ioBroker/ioBroker.lovelace/tarball/master
        iobroker 2019-08-30 18:27:30.310 info url „https://github.com/ioBroker/ioBroker.lovelace/tarball/master“ lovelace

        Antwort
  • 25. August 2019 um 17:28
    Permalink

    Hallo .. bei mir erscheint der Adapter „lovelace [ioBroker]“ gar nicht in der liste ..?

    Antwort
    • 25. August 2019 um 17:31
      Permalink

      Hallo Peter, bitte stelle den Verwahrungsort auf „latent“ um, dann kannst Du den Adapter installieren 🙂

      Antwort
      • 25. August 2019 um 17:49
        Permalink

        Verwahrungsort „latest“ hat leider auch keinen Erfolg gebracht. Habe nun via „https://github.com/ioBroker/ioBroker.lovelace“ installiert und konnte dann auch die Instanz erstellen.

        Antwort
  • 28. September 2019 um 16:44
    Permalink

    Hi,
    ich habe das Problem, dass obwohl ich in den Objekteinstellungen Lovelace aktiviere mir meine Geräte in der Lovelave Bearbeitungsübersicht nicht angezeigt werden. Also unter Entitäten erscheinen die Objekte nicht. Hab mehrmals schon neugestartet.

    Antwort
    • 29. November 2019 um 20:20
      Permalink

      Hi,
      ich habe das Problem, dass obwohl ich in den Objekteinstellungen Lovelace aktiviere mir meine Geräte in der Lovelave Bearbeitungsübersicht nicht angezeigt werden. Also unter Entitäten erscheinen die Objekte nicht. Hab mehrmals schon neugestartet.

      Gleiche Problem bei mir auch

      Antwort
  • 29. November 2019 um 20:26
    Permalink

    Hallo, habt ihr den Geräten Räume und Funktionen zugeordnet? Welche Geräte nutzt ihr und als welchen Geräte-Typ habt ihr es hinzugefügt?

    Antwort
  • 1. Dezember 2019 um 22:50
    Permalink

    Hi,

    super Blog, ich hab einiges hier durchgelesen.
    ich würde auch gerne lovelace nutzen, da mir Vis nur zur Visualisierung zu umständlich ist.
    Ich bekomme leider auch keine, meiner Datenpunkte angezeigt.
    Räume und Funktionen habe ich hinzugefügt.
    Habe nur den Standard Alarm.
    Im iobroker log taucht auch dauernd folgender Fehler auf :
    lovelace.0 2019-12-01 22:44:07.279 error (364) Cannot find view „custom“ for search „state“ : null

    Bei mir läuft iobroker auf einer Windows VM auf einem ESX. Dachte schon das es womöglich mit Windows zutun hat ?
    Für einen Tip wäre ich dankbar, meine Frau möchte gerne ne einfache Visualisierung haben. Und alle anderen VIS bis auf die iq gefallen mir nicht so.

    Gruß
    Thorsten

    Antwort
    • 2. Dezember 2019 um 6:06
      Permalink

      Moin Thorsten,

      hast Du mal einen Neustar des lovelace Adapters ausprobiert? Die Freigabe der Datenpunkte (Aktivierung für Lovelace) hast Du aber erstellt oder?

      Viele Grüße,
      Matthias

      Antwort

Schreibe einen Kommentar

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

Ich akzeptiere