Thermostat State color ändern

A

Alhambra123

Member
Hallo,

vielleicht kann ja jemand helfen.

Ich versuche momentan mein Dashboard ein wenig zu verschönern.

Bei der Thermostatkarte kommen ich aber jetzt nicht weiter.

Wo genau und vor allen wie kann man die Status Farbe beim Thermostat ändern.

Laut Anleitung soll das in der configuration.yaml gehen. Das klappt aber nicht.
Da kommt eine Meldung fehlerhafte Einrückung.

https://www.home-assistant.io/integrations/frontend/

Ich würde halt gerne so wie auf den Bildern zu sehen einen Farbverlauf haben der passend zum Modus Heizen/Kühlen/Trocknen...... ist

Über card-mod bekomme ich nur die Primär Farbe eingestellt.

Für Tipps wäre ich echt dankbar.

Screenshot 2023-07-23 102901.pngScreenshot 2023-07-23 105357.pngScreenshot 2023-07-23 102146.png
Yaml Code erstes Bild:

Code: 
type: custom:simple-thermostat
entity: climate.klimagerat_2
layout:
  step: row
  mode:
    headings: false
    icons: true
    names: true
control:
  hvac:
    cool:
      name: Kühlen
      icon: mdi:snowflake
    heat:
      name: Heizen
      icon: mdi:fire
    heat_cool: false
    dry:
      name: Trocknen
    fan_only: false
  fan:
    '1':
      name: 1
      icon: mdi:fan
    '2':
      name: 2
      icon: mdi:fan
    '3':
      name: 3
      icon: mdi:fan
    '4':
      name: 4
      icon: mdi:fan
    '5':
      name: 5
      icon: mdi:fan
    auto:
      name: false
      icon: mdi:fan-auto
  swing:
    VerticalAuto:
      name: V-Auto
    VerticalTop: false
    VerticalMiddleTop: false
    VerticalMiddle: false
    VerticalMiddleBottom: false
    VerticalBottom: false
    VerticalSwing:
      name: V-Swing
    HorizontalSwing:
      name: H-Swing
    HorizontalLeft: false
    HorizontalMiddle: false
    HorizontalMiddleLeft: false
    HorizontalMiddleRight: false
    HorizontalRight: false
    HorizontalSplit: false
    HorizontalAuto:
      name: H-Auto
header: false
card_mod:
  style: |
    ha-card {
    height: 300px !important;
    border-radius: 6px;
    border: 1px solid #878686;
    box-shadow: 3px 3px 3px #636364;
    --st-spacing: 4px;
    --st-mode-background: rgba(0, 0, 0, 0.2);
    --st-mode-active-background: linear-gradient(#038cf5, #012c6c);


Yaml Code 2. Bild:

Code: 
type: custom:vertical-stack-in-card
title: false
cards:
  - type: custom:simple-thermostat
    Cards: null
    entity: climate.klimagerat_2
    layout:
      step: row
      mode:
        headings: false
        icons: true
        names: true
    control:
      hvac:
        cool:
          name: Kühlen
          icon: mdi:snowflake
        heat:
          name: Heizen
          icon: mdi:fire
        heat_cool: false
        dry:
          name: Trocknen
        fan_only: false
      fan:
        '1':
          name: 1
          icon: mdi:fan
        '2':
          name: 2
          icon: mdi:fan
        '3':
          name: 3
          icon: mdi:fan
        '4':
          name: 4
          icon: mdi:fan
        '5':
          name: 5
          icon: mdi:fan
        auto:
          name: false
          icon: mdi:fan-auto
      swing:
        VerticalAuto:
          name: V-Auto
        VerticalTop: false
        VerticalMiddleTop: false
        VerticalMiddle: false
        VerticalMiddleBottom: false
        VerticalBottom: false
        VerticalSwing:
          name: V-Swing
        HorizontalSwing:
          name: H-Swing
        HorizontalLeft: false
        HorizontalMiddle: false
        HorizontalMiddleLeft: false
        HorizontalMiddleRight: false
        HorizontalRight: false
        HorizontalSplit: false
        HorizontalAuto:
          name: H-Auto
    header: false
    card_mod: null
    style: |
      ha-card {
      height: 300px !important;
      border-radius: 0px;
      background: none;
      border: 1px solid #878686;
      --st-spacing: 5px;
      --st-mode-background: var(--contrast1);
      --st-mode-active-background: var(--green);
      }
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: switch.shelly1_8caab547281b
        name: false
        show_name: false
        show_entity_picture: true
        size: 70%
        state:
          - value: 'on'
            entity_picture: /local/img/Schneeflockecmi1.png
          - value: 'off'
            entity_picture: /local/img/Swing2.png
        card_mod:
          style: |
            ha-card {
            height: 100px !important;
            background: none;
            border-radius: 0px;
            border: 1px solid #878686;
            --st-spacing: 20px;
            --st-mode-background: var(--contrast1);
            --st-mode-active-background: var(--green);
            }
        tap_action:
          action: toggle
      - type: custom:button-card
        entity: switch.shelly1_8caab547281b
        name: false
        show_name: false
        show_entity_picture: true
        size: 70%
        state:
          - value: 'on'
            entity_picture: /local/img/Schneeflockecmi1.png
          - value: 'off'
            entity_picture: /local/img/Swing2.png
        card_mod:
          style: |
            ha-card {
            height: 100px !important;
            background: none;
            border-radius: 0px;
            border: 1px solid #878686;
            --st-spacing: 20px;
            --st-mode-background: var(--contrast1);
            --st-mode-active-background: var(--green);
            }
        tap_action:
          action: toggle
      - type: custom:button-card
        entity: switch.shelly1_8caab547281b
        name: false
        show_name: false
        show_entity_picture: true
        size: 70%
        state:
          - value: 'on'
            entity_picture: /local/img/Schneeflockecmi1.png
          - value: 'off'
            entity_picture: /local/img/Swing2.png
        card_mod:
          style: |
            ha-card {
            height: 100px !important;
            background: none;
            border-radius: 0px;
            border: 1px solid #878686;
            --st-spacing: 20px;
            --st-mode-background: var(--contrast1);
            --st-mode-active-background: var(--green);
            }
        tap_action:
          action: toggle
      - type: custom:button-card
        entity: switch.shelly1_8caab547281b
        name: false
        show_name: false
        show_entity_picture: true
        size: 70%
        state:
          - value: 'on'
            entity_picture: /local/img/Schneeflockecmi1.png
          - value: 'off'
            entity_picture: /local/img/Swing2.png
        card_mod:
          style: |
            ha-card {
            height: 100px !important;
            background: none;
            border-radius: 0px;
            border: 1px solid #878686;
            --st-spacing: 20px;
            --st-mode-background: var(--contrast1);
            --st-mode-active-background: var(--green);
            }
        tap_action:
          action: toggle
      - type: custom:button-card
        entity: switch.shelly1_8caab547281b
        name: false
        show_name: false
        show_entity_picture: true
        size: 70%
        state:
          - value: 'on'
            entity_picture: /local/img/Schneeflockecmi1.png
          - value: 'off'
            entity_picture: /local/img/Swing2.png
        card_mod:
          style: |
            ha-card {
            height: 100px !important;
            background: none;
            border-radius: 6px;        
            border: 1px solid;
            box-shadow: 3px 3px 3px #636364;
            --st-spacing: 20px;
            --st-mode-background: var(--contrast1);
            --st-mode-active-background: var(--green);
            }
        tap_action:
          action: toggle
card_mod:
  style: |
    ha-card {
    border-radius: 6px;
    border: 1px solid;
    border-color: #969697;
    --st-spacing: 10px;
    --st-mode-background: var(--contrast1);
    --st-mode-active-background: var(--green);
    --state-climate-off-color: #f01018;
    }
 
Naja, unter themes: sollten (eingerückt) die Bezeichnungen der jeweiligen Bereiche stehen, darunter wieder eingerückt die zugehörigen Angaben. Du hast nun .include_dir_merge_named themes dazwischen stehen, das kann so dann natürlich nicht funktionieren, da passen die Angaben nicht zur erwarteten Syntax.

Laut Doku wäre das, was Du da versuchst, theoretisch auch eher ein themes: !include_dir_merge_named themes - also Ausrufezeichen statt Punkt - und dann müsstest Du die weiteren Angaben eben auch nicht eingerückt dadrunter in der configuration.yaml schreiben, sondern in dem von Dir angelegten Ordner themes speichern.
 
Nival schrieb:
Naja, unter themes: sollten (eingerückt) die Bezeichnungen der jeweiligen Bereiche stehen, darunter wieder eingerückt die zugehörigen Angaben. Du hast nun .include_dir_merge_named themes dazwischen stehen, das kann so dann natürlich nicht funktionieren, da passen die Angaben nicht zur erwarteten Syntax.

Laut Doku wäre das, was Du da versuchst, theoretisch auch eher ein themes: !include_dir_merge_named themes - also Ausrufezeichen statt Punkt - und dann müsstest Du die weiteren Angaben eben auch nicht eingerückt dadrunter in der configuration.yaml schreiben, sondern in dem von Dir angelegten Ordner themes speichern.
Zum Vergrößern anklicken....
Danke für die Hilfe.

ich liebe Home Assistant. Und wenn alles funktioniert traumhaft.

Aber um als Laie so wie Ich dahin zu kommen ist schon manchmal echt eine Herausforderung.
Da reicht schon manchmal ein Punkt , Klammer oder ....... und schon funktioniert es nicht.
Dann sucht man stundenlang im Netz nach einer Lösung.😫

Hast Du vielleicht ein Beispielbild/Code wie das im Ordner Themes aufgebaut sein muss?
Also auch mit den passenden Einrückungen?

Muss da noch ein Ordner mit myThemes erstellt werden?
Momentan sieht das bei mir so aus. (Bilder)

Sorry für vielleicht dummen Fragen.

Danke im Voraus

Screenshot 2023-07-25 155103.pngScreenshot 2023-07-25 155115.pngScreenshot 2023-07-25 155351.png
 
Leider verwende ich HA selber garnicht, ich habe als Programmierer nur gewisse Vorteile wenn es um Verständnis von Code geht :D

Das was Du in dem Ordner themes liegen hast, wird das aktuell verwendet? Bei der versuchten Einbindung mit Punkt anstelle von Ausrufezeichen bezweifel ich das ja leise, sollte ich damit richtig liegen, nimm einfach dieses include hinter themes: weg, dann sollte der Fehler verschwunden sein.

Wird es aktuell verwendet, dann sollte, theoretisch, alles was Du ab der folgenden Zeile in der configuration.yaml geschrieben hast in einer einzelnen Datei in dem Ordner themes abgelegt seinen Dienst tun.
 
Nival schrieb:
Leider verwende ich HA selber garnicht, ich habe als Programmierer nur gewisse Vorteile wenn es um Verständnis von Code geht :D

Das was Du in dem Ordner themes liegen hast, wird das aktuell verwendet? Bei der versuchten Einbindung mit Punkt anstelle von Ausrufezeichen bezweifel ich das ja leise, sollte ich damit richtig liegen, nimm einfach dieses include hinter themes: weg, dann sollte der Fehler verschwunden sein.

Wird es aktuell verwendet, dann sollte, theoretisch, alles was Du ab der folgenden Zeile in der configuration.yaml geschrieben hast in einer einzelnen Datei in dem Ordner themes abgelegt seinen Dienst tun.
Zum Vergrößern anklicken....
das mit dem Punkt stand nur in der Fehlermeldung.
In der configuration.yaml ist es mit Ausrufezeichen drin.

ja das ios-Thema wird gerade verwendet.

Das kann man über Hacs installieren.

Hab es mal versucht aber klappt nicht.
Bin mir aber sicher ich hab Dich nicht richtig verstanden.
Deshalb die Frage nach dem Code-Beispiel.

Sorry das ich mich so deppert anstelle. 😫
Screenshot 2023-07-25 190226.pngScreenshot 2023-07-25 190346.pngScreenshot 2023-07-25 191831.pngScreenshot 2023-07-25 191812.png
 
Hey, ich kann an dem Punkt auch nur raten und hab eh nur was dazu geschrieben weil es sonst keiner tat und zumindest der Punkt für mich logisch war :D

Also ich würd die "meins" als "meins.yaml" abspeichern (nicht zwingend in einem Unterordner, scheinbar muss es nur unter themes liegen, aber Deine Entscheidung), sicherheitshalber, und ausgehend von den anderen den "Namen" von dem Spaß davor schreiben, also so:
YAML: 
meins:
  state-climate-hvac_modes-off-color: "#ff0000"
 
Habe es jetzt so drin funzt aber dennoch nicht.

Trotzdem herzlichen Dank für deine Mühe.(y)

Hab jetzt eine Custom Button Card erstellt. da habe ich es geschafft gezielt die Moduse anzusteuern.
Und da kann man anstelle der Icons Bilder einfügen.
Dann bastel ich mal da die Bilder passend zusammen.

Mal schauen ob das so geht wie ich mir das vostelle.Screenshot 2023-07-25 220939.pngScreenshot 2023-07-25 224144.png
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Zurzeit aktive Besucher

Keine Mitglieder online.
Gesamt: 55 (Mitglieder: 1, Gäste: 54)

Neueste Beiträge

Letzte Anleitungen

Statistik des Forums

Themen
6.115
Beiträge
59.425
Mitglieder
6.160
Neuestes Mitglied
gonzo12345

Teilen

Zurück
Oben