HACS Entity Cards

[scw2wi]

Kennst du das?
Du suchst gewaltsam an einer Lösung, möchtest Ergebnisse haben und hast irgendwann 20 Tabs auf, ließt derweilen alles nur noch quer und siehst dabei den Wald vor lauter Bäumen nicht mehr?

Exakt genauso ist es mir vor 1 Jahr gegangen, wie ich in HA eingestiegen bin. Ich hab absolut nichts hinbekommen. Dann hab ich meine Strategie komplett geändert. Ich hab eine Liste (was denn sonst) aller meiner Fragen gemacht, was ich alles wie darstellen will. Dann hab ich interessante Threads durchforstet, was andere so für Lösungen posten. Und dann hab ich nicht mehr mühsam die Lösung zu einem Problem gesucht, sondern einfach eine passende Frage aus meiner Liste zu jeder interessanten Lösung. So war ich dann 10x schneller fertig.

Nun frage ich mich aber: wie „holen“ sich die anderen Karten ohne JS die Daten aus der Datenbank ab?

Möchtest du wissen, wie HA das intern löst, da hab ich keine Ahnung und interessiert mich auch nicht, solange es funktioniert.

Manche Karten können nur auf entities zugreifen, manche andere auch direkt auf attribute.

type: entities
entities:
  - entity: climate.wohnzimmer
    type: attribute
    attribute: current_temperature

Wenn eine Karte nicht auf Attribute zugreifen kann, dann erstelle ich einfach einen Template-Sensor, der das Attribut in den Status holt.

Die KI ist mein treuer Begleiter und kann eigentlich recht viel, wenn man die richtigen Fragen stellt. Nur bei card_mod steigt sie meistens aus.

[tsb2001]

Wenn eine Karte nicht auf Attribute zugreifen kann, dann erstelle ich einfach einen Template-Sensor, der das Attribut in den Status holt.

Das ist gar kein Problem. Templatesensoren hab ich hunderte.
Jinja ist da mein freundlicher Begleiter; grade weil man das in den Entwicklerwerkzeugen auch gut testen kann.

Möchtest du wissen, wie HA das intern löst, da hab ich keine Ahnung und interessiert mich auch nicht, solange es funktioniert.

Grundsätzlich interessiert mich das ebenfalls nicht, solange es funktioniert.

Bei mir funktioniert es allerdings über JS auf dem NS Panel pro nicht, da der Entwickler von dem WebView unter Android JS in der Ausführung blockiert hat. Somit habe ich eine sehr schöne funktionelle Karte auf dem Rechner und auf dem Handy, aber da wo ich diese haben wollte - nämlich ohne irgendwas in die Hand nehmen zu müssen - im Flur kompakt fest in der Wand installiert diese Werte auf dem NS-Panel Pro angezeigt zu bekommen.

Daher die Frage, ob das „label:“ unbedingt JS enthalten muss, oder ob die Entität nicht anders eingebunden werden kann.

Oder anders gesagt um beim Thema zu bleiben: die Karte bietet ganz viele Möglichkeiten, jedoch ist sie nicht zu allen Endgeräten kompatibel.

[scw2wi]

Ich hab unter Android die HA-App installiert und da funktioniert JS problemlos. Wenn heute ein Gerät JS nicht kann, dann ist es als Browser eigentlich wertlos.

[Tom Bombadil]

Bei mir funktioniert es allerdings über JS auf dem NS Panel pro nicht, da der Entwickler von dem WebView unter Android JS in der Ausführung blockiert hat.

Auch wenn Du diese Aussage jetzt schon mehrfach getroffen hast, mag ich sie irgendwie nicht glauben. Zum einen kommt auch die Gauge in der Mitte mit ziemlicher Sicherheit per JS auf den Bildschirm (wie soll sie sonst dahinkommen?), zum anderen dürfte es dann solche Projekte hier gar nicht geben (auch dort wird die button-card vewendet). Ich persönlich bin der Meinung, dass das Problem woanders liegt.

Daher die Frage, ob das „label:“ unbedingt JS enthalten muss, oder ob die Entität nicht anders eingebunden werden kann.

Fester Text, oder JS, das den gewünschten dynamischen Text liefert - das ist hier der vorgesehen Weg. Es gibt bestimmt Karten, die hier andere Wege gehen können (zB Layout-Card), aber auch die liefern das Ergebnis per JS an den lokalen Browser (siehe meine Erklärung im vorherigen Post). Ggf stellen die dann aber Entitäten an einigen Attributen direkt zur Verfügung, was die Sache übersichtlicher macht und die Einbindung von Template Sensoren per Entities ermöglicht, die die Sache dann durch per Jinja Template gesteuerte Attribute direkt am Template Sensor steuern (siehe Link).

/tom

[tsb2001]

Auch wenn Du diese Aussage jetzt schon mehrfach getroffen hast, mag ich sie irgendwie nicht glauben.

Ich habe seit Jahren 2 von den Paneln im Einsatz.
Da läuft ganz viel drauf; Müllkalender, Climate, Sonos, bis hin zu den Lottozahlen über Markdown-Cards.
Alles funktioniert.
Was mir chatGPT erklärt hat, ist das manche Panel mit abgespeckten Systemen wegen Cross-Scripting JS in der eigentlichen Laufzeitumgebung des Browsers verhindert, um dort keine Sicherheitslücke entstehen zu lassen.

Gucke ich mir den RAW-Modus eines beliebigen Dashboards an, finde ich nirgends eckige Klammern. Es werden immer nur die Karten aufgerufen, und offensichtlich in Homeassistant selbst abgearbeitet (in html gewandelt) und an den Browser übergeben.

Nehme ich die Seite mit der custom:button-card und den eckigen Klammern (die gibts da dann nämlich - sonst nirgends) wird der Browser selbst die Aufgabe selbst übernehmen, den JS-Code auszuführen. Und da scheint der Browser zu streiken.

Ich vermute, dass bei den JS-Scripten der einzelnen Karten die Ansicht für den Browser innerhalb von HA aufgerufen und abgearbeitet wird, der Browser selbst aber nur visualisiert. Sobald der Browser jedoch selbst Code (aus der custom:button-card) ausführen soll, verweigert der das, da dies vom Entwickler abgeschaltet worden ist.

Gucke ich hier: https://developers.home-assistant.io...i/custom-card/, scheint JS dynamisch einen html-Teil zu generieren, wenn die Karte aufgerufen wird. Und diesen Inhalt zeigt der Browser dann.

[Tom Bombadil]

Nehme ich die Seite mit der custom:button-card und den eckigen Klammern (die gibts da dann nämlich - sonst nirgends) wird der Browser selbst die Aufgabe selbst übernehmen, den JS-Code auszuführen. Und da scheint der Browser zu streiken.

Unfug. Das JS von HA/Lovelace wird meines Wissens IMMER (!!!!!!!) im Client (=Browser) ausgeführt. So funktioniert das nicht nur bei HA, sondern in den meisten Systemen, die JS nutzen. Und mit dem Backend wird per Websocket komminiziert, um Daten anzuolen. Uraltes Prinzip, hat schon die smartVISU so gemacht (da hiess die Template Engine TWIG statt JINJA, und zum Einsatz kam JQuery statt im Browser eingebautes JS; aber gleiches Prinzip, gerendert wurde das Widget im Frontend).

Wobei es da natürlich browserseitig Limitierungen / Sperrungen geben kann, was wie in der Browser-Sandbox ausgeführt werden DARF. Aber da liefert Google zig Hits zu dem Gerät im Internet, bis hin zur Installation des HA Clients (ich jab das Teil hier nicht und kann nichts Testen, daher werde ich auch keinen Code zusammenfrickeln).

Mich würd's nicht wundern, wenn ChatGPT sich hier mal wieder eine Erklärung zusammenhallusziniert; mir hat es eben was ganz anderes erklärt:

📌 Fazit: Javascript-Beschränkungen für NSPanel Pro in HA
❗ Wenn du Lovelace normal nutzt …
➡️ Ja - die gleichen Beschränkungen wie im Browser:
✔️ Clientseitig im Browser/WebView
✔️ Sandbox-Kontext
✔️ Kein Server-/Backend-Zugriff
✔️ Nur standard-Web-APIs gelten
🧪 Einschränkungen können zusätzlich kommen durch …
✔️ Browser/WebView-Version auf dem Panel
✔️ Performance-Limitierungen des Geräts
✔️ Darstellung/Rendering-Probleme bei komplexen Karten

👉 Aber es gibt keine zusätzlichen proprietären HA-Restriktionen für JS nur weil es NSPanel Pro ist.

Ansonsten, wenn Du serverseitiges 'pre-rendern' haben willst, bau halt auf custom:layout-card mit Templates um - vollständiges copy-paste Beispiel für NSPanel Pro hier (ist dieselbe Seite wie oben schon verlinkt, etwas weiter unten). Machen musst es schon selbst ...

/tom

p.s. / edit: Bau doch mal eine ganz normale Karte mit Fixtext und ansonsten ohne Gimmicks und schau, ob das Panel die darstellt. Denn es werden ja nichtmal die Umrisse der Karten dargestellt. Ich vermute hier eher einen Syntaxfeher, zB ein vergessenes '>'.

[tsb2001]

Ich vermute hier eher einen Syntaxfeher, zB ein vergessenes '>'.

Eher unwahrscheinlich:
Das ist die gleiche Ansicht der gleichen Seite, nur aufgerufen vom iPhone:
IMG_4275.jpg
Genau diese Seite wird auch vom NS-Panel geladen. Im Browser von iPhone sind die Daten der untersten Karte da, im Browser des NS-Panels nicht.
Alles was darüber ist, erscheint auf dem NS-Panel exakt und genau so wie in dem Screenshot…

[starwarsfan]

Hallo miteinander

Das ist die gleiche Ansicht der gleichen Seite, nur aufgerufen vom iPhone:

Hast Du spassenshalber mal die Entwickler-Ansicht geöffnet und beim Laden dieser Seite geschaut, ob's dort Fehler gibt? Es kann durchaus sein, dass der Browser vom Eierfön das einfach ignoriert, das NSPanel sich aber bei soetwas anders verhält...

[Tom Bombadil]

Alles was darüber ist, erscheint auf dem NS-Panel exakt und genau so wie in dem Screenshot…

Wie schon geschrieben:

• Bau eine custom:button-card mit nur Beschriftung (name: 'schnulli'), teste auf Anzeige (idealerweise auf separatem Dashbord).
  Wird die button-card angezeigt?
• Dann füge ein Icon hinzu.
  Wird die button-card angezeigt?
• Dann füge einen Festwert hinzu (state: 'schnulli').
  Wird die button-card angezeigt?
• Dann nimm für state eine einfache Formel innerhalb [[[ ]]], sowas wie state: "[[[ return 2*2; ]]]"
  Wird die button-card angezeigt? -> wenn das geht, funktioniert JS erstmal grundsätzlich
• Dann referenziere im state erstmals auf eine Entität: state: "[[[ return states['sensor.irgendeindingsbums'].state; ]]]"
  Wird die button-card angezeigt? -> wenn das geht, kann JS auf Entitäten zugreifen, und Du hast gewonnen
• Erst dann komplexere Formeln einsetzen.

Was mich übrigens an Deinem ersten Code gestört hat, war das '?' in 'states['sensor.fronius_mppt_module_3_dc_power']?.state', vielleicht knallt es da. Vielleicht sind die buttons auch einfach nur 'out of range', weil durch diesen spezifischen Browser außerhalb des anzeigbaren Bereichs positioniert (es ist sehr wahrscheinlich, dass iOS Safari und dieser Android-Browser unterschiedlich rendern).

Geh der Sache einfach Schritt für Schritt auf den Grund - alles andere bleibt Rätselraten aus der Ferne. Fallback ist immer noch Umbau auf Layout-Card mit Jinja-Templates; mit denen bist Du ja ohnehin vertraut.

/tom

edit: Checkliste noch etwas überarbeitet.

[scw2wi]

Nachdem ich die neue Thermostat-Card auf Gradientenverlauf umgebaut hab, wurde jetzt auch die Card von Post #24 umgestellt, und auch hier sieht die Skala gleich viel besser aus.

HACS-card zur Einstellung der Lichtfarbe V3.png

Der Code für input_number ist gleich geblieben der template-sensor von Post #10 ist leicht modifiziert, beide sind unten attached.

Vor einiger Zeit hab ich (fast) alle hardcoded Farben durch Theme Variablen ersetzt, wer kein Theme verwendet muss das entsprechend anpassen.

  ledcolor-cold: LightSkyBlue
  ledcolor-medium: Khaki
  ledcolor-warm: Burlywood

[tsb2001]

• Bau eine custom:button-card mit nur Beschriftung (name: 'schnulli'), teste auf Anzeige (idealerweise auf separatem Dashbord).
  Wird die button-card angezeigt?
• Dann füge ein Icon hinzu.
  Wird die button-card angezeigt?

Habe ich zusammengefast gemacht und das Ergebnis funktioniert auf allen Geräten. Hier das Foto vom NS-Panel und die Karte mit Konfiguration aus dem Rechner:
cb1.png

und das NS-Panel (lässt sich auch bedienen, die Funktion ist also da):
20251228_100738405_iOS.jpg

Dann füge einen Festwert hinzu (state: 'schnulli').
Wird die button-card angezeigt?

Ja.
Erst mit state_display für den Festtext, dann mit state und value für die variable Anzeige der Leuchte:
state_display: 'schnulli ergänzt:
cb2.png
Ergebnis:
20251228_102104823_iOS.jpg



Dann dynamisch mit state und value:
sc3.png
Ergibt das (auch der Text ändert sich von AN-->AUS, folglich funktioniert state und value auch:
20251228_103115263_iOS.jpg

Dann nimm für state eine einfache Formel innerhalb [[[ ]]], sowas wie state: "[[[ return 2*2; ]]]"
Wird die button-card angezeigt? -> wenn das geht, funktioniert JS erstmal grundsätzlich

Tatsächlich: auch das funktioniert:
sc4.png
Auf dem Panel:
20251228_104023358_iOS.jpg

Dann referenziere im state erstmals auf eine Entität: state: "[[[ return states['sensor.irgendeindingsbums'].state; ]]]"
Wird die button-card angezeigt? -> wenn das geht, kann JS auf Entitäten zugreifen, und Du hast gewonnen

Treffer! Gewonnen! Auch das geht!
sc5.png

Das Display:
20251228_104330080_iOS.jpg

Vielleicht sind die buttons auch einfach nur 'out of range', weil durch diesen spezifischen Browser außerhalb des anzeigbaren Bereichs positioniert (es ist sehr wahrscheinlich, dass iOS Safari und dieser Android-Browser unterschiedlich rendern).

TREFFER!!! Danke!!!!
Sobald ich diesen Bereich von der Positionierung auf "auto" testweise gesetzt habe, kommen sofort die Felder "ins Bild":

type: custom:button-card
styles:
  card:
    - overflow: unset
  grid:
    - grid-template-areas: "'akku bezug pv' 'pwk2 bezug heiz' 'pkw bezug haus'"
    - grid-template-columns: 1fr 2fr 1fr
    - grid-template-rows: min-content min-content min-content
  custom_fields:
    bezug:
      - align-self: auto
      - justify-self: auto
    akku:
      - align-self: auto
      - justify-self: auto
      - padding-left: 20px
    pv:
      - align-self: auto
      - justify-self: auto
      - padding-right: 20px
    pkw:
      - align-self: auto
      - justify-self: auto
      - padding-left: 20px
    haus:
      - align-self: auto
      - justify-self: auto
      - padding-right: 20px​

Dann sieht es schon mal so aus:

20251228_110218366_iOS.jpg

Es scheint tatsächlich, dass die Positionen unterschiedlich behandelt werden. Das kann ich aber sicherlich selbst herausfinden.

Daher an an alle Helfer und besonders an Dich Tom Bombadil ein sehr großes Dankeschön für die Hilfestellung.

Und eins habe ich hierbei gelernt: Mich hat die ganze Zeit chatGPT in die irre geführt!
Weil da die Aussage getroffen wurde, dass auf manchen Wallpanels und Displays JS nicht ausgeführt würde. Daher habe ich mich so dermaßen darauf fixiert und bin der ganzen Zeit einer völlig verkehrten Richtung hinterhergelaufen.

Ich werde zukünftig meinen Grips lieber wieder selbst anstrengen, als chatGPT zu vertrauen!

Danke nochmal!

[Tom Bombadil]

Hauptsache läuft. Frohes Weiterbasteln!

/tom

[starwarsfan]

Hallo miteinander

Mich hat die ganze Zeit chatGPT in die irre geführt!
Weil da die Aussage getroffen wurde, dass auf manchen Wallpanels und Displays JS nicht ausgeführt würde. Daher habe ich mich so dermaßen darauf fixiert und bin der ganzen Zeit einer völlig verkehrten Richtung hinterhergelaufen.

Ich werde zukünftig meinen Grips lieber wieder selbst anstrengen, als chatGPT zu vertrauen!

Stellt sich die Frage, ob man dazu schon "Klassiker" sagen kann. Also in Anbetracht dessen, dass es das KI-Zeugs noch nicht so wirklich lange gibt...

Anyway, cool wenn's jetzt funktioniert!

[scw2wi]

Es gibt hier eine neue Anzeige für die Akku-Ladung, siehe Bild rechts unten.


HACS Gauges und Akku-Ladung.png

[tsb2001]

Hauptsache läuft. Frohes Weiterbasteln!

Es funktioniert. Der Fehler hat sich erledigt, als ich die companion-app auf dem Panel von Version 2025 irgendwas auf die aktuelle gezogen habe. Damit passt auch die Ansicht, ohne was zu ändern.

Zwischendrin habe ich die WebView-Komponente noch hochgezogen, dummerweise stürzte da aber die Companion-App nach Auswahl des Servers ab.
Da gab es dann einen Downgrade und nun ist es vollbracht.

20251229_174257352_iOS.jpg

Ich finde das Display echt nicht schlecht.
Und das beste ist: bei neuen Geräten ist seit der Softwareversion 4.0.0 des vorinstallierten Systems F-Droid verfügbar, welches von Sonoff out-of-the-box installiert. Somit wird die Companion-App für Homeassistant ebenfalls von Sonoff komplett unterstützt.

Damit wird das Ding zur eierlegenden Wollmilchsau für HA (kann ja auch Sprachausgabe) und muß nicht erst umständlich via ADB von der originalen Firmware entfesselt werden.
Für 90 Euro dazu auch recht günstig...