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

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 
Über die Helfer kannst du kein icon beeinflussen.
So ganz kann ich dem nicht folgen. Nochmal ganz von vorne:
-
Ich habe die Entität sensor.fordpass_elvehcharging, diese hat unter anderem das Attribut ‘Plug Status’ mit den Werten ‘CONNECTED’ oder ‘NOT CONNECTED’.
-
Ich habe den Helfer Kuga_Angeschlossen welcher das Attribut von s.o. widerspiegelt.
-
Ein “icon: mdi:car-off” funktioniert und das Icon wird angezeigt.
-
Ü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.

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)