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.
    • B
      berndsolar13 last edited by

      Hallo, ich versuche seit dem Wochenende mir schöne Dashboards zu bauen.
      Einige hab ich schon, diese werden HabPanel ersetzen, vorallem weil sie auch auf dem Handy besser funktionieren.

      Eine Sache bekomme ich trotz stundenlangen Googeln nicht auf die Reihe, für euch ist das sicher ein Klacks.

      Ich hab 2 Steckdosen am Aquarium eine an der Lampe eine an der Pumpe.
      Ich will mir nun statt in 2 Kacheln / Widgets nur alles in einer, dafür das in Summe anzeigen.

      Bisher ist es so und es funktioniert

      type: entity
      entity: sensor.refossstd3_ENERGY_Power
      state_color: false
      name: Aquarium Lampe
      

      Das dann noch mal für die Pumpe mit std4...

      Wollte aber nun das es irgendwie zusammen geht quasi
      sensor1 + sensor2 😉
      Ich weiß, ich könnte ein Blocky mit Alias in userdata erstellen und es dort ablegen.
      Dachte ich könnte wie in Habpanel einfach 2 Datenpunkte zusammenrechnen 🙂

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

        @berndsolar13
        das einfachste, was mir einfällt, ist tatsächlich, mit einem Skript in einem neuen Datenpunkt die Summe speichern.

        Ansonsten ginge noch per Markdown und Bindings (ist dann "ioBroker" Welt). Nachteil: Geht bei Lovelace ausschließelich in der markdown Karte und du musst daher das alles selber schön formatieren.

        In der HomeAssistant Welt (wo das UI ja ursprünglich herkommt), kann man das bei manchen Karten mit deren Skripting / Binding machen (aber auch nicht bei allen, wohl eher bei den custom). Das wird aber bisher im lovelace Adapter nicht unterstützt (soweit ich weiß 😉 ).

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

          @garfonso
          Sorry für die urlaubsbedingt etwas späte Antwort.

          Was aus dem visuallen Editor kommt und nicht funktioniert sieht wie folgt aus:

          show_name: true
          show_icon: true
          type: button
          tap_action:
            action: call-service
            service: input_number.set_value
            target:
              entity_id: input_number.areas_livingroom_ventLevel
            data:
              value: 2
          entity: input_number.areas_livingroom_ventLevel
          hold_action:
            action: none
          

          Die angepasste funktionierende Variante hat statt target und data einen service_data block:

          show_name: true
          show_icon: true
          type: button
          tap_action:
            action: call-service
            service: input_number.set_value
            service_data:
              entity_id: input_number.areas_livingroom_ventLevel
              value: 2
          entity: input_number.areas_livingroom_ventLevel
          hold_action:
            action: none
          
          
          1 Reply Last reply Reply Quote 1
          • theknut
            theknut last edited by

            Hallo, ich versuche gerade Lovelace zum Laufen zu kriegen, irgendwie äußerst holprig. Die größten Probleme sind aktuell, dass

            • Meine Aliase nicht automatisch erkannt werden. Alle sind unter alias.0 und haben Room und Function zugeordnet, tauchen aber unter Entities nicht auf
              ab17da84-99cc-4f1f-b3de-b3b1730b9714-image.png

            • Popup Card funktioniert irgendwie nicht, wie ich mir das vorgestellt habe. Wenn ich in iob den dummy auf true setze taucht kein Popup auf

            type: custom:popup-card
            entity: input_boolean.dummyBoolean
            title: Eingang
            dismissable: true
            card:
              type: picture
              image: http://****
              alt_text: Eingang
              tap_action:
                action: navigate
                navigation_path: /lovelace/kamera-eingang
            size: fullscreen
            timeout: 30000
            
            Swisslizard 1 Reply Last reply Reply Quote 0
            • Swisslizard
              Swisslizard @theknut last edited by

              @theknut
              Im Hintergrund der Deviceerkennung ist der ioBroker Type Detector aktiv. Der Detector erkennt zwar diverses Devicetypen automatisch, aber zum Teil ist es (zumindest für mich) schwer das Verhalten der Komponente nachzuvollziehen.

              Bei Deiner Lampe müssten Datenpunkte gemäss folgendem Link vorhanden sein: https://github.com/ioBroker/ioBroker.type-detector/blob/master/DEVICES.md#light-switch-light (für Lampen mit Dimmer gibts eine etwas andere Definition witer oben).
              Zumindest auf den ersten Blick dürfte eine der Ursachen Deines Problems die Rolle des SET Datenpunkts sein. Bei Dir ist die Rolle sensor.light, gemäss Tabelle müsste dort switch.light stehen.

              Ob es ausreicht, wenn die Funktion und der Raum nur indirekt bzw. vom übergeordneten Folder übernommen werden weiss ich nicht sicher. Wenn die Korrektur der Rolle nicht hilft, ev. mal versuchen Rolle und Funktion direkt auf dem Channel Folder anzugeben.

              Bei den Ordnerstrukturen für die Devices/Channels bin ich immer wieder überrascht was funktioniert and was nicht, z.B. schien es bei mir einen Unterschied zu machen ob in einem anderen Folder ein weiteres Device mit gleichem Namen (nicht ID) vorhanden war. Eine vollständige Erklärung dieser Logik habe ich bis jetzt nicht gefunden und zum analysieren des ganzen Codes war ich bislang zu faul. D.h. wenn obige Ideen nicht helfen, dann ev. mal hier ansetzen.

              Last but not least, ev. mal den Devices Adapter installieren. Dort drin kann man sehen was, wie erkannt wird und welche Datenpunkte einem Device von der Erkennung zugewiesen wurden und auch ob die Zuweisung stimmt.

              theknut 1 Reply Last reply Reply Quote 2
              • theknut
                theknut @Swisslizard last edited by

                @swisslizard danke für deine Hilfestellung! Ich habe das Problem gefunden. Das Problem war, dass ich die Aliase via JS erstellt habe und im Common-Teil read: true vergessen hatte.

                1 Reply Last reply Reply Quote 1
                • theknut
                  theknut last edited by

                  Hat jemand Erfahrung mit Grafana und weiß, wie man das als iframe integrieren kann? Wenn ich das im Lovelace mache, dann bekomme ich einen Fehler 192.168.*.* hat die Verbindung abgelehnt.

                  c62d0fa5-6080-476a-9cb8-02043fe804eb-image.png

                  type: iframe
                  url: http://*******:3000/public-dashboards/f299197c61ac********f637601427a8a
                  title: Grafana
                  

                  Wie kann man das integrieren?

                  David G. 1 Reply Last reply Reply Quote 1
                  • David G.
                    David G. @theknut last edited by

                    @theknut

                    Evtl hilft das.
                    Erste Treffer beim googlen mit "grafana iframe".
                    Ich selber nutze es nicht.

                    1 Reply Last reply Reply Quote 0
                    • H
                      hammerhead86 last edited by

                      Vielleicht gibt es die Möglichkeit schon und ich bin einfach blind.
                      Gibt es die Möglichkeit, eine einfache digitale Uhr anzuzeigen?
                      Finde da keinen Weg zu.

                      Außerdem wäre es cool, wenn man bei Lampen per Slider die Farbe ändern könnte (ähnlich wie Helligkeit etc).
                      Aber auch da blicke ich nicht durch.

                      Könnte jemand nem Anfänger einen Denkanstoß und Hilfe geben?

                      Garfonso theknut 2 Replies Last reply Reply Quote 0
                      • Garfonso
                        Garfonso Developer @hammerhead86 last edited by

                        @hammerhead86
                        es gibt eine clock card oder so, die eine Uhr anzeigt.

                        Sonst ist der homeAssistant weg ein sensor-Entity, glaube ich, wo die Uhrzeit drinnen steht. Das gibt's im iobroker nicht per default, müsstest du ein Skript für basteln, wenn man das wirklich will (steht dann relativ viel netzwerk traffic dahinter, für Sekundenanzeige würde ich das nicht empfehlen). Aber die Uhrzeit kann das frontend auch ruhig vom Browser bekommen, nicht?

                        Zu den Lampen:
                        wenn die im ioBroker vernünftig als RGB Lampen erkannt werden, geht das auch. Setz dich mal mit dem Geräte-Tab auseinander, da müsste im Leitfanden auch was zu stehen. Wenn die da als RGB auftauchen, automatisches entity erzeugen lassen und dann gibt es ein Farbauswahl-Rad im UI.

                        1 Reply Last reply Reply Quote 0
                        • theknut
                          theknut @hammerhead86 last edited by

                          @hammerhead86 Es gibt eine Karte, aber die wurde schon ewig nicht mehr geupdated und die zeigt noch andere Zeitzonen an, was ich nicht gebraucht habe. Ich hab es bei mir so gemacht:
                          Karte in Lovelace (du brauchst noch card_mod)

                          type: vertical-stack
                          cards:
                            - type: markdown
                              content: <center class='time'><h1>{0_userdata.0.States.Time}</h1></center>
                              card_mod:
                                style: |
                                  ha-card {      
                                    height: 260px !important;
                                    transform: translateY(0px);
                                    z-index: 1;
                                  }
                                  * {
                                    transform: translateY(-100px);
                                    font-size: 70px;
                                  }
                            - type: markdown
                              content: <center>{0_userdata.0.States.DateDisplayText}</center>
                              card_mod:
                                style: |
                                  ha-card {
                                    transform: translateY(-90px);
                                    z-index: 2;
                                    background: transparent;
                                    border-color: transparent;
                                  }
                                  * {
                                    font-size: 38px;
                                    margin: 0px 0px -100px 0px;
                                  }
                          

                          TS in ioBroker

                          schedule('* * * * *', () => {
                              writeDateTime()
                          });
                          
                          const options: any = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
                          
                          function writeDateTime() {
                              const date = new Date();    
                              setState('0_userdata.0.States.Time', date.toLocaleTimeString('de-DE', { hour: "2-digit", minute: "2-digit" }), true);    
                              setState('0_userdata.0.States.DateDisplayText', date.toLocaleDateString("de-DE", options), true);
                          }
                          

                          Sieht dann so aus
                          fb8e10e5-8154-4ace-9b0a-66a91276be7f-image.png

                          Ist vllt nicht die schönste Lösung, funktioniert aber echt gut und es muss natürlich immer alles maximal kompliziert sein. Also Donnerstag, 31. Dezember 2024 passt nicht mit der Schriftgröße, aber da kann man ja noch bisschen an den Größen spielen.

                          1 Reply Last reply Reply Quote 1
                          • U
                            Ulfhednir last edited by

                            Nachdem sich jetzt langsam die ioBroker-Visu-App macht, ist Lovelace jetzt wieder für mich ein spannend geworden. Also habe ich mich jetzt auch mal rangemacht und habe mir mal 2-3 Übersichten zusammengeklickert. Was mich jetzt in der App jedoch etwas stört, ist die fehlende Möglichkeit per Swipe zu navigieren. Es soll für HASS eine Erweiterung geben:
                            https://github.com/zanna-37/hass-swipe-navigation

                            Scheinbar funktioniert der angepriesene Weg nicht mehr.
                            swipe.png

                            Hat jemand eine Idee, wie man die Swipe-Navigation trotzdem einbauen kann?

                            David G. Garfonso 2 Replies Last reply Reply Quote 0
                            • David G.
                              David G. @Ulfhednir last edited by

                              @ulfhednir
                              Ich hatte lange diese Karte in Verwendung
                              https://github.com/bramkragten/swipe-card

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

                                @ulfhednir

                                Der Fehler, den du da siehst, ist aber egal. Trag die Karte da nicht ein (grundsätzlich da keine Karten mehr eintragen). Einfach zu den custom cards ziehen, adapter neustarten, Frontend neuladen, dann sollte sie gehen. Falls nicht in Browserkonsole nach Fehlern gucken und gucken, ob es für neuere HASS Versionen vielleicht nen fork gibt oder so.

                                U 1 Reply Last reply Reply Quote 0
                                • U
                                  Ulfhednir @Garfonso last edited by

                                  @garfonso Danke, ich bin eine Erkenntnis reicher. Die swipe-navigation funktioniert jetzt.

                                  1 Reply Last reply Reply Quote 0
                                  • T
                                    tomwarrent1 last edited by tomwarrent1

                                    Gibt es eine Möglichkeit Teile einer View in einer anderen View wiederzuverwenden?
                                    Hintergrund: Es sollen mehrere nahezu identische Views erstellt werden mit leicht unterschiedlichen Anpassungen oder anderen Themes.

                                    David G. Swisslizard Garfonso 3 Replies Last reply Reply Quote 0
                                    • David G.
                                      David G. @tomwarrent1 last edited by

                                      @tomwarrent1

                                      So wie du es möchtest leider nicht.
                                      Ich Pflege auch 2 views für meine Frau und mich.

                                      Man könnte höchstens Seiten von view A und view B integrieren. Da ist aber dann nichts mit eigenem Theme oder Anpassungen.

                                      1 Reply Last reply Reply Quote 0
                                      • Swisslizard
                                        Swisslizard @tomwarrent1 last edited by

                                        @tomwarrent1
                                        Ich mogle mich mit Javascript um das Problem rum resp. ich erzeuge die ähnlichen Views per Script. Unter lovelace.0.configuration sind die ganzen Views abruf- und auch änderbar (per getObject und setObject).

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

                                          @tomwarrent1
                                          Es gibt irgendwie so template gedöns... da hab ich mich aber noch nie mit auseinander gesetzt und weiß nicht, wie viel davon in iobroker läuft bzw. was fehlen würde. Kann gerne mal jemand machen. 🙂

                                          D 1 Reply Last reply Reply Quote 0
                                          • D
                                            dan11hh @Garfonso last edited by

                                            Hallo @garfonso ,

                                            ich versuche ein Grafana Dashboard als iFrame einzubinden. Leider meldet Lovelace immer Verbindung abgelehnt. ioBroker und Grafana laufen im Docker und können an sich auch miteinander sprechen. Im normalen Browser funktioniert er auch.

                                            Danke für die Hilfe!

                                            David G. 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

                                            981
                                            Online

                                            31.6k
                                            Users

                                            79.6k
                                            Topics

                                            1.3m
                                            Posts

                                            anleitung dokumentation hilfe leitfaden lovelace
                                            28
                                            188
                                            34478
                                            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