I have the following code:
type: custom:button-card
entity: switch.wb_ventil_fb
icon: mdi:heating-coil
aspect_ratio: 1/1
name: null
state:
- value: "off"
color: var(--paper-item-icon-color)
- value: "on"
color: red
styles:
name:
- display: none
custom_fields:
window:
- color: |
[[[
if (states['input_boolean.wb_thermostat_window_signal'].state == 'on')
return "#5dade2";
return "grey";
]]]
- position: absolute
- left: 8%
- top: 8%
- height: 28px
- width: 28px
valve:
- position: absolute
- color: |
[[[
if (states['switch.wb_ventil_fb'].state == 'on')
return "yellow";
return "grey";
]]]
- left: 64%
- top: 64%
- height: 28px
- width: 28px
custom_fields:
window: |
[[[
const icon = states['input_boolean.wb_thermostat_window_signal'].state == 'on'
? "mdi:window-open-variant" : "mdi:window-closed-variant"
return `<ha-icon
icon="${icon}"
</ha-icon>`
]]]
valve: |
[[[
const icon = states['switch.wb_ventil_fb'].state == 'on'
? "mdi:valve-open" : "mdi:valve-closed"
return `<ha-icon
icon="${icon}"
</ha-icon>`
]]]
layout_options:
grid_columns: 1
grid_rows: auto
What I am trying to do now is getting rid of the redundant hardcoded entity ids.
I’d like to have one or more variables or constants that will be set on top and to be used in the code as a replacement for example for:
switch.wb_ventil_fb
input_boolean.wb_thermostat_window_signal
I am not quite sure how this whole card definition works. It is coded as YAML and with this [[]] somehow you can inject JS code?!
I was able to define and use a variable inside one JS block but it seems that the same value is not present in the other blocks.
Hope one can help. Thanks.