Sorry, working with a translator as I don’t speak good English.
The with state_Display can not work in my opinion, because as sensor_4 the value on or off is output.
My question was whether I can display the German designation Aktuell or Verfügbar instead of on or off.
Greetings
Moss
sure it can, thats the whole idea of state_display, and why I asked Romrider to introduce it in the frist place …
did you try the template in that linked issue?
show_state: true
state_display: >
[[[ return (entity.state === 'on') ? 'Verfügbar' : 'Aktuell'; ]]]
Yes, I tried but could not get it to work.
The one who designed the template for this button card worked with variables, but state_Display refers to the entity_id or do I understand it wrong?
Thanks for your patience
here is my code
type: custom:button-cardentity: switch.akku_ladestationvariables: var_name: Akku-Ladestation var_label: Shelly Plug S var_double_tap_entity: sensor.akku_ladestation_power var_sensor_name: akku_ladestationshow_label: trueshow_entity_picture: trueentity_picture: /local/images/shelly/shelly-plug-s.pngname: '[[[ return variables.var_name ]]]'label: '[[[ return variables.var_label ]]]'tap_action: action: toggledouble_tap_action: action: more-info entity: '[[[ return variables.var_double_tap_entity ]]]'hold_action: action: nonecustom_fields: sensor_label_1: '[[[ return "Leistung:" ]]]' sensor_1: >- [[[ return `${states[ 'sensor.' + variables.var_sensor_name + '_power' ].state} W` ]]] sensor_label_2: '[[[ return "Verbrauch:" ]]]' sensor_2: >- [[[ return `${Math.round(states[ 'sensor.' + variables.var_sensor_name + '_energy' ].state)} kWh` ]]] sensor_label_3: '[[[ return "Temperatur:" ]]]' sensor_3: >- [[[ return `${Math.round(states[ 'sensor.' + variables.var_sensor_name + '_device_temperature' ].state)} %C2%B0C` ]]] sensor_label_4: '[[[ return "Firmware:" ]]]' sensor_4: >- [[[ return `${states[ 'update.' + variables.var_sensor_name + '_firmware_update' ].state}` ]]]styles: card: - padding: 5px 15px - background: linear-gradient(rgba(255,255,255,0.1) 25%, rgba(0,0,20,0.3)50%) - border-radius: 15px - border: solid 3px - border-color: > [[[ return states['switch.akku_ladestation'].state == 'on' ?%20'green'%20:%20%20%20%20%20%20%20%20'red';%20]]]%20%20%20%20-%20color:%20ivory%20%20name:%20%20%20%20-%20text-transform:%20uppercase%20%20%20%20-%20color:%20var(--contrast20)%20%20%20%20-%20font-weight:%20bold%20%20%20%20-%20font-size:%2080%%20%20%20%20-%20padding:%2015px%200px%200px%200px%20%20label:%20%20%20%20-%20color:%20var(--contrast20)%20%20%20%20-%20justify-self:%20middle%20%20%20%20-%20font-weight:%20bold%20%20%20%20-%20padding:%205px%200px%200px%200px%20%20img_cell:%20%20%20%20-%20align-items:%20middle%20%20%20%20-%20padding:%205px%200px%200px%200px%20%20grid:%20%20%20%20-%20grid-template-areas:%20%3E-%20%20%20%20%20%20%20%20%22n%20n%22%20%22i%20i%22%20%22l%20l%22%20%22sensor_label_1%20sensor_1%22%20%22sensor_label_2%20sensor_2%22%20%20%20%20%20%20%20%20%22sensor_label_3%20sensor_3%22%20%22sensor_label_4%20sensor_4%22%20%20%20%20-%20grid-template-rows:%20%3E-%20%20%20%20%20%20%20%20min-content%201fr%20min-content%20min-content%20min-content%20min-content%20%20%20%20%20%20%20%20min-content%20%20custom_fields:%20%20%20%20sensor_label_1:%20%20%20%20%20%20-%20justify-self:%20start%20%20%20%20%20%20-%20font-size:%2013px%20%20%20%20%20%20-%20color:%20var(--contrast20)%20%20%20%20%20%20-%20padding:%2015px%200px%200px%200px%20%20%20%20sensor_1:%20%20%20%20%20%20-%20justify-self:%20end%20%20%20%20%20%20-%20font-size:%2013px%20%20%20%20%20%20-%20color:%20var(--contrast20)%20%20%20%20%20%20-%20padding:%2015px%200px%200px%200px%20%20%20%20sensor_label_2:%20%20%20%20%20%20-%20justify-self:%20start%20%20%20%20%20%20-%20font-size:%2013px%20%20%20%20%20%20-%20color:%20var(--contrast20)%20%20%20%20%20%20-%20padding:%205px%200px%200px%200px%20%20%20%20sensor_2:%20%20%20%20%20%20-%20justify-self:%20end%20%20%20%20%20%20-%20font-size:%2013px%20%20%20%20%20%20-%20color:%20var(--contrast20)%20%20%20%20%20%20-%20padding:%205px%200px%200px%200px%20%20%20%20sensor_label_3:%20%20%20%20%20%20-%20justify-self:%20start%20%20%20%20%20%20-%20font-size:%2013px%20%20%20%20%20%20-%20color:%20var(--contrast20)%20%20%20%20%20%20-%20padding:%205px%200px%200px%200px%20%20%20%20sensor_3:%20%20%20%20%20%20-%20justify-self:%20end%20%20%20%20%20%20-%20font-size:%2013px%20%20%20%20%20%20-%20color:%20var(--contrast20)%20%20%20%20%20%20-%20padding:%205px%200px%200px%200px%20%20%20%20sensor_label_4:%20%20%20%20%20%20-%20justify-self:%20start%20%20%20%20%20%20-%20font-size:%2013px%20%20%20%20%20%20-%20color:%20var(--contrast20)%20%20%20%20%20%20-%20padding:%205px%200px%200px%200px%20%20%20%20sensor_4:%20%20%20%20%20%20-%20justify-self:%20end%20%20%20%20%20%20-%20font-size:%2013px%20%20%20%20%20%20-%20color:%20var(--contrast20)%20%20%20%20%20%20-%20padding:%205px%200px%200px%200px
in the case of my template above it refers to the entity of the button card, and its state.
you can make it refer to any other entity in your whole config (hard code the entity), or to any of these variables without any problem.
Even nest them:
state_display: >
[[[ return states[variables.id].state === 'off' ? 'Uit'
: entity.state === 'off' ? 'Geen' : 'Beweging'; ]]]
I cant read your config, because something must have gone wrong in the post
think it is sensor_4 ?
Sorry for the delay, I was on the road for work.
Thanks to your help I got it done, thanks for your support.
Have a nice evening
Moss
sensor_4: >
[[[ return states['update.' + variables.var_sensor_name +
'_firmware_update'].state === 'off' ? 'Aktuell' : 'Verfügbar'; ]]]
I’ve cleaned that up a bit for you, and gave the fields more descriptive names, shortened them, and, important, added javascript delimiters on all of the templates.
since you still hardcode the double-tap entity, I take it you dont have a naming convention on all of them? otherwise this would be a very nice spot to also use the variable construction.
variables:
double_tap_entity: >
[[[ return 'sensor.' + variables.id + '_power'; ]]]
that way you can move all of this inside a template ‘shelly_plug’ and in the dashboard only use the 1 single config like
type: custom:button-card
entity: switch.akku_ladestation
template: shelly_plug
for all plugs you have. Personally, I would change the name field too, because now they are all named identically…
type: custom:button-card
entity: switch.akku_ladestation
name: Akku-Ladestation
label: Shelly Plug S
entity_picture: /local/images/shelly/shelly-plug-s.png
variables:
double_tap_entity: sensor.akku_ladestation_power
id: akku_ladestation
show_label: true
show_entity_picture: true
tap_action:
action: toggle
double_tap_action:
action: more-info
entity: '[[[ return variables.double_tap_entity; ]]]'
hold_action:
action: none
custom_fields:
label_leistung: >
[[[ return 'Leistung: '; ]]]
leistung: >
[[[ return `${states[ 'sensor.' + variables.id + '_power'].state} W`; ]]]
label_verbrauch: >
[[[ return 'Verbrauch: '; ]]]
verbrauch: >-
[[[ return `${Math.round(states[ 'sensor.' + variables.id + '_energy'].state)} kWh`; ]]]
label_temp: >
[[[ return 'Temperatur: '; ]]]
temp: >
[[[ return `${Math.round(states[ 'sensor.' + variables.id +
'_device_temperature' ].state)}`; ]]]
label_fw: >
[[[ return 'Firmware: '; ]]]
fw: >
[[[ return `${states[ 'update.' + variables.id + '_firmware_update' ].state}`; ]]]
but you can make it even simpler by doing away with those label variables, and simply put that inside the actual variable. like is done in eg this cpu button. They are just plain strings (and not variable…) so can be used like:
custom_fields:
temp: >
[[[ return `<ha-icon icon=mdi:thermometer
<span style='width:15px; color: var(--state-color);'> </ha-icon>
${entity.state}°C</span>`; ]]]
cpu: >
[[[ return `<ha-icon icon=mdi:server style='width:12px;height:12px;'> </ha-icon>
Cpu: <span style='color: var(--text-color-sensor);'>
${states['sensor.processor_use'].state}%</span>`; ]]]
ram: >
[[[ return `<ha-icon icon=mdi:memory style='width:12px;height:12px;'></ha-icon>
Ram: <span style='color:var(--text-color-sensor);'>
${states['sensor.memory_use_percent'].state}%</span>`; ]]]
disk: >
[[[ return `<ha-icon icon=mdi:harddisk style='width:12px;height:12px;'></ha-icon>
Disk: <span style='color:var(--text-color-sensor);'>
${states['sensor.disk_use_percent_home'].state}%</span>`; ]]]
Hello Marius, thanks again for your help and the time you invest in solving my problem. I don’t take it for granted and I think it’s just great.
Greetings
Moss
Anyone have any insight here? I’ve put empty buttons on the left as a temporary solution, but I’d love to figure out how to get the whole horizontal stack to stretch the width of the button with each icon centered, as I don’t want to have to manually enter sizes and empty buttons in other views where I have a different number of buttons if I don’t have to.
Can you share the full code of this card…
Thanks a lot!
It is a mix of a lot of different resources I’ve found in various places, so I’m sure it could be cleaner and more efficient, but here is the code I have right now. I’ve added some blank button cards into the navigation button rows to get a closer to centered look for now, but I’d still really love to find a way to get that to happen automatically so that I can reuse that template a bit more effectively.
Full YAML for dashboard view
- title: Mobile Home
path: mobile-home
type: custom:grid-layout
layout:
grid-template-columns: auto 400px auto
grid-template-rows: auto
grid-template-areas: |
"Gutter1 A Gutter2"
"Gutter1 B Gutter2"
"Gutter1 C Gutter2"
"Gutter1 D Gutter2"
background: center / cover no-repeat white fixed
badges: []
cards:
- type: custom:button-card
template: container
name: Speakers
show_name: false
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- type: custom:button-card
show_icon: false
show_name: false
show_state: false
size: 50%
tap_action:
action: none
hold_action:
action: none
styles:
card:
- height: 60px
- width: 80px
- border-radius: 100%
- align-self: left
- background: transparent
- type: custom:button-card
entity: input_boolean.sonos_playing_status
name: Sonos
icon: mdi:sofa
show_icon: true
show_name: false
show_state: false
size: 50%
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- height: 60px
- width: 60px
- border-radius: 100%
- background-color: rgb(254, 254, 254, 1)
- border: 1px solid rgb(0, 0, 0, 0.5)
- box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15)
- align-self: middle
icon:
- color: rgb(90, 153,92,1)
state:
- value: 'on'
styles:
card:
- box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.35)
- border: 1px solid rgb(0, 167, 11)
- type: custom:button-card
entity: input_boolean.everywhere_playing_status
name: Everywhere
show_icon: true
show_name: false
show_state: false
size: 50%
icon: mdi:home
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- height: 60px
- width: 60px
- border-radius: 100%
- background-color: rgb(254, 254, 254, 1)
- border: 1px solid rgb(0, 0, 0, 0.5)
- box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15)
- align-self: middle
icon:
- color: rgb(255, 202, 55, 1)
state:
- value: 'on'
styles:
card:
- box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.35)
- border: 1px solid rgb(255, 202, 55, 1)
- type: custom:button-card
entity: input_boolean.bathroom_playing_status
name: Bathroom
show_icon: true
show_name: false
show_state: false
icon: mdi:bathtub
size: 50%
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- height: 60px
- width: 60px
- border-radius: 100%
- background-color: rgb(254, 254, 254, 1)
- border: 1px solid rgb(0, 0, 0, 0.5)
- box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15)
- align-self: middle
icon:
- color: rgb(65, 106, 154, 1)
state:
- value: 'on'
styles:
card:
- box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.35)
- border: 1px solid rgb(65, 106, 154, 1)
style: |
ha-card {
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.15)
border-radius: 50%
}
view_layout:
grid-area: A
- type: custom:button-card
entity: media_player.spotify_steph_tanner
show_entity_picture: true
show_name: false
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: '"info"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
card:
- background: none
- padding: 0
- position: relative
- '--mdc-ripple-press-opacity': 0
img_cell:
- position: absolute
icon:
- width: 150%
- opacity: var(--color-tint)
- '-webkit-filter': blur(20px)
- '-moz-filter': blur(20px)
- '-o-filter': blur(20px)
- '-ms-filter': blur(20px)
- filter: blur(20px)
custom_fields:
info:
card:
type: custom:button-card
entity: media_player.spotify_steph_tanner
show_entity_picture: true
name: |
[[[
if (states['media_player.spotify_steph_tanner'].attributes.media_title)
return states['media_player.spotify_steph_tanner'].attributes.media_title;
else
return "Nothing is playing";
]]]
label: |
[[[
if (states['media_player.spotify_steph_tanner'].attributes.media_artist)
return states['media_player.spotify_steph_tanner'].attributes.media_artist;
else
return "";
]]]
show_label: true
show_icon: true
styles:
grid:
- grid-template-areas: '"i gutter n" "i gutter l"'
- grid-template-columns: min-content 24px 1fr
- grid-template-rows: min-content
card:
- background: none
- border-radius: 0
- padding: 24px
- '--mdc-ripple-press-opacity': 0
img_cell:
- height: 80px
- width: 80px
- border-radius: 16px
icon:
- height: 100%
- width: 100%
name:
- font-size: 16px
- color: var(--contrast20)
- width: 100%
- text-align: left
- align-self: end
label:
- font-size: 12px
- color: var(--contrast20)
- opacity: 0.5
- width: 100%
- text-align: left
- align-self: start
custom_fields:
image:
- '--mdc-ripple-press-opacity': 0.5
view_layout:
grid-area: B
- type: entity-filter
entities:
- type: custom:mini-media-player
entity: media_player.living_room_sonos
group: true
artwork: none
hide:
controls: true
power: true
source: true
icon_state: false
progress: true
name: Sonos
icon: mdi:speaker
volume_step: '10'
- type: custom:mini-media-player
entity: media_player.living_room_echo
name: Living Room
group: true
source: icon
info: mdi:sofa
artwork: none
hide:
controls: true
power: true
source: true
icon_state: false
progress: true
icon: mdi:sofa
volume_step: '10'
- type: custom:mini-media-player
entity: media_player.bathroom_dot
group: true
artwork: none
hide:
controls: true
power: true
source: true
icon_state: false
progress: true
name: Bathroom
icon: mdi:shower
volume_step: '10'
- type: custom:mini-media-player
entity: media_player.steffie
group: true
artwork: none
hide:
controls: true
power: true
source: true
icon_state: false
progress: true
name: Steffie
icon: mdi:face-man
volume_step: '10'
- type: custom:mini-media-player
entity: media_player.laura
group: true
artwork: none
hide:
controls: true
power: true
source: true
icon_state: false
progress: true
name: Laura
icon: mdi:face-woman-shimmer
volume_step: '10'
- type: custom:mini-media-player
entity: media_player.steph_s_2nd_echo_dot
group: true
artwork: none
hide:
controls: true
power: true
source: true
icon_state: false
progress: true
name: Bullshit Room
icon: mdi:baguette
volume_step: '10'
state_color: true
show_header_toggle: false
state_filter:
- playing
card_mod:
style: |
ha-card {
--ha-card-background: color: rgb(220, 220, 220);
}
view_layout:
grid-area: D
- type: custom:button-card
template: container
name: controls
show_name: false
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: null
name: blank
show_icon: false
show_name: false
tap_action:
action: none
service: none
styles:
card:
- height: 60px
- width: 30px
- background: transparent
- type: custom:button-card
entity: null
name: blank
show_icon: false
show_name: false
tap_action:
action: none
service: none
styles:
card:
- height: 60px
- width: 40px
- background: transparent
- type: custom:button-card
entity: media_player.spotify_steph_tanner
name: Previous
size: 75%
icon: mdi:skip-previous-circle
show_icon: true
show_name: false
tap_action:
action: call-service
service: script.sonos_previous
styles:
card:
- height: 60px
- width: 60px
- type: custom:button-card
entity: media_player.spotify_steph_tanner
name: Play/Pause
show_icon: true
show_name: false
size: 75%
tap_action:
action: call-service
service: script.sonos_play_pause
state:
- value: playing
icon: mdi:pause-circle
- value: paused
icon: mdi:play-circle
- value: idle
icon: mdi:play-circle
styles:
card:
- height: 60px
- width: 60px
- type: custom:button-card
entity: media_player.spotify_steph_tanner
name: Next
icon: mdi:skip-next-circle
show_icon: true
show_name: false
tap_action:
action: call-service
service: script.sonos_next
size: 75%
styles:
card:
- height: 60px
- width: 60px
view_layout:
grid-area: C
Container Template
button_card_templates:
container:
color_type: label-card
color: rgb(220, 220, 220)
styles:
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.1em
- width: 100%
grid:
- grid-template-areas: '"buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- margin: 0
- padding: 0.3em
Just realized I forgot to update the background color for the music controls to be transparent after I changed some colors around. So the music controls code is actually:
type: custom:button-card
template: container
name: controls
show_name: false
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: null
name: blank
show_icon: false
show_name: false
tap_action:
action: none
service: none
styles:
card:
- height: 60px
- width: 30px
- background: transparent
- type: custom:button-card
entity: null
name: blank
show_icon: false
show_name: false
tap_action:
action: none
service: none
styles:
card:
- height: 60px
- width: 40px
- background: transparent
- type: custom:button-card
entity: media_player.spotify_steph_tanner
name: Previous
size: 75%
icon: mdi:skip-previous-circle
show_icon: true
show_name: false
tap_action:
action: call-service
service: script.sonos_previous
styles:
card:
- height: 60px
- width: 60px
- background: transparent
- type: custom:button-card
entity: media_player.spotify_steph_tanner
name: Play/Pause
show_icon: true
show_name: false
size: 75%
tap_action:
action: call-service
service: script.sonos_play_pause
state:
- value: playing
icon: mdi:pause-circle
- value: paused
icon: mdi:play-circle
- value: idle
icon: mdi:play-circle
styles:
card:
- height: 60px
- width: 60px
- background: transparent
- type: custom:button-card
entity: media_player.spotify_steph_tanner
name: Next
icon: mdi:skip-next-circle
show_icon: true
show_name: false
tap_action:
action: call-service
service: script.sonos_next
size: 75%
styles:
card:
- height: 60px
- width: 60px
- background: transparent
view_layout:
grid-area: C
Hello all,
I’ve been having a lot of fun with the custom button card as of late. One of the things I want to do is make the fan icon in the top right corner rotate when turned on. Does anyone know how to do this?
Here is the code for this card:
type: custom:button-card
entity: switch.rack_lights
show_state: true
size: 60px
icon: mdi:nas
hold_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.rack_fan
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.more_info
data:
entity: sensor.rackth_715d_temperature
styles:
custom_fields:
fan:
- position: absolute
- top: 10%
- right: 2%
- font-weight: bold
- font-size: 15px
- color: '[[[ if (states["switch.rack_fan"].state == "on") return "orange"; ]]]'
temp:
- position: absolute
- top: 10%
- left: 2%
- font-weight: bold
- font-size: 15px
- color: >-
[[[ if (states["sensor.rackth_715d_temperature"].state >= 90) return
"red"; ]]]
custom_fields:
temp: |
[[[
return "TMP: " + Math.round(states['sensor.rackth_715d_temperature'].state)+"°"
]]]
fan: |
[[[
return `<ha-icon
icon="mdi:fan"
style="width: 20px; height: 20px; color: deepskyblue;">
</ha-icon>Fan: ${states['switch.rack_fan'].state}`
]]]
hi.
i,m trying to change a color of an icon by searching in an entity state for an part of an string.
basically i wanna do this:
{% if 'cozinha' in states('sensor.nodered_9168a1c43ee08d1f') %}
green
{% else %}
red
{% endif %}
but in the format that button card accept.
I have this:
styles:
card:
- height: 50px
- width: 60px
- opacity: 0.9
- padding: 1px 5px
icon:
- color: |
[[[
if (states['sensor.nodered_9168a1c43ee08d1f'].state = 'cozinha' )
return 'green';
return 'gray';
]]]
but is not the same , i just want to match one part of the state, but really dont know how to reach there.
Could someone be so kind and helpful as to give me an idea as to why the entity_picture logic in the second button doesnt work.
Im not a Jinja Ninja so I pretty much teach myself based on what I can find within these forums and so far I havent been able to find an example relevant to how an entity_picture is used.
- type: custom:button-card
entity_picture: /local/icons/cyan/solenoid_on.png
aspect_ratio: 4/3
color_type: icon
hold_action:
action: none
layout: vertical
show_entity_picture: true
show_icon: false
show_label: false
show_name: false
show_state: false
styles:
card:
- border-radius: 2px
- border: solid 1px var(--primary-color)
- box-shadow: none
- padding: 6px 6px
- margin: 0px 0px
entity_picture:
- width: 100%
- height: 100%
- object-fit: contain
tap_action:
action: call-service
- type: custom:button-card
entity_picture: >
[[[
if ({{ states( 'input_boolean.fv1_solenoid') }} == 'on')
return "/local/icons/cyan/solenoid_on.png") ;
else
return "/local/icons/cyan/solenoid_off.png") ;
]]]
aspect_ratio: 4/3
color_type: icon
hold_action:
action: none
layout: vertical
show_entity_picture: true
show_icon: false
show_label: false
show_name: false
show_state: false
styles:
card:
- border-radius: 2px
- border: solid 1px var(--primary-color)
- box-shadow: none
- padding: 6px 6px
- margin: 0px 0px
entity_picture:
- width: 100%
- height: 100%
- object-fit: contain
tap_action:
action: call-service
yields this
IGNORE - Found this Buttons on Mobile App not displayed, just an error message · Issue #680 · custom-cards/button-card · GitHub
Leaving the post below for future reference.
Hoping someone can help. I am having trouble with templates specifically in the HA mobile app. These used to work before but I was reorganising/redesigning my dashboard and something broke it.
I have several button card templates defined at the top of my dashboard raw config and these are used in some views. Everything looks fine on the browser (even the mobile browser) but in the app any button card that uses template doesn’t render and shows an error “Cannot read properties of null (reading ‘config’)”
Like this.
type: custom:button-card
entity: input_boolean.fv1_solenoid
entity_picture: |
[[[
return entity.state == "on"
? "/local/icons/cyan/solenoid_on.png"
: "/local/icons/cyan/solenoid_off.png"
]]]
aspect_ratio: 4/3
color_type: icon
hold_action:
action: none
layout: vertical
show_entity_picture: true
show_icon: false
show_label: false
show_name: false
show_state: false
styles:
card:
- border-radius: 2px
- border: solid 1px var(--primary-color)
- box-shadow: none
- padding: 6px 6px
- margin: 0px 0px
entity_picture:
- width: 100%
- height: 100%
- object-fit: contain
tap_action:
action: call-service
Try this (note the double ==)
styles:
card:
- height: 50px
- width: 60px
- opacity: 0.9
- padding: 1px 5px
icon:
- color: |
[[[
if (states['sensor.nodered_9168a1c43ee08d1f'].state == 'cozinha' )
return 'green';
return 'gray';
]]]
Can anyone give me an idea as to what Im missing here???
- type: custom:button-card
entity: climate.ac_1
name: AUTO on/off
# template: ac_button_auto
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
hvac_mode: cool
target:
entity_id: climate.ac_1
doesnt change the climate control to cool. Comes back with a “failed to call service climate/set_hvac_mode. Extra keys not allowed @ data:target”
Doesn,t work. I just put that example because i really dont know what is the sintax for what i want.
Example: i want to search for the substring “cozinha” inside the state off an sensor that have a larger string .
This is the sensor and one possible state.
I thing that the target is before the service_data
