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
969 Posts 91 Posters 418.7k 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

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

                                          @stephanh

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

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

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

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

                                          danke dir, das wars. Klappt jetzt.

                                          300ae804-7313-4206-b19a-319e315e64c0-grafik.png

                                          Nur mein Style fehlt mir noch. Ist aber nicht so tragisch nochmal schauen.

                                          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

                                          649

                                          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