State in ein Icon umwandeln

Hallo,
ich habe mir mit einer CUSTOM:BUTTON-CARD und dem Grid, folgendes zusammengebastelt:
image

Dies ist die Anzeige von meinem Fahrzeug in der Garage: Lademenge der Batterie, Türen abgeschlossen und ob das Fahrzeug angeschlossen ist. Natürlich möchte ich dort als Letztes nicht “CONNECTED” stehen haben, sondern ein entsprechendes Icon. Ich hatte mir das ungefähr so gedacht:

          type: custom:button-card
          entity: sensor.kuga_angeschlossen
          show_label: true
          show_name: false
          show_icon: true
          tap_action:
            action: none
          label: |
            [[[
              return `${states['sensor.kuga_angeschlossen'].state}`;
            ]]]
          icon: |
            {% if is_state('sensor.kuga_angeschlossen', 'CONNECTED') %}
              mdi:mdi:car-electric-outline
            {% else %}
              mdi:car-off
            {% endif %}          

Nur irgendwie funktioniert das mit dem Icon noch nicht und ich habe gerade keine Ahnung warum. Das Label lasse ich mir gerade nur zu Testzwecken anzeigen, damit ich sehe ob auch was im State steht. Das kommt später weg.

Die gesamte Button-Card sieht so aus:

  - type: custom:button-card
    entity: sensor.kuga
    show_label: true
    show_name: false
    style:
      top: 85%
      left: 65%
    label: |
      [[[
        return `${states['sensor.kuga'].state}` + " %";
      ]]]
    styles:
      card:
        - background-color: '#BBB'
        - border-radius: 40px
      label:
        - font-size: 0.75em
        - font-weight: bold
        - text-align: left
        - color: black
      grid:
        - grid-template-areas: '"i t h" "l t h"'
        - grid-template-columns: 60px 60px 60px
    custom_fields:
      t:
        card:
          type: custom:button-card
          entity: lock.fordpass_doorlock
          show_name: false
          show_state: false
          styles:
            card:
              - border: solid 0px grey
              - background-color: '#BBB'
            icon:
              - width: 60%
      h:
        card:
          type: custom:button-card
          entity: sensor.kuga_angeschlossen
          show_label: true
          show_name: false
          show_icon: true
          tap_action:
            action: none
          label: |
            [[[
              return `${states['sensor.kuga_angeschlossen'].state}`;
            ]]]
          icon: |
            {% if is_state('sensor.kuga_angeschlossen', 'CONNECTED') %}
              mdi:mdi:car-electric-outline
            {% else %}
              mdi:car-off
            {% endif %}          
          styles:
            label:
              - font-size: 0.5em
            icon:
              - color: grey
            card:
              - border: solid 0px grey
              - background-color: '#BBB'

Ich mache dies über eine Button-Card, da die Anzeige auf meinem Floorplan (type: picture-elements) angezeigt werden soll. Wenn ich mit dem Ansatz der Button-Card falsch sein sollte, dann habe ich immer ein offenes Ohr für neue Ideen.

Danke für eure Ideen
Christian

Du hast direkt nach der if

stehen.
hier dürfte ein mdi: zu viel sein

Tatsache. Danke. Schnell gelöscht.
Das war es aber nicht. Das Icon wird immer noch nicht angezeigt.

Mach einen Template Sensor und binde den in die Card ein

Inspiration:

- sensor:
  - name: "TH_Timer_Switch"
    unique_id: "th_timer_switch"
    state: >
      {% if is_state("input_boolean.th_2mintimer", "on") %}
        Aktiv
      {% elif is_state("input_boolean.th_2mintimer", "off") %}
        Inaktiv
      {% else %}
        Inaktiv
      {% endif %}
    icon: >
      {% if is_state("input_boolean.th_2mintimer", "on") %}
        mdi:timer-check
      {% elif is_state("input_boolean.th_2mintimer", "off") %}
        mdi:timer-off-outline
      {% else %}
        mdi:lightbulb-question
      {% endif %}

Ich seh grad noch was anderes:
mach mal das

icon: |

zu das

icon: >

Hallo,
die Änderung von “|” zu “>” hat leider nichts gebracht.

Der “sensor.kuga_angeschlossen” ist schon ein Template-Sensor:

Leider sehe ich immer noch kein Icon :slightly_frowning_face:

Über die Helfer kannst du kein icon beeinflussen.

So ganz kann ich dem nicht folgen. Nochmal ganz von vorne:

  1. Ich habe die Entität sensor.fordpass_elvehcharging, diese hat unter anderem das Attribut ‘Plug Status’ mit den Werten ‘CONNECTED’ oder ‘NOT CONNECTED’.

  2. Ich habe den Helfer Kuga_Angeschlossen welcher das Attribut von s.o. widerspiegelt.

  3. Ein “icon: mdi:car-off” funktioniert und das Icon wird angezeigt.

  4. Über eine IF-Abfrage möchte ich das Icon für die custom:button-card beeinflussen:

          icon: |
            {% if is_state('sensor.kuga_angeschlossen', 'CONNECTED') %}
              mdi:car-electric-outline
            {% else %}
              mdi:car-off
            {% endif %} 

Selbst wenn das mit den Helfern und allem nicht funktionieren sollte, so müsste doch die IF Abfrage in den ELSE Zweig fallen und mir zumindest immer dieses Icon (mdi:car-off) anzeigen.

Aber selbst wenn ich die IF-Abfrage ganz herunter breche auf ein 1 == 1, dann funktioniert es immer noch nicht:

          icon: |
            {% if (1, 1) %}
              mdi:car-electric-outline
            {% else %}
              mdi:car-off
            {% endif %}

Es wird einfach überhaupt kein Icon angezeigt. Weiß da jemand Rat?

Ich habe ein bisschen gesucht und hier etwas gefunden:
Auszug:

type: custom:button-card
show_entity_picture: true
state:
  - value: 'off'
    icon: mdi:garage-open
    color: red
  - value: 'on'
    icon: mdi:garage-lock
    color: green
tap_action:
  action: toggle
entity: binary_sensor.shelly_shsw_1_e8db84d7180f_switch
show_state: false
show_label: true

Obs funktioniert müsstest du ausprobieren.

Füge mal diesen Code unter Entwicklerwerkzeuge → Template ein und schau was dir ausgegeben wird

            {% if is_state('sensor.kuga_angeschlossen', 'CONNECTED') %}
              mdi:mdi:car-electric-outline
            {% else %}
              mdi:car-off
            {% endif %}  

Wenn Du die Custom Button Karte verwenden tust, musst Du selbstverständlich auch die Syntax der Karte verwenden.
Die Dokumentation der jeweiligen Custom Karten, ist da in der Regel sehr hilfreich.

https://github.com/custom-cards/button-card

icon: |
  [[[ if (states['sensor.kuga_angeschlossen'].state == "CONNECTED")
  return "mdi:car-electric-outline";
  return "mdi:car-off";
  ]]]

Gruß
Osorkon

@Osorkon
Ja, na klar. Manchmal sieht man(n) den Wald vor lauter Bäumen nicht.
Jetzt funktioniert es.

Vielen Dank an Alle für eure Hilfe.

image

Hier nochmal der komplette Code (inklusive Farbwechsel je nach State), falls das vielleicht mal jemand braucht:

  - type: custom:button-card
    entity: sensor.kuga
    show_label: true
    show_name: false
    label: |
      [[[
        return `${states['sensor.kuga'].state}` + " %";
      ]]]
    styles:
      card:
        - background-color: rgba(100,100,100,.5)
        - border-radius: 40px
      label:
        - font-size: 0.75em
        - font-weight: bold
        - text-align: left
        - color: black
      grid:
        - grid-template-areas: '"i t h" "l t h"'
        - grid-template-columns: 60px 60px 60px
    custom_fields:
      t:
        card:
          type: custom:button-card
          entity: lock.fordpass_doorlock
          show_name: false
          show_state: false
          styles:
            card:
              - border: solid 0px grey
              - background-color: rgba(100,100,100,.5)
            icon:
              - width: 60%
      h:
        card:
          type: custom:button-card
          entity: sensor.kuga_angeschlossen
          show_name: false
          show_icon: true
          tap_action:
            action: none
          icon: |
            [[[ if (states['sensor.kuga_angeschlossen'].state == "CONNECTED")
            return "mdi:power-plug";
            return "mdi:power-plug-off";
            ]]]
          styles:
            icon:
              - width: 60%
              - color: >
                  [[[ if (states['sensor.kuga_angeschlossen'].state == "CONNECTED")
                  return "mediumseagreen";
                  return "red";
                  ]]]
            card:
              - border: solid 0px grey
              - background-color: rgba(100,100,100,.5)