Sensorkachel und farbige Anzeige von Zuständen

Dashboards
21

Mushroom nutze ich aber nicht.
Ich habe mich jetzt nochmal mit dem Rollo beschäftigt, um eventuell einen Ansatz für meinen Fehler zu finden. Im Template definiere ich mir das:

  # Iconfarben Rollos
  state-cover-shutter-open-color: "#ff0000" # Rot für offen
  state-cover-shutter-partly-open-color: "#ffaa00" # Orange (optional)
  state-cover-shutter-closed-color: "#00aa00" # Grün für geschlossen

Damit wird das shutter-Icon geschlossen und das Rollo tut, was es soll. In der Rollo-Kachel selbst definiere ich mir nochmal das, wie ich es hier aus dem Temperaturen gelernt habe:

type: tile
entity: cover.eg_kuche_rolllade_fenster_eg_kuche_rollo_fenster_auf_ab
vertical: false
features:
  - type: cover-open-close
  - type: cover-position
features_position: inline
color: |
  [[[
    const pos = entity.attributes.current_position || 0;

    if (pos <= 5) {
      // geschlossen (<= 5%)
      return 'var(--state-cover-shutter-closed-color)';
    } else if (pos < 95) {
      // teilweise geöffnet (6–94%)
      return 'var(--state-cover-shutter-partly-open-color)';
    } else {
      // vollständig offen (>= 95%)
      return 'var(--state-cover-shutter-open-color)';
    }
  ]]]

Bis auf die Tatsache, dass das partly-open noch keine Farbe wechselt und kleiner 5% immer noch offen angezeigt wird statt geschlossen, läuft alles.

Das Gleiche müsste doch prinzipiell genauso für einen switch statt shutter funktionieren. Tut es aber nicht. Ich habe gerade noch ein paar Baustellen.

Ich hoffe ja, dass ich dann durch die Übergabe der Variablen auch meine Invertierung des Buttons hinbekomme. :slight_smile:

22

So, habs rausgefunden, bin zu doof gewesen. Man sollte auch im Template richtig definieren. Ein Switch ist on/off, nicht open/close. :slight_smile: Nu gähta.
Nächstes Ziel ist den Zustand für einen Button invertieren. Mit den Java- Zeilen klappt es bei Buttons nicht. Ich habe mir button-card installiert, damit könnte es klappen, allerdings kann ich nicht zwei Templates definieren und muss mich für button-card zentral entscheiden, wenn ich es richtig verstanden habe. Nicht die Option.
Doch als Helfer? Oder hat jemand eine andere Idee?

1 „Gefällt mir“
23

Ich habe es jetzt über Template gelöst und spooky. Es läuft, wie es soll.
Im Template definiere ich Roolos zum Beispiel mit:

 state-cover-shutter-open-color:

Kann mir jemand einen Tipp geben, wo ich nachlesen kann, wie das für andere Geräte heißt? Für Schalter habe ich device-class switch gefunden, also

state-switch-on-color:

Ich habe aber noch Fenster- und Türkontakte. Die haben jeweils die device-class „window“ und „door“

Ich bekomme es aber mit diesen Kombinationen nicht hin.

state-window-on-color:
state-window-off-color:
state-window-open-color:
state-window-close-color:

Wo ist mein Denkfehler?

24

Ich habe mal die KI befragt :wink: (auch wenn ich eher der Mushroom-Template Nutzer bin)
in der Antwort wird sogar auf die Doku der Button Card verwiesen :slight_smile:

Frage:

HA: wo definiert HA seine CSS Farbcodes wie zum Beispiel state-cover-shutter-open-color? also, wo finde ich diese Namen?

Antwor

Die CSS-Farbnamen wie --state-cover-shutter-open-color stammen aus dem Home Assistant Frontend und sind in den SCSS-Dateien des Projekts definiert – insbesondere in frontend/src/resources/styles.ts und frontend/src/common/styles/color.ts . Du findest sie im offiziellen GitHub-Repository von Home Assistant.

:compass: Wo du die Farbnamen findest

:small_blue_diamond: 1. GitHub-Repository: Home Assistant Frontend

  • Pfad: home-assistant/frontend
  • Wichtige Dateien:
    • src/resources/styles.ts
    • src/common/styles/color.ts
    • src/components/ha-card.ts

Diese Dateien enthalten die CSS Custom Properties (--state-*-color) und deren Zuordnung zu Zuständen wie open, closed, on, off, etc.

:art: Beispiel: Farbdefinitionen

In styles.ts findest du z. B.:

ts

:root {
  --state-cover-shutter-open-color: #00bcd4;
  --state-cover-shutter-closed-color: #f44336;
}

Diese Variablen werden dann in Karten wie ha-entity-button oder ha-state-icon verwendet, um Icons und Text dynamisch zu färben – abhängig vom Zustand der Entität.

:wrench: Verwendung in eigenen Karten

Du kannst diese Variablen in deinen eigenen Lovelace-Karten verwenden, z. B.:

yaml

type: custom:button-card
entity: cover.wohnzimmer_rollo
styles:
  icon:
    - color: var(--state-cover-shutter-open-color)

:pushpin: Voraussetzung: Die Karte muss den Zustand korrekt erkennen und die Variable muss im Theme oder im DOM verfügbar sein.

:link: Quellen

1 „Gefällt mir“
25

Danke. :slight_smile:
Dann war meine KI zu dumm, nicht, dass ich sie auch befragt hätte. Ich bastel dann mal weiter, Du hast mir shr geholfen. :+1:

1 „Gefällt mir“
26

Also ich habe jetzt mal probiert:
Die Styles.ts sagt mir

    /* ------------------------ */
    /* Door / Garage */
    /* ------------------------ */
    --state-door-open-color: #00bcd4;
    --state-door-closed-color: #f44336;
    --state-door-ajar-color: #ffc107;
    --state-door-unavailable-color: #9e9e9e;

In meinem Theme habe ich das definiert:

  # Iconfarbe Türen
  state-door-open-color: "red"
  state-door-closed-color: "green"

Dennoch bleiben Türen, egal, wie ich sie anlege völlig unbeeindruckt. Sensors und switch mögen auch nicht, obwohl ich mich genau an die styles.ts halte.

2025-11-06 20_19_39
2025-11-06 20_19_39361×261 8.12 KB

Mit meinen Rollladen und dieser Definition klappt es prima:

  state-cover-shutter-open-color: "#ff0000" # Rot für offen
  state-cover-shutter-opening-color: "#ffaa00" # Orange (optional)
  state-cover-shutter-closing-color: "yellow" # Orange (optional)
  state-cover-shutter-closed-color: "#00aa00" # Grün für geschlossen

Neustarts habe ich ausreichend hinter mir.

Kann mir bitte jemand einen Tipp geben, wo ich den Knoten im Kopf habe?
Ich habe mittlerweile Stunden zugebracht, weil ich hier keinen nerven möchte.

27

Versuche mal bitte die Farben in HEX


state-door-open-color: "#ff0000"
state-door-closed-color: "#00aa00"
28

Keine Änderung. :frowning:
Habe ich aber auch bei den anderen Einträgen gehabt.