Test lovelace 4.x

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

[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.]

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

<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

[StephanH]

@david-g

Hallo und guten Abend David,

hab da eine Frage zu einem Slider:

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:

Danke schon mal für einen Tipp.

[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

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

[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.]

@stephanh

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

[StephanH]

@david-g

Moin,

hab das passende Js installiert:

und den Instance neu gestartet, klappt aber nicht:

Hast du noch nee Idee dazu ?

Danke

[David G.]

@stephanh

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

[StephanH]

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

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

[Garfonso]

@stephanh
Hat das Objekt min/max Werte? Falls nicht, guck mal was passiert, wenn du die da setzt.
Für input_number werden die jedenfalls in die Attribute übernommen. Eigentlich sollte die Standardkarte sich dann dran halten.

[Erstam]

Hi @Garfonso!

Ich nutze jetzt die v5 Alpha 1 schon ein paar Wochen. Sie funktioniert bisher problemlos. Einige Kleinigkeiten haben sich geändert, insbesondere funktioniert manuelle Spaltenumbrüche mit der custom:layout-break-Karte in der Vertical View nicht mehr, aber das liegt an veralteten Custom-Cards und lässt sich auf die neuen Section Views umstellen.

Viele Grüße!

[StephanH]

@garfonso said in Test lovelace 4.x:

Hat das Objekt min/max Werte? Falls nicht, guck mal was passiert, wenn du die da setzt.

Hi, ganz vergessen zu antworten. Min/Max Werte kann ich in dem Standart Slider setzen, werden aber ignoriert.

[Garfonso]

@stephanh said in Test lovelace 4.x:

@garfonso said in Test lovelace 4.x:

Hat das Objekt min/max Werte? Falls nicht, guck mal was passiert, wenn du die da setzt.

Hi, ganz vergessen zu antworten. Min/Max Werte kann ich in dem Standart Slider setzen, werden aber ignoriert.

Geht bei mir:

(allerdings mit der 5.0 beta getestet kopfkratz - aber da hat sich "eigentlich" nichts getan)

[StephanH]

@garfonso

Danke dir ... klappt jetzt. Hab Min/Max an der flaschen Stelle gesetzt gehabt.

[M1R0O]

Hi,
ich mal wieder mit meinen "Problemen":

Ich habe eine horizontale Karte, in der 5 Temperaturen angezeigt werden müssen. Leider sind der Text und die Zahlen zu groß (siehe 1).
Ich habe versucht, dass mit der card-mod-Eingabe anzupassen (siehe 2).

Anstatt des * habe ich außerdem host und value probiert.
Leider passiert nichts.
Was mache ich falsch?

[Garfonso]

@garfonso

So, hab das neueste Frontend ins beta geschoben.

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

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)

Viel Spaß beim testen.

[David G.]

@garfonso

Ist das die selbe Version vor die von git?
Kannst du mir sagen, wie ich die Seutenleiste und das Dashbweinblenden kann? Oder fehlt das noch in der git Version?

[lessthanmore]

@garfonso Mir ist aufgefallen, dass bei der 5.0.0 die Symbole für Fenster und Türen nicht mehr korrekt dargestellt werden.
Normalerweise hatte es ja gereicht, die korrekte Geräteklassen zu hinterlegen und entsprechend wurde ein geschlossenes oder offenes Fenster angezeigt.

[Garfonso]

@david-g
Es ist eine neue Version gegenüber der 5.0.0-alpha. (und jetzt wieder im git master branch). Also updaten.

In der 5.0.0 gibt es im instances Ordner (bzw. für jede Instanz einzeln) ein hideSidebar State, den auf false stellen (default ist true). ggf. dann nochmal das UI neuladen (manchmal auch zweimal, da hab ich noch nicht ganz verstanden, was da passiert)

@lessthanmore said in Test lovelace 4.x:

@garfonso Mir ist aufgefallen, dass bei der 5.0.0 die Symbole für Fenster und Türen nicht mehr korrekt dargestellt werden.
Normalerweise hatte es ja gereicht, die korrekte Geräteklassen zu hinterlegen und entsprechend wurde ein geschlossenes oder offenes Fenster angezeigt.

Hm. Das kann ich hier nicht bestätigen. Meine Türen und Fenster haben noch alle das gleiche Symbol. Bei mir ist irgendwie bei locks das Symbol komisch geworden, da hatte ich aber vermutet, dass es in Lovelace geändert wurde.
Versuch mal bitte den Browser-Cache zu leeren. Und falls nicht, mach mir ein issue, dann muss ich da nochmal reingucken (nach Ostern)