Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. ioBroker Allgemein
    4. Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation

    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      Tirador @KNXbroker last edited by

      Ich habe das Kapitel ergänzt, wie man lokale Bilder einbindet! 🙂

      1 Reply Last reply Reply Quote 0
      • Garfonso
        Garfonso Developer @Tirador last edited by

        @Tirador

        Nochmal vielen Dank für deine Arbeit. Cooler Guide. Ist für den Start sicherlich sehr hilfreich!

        Hab jetzt mal etwas Zeit gefunden zum lesen und ein paar Anmerkungen:
        Also "lock" entity wird schon unterstützt -> basierend auf Gerät "Schloss". Was nicht (so gut?) geht ist eine Schloss was neben aufschließen noch ein "öffnen" hat (IIRC kann das lovelace selber nicht).

        "climate" wird auch unterstützt, da werden die Thermostate aus ioBroker hin übersetzt. Da gibt es aber immer wieder Fehlermeldungen zu und ich hab mich bisher noch nicht intensiv damit beschäftigt, ggf. ist da noch etwas kaputt.

        (bzw. was meinst du genau mit "werden nicht unterstützt?" -> im Kapitle Entitäten)

        In deinem Beispiel, wo du die Rollen anpassen musstest (Thermostat) könntest du noch ergänzen, dass man so etwas, falls noch nicht geschehen, am besten in Github als issue für den betroffenen Adapter postet (wenn es eindeutig ist, dein Fall ist es, "value.*" ist immer nur zur Anzeige, nicht zum schreiben)

        Zu Fenster "gekippt": States muss "richtig" gesetzt werden, so dass es zu den Werten passt, die da stehen können! Der Adapter nutzt das states-Feld um die Zahl in einen String zu verwandeln. Die Zahlen können im Grunde beliebig sein.

        Zu umbenannten Entitäten: da gibt es noch eine Schwachstelle im Adapter. Entitäten werden nicht gelöscht -> bis zum Neustart des Adapters bleiben sie auch unter dem alten Namen erhalten (schlimmer ist, wenn tatsächlich was gelöscht wird, das kann auch zu Fehler führen, wobei ich die, meine ich, mittlerweile alle abfange).

        Zu manuellen Datenpunkten: Wenn möglich würde ich bei "Sensor" bzw. "binary sensor" auch die automatische Erkennung bevorzugen (also type-detector & lovelace müssen den Typ kennen/unterstützen) -> dann wird auch die richtige "device_class" in der Entität gesetzt und aus z.B. on/off kann auch "Offen / Geschlossen" werden oder Lovelace weiß, dass ein Sensor eine Temperatur ist usw.

        Zu deiner Tabelle: die Werte für alles was "binär" ist, sind in HomeAssistant immer "on/off", auch wenn die UI das übersetzt. Also auch, wenn für ein Fenster da geschlossen / offen steht, müsste man z.B. nach on oder off filtern (leider gilt das nicht für die gekippten Fenster -> aber die sind ja auch nicht binär).

        "Hinweis: Die Bezeichner des Raums und der Funktion dürfen in diesem Fall nicht abweichendvergeben werden!" -> woher hast du das? Das stimmt m.E. nicht.. bei mir klappt es jedenfalls mit "Wetter / Überall" bzw. "Wetter / Unterwegs" ganz gut. 🙂

        Zu accuweather wäre vielleicht (bis es ein Update der Karte gibt) noch der Hinweis ganz gut, dass die Karte mit der aktuellsten Version von Lovelace nicht mehr schön formatiert ist (und sich der Aufwand daher vermutlich nicht lohnt).

        Zu den Bildern: Die können, wie die custom cards auch, per Drag & Drop auf der Konfigurationsseite der Instanz hochgeladen werden (also da, wo die Liste der custom cards ist).

        Den Hinweis mit den Karten würde ich persönlich eher streichen. Mir ist bisher noch keine Karte untergekommen, die gar nicht funktioniert hätte. Eigentlich funktionieren die meisten sogar recht gut. Wichtiger wäre ein Hinweis, dass die Karten zur "Lovelace Version" passen müssen, die ggf. etwas anders sein kann als die aktuell in HomeAssitant genutzte. Das ist leider etwas intransparent... hm.. 😞 Jedenfalls gibt es einige Karten, die man nach einem Update auf 1.2.* aktualisieren muss.
        Ansonsten hätte ich noch dies Karten als Ergänzung deiner Liste:

        • button entity row
        • flex table
        • auto entities
        • card mod
        • slider entity row
        • slideshow

        Zur Banner-Card:
        sicher, dass true / false da stimmen? Ich würde eher vermuten, dass es on / off sein müsste? Habe es aber nicht selber ausprobiert.

        T 1 Reply Last reply Reply Quote 0
        • T
          Tirador @Garfonso last edited by

          @Garfonso Besten Dank für die Rückmeldung. Ich habe die Punkte in einer neuen Version einfliessen lassen.

          Garfonso 1 Reply Last reply Reply Quote 0
          • Garfonso
            Garfonso Developer @Tirador last edited by

            @Tirador
            wie im test-thread rausgekommen ist, ist vielleicht ein Absatz zu call_service ganz hilfreich. Da bin ich, muss ich zugeben, auch noch nicht so richtig firm. (Man kann ja, wenn ich es richtig verstanden hab, auch call_service in eine Elements-Card tun... ggf. auch interessant).

            K 1 Reply Last reply Reply Quote 0
            • K
              KNXbroker @Garfonso last edited by KNXbroker

              @Garfonso sagte in Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation:

              wie im test-thread rausgekommen ist, ist vielleicht ein Absatz zu call_service ganz hilfreich

              Ich übernehme das.

              Die Services selbst sind hier grob erklärt:
              https://www.home-assistant.io/docs/scripts/service-calls/

              Für detailierte Dokumentation wird auf die Entwicklertools verwiesen:
              https://www.home-assistant.io/docs/tools/dev-tools/

              Die Entwicklertools sind allerdings nur auf einer lokalen HASS Installation einsehbar. Deshalb habe ich mir kurzerhand eine VM mit Hyper-V aufgesetzt: https://www.home-assistant.io/hassio/installation/

              Anmerkung falls das jemand anderes nachmacht: Die VM wie in der Anleitung starten und anschließend auf dem Host (Windows) einfach diese Adresse im Browser eingeben:http://homeassistant.local:8123/

              Nun haben wir eine lokale HASS Installation und können unter Entwickleroptionen die detaillierten Service Beschreibungen einsehen.

              Wie sich bei der nachfolgenden Dokumentation gezeigt hat, sind viele Services sehr HomeAssistant spezifisch. Nachfolgend die wichtigsten Services, mit welchen wahrscheinlich 95% aller Anforderungen erfüllt werden können. Ich habe nicht alle Services im IOBroker getestet. Bitte um Info sollte irgendwas nicht funktionieren, dann werde ich es vermerken.

              HOMEASSISTANT SERVICES

              https://www.home-assistant.io/docs/scripts/service-calls/

              Es gibt folgende allgemeingültige Services, welche auf beliebige Entitys angewendet werden können (sofern von diesen unterstützt). Beispiele sind Switch, Light, etc.

              Service Beschreibung Service Data
              homeassistant.turn_on Entity einschalten entity_id
              homeassistant.turn_off Entity ausschalten entity_id
              homeassistant.toggle Entity umschalten entity_id
              homeassistant.update Entity(s) aktualisieren entity_id(s)

              Statt homeassistant kann auch das jeweilige Entity verwendet werden (wie z.B. switch.turn_off)

              Beispiel: Zentraler Ausschaltknopf

              type: button
              name: Alles aus
              tap_action:
                action: call-service
                service: homeassistant.turn_off
                service_data:
                  entity_id: switch.Zentral_Reset_Wohnen
              entity: switch.Zentral_Reset_Wohnen
              

              INPUT_SELECT SERVICES

              https://www.home-assistant.io/integrations/input_select/

              Folgende Services werden von INPUT_SELECT zur Verfügung gestellt:

              Service Beschreibung Service Data
              input_select.select_next Nächste Option entity_id
              input_select.select_previous Vorherige Option entity_id
              input_select.set_options Optionen definieren entity_id; options
              input_select.select_option Option auswählen entity_id; option
              input_select.reload Entitys neu laden

              Beispiel: Fernsehsender auswählen

              type: button
              name: ARD anschauen
              entity_id: input_select.TV_Sender
              tap_action:
                action: call-service
                service: input_select.select_option
                service_data:
                  entity_id: input_select.TV_Sender
                  option: ARD
              

              INPUT_NUMBER SERVICES

              https://www.home-assistant.io/integrations/input_number/

              Folgende Services werden von INPUT_NUMBER zur Verfügung gestellt:

              Service Beschreibung Service Data
              input_number.decrement Wert verringern entity_id
              input_number.increment Wert erhöhen entity_id
              input_number.set_value Wert setzen entity_id; value
              input_number.reload Entitys neu laden

              Beispiel: Rollladen beschatten

              type: button
              name: Rollladen beschatten
              entity_id: input_number.Rollladen_Position
              tap_action:
                action: call-service
                service: input_number.set_value
                service_data:
                  entity_id: input_number.Rollladen_Position
                  value: 80
              

              INPUT_TEXT SERVICES

              https://www.home-assistant.io/integrations/input_text/

              Folgende Services werden von INPUT_TEXT zur Verfügung gestellt:

              Service Beschreibung Service Data
              input_text.set_value Wert setzen entity_id; value
              input_text.reload Entitys neu laden

              Beispiel: Passwort zurücksetzen

              type: button
              name: Passwort zurücksetzen
              entity_id: input_text.Passwort
              tap_action:
                action: call-service
                service: input_text.set_value
                service_data:
                  entity_id: input_text.Passwort
                  value: 1234567890
              
              T Garfonso 3 Replies Last reply Reply Quote 0
              • T
                Tirador @KNXbroker last edited by

                @KNXbroker said in Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation:

                @Garfonso sagte in Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation:

                wie im test-thread rausgekommen ist, ist vielleicht ein Absatz zu call_service ganz hilfreich

                Ich übernehme das. Werde diesen Post in den nächsten Tagen entsprechend erweitern.
                Vorab vielleicht schon mal wie man an die Infos kommt.

                Die Services selbst sind hier grob erklärt:
                https://www.home-assistant.io/docs/scripts/service-calls/

                Für detailierte Dokumentation wird auf die Entwicklertools verwiesen:
                https://www.home-assistant.io/docs/tools/dev-tools/

                Die Entwicklertools sind allerdings nur auf einer lokalen HASS Installation einsehbar. Deshalb habe ich mir kurzerhand eine VM mit Hyper-V aufgesetzt: https://www.home-assistant.io/hassio/installation/

                Anmerkung falls das jemand anderes nachmacht: Die VM wie in der Anleitung starten und anschließend auf dem Host (Windows) einfach diese Adresse im Browser eingeben:http://homeassistant.local:8123/

                Nun haben wir eine lokale HASS Installation und können unter Entwickleroptionen die detaillierten Service Beschreibungen einsehen.

                AUFLISTUNG FOLGT...

                Ich sage schonmal vorab: Klasse für deine Unterstützung! 🙂 Könnte man zu jedem CallService auch ein Praxisbeispiel machen.

                1 Reply Last reply Reply Quote 0
                • Garfonso
                  Garfonso Developer @KNXbroker last edited by

                  @KNXbroker
                  Ok, da hast du die Beschreibungen gefunden? Gut. 🙂
                  Wenn davon was nicht funktioniert (also im Lovelace Adapter), dann muss ggf. der Adapter angepasst werden. Wenn ich es richtig sehe, sollte aber schon relativ viel gehen.

                  K 1 Reply Last reply Reply Quote 0
                  • K
                    KNXbroker @Garfonso last edited by

                    Habe oben nun alle wichtigen Call-Services zusammengefasst, damit sollte man schon relativ viel umsetzen können. Mein größtes Problem war, mich mit Markdown anzufreunden 🙂 Aber ich bin ja froh, wenn ich dadurch meinen Teil zu diesem Projekt beitragen kann.

                    T 1 Reply Last reply Reply Quote 0
                    • T
                      Tirador @KNXbroker last edited by

                      @KNXbroker said in Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation:

                      Habe oben nun alle wichtigen Call-Services zusammengefasst, damit sollte man schon relativ viel umsetzen können. Mein größtes Problem war, mich mit Markdown anzufreunden 🙂 Aber ich bin ja froh, wenn ich dadurch meinen Teil zu diesem Projekt beitragen kann.

                      Sehr schön. Ich würde deine Passagen dann in den Leitfaden übernehmen, wenn du nichts dagegen hast.

                      K 1 Reply Last reply Reply Quote 0
                      • K
                        KNXbroker @Tirador last edited by

                        @Tirador
                        Klaro, dafür habe ich es ja gemacht. Habe auch schon überlegt, alles Mal ins englische zu übersetzen, aber ich weiß nicht wie man sowas am besten versionstechnisch steuert. Unterstützt das GitHub Wiki mehrere Sprachen?
                        Überlegst du noch das ins GitHub Wiki einzupflegen? @Garfonso hat ja schon ein erstellt, aber weiss nicht wie man das bearbeiteten kann.

                        Garfonso 1 Reply Last reply Reply Quote 0
                        • Garfonso
                          Garfonso Developer @KNXbroker last edited by

                          @KNXbroker
                          Das Problem am Github Wiki ist, dass es nur Kollaborateure bearbeiten können, also Github User, die Rechte an dem Adapter haben. Ich vermute, dass bluefox das nicht ganz recht ist, wenn das zu viele Leute nur für die Doku kriegen.

                          Es gibt ja eine ioBroker zentrale Doku, da gibt es für jeden Adapter auch eine Seite: https://www.iobroker.net/#de/adapters/adapterref/iobroker.lovelace/README.md
                          Aktuell wird da einfach die README.md aus dem Repository hingepackt (und in den verschiedenen Übersetzungen mit automatischer Übersetzung angeboten...). Der Adapter kann das, soweit ich weiß, per io-package.json auf ein anderes Verzeichnis, z.B. docs im Repository umbiegen und dann da auch mehrere Sprachen anbieten. Das wäre vielleicht das einfachste?
                          Dann könntet ihr, wenn ihr was an der Doku machen wollte, auf github einen PR machen und ich übernehme das dann.

                          Hier dazu die Erklärung: https://www.iobroker.net/#de/documentation/dev/adapterdocstyleguide.md
                          Ich würde die entsprechende Struktur dann im Adapter erstellen, wenn ihr das so machen wollt.

                          @Tirador das könnte man dann, wenn wir da was hingetan haben vielleicht auch promininter in der Doku unter Visualisierungen verlinken (wobei wir dafür vermutlich lovelace erstmal im stable updaten sollten.... der Unterschied ist doch aktuell zu krass - aber dafür will ich noch den blöden Editor Bug fixen, bei dem ich leider irgendwie hänge... seufz).

                          T K 2 Replies Last reply Reply Quote 0
                          • T
                            Tirador @Garfonso last edited by

                            @Garfonso said in Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation:

                            @KNXbroker
                            Das Problem am Github Wiki ist, dass es nur Kollaborateure bearbeiten können, also Github User, die Rechte an dem Adapter haben. Ich vermute, dass bluefox das nicht ganz recht ist, wenn das zu viele Leute nur für die Doku kriegen.

                            Es gibt ja eine ioBroker zentrale Doku, da gibt es für jeden Adapter auch eine Seite: https://www.iobroker.net/#de/adapters/adapterref/iobroker.lovelace/README.md
                            Aktuell wird da einfach die README.md aus dem Repository hingepackt (und in den verschiedenen Übersetzungen mit automatischer Übersetzung angeboten...). Der Adapter kann das, soweit ich weiß, per io-package.json auf ein anderes Verzeichnis, z.B. docs im Repository umbiegen und dann da auch mehrere Sprachen anbieten. Das wäre vielleicht das einfachste?
                            Dann könntet ihr, wenn ihr was an der Doku machen wollte, auf github einen PR machen und ich übernehme das dann.

                            Hier dazu die Erklärung: https://www.iobroker.net/#de/documentation/dev/adapterdocstyleguide.md
                            Ich würde die entsprechende Struktur dann im Adapter erstellen, wenn ihr das so machen wollt.

                            @Tirador das könnte man dann, wenn wir da was hingetan haben vielleicht auch promininter in der Doku unter Visualisierungen verlinken (wobei wir dafür vermutlich lovelace erstmal im stable updaten sollten.... der Unterschied ist doch aktuell zu krass - aber dafür will ich noch den blöden Editor Bug fixen, bei dem ich leider irgendwie hänge... seufz).

                            Also ich kann einen Pull Request mit der Readme.md und den Bildern auf GitHub machen. Es ist dann nur klar, dass die bisherige Doku in Englisch durch die Deutsche ersetzt wird.

                            Garfonso 1 Reply Last reply Reply Quote 0
                            • K
                              KNXbroker @Garfonso last edited by

                              @Garfonso sagte in Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation:

                              Es gibt ja eine ioBroker zentrale Doku, da gibt es für jeden Adapter auch eine Seite: https://www.iobroker.net/#de/adapters/adapterref/iobroker.lovelace/README.md

                              Das kannte ich noch gar nicht. Dort ist auch ein sehr hilfreicher Editor zum Übersetzen vorhanden. Lustig: Lovelace wird mit Liebesspiel automatisch übersetzt 🙂

                              Denke eine finale Übersetzung macht erst Sinn, wenn sich am Leitfaden nicht mehr viel ändert. Vielleicht könnte man zwischenzeitlich auch auf eine automatische Übersetzung zurückgreifen?

                              @Tirador: Wenn man die fehlenden Punkte noch in deiner Doku aufnimmt, dann könnte doch die bereits vorhandene Doku komplett ersetzt werden, oder?

                              • Viele Punkte sind ja bereits doppelt vorhanden
                              • Einige Punkte wären auch in deiner Doku hilfreich: Notification, Voice, etc. (da habe ich mich auch noch nicht auseinander gesetzt, hat schon jemand Erfahrung?)
                              • Viele Punkte der vorhanden Doku sind ja nur für Entwickelter wichtig (Definition der Datenpunkte, etc.). Könnte man am Schluss in deine Doku unter Development mit reinpacken.

                              Viele Grüße

                              T 1 Reply Last reply Reply Quote 0
                              • T
                                Tirador @KNXbroker last edited by

                                @KNXbroker said in Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation:

                                @Garfonso sagte in Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation:

                                Es gibt ja eine ioBroker zentrale Doku, da gibt es für jeden Adapter auch eine Seite: https://www.iobroker.net/#de/adapters/adapterref/iobroker.lovelace/README.md

                                Das kannte ich noch gar nicht. Dort ist auch ein sehr hilfreicher Editor zum Übersetzen vorhanden. Lustig: Lovelace wird mit Liebesspiel automatisch übersetzt 🙂

                                Denke eine finale Übersetzung macht erst Sinn, wenn sich am Leitfaden nicht mehr viel ändert. Vielleicht könnte man zwischenzeitlich auch auf eine automatische Übersetzung zurückgreifen?

                                @Tirador: Wenn man die fehlenden Punkte noch in deiner Doku aufnimmt, dann könnte doch die bereits vorhandene Doku komplett ersetzt werden, oder?

                                • Viele Punkte sind ja bereits doppelt vorhanden
                                • Einige Punkte wären auch in deiner Doku hilfreich: Notification, Voice, etc. (da habe ich mich auch noch nicht auseinander gesetzt, hat schon jemand Erfahrung?)
                                • Viele Punkte der vorhanden Doku sind ja nur für Entwickelter wichtig (Definition der Datenpunkte, etc.). Könnte man am Schluss in deine Doku unter Development mit reinpacken.

                                Viele Grüße

                                Ja, die fehlenden Punkte müssten noch ergänzt werden und dann auch getestet und mit Beispielen ausgearbeitet.
                                Die Notifications habe ich mal ausprobiert im Zuge des MessageHandlers-Projekts. Dazu kann ich etwas beisteuern.
                                Mit Voice habe ich keine Erfahrung.

                                1 Reply Last reply Reply Quote 0
                                • Garfonso
                                  Garfonso Developer @Tirador last edited by

                                  @Tirador
                                  ich würde einen ordner \docs neu anlegen und da in den Unterordnern de\ bzw. en\ den Leitfaden (und Bilder sollen nach der Beschreibung dann da jeweils in \media) tun. Die Haupt-Readme würde ich dann potentiell deutlich verkürzen und da prominent einen Link auf die "User-Doku" setzen und darunter dann die Sachen, die für Entwickler wichtig sind sammeln. Ggf. bei der Gelegenheit das Chagenlog aussortieren.

                                  Kannst du mir das Markdown mal zukommen lassen? Dann würde ich das die Woche angehen und etwas experimentieren.

                                  T 1 Reply Last reply Reply Quote 0
                                  • T
                                    Tirador @Garfonso last edited by Tirador

                                    @All: Neue Version hochgeladen (siehe initiales Post).
                                    Ergänzung von call service (danke @KNXbroker )

                                    @Garfonso

                                    Das Markdown mit den Bildern befindet sich im Anhang:
                                    iob.zip

                                    N 1 Reply Last reply Reply Quote 0
                                    • N
                                      nachon @Tirador last edited by

                                      @Tirador
                                      Super Guide und super arbeit. Wirklich spitze. Das hat mich angeregt, auch die Oberfläche zu nutzen und die aktuelle Adapter Version 1.2.6 zu installieren.
                                      Leider habe ich doch ein paar Problem, die ich hier dokumentiert hatte: https://forum.iobroker.net/topic/37430/lovelace-visualisierung-und-fragen

                                      Meine Frage: Wo tauscht man sich Grundsätzlich zu Lovelace aus? Ich habe den Eindruck, dass hier wenige damit arbeiten.

                                      Garfonso 1 Reply Last reply Reply Quote 0
                                      • Garfonso
                                        Garfonso Developer @nachon last edited by

                                        @nachon
                                        Die meisten diskutieren in einem der zwei Test-Threads. 🙂

                                        1 Reply Last reply Reply Quote 0
                                        • C
                                          Chris_104 last edited by Chris_104

                                          Ich möchte dann auch meinen Teil beitragen 🙂

                                          Die ultimative Grafana Integration >>> transparent <<<

                                          Bevor ich hier allerdings groß schreibe, möchte ich mich bei der Community bedanken die mich zu dem Ergebnis gebracht haben.

                                          So nun aber ... ich möchte euch hier zwei Möglichkeiten zeigen, wie Ihr Grafana bestmöglich in die Lovelace UI integrieren könnt.

                                          1. Grafana transparent komplett auf einer ganzen Seite als Iframe
                                          2. Einzelnes Panel transparent als Iframe

                                          1)

                                          Bildschirmfoto 2020-11-26 um 23.24.31.png

                                          Hierzu benötigt Ihr zuerst das plugin "Boom Theme"

                                          GitHub Boom Theme

                                          Use grafana-cli

                                          grafana-cli plugins install yesoreyeram-boomtheme-panel
                                          

                                          Danach ein neues Panel erstellen und als Visualisierung Boom Theme wählen. Unter Custom Style / CSS Override folgenden Code einfügen:

                                          body{
                                          background: transparent;
                                          }
                                          
                                          .page-dashboard .main-view, .page-explore .main-view{
                                          background: transparent !important;
                                          border: 0px solid transparent !important;
                                          }
                                          
                                          .panel-container{
                                              border: 0px solid #1F2129  !important;
                                          }
                                          
                                          .graph-legend-table .graph-legend-series:nth-child(2n) {
                                              background: transparent;
                                          }
                                          

                                          Bildschirmfoto 2020-11-26 um 22.42.38.png

                                          Das Panel am besten oben einsortieren damit es direkt geladen wird.

                                          Speichern und ab zu Lovelace.

                                          -> Bearbeiten und neue Ansicht Hinzufügen
                                          -> Karte hinzufügen "Manuell"

                                          YAML-Code hinzufügen:

                                          type: iframe
                                          url: 'http://192.xxx.x.xxx:3000/deinegrafanaurlausdembrowser'
                                          aspect_ratio: 50%
                                          

                                          Speichern und ich hoffe dein Erfolgserlebnis ist da 🙂

                                          2)

                                          Bildschirmfoto 2020-11-26 um 22.59.33.png

                                          Hier erstellen wir zuerst eine mygrafana.css Datei mit folgendem Inhalt:

                                          @charset "UTF-8";
                                          
                                          body.dashboard-solo, .panel-container, .main-view{
                                          background-color: transparent;
                                          }
                                          
                                          .graph-legend-table th{
                                          color: white;
                                          }
                                          
                                          .view{
                                             /*background-color: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)  !important; *//*Hintergrundfarbe vom Dahsboard auf dem der Container liegt*/
                                             /*background-color: #332939  !important;*/
                                          }
                                          
                                          .graph-legend-table .graph-legend-series:nth-child(2n) {
                                          background: transparent;
                                          
                                          
                                          }
                                          
                                          

                                          Und laden diese über die Lovelace Adaptereinstellungen -> Kundenspezifische hoch.

                                          Danach loggen wir uns per ssh auf dem Grafana Server ein und öffnen die index.html

                                          sudo nano /usr/share/grafana/public/views/index.html
                                          

                                          Hier muss nun innerhalb des Head-Bereichs folgender Code eingefügt werden:
                                          (IP anpassen)

                                          <link rel="stylesheet" href="http://192.xxx.x.xxx:8091/cards/mygrafana.css" type="text/css"/>
                                          

                                          Habe es vor </head> eingefügt. Hauptsache irgendwo da.

                                          Panel als Iframe sollte klar sein:
                                          -> Panel Share
                                          -> embed link Copy
                                          -> Lovelace Iframe link einfügen

                                          Bildschirmfoto 2020-11-26 um 23.30.16.png

                                          Nach einem Reboot sollte es hoffentlich alles laufen.

                                          Falls nicht habt ihr vielleicht noch folgendes Problem. Ich hatte eine ältere Grafana Version 6.0.x und musste erst upgraden auf 7.xxx. Dazu fehlte dann noch der Eintrag das Grafana eingebettet werden darf.

                                          Dazu kontrolliert die Grafana.ini

                                          sudo nano /etc/grafana/grafana.ini
                                          

                                          Unter Security

                                          allow_embedding = true
                                          

                                          Und kontrolliert unter Anonymus Auth

                                          [auth.anonymous]
                                          # enable anonymous access
                                          enabled = true
                                          
                                          # specify organization name that should be used for unauthenticated users
                                          org_name = iobroker <<<( hier muss euer Organisation name rein den Ihr bei Grafana hinterlegt habt)
                                          
                                          # specify role for unauthenticated users
                                          org_role = Viewer
                                          

                                          Speichern, Schließen, Reboot und ich hoffe es funktioniert 🙂

                                          Ich bin nun mal noch so frei und behaupte ohne es getestet zu haben das es auch in jeder anderen Visualisierung geht da es um Grafana und Iframe geht und nicht direkt um Lovelace.

                                          Grüße,
                                          Christoph

                                          1 Reply Last reply Reply Quote 1
                                          • Garfonso
                                            Garfonso Developer @KNXbroker last edited by

                                            @KNXbroker
                                            Nochmal Danke für die Arbeit.
                                            Ich hab mir jetzt mal angeguckt, was von deinen Beispielen geht.

                                            Alles, was Entities ändern soll (.reload oder .set_options oder .update) geht nicht - reload/upload könnte man ggf. implementieren, set_options eher nicht.
                                            select_next / select_previous und increment / decrement sind aktuell nicht implementiert, bestünde da Bedarf? grübel

                                            Der Rest sollte gehen.

                                            Was ich auch implementiert habe, beim fummeln mit der mini-media-player Card, ist ein iobroker_say. Damit kann man in der mini-media-player card text-to-speach aktivieren, als Plattform iobroker eintragen und als entity_id das entity, was gesetzt werden soll, beispiel:

                                            type: 'custom:mini-media-player'
                                            entity: media_player.Alexa_Arbeitszimmer
                                            tts:
                                              platform: iobroker
                                              entity_id: input_text.multimedia_Alexa_Arbeitszimmer_Commands_speak
                                            

                                            Die entity_id sollte dabei bekannt sein. Domäne ist egal, die wird dann halt auf den Text gesetzt, den man da eintippt. Sinnvoll wäre da das .speak Kommando eines Lautsprechers zu nehmen, z.B. 😉

                                            nukleuz 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate
                                            FAQ Cloud / IOT
                                            HowTo: Node.js-Update
                                            HowTo: Backup/Restore
                                            Downloads
                                            BLOG

                                            961
                                            Online

                                            31.7k
                                            Users

                                            79.7k
                                            Topics

                                            1.3m
                                            Posts

                                            anleitung dokumentation hilfe leitfaden lovelace
                                            28
                                            188
                                            36063
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo