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
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.
Teil 2 – Objekte und Widgets
Teil 3 – Widgets für Sensorinformationen
Teil 4 – Widgets für Lichtsteuerung
Teil 5 – Benachrichtigungen
Teil 6 – Konfigurationseditor
Teil 7 – Das Wetter Widget
Teil 8 – Entity Filter
Teil 9 – Gauge
Teil 10 – Alarm-Panel
Teil 11 – Custom Cards
Teil 12 – History Graph Card
Teil 13 – Vertical / Horizontal Stack Card
Teil 14 – Widgets zur Steuerung von Aktoren – Das Elements-Widget
Teil 15 – Widgets zur Steuerung von Aktoren – Das Entity-Button Widget
Teil 16 – Widgets zur Steuerung von Aktoren – Das Button-Card Widget
Teil 17 – Tipps und Tricks
Teil 18 – Conditional Card
Teil 19 – Sprachsteuerung
Teil 20 – Das Markdown Widget
Teil 21 – Das iFrame Widget
Teil 22 – iFrame und Daswetter.com
Teil 23 – Picture (Bild) Glance
Teil 24 – Einkaufsliste
Pingback: ioBroker Visualisierung mit lovelace – Teil 3 – Widgets für Sensorinformationen – smarthome-tricks.de
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
Hallo Paul,
welche NodeJS Version nutzt Du? Steht im Log etwas?
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
Hallo .. bei mir erscheint der Adapter „lovelace [ioBroker]“ gar nicht in der liste ..?
Hallo Peter, bitte stelle den Verwahrungsort auf „latent“ um, dann kannst Du den Adapter installieren 🙂
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.
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.
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
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?
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
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
Danke für die umfangreiche Zusammenstellung.
Wie kann Mann dann den lovelace Adapter in ioBroker auf Version 1.25 bringen?