Iconfarbe ändern - CardMod

[Wszene]

Hallo Zusammen,

Ich bin gerade dabei meine Monitoringseite zu erstellen

Dazu soll auf der “Landingpage“ Karten als Navigation zu den Unterseiten erstellt werden

Soweit so gut

Jetzt nutze ich die Integration “Device Pulse“ um die Erreichbarkeit zu monitoren

Jetzt suche ich eine Möglichkeit das Icon der Karte je nach zustand des Pings einzufärben

Hier mal der momentane Code der Karte

type: vertical-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    entity: binary_sensor.node_ws_pve01_status
    show_state: true
    icon: mdi:server
    name: WS-PVE01
    tap_action:
      action: navigate
      navigation_path: /dashboard-tablet/ws-pve01
grid_options:
  columns: 6
  rows: auto

Hat da jemand eine Idee

Danke im Voraus

Gruß

Marcel

[jayjojayson]

Moin, über Card-Mod kannst du die Icon-Color und State-Color vom Text verändern. Anbei ein Beispiel. Damit solltest du dann die Farbe entsprechend deinen Wünschen setzen können.

type: vertical-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    entity: binary_sensor.node_ws_pve01_status
    show_state: true
    icon: mdi:server
    name: WS-PVE01
    tap_action:
      action: navigate
      navigation_path: /dashboard-tablet/ws-pve01
    card_mod:
      style: |
        ha-card {  
          --state-color: red !important;
        }   
        .state {
          color: {% if is_state(config.entity, 'off') %} red {% else %} green {% endif %} !important;
        } 
grid_options:
  columns: 6
  rows: auto

[Wszene]

@jayjojayson

Vielen Dank für deine schnelle Antwort

Aber wie muss es aussehen wenn die Farbe eine andere Entität beeinflussen soll

In meinem Fall eine von der Integration “Device Pulse“ diese sieht dann so aus

binary_sensor.ws_nas_ping

[jayjojayson]

Hi, die Frage habe ich dir doch eigentlich schon beantwortet. Schaue mal im Code im ersten Beispiel, das Template kannst du so natürlich auch auf das icon im Zusammenspiel mit anderen Sensoren verwenden, müsste dann so funktionieren:

type: vertical-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    entity: binary_sensor.node_ws_pve01_status
    show_state: true
    icon: mdi:server
    name: WS-PVE01
    tap_action:
      action: navigate
      navigation_path: /dashboard-tablet/ws-pve01
    card_mod:
      style: |
        ha-card {  
          --state-color: {% if is_state('binary_sensor.ws_nas_ping', 'off') %} red {% else %} green {% endif %};
        }   
        .state {
          color: {% if is_state('binary_sensor.ws_nas_ping', 'off') %} red {% else %} green {% endif %} !important;
        }
grid_options:
  columns: 6
  rows: auto

[Wszene]

irgend etwas mache ich falsch

bei mir funktioniert das nicht

das ist mein Code

type: vertical-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    entity: binary_sensor.node_ws_pve01_status
    show_state: true
    icon: mdi:server
    name: WS-PVE01
    tap_action:
      action: navigate
      navigation_path: /dashboard-tablet/ws-pve01
    card_mod:
      style: |
        ha-card {  
          --state-color: {% if is_state('binary_sensor.ws_nas_ping', 'Verbunden') %} green {% else %} red {% endif %};
        }   
        .state {
          color: {% if is_state('binary_sensor.ws_nas_ping', 'Verbunden') %} green {% else %} red {% endif %} !important;
        }
grid_options:
  columns: 6
  rows: auto

der State wir eingefärbt aber falsch

[sgtr]

Ist bei mir schon 'ne Weile her, dass ich sowas eingestellt habe, aber ich glaube, die Bubblecard hat mit dabei sehr geholfen.

Im Falle meiner Garage (shelly mit addon) sieht es so aus:

    show_icon: true
    conditional_icon:
      advanced_settings:
        color_true: green
        color_false: red
      icon_true: mdi:garage
      icon_false: mdi:garage-open
      conditions:
        - condition: state
          entity_id: binary_sensor.shelly1g3_34cdb07a17d4_input_100_input
          state: "off"

Vllt gibt das 'nen neuen Denkanstoß.

Gruß

[jayjojayson]

Ah ok, dann muss man das über eine Sensorabfrage im Template machen, dann kannst du den anderen Sensor abfragen und beliebig einfärben. Habe dir jetzt alle drei Werte gesetzt für Icon, Name und Secondary. Ich gehe davon aus, dass dein Sensor on/off liefert. Wenn nicht, muss das im Template neben der Farbe auch anpassen.

type: vertical-stack
cards:
  - type: button
    name: WS-PVE01
    entity: binary_sensor.23124ra7eo_android_auto
    show_name: true
    show_icon: true
    show_state: true
    icon: mdi:server
    tap_action:
      action: navigate
      navigation_path: /dashboard-tablet/ws-pve01
    card_mod:
      style: |
        ha-card {
          --state-icon-color: {% if is_state('binary_sensor.agip_eni_langenwahler_str_19_status', 'on') %} green {% else %} red {% endif %};
          color: {% if is_state('binary_sensor.agip_eni_langenwahler_str_19_status', 'on') %} orange {% else %} red {% endif %};
        }
        .state {
          color: {% if is_state('binary_sensor.agip_eni_langenwahler_str_19_status', 'on') %} blue {% else %} red {% endif %} !important;
        }
grid_options:
  columns: 6
  rows: auto

[Wszene]

Guten Morgen @jayjojayson

Vielen Dank für deine Geduld

Ich habe es jetzt hin bekommen

ich musste den Code wie folgt abändern

type: vertical-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    entity: binary_sensor.node_ws_pve01_status
    show_state: true
    icon: mdi:server
    name: WS-PVE01
    tap_action:
      action: navigate
      navigation_path: /dashboard-tablet/ws-pve01
    card_mod:
      style: |
        ha-card {
          --icon-primary-color: {% if is_state('binary_sensor.ws_pve01_ping', 'on') %} green {% else %} red {% endif %};
          #color: {% if is_state('binary_sensor.ws_pve01_ping', 'on') %} green {% else %} red {% endif %};
        }
        .state {
          #color: {% if is_state('binary_sensor.ws_pve01_ping', 'on') %} blue {% else %} red {% endif %} !important;
        }
grid_options:
  columns: 6
  rows: auto

Ich musste

--state-icon-color

mit

--icon-primary-color

ersetzten

Warum auch immer

Vielen Dank noch einmal für die Hilfe

Gruß

Marcel

[jayjojayson]

Na top, das es jetzt läuft, dass entscheidende war die wenn Abfrage im Template, damit die Farbe überhaupt geändert wird.