Skip to content
  • 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
  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.9k

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

Test lovelace 5.x

Geplant Angeheftet Gesperrt Verschoben Tester
969 Beiträge 91 Kommentatoren 418.9k Aufrufe 74 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.
  • 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
                                      • David G.D David G.

                                        @stephanh

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

                                        S Offline
                                        S Offline
                                        StephanH
                                        schrieb am zuletzt editiert von
                                        #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 Antwort Letzte Antwort
                                        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.
                                          schrieb am zuletzt editiert von
                                          #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 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

                                          355

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

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

                                          • Du hast noch kein Konto? Registrieren

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