Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  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.4k

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

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

Test lovelace 5.x

Geplant Angeheftet Gesperrt Verschoben Tester
974 Beiträge 92 Kommentatoren 420.8k Aufrufe 75 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • 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
    schrieb am zuletzt editiert von
    #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 Antwort Letzte Antwort
    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
      schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        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.
          schrieb am zuletzt editiert von
          #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 Antwort Letzte Antwort
          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
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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.
              schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
              0
              • System 9S Offline
                System 9S Offline
                System 9
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                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
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  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
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    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.
                      schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                      0
                      • E Offline
                        E Offline
                        Erstam
                        Developer
                        schrieb am zuletzt editiert von
                        #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 Antworten Letzte Antwort
                        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.
                          schrieb am zuletzt editiert von
                          #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 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #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 Antwort Letzte Antwort
                            0
                            • David G.D Online
                              David G.D Online
                              David G.
                              schrieb am zuletzt editiert von
                              #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 Antwort Letzte Antwort
                              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
                                schrieb am zuletzt editiert von
                                #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 Antwort Letzte Antwort
                                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.
                                  schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                  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
                                    schrieb am zuletzt editiert von 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 Antworten Letzte Antwort
                                    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.
                                      schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                      0
                                      • David G.D David G.

                                        @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.

                                        S Offline
                                        S Offline
                                        StephanH
                                        schrieb am zuletzt editiert von StephanH
                                        #818

                                        @david-g said in Test lovelace 4.x:

                                        custom:slider-entity-row

                                        Danke dir. Die Card habe ich nicht. Welche js hast Du dafür installiert ?

                                        David G.D 1 Antwort Letzte Antwort
                                        0
                                        • S StephanH

                                          @david-g said in Test lovelace 4.x:

                                          custom:slider-entity-row

                                          Danke dir. Die Card habe ich nicht. Welche js hast Du dafür installiert ?

                                          David G.D Online
                                          David G.D Online
                                          David G.
                                          schrieb am zuletzt editiert von
                                          #819

                                          @stephanh

                                          https://github.com/thomasloven/lovelace-slider-entity-row/releases

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

                                          Meine Tabellen für eure Visualisierung klick

                                          S 1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          777

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe