This is the result of a lot of play, trial and error with examples here on the forum. It works very well so I hope it can benefit others. I use a TP-Link HS110 and basic 433 temp sensor for this project to work. I can share code if someone needs it, my understanding of how things work is limited.
The advantage I find is that this layout allows me to integrate many sensors relatively neatly, its easy for other family members to understand, and I can (sort of) use it as a template. I have a similar menu to control home heating, ventilation, washer/dryer, etc.
Special thanks to those of you who have posted examples that can be used directly in the Hassio Dashboard Editor and Template editor.
type: 'custom:button-card'
icon: 'mdi:ev-station'
color: auto
size: 55%
show_state: false
name: |
[[[
return states["sensor.leaf_status"].state
]]]
show_label: true
show_name: true
tap_action:
action: navigate
navigation_path: '#p1'
haptic: selection
double_tap_action:
action: call-service
confirmation:
text: Start charging?
service: script.leaf_start_charge
haptic: selection
label: |
[[[
return 'Battery ' + states["sensor.leaf_charge"].state + '%'
]]]
styles:
icon:
- padding-left: 0px
- color: |
[[[
if (states['sensor.leaf_status'].state == 'Connected')
return "rgba(255,193,7)";
else if (states['sensor.leaf_status'].state == 'Charging')
return "rgba(255,193,7)";
else return "rgb(74,97,133)";
]]]
card:
- padding-left: 0px
- background: 'linear-gradient(rgba(50,50,50,0.3) 60%, rgba(50,50,50,0.1) 40%)'
- border-radius: 5px
- border: |
[[[
if (states['sensor.leaf_status'].state == 'Connected')
return "solid 2.5px rgba(218,249,254)";
else if (states['sensor.leaf_status'].state == 'Charging')
return "solid 2.5px rgba(0, 180, 255)";
else return "solid 1.5px rgba(50,50,50)";
]]]
- box-shadow: |
[[[
if (states['sensor.leaf_status'].state == 'Connected')
return "2px 4px 9px 4px rgba(60,158,203)";
else if (states['sensor.leaf_status'].state == 'Charging')
return "2px 4px 9px 4px rgba(0, 111, 255)";
else return "0px 0px 0px 0px rgba(50,50,50)";
]]]
- color: |
[[[
if (states['sensor.leaf_status'].state == 'Connected')
return "rgba(163, 214, 229)";
else if (states['sensor.leaf_status'].state == 'Charging')
return "rgba(0, 180, 255)";
else return "rgba(163, 214, 229)";
]]]
- text-shadow: |
[[[
if (states['sensor.leaf_status'].state == 'Connected')
return '0px 0px 5px rgba(0, 111, 255)';
else if (states['sensor.leaf_status'].state == 'Charging')
return '0px 0px 5px rgba(0, 111, 255)';
else return '0px 0px 5px rgba(0, 111, 255)';
]]]
name:
- justify-self: center
- font-weight: bold
- font-size: 12px
label:
- font-size: 12px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: center
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
entities:
- entity: binary_sensor.leaf_charging_status