Card Mod bei der custom:simple-thermostat Card

Dashboard/Cards/Frontend
1

Moinsen,

ich würde gerne den Text des Zustandes und das Icon in der custom:simple-thermostat in verschiedenen Farben darstellen. Blau bei “idle” und Rot bei “heating” (Eintrag in der Klammer ist unrelevant).

image
image1418×662 48.3 KB

Leider hab ich so gar keine Idee, wie ich das bewerkstelligen könnte.
Kann mir da jemand bitte einen Schubs in die richtige Richtung geben?

Hier mal der Code aus der ersten Etage:

type: custom:vertical-stack-in-card
cards:
  - cards:
      - cards:
          - type: vertical-stack
            cards:
              - entity: climate.schlafzimmer
                name: Heizung Schlafzimmer
                control:
                  - hvac
                type: custom:simple-thermostat
              - align_state: center
                type: custom:mini-graph-card
                entities:
                  - color: "#DAF7A6"
                    entity: sensor.device8_actual_temperature
                    index: 0
                    name: Schlafzimmer
          - type: vertical-stack
            cards:
              - entity: climate.bad
                name: Heizung Bad
                control:
                  - hvac
                type: custom:simple-thermostat
              - align_state: center
                type: custom:mini-graph-card
                entities:
                  - color: "#DAF7A6"
                    entity: sensor.device6_actual_temperature
                    index: 0
                    name: Bad
          - type: vertical-stack
            cards:
              - entity: climate.danny
                name: Heizung Danny Büro
                control:
                  - hvac
                type: custom:simple-thermostat
              - align_state: center
                type: custom:mini-graph-card
                entities:
                  - color: "#DAF7A6"
                    entity: sensor.device9_actual_temperature
                    index: 0
                    name: Danny Büro
          - type: vertical-stack
            cards:
              - entity: climate.danny_schlafzimmer
                name: Heizung Danny Schlafzimmer
                control:
                  - hvac
                type: custom:simple-thermostat
              - align_state: center
                type: custom:mini-graph-card
                entities:
                  - color: "#DAF7A6"
                    entity: sensor.device10_actual_temperature
                    index: 0
                    name: Danny Schlafzimmer
        type: custom:swipe-card
        parameters:
          autoplay:
            delay: 5000
            effect: flip
            flipEffect:
              slideShadows: false
    type: horizontal-stack

VG
Marco

2 
type: custom:vertical-stack-in-card
cards:
  - cards:
    - cards:
      - type: vertical-stack
        cards:
          - entity: climate.schlafzimmer
            name: Heizung Schlafzimmer
            control:
              - hvac
            type: custom:simple-thermostat
            align_state: center
            state:
              styles:
                "idle":
                  color: "#3498db"  # Blau für idle
                "heating":
                  color: "#e74c3c"  # Rot für heating
            icon:
              template: |
                var state = entity.state;
                if (state === 'idle') return 'mdi:snowflake';
                if (state === 'heating') return 'mdi:fire';
                return 'mdi:thermostat';
              style: |
                var state = entity.state;
                if (state === 'idle') return 'color: #3498db';
                if (state === 'heating') return 'color: #e74c3c';
                return '';
            type: custom:mini-graph-card
            entities:
              - color: "#0AF7A6"
                entity: sensor.device0_actual_temperature
                index: 0
                name: Schlafzimmer
      - type: vertical-stack
        cards:
          - entity: climate.bad
3

Ich habe den Code entsprechend angepasst, allerdings ändert sich weder die Farbe noch das angezeigte Icon.
Hab ich das evtl. falsch implementiert?

cards:
  - type: vertical-stack
    cards:
      - entity: climate.schlafzimmer
        name: Heizung Schlafzimmer
        control:
          - hvac
        type: custom:simple-thermostat
      - align_state: center
        state:
          styles:
            idle:
              color: "#3498db"
            heating:
              color: "#e74c3c"
        icon:
          template: |
            var state = entity.state;
            if (state === 'idle') return 'mdi:snowflake';
            if (state === 'heating') return 'mdi:fire';
            return 'mdi:thermostat';
          style: |
            var state = entity.state;
            if (state === 'idle') return 'color: #3498db';
            if (state === 'heating') return 'color: #e74c3c';
            return '';
        type: custom:mini-graph-card
        entities:
          - color: "#DAF7A6"
            entity: sensor.device8_actual_temperature
            index: 0
            name: Schlafzimmer

Kann es daran liegen das hier ein Attribut referenziert werden muss?

image
image2108×748 62.4 KB

4

Habe jetzt noch ein wenig mit ChatGPT gespielt.
Ein neues Icon einblenden funktioniert, nur das bereits vorhandene wird nicht ausgeblendet.

type: custom:simple-thermostat
entity: climate.wohnzimmer
name: Wohnzimmer
layout:
  mode:
    headings: false
header: [ ]
card_mod:
  style: |
    ha-card .header__icon {
      color:
        {% set state = state_attr('climate.wohnzimmer', 'hvac_action') %}
        {% if state == 'heating' %} orangered
        {% elif state == 'off' %} gray
        {% elif state == 'idle' %} steelblue
        {% else %} black
        {% endif %};
      background-image: none !important;
    }
    ha-card .header__icon > ha-icon {
      display: none !important;
    }
    ha-card .header__icon::before {
      content:
        {% set state = state_attr('climate.wohnzimmer', 'hvac_action') %}
        {% if state == 'heating' %} "🔥"
        {% elif state == 'off' %} "❄️"
        {% elif state == 'idle' %} "⏸️"
        {% else %} "❔"
        {% endif %};
      font-size: 28px;
      display: inline-block;
      line-height: 1;
    }

image
image976×726 30.9 KB

Und nun habe ich noch das Problem, das die unterschiedlichen Vorgaben (Sommer, Wohnsimmer usw.) angezeigt werden. Das sollte auch nicht sein :frowning:

5

Neben Chatgpt solltest Du Dich mit den Chrome Entwicklerwerkzeugen beschäftigen und verstehen wie die Karte aufgebaut ist, vorallem den Weg zu dem Element, daß Du manipulieren möchtest. Und diesen Pfad in Card Mod umsetzen. Das Ganze kostet Zeit. Ich hatte das vor ein paar Wochen erstmalig auch für eine Thermostat Karte gemacht. Mehrfach gefrustet aufgehört und am Ende doch hinbekommen.

Gutes Gelingen!

EDIT:
Hier ist mein damaliger Post. Ggf. findest Du ein brauchbares Detail. https://community.simon42.com/t/brauche-hilfe-bei-card-mod-dom-navigation-um-eine-heizungskarte-zu-manipulieren/47463

6

Danke Dir für den Tipp.
Kann deinen damaligen Frust nachvollziehen. Ist ziemlich verwirrend, wenn man, so wie ich, gar keine Ahnung von der Materie hat :frowning:
Aber kommt Zeit, kommt Rat. Hat mein Opa immer gesagt und er hatte meistens Recht :slight_smile: