Syntax card mod: Icon Farbe ändern und mehrere Zustände anzeigen

Dashboard/Cards/Frontend
1

Hallo zusammen,

nachdem ich jetzt über eine Woche am rumgooglen bin und auch ChatGPT mir langsam vorschlägt mir doch eine andere Beschäftigung zu suchen, muss ich hier mal nachfragen :wink:
Ich habe zwei Kachelkarten die ich mit dem card mod bearbeitet habe. Das funktioniert dank vielen Beispiele im Internet und auch folgendem Thema hier im Forum: Einfärben von Icons - #14 von RaptorX
ganz OK. Bei einer Kachelkarte ändere ich die Farbe des Icons, bei der anderen zeige ich mehrere Entitäten in der secondary Info an. Hier der Code der beiden Karten:

type: tile
entity: input_boolean.status_alle_fenster
name: Fenster / Türen zu
icon_tap_action:
  action: none
tap_action:
  action: navigate
  navigation_path: /lovelace/fenster-turen
hide_state: false
show_entity_picture: false
state_content: state
card_mod:
  style: |
    .icon {
      {% if is_state(config.entity, 'on') %}
        --tile-color: green;
      {% elif is_state(config.entity, 'off') %}
        --tile-color: grey;
      {% else %}  
        --tile-color: darkblue;
      {% endif %}  
    }


type: tile
name: Waschmaschine
icon: mdi:washing-machine
entity: input_boolean.status_waschmaschine
icon_tap_action:
  action: none
state_content: state
tap_action:
  action: more-info
card_mod:
  style:
    ha-tile-info$: |
      .secondary:after {
        visibility: visible;
        content: " - {{ states('sensor.0xa4c1381c47d805ae_power') | round(0) }} W - {{ states('sensor.0xa4c1381c47d805ae_energy') | round(1) }} kWh";
      }

Das funktioniert wie gesagt auch. Nur habe ich es nicht hingekriegt beides zu kombinieren, also Zusatzinfos und Farbe ändern. Ich bin mir recht sicher, dass es einfach am Syntax liegt aber auch ChatGPT konnte es nicht lösen.

Ein weiteres Problem welches ich nicht lösen konnte ist, Der Status der Fenster/Türen kommt von einem Helfer. Dieser ist also entweder “An” oder “Aus”. Ich möchte jetzt das AN durch “Geschlossen” und das Aus durch “Offen” ersetzen. Könnte mir auch hier mal einer einen Denkanstoß geben.

Vielen Dank im Voraus

2

Ich bin auch immer mit try and error beim card mod dabei… es gibt im englisch sprachigen Forum einen Thread dazu - vielleicht findest du dort, was du suchst:

3

Ich habe das zweite Problem heute Abend über einen Umweg gelöst. Ich habe einen Template Sensor erstellt der den Status ändert:

  - platform: template
    sensors:
      status_sensor:
        friendly_name: "Sensor alle Fenster Status ändern"
        value_template: >-
          {% if is_state('input_boolean.status_alle_fenster', 'on') %}
            Offen
          {% else %}
            Geschlossen
          {% endif %}
        entity_id: input_boolean.status_alle_fenster

Und dann wieder folgendes über den card mod

card_mod:
  style:
    ha-tile-info$: |
      .secondary:after {
        visibility: visible;
        content: " - {{ states('sensor.status_sensor') | string }} ";
      }

Das löst aber immer noch nicht das Problem die Farbänderung mit der Änderung der Darstellung des Zustandes zu kombinieren :smiley:

4

Das Problem mit dem Status bzw. dessen angezeigtem Wert habe ich mal mit einem
Template-Helfer gemacht:

{% if is_state("binary_sensor.bad_luften", "on") -%}
  Lüften
{%- else -%}
  OK
{%- endif %}

Edit: Da warst Du selber schneller :slightly_smiling_face:

5

Ich dachte schon ich wäre auf der gewonnen Seite aber das mit dem Template Sensor hat nun das Icon zerschossen. Vorher war bei an ein Häkchen zu sehen, bei aus ein Kreuz. Jetzt ist unabhängig vom Zustand folgendes zu sehen.

image

auch dieses Schema hat nicht funktioniert:

card_mod:
  style: |
    ha-card {
      {% if states(config.entity) | float > 60 %} 
        --card-mod-icon: mdi:sofa;
        --tile-color: green !important;
      {% else %}
        --card-mod-icon: mdi:door;
        --tile-color: red !important;
      {% endif %}
    }
6

Falls sich das Thema nicht zwischenzeitlich schon erledigt hat, könntest du die Kombination beider Styling-Optionen in card_mod wie folgt versuchen:

card_mod:
  style:
    ha-tile-info$: |
      .secondary:after {
        visibility: visible;
        content: " - {{ states('sensor.0xa4c1381c47d805ae_power') | round(0) }} W - {{ states('sensor.0xa4c1381c47d805ae_energy') | round(1) }} kWh";
      }
    .: |
      .icon {
        {% if is_state(config.entity, 'on') %}
          --tile-color: green;
        {% elif is_state(config.entity, 'off') %}
          --tile-color: grey;
        {% else %}  
          --tile-color: darkblue;
        {% endif %}  
      }
1 „Gefällt mir“
7

Hallo Alexsaas,
das ist die Lösung. Ich bastel schon seit 2h an dem Mist rum.
Ich habe versucht in der MR-Climate Card Iconfarbe und Hintergrundfarbe anzupassen.
Hier mein (Dein) Code-Snippet:

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: lightgrey !important;
      }
    .: |
      ha-state-icon {
      color: green;
      }

Herzlichen Dank.

8

Prima, freut mich das ich ansatzweise helfen konnte und du es hinbekommen hast. :+1:t2: