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.1k

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

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

Test lovelace 5.x

Scheduled Pinned Locked Moved Tester
968 Posts 91 Posters 418.5k 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
    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
                                  • 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
                                    wrote on last edited by 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 Reply Last reply
                                    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.
                                      wrote on last edited by
                                      #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 Reply Last reply
                                      0
                                      • David G.D David G.

                                        @stephanh

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

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

                                        @david-g

                                        Moin,

                                        hab das passende Js installiert:
                                        352d7de3-e02c-4cca-a4f8-d0d17a2baafc-grafik.png

                                        und den Instance neu gestartet, klappt aber nicht:

                                        99a2d932-fe1c-4aa7-aadb-5365f6ff5d8b-grafik.png

                                        Hast du noch nee Idee dazu ?

                                        Danke

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

                                          @david-g

                                          Moin,

                                          hab das passende Js installiert:
                                          352d7de3-e02c-4cca-a4f8-d0d17a2baafc-grafik.png

                                          und den Instance neu gestartet, klappt aber nicht:

                                          99a2d932-fe1c-4aa7-aadb-5365f6ff5d8b-grafik.png

                                          Hast du noch nee Idee dazu ?

                                          Danke

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

                                          @stephanh

                                          Ich hab die Konfig aus einem Stack kopiert.
                                          Lösche mal den - und lass alle Zeilen ganz vorne anfangen.

                                          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

                                          293

                                          Online

                                          32.4k

                                          Users

                                          81.4k

                                          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