Skip to content
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Tester
  4. Test lovelace 5.x

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.0k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.8k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.0k

Test lovelace 5.x

Test lovelace 5.x

Scheduled Pinned Locked Moved Tester
968 Posts 91 Posters 418.3k Views 74 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • GarfonsoG Garfonso

    @flippi
    du hast bei beiden Instanzen mal mit beiden Nutzern getestet? Nicht, dass die unterschiedlich konfiguriert sind. Ich habe im Kopf, dass sich die Erlaubnis an der Oberfläche etwas zu ändern danach richtet, was für Rechte der User hat. Vielleicht sogar am lovalce.X.configuration Objekt.

    Gerade im code geguckt. Und hatte es richtig im Kopf: admin ist immer Admin. Aber auch die User, die das Objekt lovelace.#.configuration besitzen oder in der Gruppe sind, die es besitzt. Also im Grunde, ob der User Änderungen an dem Objekt, in dem die Konfiguration gespeichert ist, machen darf.

    FlippiF Offline
    FlippiF Offline
    Flippi
    wrote on last edited by
    #798

    @garfonso Hi und danke für die schnelle Antwort und Hilfe!

    Ich musste tatsächlich in der lovelace.1.configuration folgendes rausstreichen: "ownerGroup": "system.group.user"
    Keine Ahnung wie das da rein kam... aber jetzt funktionierts: Nur als Admin, kann man jetzt Änderungen vornehmen!

    Folgend, ein Ausschnitt aus der lovelace.1.configuration file (durchgestrichen, die Zeile die raus musste):

    "from": "system.adapter.lovelace.1",
    "ts": 1740599199545,
    "acl": {
    "object": 1636,
    "ownerGroup": "system.group.user"
    },
    "user": "system.user.admin"
    }

    Nochmal vielen dank für die Hilfe!
    LG Flippi

    1 Reply Last reply
    1
    • B Offline
      B Offline
      benni86
      wrote on last edited by
      #799

      Hi,
      ich habe heute erstmalig die Authentifizierung aktiviert. Das klappt grundsätzlich ganz gut, nur die Wetter Card in Verbindung mit daswetter zeigt jetzt keine Icons mehr an, wenn man nicht mit dem admin User kommt. So wie ich das bisher feststellen konnte, macht es wohl auch keinen Unterschied ob der andere User in der admin Gruppe ist oder nicht. Die Response ist bei den Icons dann allesamt ein 404.
      Hat jemand ähnliche Beobachtungen oder eine Idee?

      B 1 Reply Last reply
      0
      • B benni86

        Hi,
        ich habe heute erstmalig die Authentifizierung aktiviert. Das klappt grundsätzlich ganz gut, nur die Wetter Card in Verbindung mit daswetter zeigt jetzt keine Icons mehr an, wenn man nicht mit dem admin User kommt. So wie ich das bisher feststellen konnte, macht es wohl auch keinen Unterschied ob der andere User in der admin Gruppe ist oder nicht. Die Response ist bei den Icons dann allesamt ein 404.
        Hat jemand ähnliche Beobachtungen oder eine Idee?

        B Offline
        B Offline
        benni86
        wrote on last edited by
        #800

        Wobei ich mich korrigieren muss, wenn der User in der admin Gruppe ist geht es, aber erst nachdem der Lovelace Adapter neugestartet wurde.
        Rufe ich die Icon URL (http://192.168.1.26:8091/adapter/daswetter/icons/tiempo-weather/galeria1/1.png?token=xxx) direkt im Browser auf mit einem Benutzer der nicht admin ist dann kommt als Antwort:

        File icons/tiempo-weather/galeria1/1.png not found: Error: permissionError
        
        GarfonsoG 1 Reply Last reply
        0
        • B benni86

          Wobei ich mich korrigieren muss, wenn der User in der admin Gruppe ist geht es, aber erst nachdem der Lovelace Adapter neugestartet wurde.
          Rufe ich die Icon URL (http://192.168.1.26:8091/adapter/daswetter/icons/tiempo-weather/galeria1/1.png?token=xxx) direkt im Browser auf mit einem Benutzer der nicht admin ist dann kommt als Antwort:

          File icons/tiempo-weather/galeria1/1.png not found: Error: permissionError
          
          GarfonsoG Offline
          GarfonsoG Offline
          Garfonso
          Developer
          wrote on last edited by Garfonso
          #801

          @benni86
          Danke für den Hinweis und das testen. Muss ich nochmal gucken.
          Steht dazu was im log vom lovelace adapter, wenn du die URL aufrufst? (auch gerne direkt im Browser)

          /Edit: Ok, hab was umgebaut. Mit der 4.1.13 sollte es jetzt gehen.

          Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

          Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

          1 Reply Last reply
          0
          • GarfonsoG Garfonso
            Aktuelle Test Version 5.0.1
            Veröffentlichungsdatum 09.09.2025
            Github Link https://github.com/ioBroker/ioBroker.lovelace

            Es gab mal wieder einige Änderungen und der alte Test-Thread ist doch schon wieder sehr lang und unübersichtlich. 😉

            Daher für die 3.0.0 jetzt einen neuer Thread.

            3.0.0:

            • (agross) added: Sprache pro Instanz einstellen
            • (Garfonso) changed: updated frontend auf 20221027.0. Karten und Themen anpassen!
            • (Garfonso) added: browser_mod (2.1.3) ist jetzt integriert. Bitte manuell hinzugefügte browser_mod Karten entfernen!
            • (Garfonso) added: 'instances.refresh' kann genutzt werden um das frontend neuzuladen
            • (Garfonso) removed: lovelace_reload und window_reload states
            • (Garfonso) removed: name state, wird nicht mehr unterstützt (bzw. aktuell nicht)
            • (Garfonso) added: Unterstützung für toasts mit action button (json oder ;-string)
            • (Garfonso) added: activity state, der anzeigt ob ein User gerade den Browser nutzt
            • (Garfonso) crash bei schlechtem JSON in notification
            • (Garfonso) Übersetzungszeug... 😉
            • (Garfonso) added: Unterstützung für Unterordner in /cards/ für Bilder und Zeug, dass custom cards laden. (Die Karten selber bitte in /cards/ lassen, sonst werden sie nicht im frontend registriert).
            • (Garfonso) crash wenn ein state aktualisiert werden sollte, bevor der websocket bereit war (z.B. weil control.darkMode oder so als entity verwendet werden soll)

            3.0.1

            • (Garfonso) fixed: Farbtemperatur
            • (Garfonso) fixed: notifications (die alten mit der Glocke 😉 )
            • (Garfonso) fixed: crash, wenn keine History ausgewählt wurde

            Ansonsten: Guckt euch nochmal iobroker.pro Unterstützung an. Da hat Bluefox jetzt einiges getan. Für mich funktioniert das aktuell sehr gut. Die Umleitung von https://iobroker.pro:4443/lovelace für das Login geht meistens sogar auch, aber manchmal nicht... aber es geht auch mittlerweile fast alles direkt über https://iobroker.pro/lovelace/ (wobei da Bluefox für bestimmte Pfade ggf. nochwas hinzufügen muss -> wenn also da was fehlt, bitte Meldung machen, gerne an mich - ich weiß auch nicht, wie offiziell das ist, aber ich bin da mal nach dem login hingeleitet worden, kann so schlimm nicht sein 😉 )

            4.0.0

            • (Garfonso) Breaking: Update frontent to 2023.12.08.1
            • (Garfonso) Breaking: all states default to string now. Added some exceptions (like timestamps). Check your filters.
            • (Garfonso) Use better random numbers for tokens.
            • (Garfonso) Support media_play_pause (mini-media-player card play / pause) again.
            • (Garfonso) Support for input_select
            • (Garfonso) Improve support for sensor with device_class=date
            • (Garfonso) Remove hideToolbar from settings. Now using browser_mod to allow per instance control.
            • (Garfonso) repaired persistent notifications.
            • (Garfonso) Use browser_mod to hide sidebar.

            Ich hab von 3.0.1 auf 4.0.0 bestimmt noch einiges vergessen. Am frontend sollte sich nicht soooo viel getan haben (besonders für die Leute, die schonmal die github version getestet haben).
            Achja: Known issue (vermutlich) ist die shoppinglist. Die gibt es in lovelace nicht mehr, ist jetzt generische todoliste. Das geht vermutlich noch nicht, muss ich mir angucken.

            4.0.0-4.0.7

            • Diverse Crashs gefixt (sorry dafür), insbesondere mit Datumsverarbeitung
            • History sollte wieder gehen
            • Thermostat ohne Modus / an/aus State gefixt

            5.0.0:

            • Brandneues UI, 2025.04.01.0 🙂 -> Configs prüfen.
            • browser_mod update auf 2.3.3 (soweit ich sehe nur kleinere Bugfixes)
            • Experimentell: hideSidebar kann genutzt werden um die Homeassistant-Seitenleiste einzublenden! Sehr viel davon funktioniert nicht... vermutlich wird einiges nie funktionieren. Muss da rausfummeln, was ich noch ausblenden sollte. Da gerne ne Liste machen mit Weg, wie ihr hingekommen seid, was ihr denkt, was lieber weg sollte....
            • Dashboard support -> Seitenleiste einblenden, dann konfiguration -> dashboard hinzufügen. (bitte macht vorher ein backup eurer config im Objekt "configuration", am besten mit der Export Funktion von admin im objects tab... beim ersten Versuch hab ich mir meine config damit komplett gelöscht. Ich glaube, dass ich das gefixt habe, ist seitdem nicht mehr passiert.. aber das objekt mal exportieren schadet ja auch nicht).

            5.0.1:

            • Icons sollten wieder wie früher sein (hat mich länger beschäftigt, sorry)
            • Logbook zeigt keine Einträge in der Zukunft an
            • Script entities (und ggf. andere eher "abwegige") gehen wieder (dafür bitte nach unknown service im log Ausschau halten)
            • Problem mit Subscriptions und Templates gelöst

            Bekannte Probleme:

            • Einiges in der Seitenleiste funktioniert nicht, führt zu Fehlermeldungen in der Browser-Konsole oder Warnungen im Adapter oder dass die UI hängen bleibt
            • Das Zahnrad in der entities view ist da und geht nicht (eigentlich wollte ich das noch reparieren, finde aber immer noch nicht raus, wo es hängt... seufz)
              -> da hat sich noch nicht viel geändert.

            Ich hab eigentlich vor auch nochmal das UI zu updaten (ist jetzt auch schon wieder 6 Monate alt.. urgs.. die Zeit fliegt..?) und auch browser_mod nochmal. Da hat sich bei beidem wieder einiges getan. Puh. Vielleicht dann demnächst schon 6.x und neuer Thread? Ich gucke mal. 🙂

            Viel Spaß beim testen. 🙂

            GarfonsoG Offline
            GarfonsoG Offline
            Garfonso
            Developer
            wrote on last edited by
            #802

            Ich arbeite gerade am Update des Frontends.

            Wer mag kann gerne schonmal testen, die 5.0.0-alpha.1 sollte demnächst (tm) auf npm auftauchen. Gerne schonmal gucken, was an UI nicht (mehr) geht. 😉 Ist ziemlich genau ein Jahr seit dem letzten Frontend update (ups). Daher kann sich durchaus was getan haben (ich musste auch ein wenig arbeiten, dass das Frontend überhaupt lädt und da gibts nochmal ein paar Features, wo ich gucken muss, ob ich das einbaue oder nicht). Also in der Browser-Konsole kommen noch ein paar Beschwerden.

            Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

            Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

            David G.D 1 Reply Last reply
            1
            • GarfonsoG Garfonso

              Ich arbeite gerade am Update des Frontends.

              Wer mag kann gerne schonmal testen, die 5.0.0-alpha.1 sollte demnächst (tm) auf npm auftauchen. Gerne schonmal gucken, was an UI nicht (mehr) geht. 😉 Ist ziemlich genau ein Jahr seit dem letzten Frontend update (ups). Daher kann sich durchaus was getan haben (ich musste auch ein wenig arbeiten, dass das Frontend überhaupt lädt und da gibts nochmal ein paar Features, wo ich gucken muss, ob ich das einbaue oder nicht). Also in der Browser-Konsole kommen noch ein paar Beschwerden.

              David G.D Online
              David G.D Online
              David G.
              wrote on last edited by
              #803

              @garfonso
              Kann ich da auch eine Version auswählen?
              Oder nimmt der da automatisch die 5er? Im Moment kommt noch eine 4er.

              Screenshot_20250311_060130_Chrome.jpg

              Bisher immer über git installiert

              Zeigt eure Lovelace-Visualisierung klick
              (Auch ideal um sich Anregungen zu holen)

              Meine Tabellen für eure Visualisierung klick

              GarfonsoG 1 Reply Last reply
              0
              • David G.D David G.

                @garfonso
                Kann ich da auch eine Version auswählen?
                Oder nimmt der da automatisch die 5er? Im Moment kommt noch eine 4er.

                Screenshot_20250311_060130_Chrome.jpg

                Bisher immer über git installiert

                GarfonsoG Offline
                GarfonsoG Offline
                Garfonso
                Developer
                wrote on last edited by
                #804

                @david-g
                die 4.x ist im beta repository.

                Die 5.0.0 ist im Moment als alpha markiert und daher noch nicht im beta repository. Du kannst, wenn du den Adapter in der Liste suchst (und auf dem richtigen Host bist, das hat mich gerade ein paar Minuten gekostet) hinten "eine bestimmte Version installieren" klicken und dann oben 5.0.0-alpha.1 eintragen (taucht da bei mir nicht in der Liste auf, warum ist mir gerade nicht ganz klar, aber naja). Oder über die Kommandozeile:
                iob upgrade lovelace@5.0.0-alpha.1.

                Git müsste auch gehen, so ca.: iobroker/iobroker.lovelace#frontend202503 (also vom extra Branch)

                Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

                Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

                David G.D 1 Reply Last reply
                0
                • GarfonsoG Garfonso

                  @david-g
                  die 4.x ist im beta repository.

                  Die 5.0.0 ist im Moment als alpha markiert und daher noch nicht im beta repository. Du kannst, wenn du den Adapter in der Liste suchst (und auf dem richtigen Host bist, das hat mich gerade ein paar Minuten gekostet) hinten "eine bestimmte Version installieren" klicken und dann oben 5.0.0-alpha.1 eintragen (taucht da bei mir nicht in der Liste auf, warum ist mir gerade nicht ganz klar, aber naja). Oder über die Kommandozeile:
                  iob upgrade lovelace@5.0.0-alpha.1.

                  Git müsste auch gehen, so ca.: iobroker/iobroker.lovelace#frontend202503 (also vom extra Branch)

                  David G.D Online
                  David G.D Online
                  David G.
                  wrote on last edited by David G.
                  #805

                  @garfonso

                  Am aller ersten Blick klappt alles bei mir.
                  2-3 Kleinigkeiten müssen evtl am Theme angepasst werden.

                  Das einzige was mir auffällt, ist dass die Map keine Karte anzeigt. Sehe nur die Linien mit dem Standortverlauf.

                  Edit
                  Bekommen wir noch schön HA Werbung am Startbildschirm ^^
                  Screenshot_20250311_125856_Fully Kiosk Browser.jpg

                  Zeigt eure Lovelace-Visualisierung klick
                  (Auch ideal um sich Anregungen zu holen)

                  Meine Tabellen für eure Visualisierung klick

                  GarfonsoG 1 Reply Last reply
                  0
                  • System 9S Offline
                    System 9S Offline
                    System 9
                    wrote on last edited by
                    #806

                    Guten Morgen,
                    nach update startet lovelace nicht mehr
                    Wa
                    Bildschirmfoto 2025-03-11 um 13.25.44.png s kann ich machen ?

                    GarfonsoG 1 Reply Last reply
                    0
                    • David G.D David G.

                      @garfonso

                      Am aller ersten Blick klappt alles bei mir.
                      2-3 Kleinigkeiten müssen evtl am Theme angepasst werden.

                      Das einzige was mir auffällt, ist dass die Map keine Karte anzeigt. Sehe nur die Linien mit dem Standortverlauf.

                      Edit
                      Bekommen wir noch schön HA Werbung am Startbildschirm ^^
                      Screenshot_20250311_125856_Fully Kiosk Browser.jpg

                      GarfonsoG Offline
                      GarfonsoG Offline
                      Garfonso
                      Developer
                      wrote on last edited by
                      #807

                      @david-g
                      stimmt, die Werbung... puh, da muss ich mal gucken, wie ich die finde. 😉
                      Geht die Karte jetzt? Bei mir ging sie heute morgen nicht, jetzt ist sie da. Hm. Strange. Vielleicht war da was am Server kaputt.

                      Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

                      Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

                      David G.D 1 Reply Last reply
                      0
                      • System 9S System 9

                        Guten Morgen,
                        nach update startet lovelace nicht mehr
                        Wa
                        Bildschirmfoto 2025-03-11 um 13.25.44.png s kann ich machen ?

                        GarfonsoG Offline
                        GarfonsoG Offline
                        Garfonso
                        Developer
                        wrote on last edited by
                        #808

                        @system-9 said in Test lovelace 4.x:

                        Guten Morgen,
                        nach update startet lovelace nicht mehr
                        Wa
                        Bildschirmfoto 2025-03-11 um 13.25.44.png s kann ich machen ?

                        Doch startet... beendet sich nur dann direkt wieder ("cleaned everything up"). Die Fehler sind ein Folge davon, dass der Adapter sich beendet und die Datenbankverbindung weg ist... hm.

                        Leider steht im log nichts dazu, warum der Adapter sich beendet... hast du mal versucht ioBroker komplett neu zustarten oder, wenn's geht, das ganze system? Vielleicht hängt da noch ein Zombie-Prozess irgendwo rum, der stört.

                        Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

                        Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

                        1 Reply Last reply
                        0
                        • GarfonsoG Garfonso

                          @david-g
                          stimmt, die Werbung... puh, da muss ich mal gucken, wie ich die finde. 😉
                          Geht die Karte jetzt? Bei mir ging sie heute morgen nicht, jetzt ist sie da. Hm. Strange. Vielleicht war da was am Server kaputt.

                          David G.D Online
                          David G.D Online
                          David G.
                          wrote on last edited by David G.
                          #809

                          @garfonso

                          Wenige min nach meinem ersten Test ging Sie.
                          Dann hab ich es durchgestrichen in meinen Post.

                          Vom Theme ist ist auch weniger wie ich dachte.
                          Ich benutze sehr oft

                          <hr>
                          

                          in Markdown. Die Linien sind jetzt alle schwarz und nicht weiß wie vorher im Theme definiert.
                          Mal sehen ob ich das ausfindig gemacht bekomme, das ist nicht so meine Stärke ^^

                          Zeigt eure Lovelace-Visualisierung klick
                          (Auch ideal um sich Anregungen zu holen)

                          Meine Tabellen für eure Visualisierung klick

                          1 Reply Last reply
                          0
                          • E Offline
                            E Offline
                            Erstam
                            Developer
                            wrote on last edited by
                            #810

                            Hi @Garfonso

                            Ich habe mal die neue v5 alpha installiert. Bei der Vertical Layout Card funktionieren die Layout Break Cards nicht mehr. Die Layout Break Cards steuern eigentlich, wann eine neue Spalte begonnen wird. Aktuell sind die Karten trotz Layout Break alle untereinander. In der 4.1.15 funktionierte das noch.

                            Viele Grüße!

                            David G.D GarfonsoG 2 Replies Last reply
                            0
                            • E Erstam

                              Hi @Garfonso

                              Ich habe mal die neue v5 alpha installiert. Bei der Vertical Layout Card funktionieren die Layout Break Cards nicht mehr. Die Layout Break Cards steuern eigentlich, wann eine neue Spalte begonnen wird. Aktuell sind die Karten trotz Layout Break alle untereinander. In der 4.1.15 funktionierte das noch.

                              Viele Grüße!

                              David G.D Online
                              David G.D Online
                              David G.
                              wrote on last edited by
                              #811

                              @erstam

                              Vermutlich ist die custom card nicht aktuell für die Version. Sie hat das letzte Update 3/24 bekommen.

                              Zeigt eure Lovelace-Visualisierung klick
                              (Auch ideal um sich Anregungen zu holen)

                              Meine Tabellen für eure Visualisierung klick

                              1 Reply Last reply
                              1
                              • E Erstam

                                Hi @Garfonso

                                Ich habe mal die neue v5 alpha installiert. Bei der Vertical Layout Card funktionieren die Layout Break Cards nicht mehr. Die Layout Break Cards steuern eigentlich, wann eine neue Spalte begonnen wird. Aktuell sind die Karten trotz Layout Break alle untereinander. In der 4.1.15 funktionierte das noch.

                                Viele Grüße!

                                GarfonsoG Offline
                                GarfonsoG Offline
                                Garfonso
                                Developer
                                wrote on last edited by
                                #812

                                @erstam said in Test lovelace 4.x:

                                Hi @Garfonso

                                Ich habe mal die neue v5 alpha installiert. Bei der Vertical Layout Card funktionieren die Layout Break Cards nicht mehr. Die Layout Break Cards steuern eigentlich, wann eine neue Spalte begonnen wird. Aktuell sind die Karten trotz Layout Break alle untereinander. In der 4.1.15 funktionierte das noch.

                                Viele Grüße!

                                Bei sowas kann ich nicht viel machen. Guck mal, was bei der Karte mit HomeAssistant 2025.03.06 so an bekannten Problemen existiert.

                                Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

                                Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

                                1 Reply Last reply
                                0
                                • David G.D Online
                                  David G.D Online
                                  David G.
                                  wrote on last edited by
                                  #813

                                  Ich habe eine neue Idee vur meine Visualisierung, weiß aber noch nicht genau wie ich es umsetzen kann.
                                  Im Moment fällt mir nur ein, die Seite in Vis zu bauen und als iframe einzubinden. Ich mag Vis aber nicht ^^.

                                  Was habe ich vor?

                                  Ich habe eine Json mit Links zu diversen Bildern und einem dazugehörigen Link (Aufnahmen von AgendDVR).

                                  Nun hätte gerne ein Grid der ganzen Bilder mit hinterlegtem Link.

                                  Allerdings hätte ich das gerne responsive.
                                  Aso im Querformat oder großen Bildschirmen mehr Spalten als im Hochformat.
                                  Hat da einer eine Idee?

                                  Statisch bekommt man es ja schnell in html für markdown zusammengebaut....

                                  Zeigt eure Lovelace-Visualisierung klick
                                  (Auch ideal um sich Anregungen zu holen)

                                  Meine Tabellen für eure Visualisierung klick

                                  GarfonsoG 1 Reply Last reply
                                  0
                                  • David G.D David G.

                                    Ich habe eine neue Idee vur meine Visualisierung, weiß aber noch nicht genau wie ich es umsetzen kann.
                                    Im Moment fällt mir nur ein, die Seite in Vis zu bauen und als iframe einzubinden. Ich mag Vis aber nicht ^^.

                                    Was habe ich vor?

                                    Ich habe eine Json mit Links zu diversen Bildern und einem dazugehörigen Link (Aufnahmen von AgendDVR).

                                    Nun hätte gerne ein Grid der ganzen Bilder mit hinterlegtem Link.

                                    Allerdings hätte ich das gerne responsive.
                                    Aso im Querformat oder großen Bildschirmen mehr Spalten als im Hochformat.
                                    Hat da einer eine Idee?

                                    Statisch bekommt man es ja schnell in html für markdown zusammengebaut....

                                    GarfonsoG Offline
                                    GarfonsoG Offline
                                    Garfonso
                                    Developer
                                    wrote on last edited by
                                    #814

                                    @david-g
                                    Also im Grunde "nur" die Bilder alle anzeigen?
                                    Eine Möglichkeit, die mir "in" Lovelace einfällt, wäre, das JSON mit Alias in einzelne States zu zerlegen, wo dann die URL vom Bild drinnen steht, die jeweils als Camera entity in lovelace einbauen und die halt auf einer Seite in lovelace einbinden.
                                    Das würde schonmal gehen, wenn du irgendwie fixe Einträge im JSON hast.

                                    Wenn sich da auch die Menge und Bezeichnung (oder so) ändert, wäre noch eine Möglichkeit mit einem Skript zu arbeiten und damit die states anlegen / zerstören und in lovelace mit der auto entities Karte was zu basteln (also so dass entities automatisch dazu kommen oder gelöscht werden).

                                    Ultimativer Lovelace Leitfaden: https://forum.iobroker.net/topic/35937/der-ultimative-iobroker-lovelace-leitfaden-dokumentation

                                    Lovelace UI Beispiele: https://forum.iobroker.net/topic/35950/zeigt-her-eure-lovelace-visualisierung

                                    David G.D 1 Reply Last reply
                                    1
                                    • GarfonsoG Garfonso

                                      @david-g
                                      Also im Grunde "nur" die Bilder alle anzeigen?
                                      Eine Möglichkeit, die mir "in" Lovelace einfällt, wäre, das JSON mit Alias in einzelne States zu zerlegen, wo dann die URL vom Bild drinnen steht, die jeweils als Camera entity in lovelace einbauen und die halt auf einer Seite in lovelace einbinden.
                                      Das würde schonmal gehen, wenn du irgendwie fixe Einträge im JSON hast.

                                      Wenn sich da auch die Menge und Bezeichnung (oder so) ändert, wäre noch eine Möglichkeit mit einem Skript zu arbeiten und damit die states anlegen / zerstören und in lovelace mit der auto entities Karte was zu basteln (also so dass entities automatisch dazu kommen oder gelöscht werden).

                                      David G.D Online
                                      David G.D Online
                                      David G.
                                      wrote on last edited by David G.
                                      #815

                                      @garfonso

                                      Ich glaube ich habe eine Lösung für mich gefunden.
                                      Mit der HTML Template Card kann man css verarbeiten.

                                      Dann kann ich mir den Code in einem Blockly generieren.

                                      Hier das Ergebnis von meinem Testcode (Kann nur normales HTML, sowas geht bei mir nur mit ChatGPT...) :

                                      Screenshot_20250318_111652_Fully Kiosk Browser.jpg

                                      Screenshot_20250318_111705_Fully Kiosk Browser.jpg

                                      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; margin: auto; max-width: 1200px;">
                                          <div style="display: flex; flex-direction: column; align-items: center;">
                                              <a href="https://test.de">
                                                  <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                              </a>
                                              <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 1</span>
                                          </div>
                                          <div style="display: flex; flex-direction: column; align-items: center;">
                                              <a href="https://test.de">
                                                  <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                              </a>
                                              <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 2</span>
                                          </div>
                                          <div style="display: flex; flex-direction: column; align-items: center;">
                                              <a href="https://test.de">
                                                  <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                              </a>
                                              <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 3</span>
                                          </div>
                                          <div style="display: flex; flex-direction: column; align-items: center;">
                                              <a href="https://test.de">
                                                  <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                              </a>
                                              <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 4</span>
                                          </div>
                                          <div style="display: flex; flex-direction: column; align-items: center;">
                                              <a href="https://test.de">
                                                  <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                              </a>
                                              <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 5</span>
                                          </div>
                                          <div style="display: flex; flex-direction: column; align-items: center;">
                                              <a href="https://test.de">
                                                  <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                              </a>
                                              <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 6</span>
                                          </div>
                                          <div style="display: flex; flex-direction: column; align-items: center;">
                                              <a href="https://test.de">
                                                  <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                              </a>
                                              <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 7</span>
                                          </div>
                                          <div style="display: flex; flex-direction: column; align-items: center;">
                                              <a href="https://test.de">
                                                  <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                              </a>
                                              <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 8</span>
                                          </div>
                                          <div style="display: flex; flex-direction: column; align-items: center;">
                                              <a href="https://test.de">
                                                  <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                              </a>
                                              <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 9</span>
                                          </div>
                                          <div style="display: flex; flex-direction: column; align-items: center;">
                                              <a href="https://test.de">
                                                  <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                              </a>
                                              <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 10</span>
                                          </div>
                                      </div>
                                      

                                      Das bekommt man ja schön in einer Schleife generiert.

                                      EDIT

                                      Nachdem ich mich was in die Api von AgendDVR eingearbeitet habe, hier mein vorläufiges Ergebnis:

                                      Edit
                                      Bilder entfernt, kommt später ein Nachtrag im eigenen Thread.

                                      Im Moment lädt er das Video noch runter wenn man auf ein Bild klickt. Mein Ziel ist es, dass ein Player auf geht.

                                      EDIT

                                      Tabelle ist fertig
                                      https://forum.iobroker.net/topic/80405/agentdvr-aufnahmen-in-der-visualisierung-darstellen?_=1742643274831

                                      Zeigt eure Lovelace-Visualisierung klick
                                      (Auch ideal um sich Anregungen zu holen)

                                      Meine Tabellen für eure Visualisierung klick

                                      S 1 Reply Last reply
                                      1
                                      • David G.D David G.

                                        @garfonso

                                        Ich glaube ich habe eine Lösung für mich gefunden.
                                        Mit der HTML Template Card kann man css verarbeiten.

                                        Dann kann ich mir den Code in einem Blockly generieren.

                                        Hier das Ergebnis von meinem Testcode (Kann nur normales HTML, sowas geht bei mir nur mit ChatGPT...) :

                                        Screenshot_20250318_111652_Fully Kiosk Browser.jpg

                                        Screenshot_20250318_111705_Fully Kiosk Browser.jpg

                                        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; margin: auto; max-width: 1200px;">
                                            <div style="display: flex; flex-direction: column; align-items: center;">
                                                <a href="https://test.de">
                                                    <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                                </a>
                                                <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 1</span>
                                            </div>
                                            <div style="display: flex; flex-direction: column; align-items: center;">
                                                <a href="https://test.de">
                                                    <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                                </a>
                                                <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 2</span>
                                            </div>
                                            <div style="display: flex; flex-direction: column; align-items: center;">
                                                <a href="https://test.de">
                                                    <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                                </a>
                                                <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 3</span>
                                            </div>
                                            <div style="display: flex; flex-direction: column; align-items: center;">
                                                <a href="https://test.de">
                                                    <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                                </a>
                                                <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 4</span>
                                            </div>
                                            <div style="display: flex; flex-direction: column; align-items: center;">
                                                <a href="https://test.de">
                                                    <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                                </a>
                                                <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 5</span>
                                            </div>
                                            <div style="display: flex; flex-direction: column; align-items: center;">
                                                <a href="https://test.de">
                                                    <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                                </a>
                                                <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 6</span>
                                            </div>
                                            <div style="display: flex; flex-direction: column; align-items: center;">
                                                <a href="https://test.de">
                                                    <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                                </a>
                                                <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 7</span>
                                            </div>
                                            <div style="display: flex; flex-direction: column; align-items: center;">
                                                <a href="https://test.de">
                                                    <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                                </a>
                                                <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 8</span>
                                            </div>
                                            <div style="display: flex; flex-direction: column; align-items: center;">
                                                <a href="https://test.de">
                                                    <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                                </a>
                                                <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 9</span>
                                            </div>
                                            <div style="display: flex; flex-direction: column; align-items: center;">
                                                <a href="https://test.de">
                                                    <img src="https://www.flumserberg.ch/var/webcams/268-thumbnail-1200x800.jpg?ts=202503180952" style="width: 100%; height: auto;">
                                                </a>
                                                <span style="display: block; text-align: left; width: 100%; margin-top: 5px;">Bild 10</span>
                                            </div>
                                        </div>
                                        

                                        Das bekommt man ja schön in einer Schleife generiert.

                                        EDIT

                                        Nachdem ich mich was in die Api von AgendDVR eingearbeitet habe, hier mein vorläufiges Ergebnis:

                                        Edit
                                        Bilder entfernt, kommt später ein Nachtrag im eigenen Thread.

                                        Im Moment lädt er das Video noch runter wenn man auf ein Bild klickt. Mein Ziel ist es, dass ein Player auf geht.

                                        EDIT

                                        Tabelle ist fertig
                                        https://forum.iobroker.net/topic/80405/agentdvr-aufnahmen-in-der-visualisierung-darstellen?_=1742643274831

                                        S Offline
                                        S Offline
                                        StephanH
                                        wrote on last edited by StephanH
                                        #816

                                        @david-g

                                        Hallo und guten Abend David,

                                        hab da eine Frage zu einem Slider:

                                        8c63232b-3567-4020-8374-0da0e06eaf04-grafik.png

                                        Wie kann ich den Min und Max Wert hinterlegen: Beispiel 10% bis 50% sollte möglich sein:

                                        type: entities
                                        entities:
                                          - entity: input_number.VAR_Zendure_VAR_ChargeLimit
                                            secondary_info: last-changed
                                            name: SOC Min
                                            min: 10
                                            max: 50
                                        
                                        

                                        So funktioniert das leider nix.

                                        So ist er im LaveLace angelegt:
                                        436c4895-5402-427f-a23f-0ffdcfed1c3b-grafik.png

                                        Danke schon mal für einen Tipp.

                                        David G.D GarfonsoG 2 Replies Last reply
                                        0
                                        • S StephanH

                                          @david-g

                                          Hallo und guten Abend David,

                                          hab da eine Frage zu einem Slider:

                                          8c63232b-3567-4020-8374-0da0e06eaf04-grafik.png

                                          Wie kann ich den Min und Max Wert hinterlegen: Beispiel 10% bis 50% sollte möglich sein:

                                          type: entities
                                          entities:
                                            - entity: input_number.VAR_Zendure_VAR_ChargeLimit
                                              secondary_info: last-changed
                                              name: SOC Min
                                              min: 10
                                              max: 50
                                          
                                          

                                          So funktioniert das leider nix.

                                          So ist er im LaveLace angelegt:
                                          436c4895-5402-427f-a23f-0ffdcfed1c3b-grafik.png

                                          Danke schon mal für einen Tipp.

                                          David G.D Online
                                          David G.D Online
                                          David G.
                                          wrote on last edited by David G.
                                          #817

                                          @stephanh

                                          Ich verwende für den slider eine custom card.
                                          Kann was mehr.

                                            - type: custom:slider-entity-row
                                              entity: input_number.tv_audio_volume_speaker_volume
                                              full_row: true
                                              max: 20
                                          

                                          Screenshot_20250321_191949_Fully Kiosk Browser.jpg

                                          Ich glaube, der normaler Slider nimmt die min max Werte die im DP definiert sind.

                                          Zeigt eure Lovelace-Visualisierung klick
                                          (Auch ideal um sich Anregungen zu holen)

                                          Meine Tabellen für eure Visualisierung klick

                                          S 1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          570

                                          Online

                                          32.4k

                                          Users

                                          81.3k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe