Ended up solving it (partially) like this. The only issue now is I want to change the button color to on state dependent on the state of the switch triggered in my tap_action. Doable?
- type: custom:button-card
entity: sensor.laddbox
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.laddbox_mode
hold_action: !include popup/car.yaml
template:
- base_charge
aspect_ratio: 1/1
show_icon: false
show_name: false
show_state: false
show_label: false
styles:
grid:
- grid-template-areas: |
"LaddV LaddH"
"LaddV LaddH"
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr
- gap: 2%
card:
- padding: 5%
name:
- place-self: start
- margin-left: 10px
- text-transform: uppercase
- font-weight: 400
custom_fields:
LaddV:
card:
type: custom:button-card
entity: sensor.laddbox
template: charge_custom_fields
icon: false
size: 120%
entity_picture: >
[[[
const stateImages = {
'CHARGING_FINISHED': '/local/laddbox_green.png',
'CHARGING_CANCELLED': '/local/laddbox_green.png',
'CHARGING_PAUSED': '/local/laddbox_green.png',
'NOT_CONNECTED': '/local/laddbox_green.png',
'CONNECTED': '/local/laddbox_green.png',
'SEARCH_COMM': '/local/laddbox_green.png',
'CHARGING': '/local/laddbox_blue.png',
'RCD_FAULT': '/local/laddbox_red.png',
'OVERHEAT': '/local/laddbox_blue.png',
'CRITICAL_TEMPERATURE': '/local/laddbox_red.png',
'INITIALIZATION': '/local/laddbox_green.png',
'CABLE_FAULT': '/local/laddbox_red.png',
'LOCK_FAULT': '/local/laddbox_red.png',
'CONTACTOR_FAULT': '/local/laddbox_red.png',
'VENT_FAULT': '/local/laddbox_red.png',
'DC_ERROR': '/local/laddbox_red.png',
'DISABLED': '/local/laddbox_off.png',
'UNAVAILABLE': '/local/laddbox_blue.png',
'REMOTE_DISABLED': '/local/laddbox_blue.png',
'DC_HARDWARE': '/local/laddbox_red.png',
'CP_FAULT': '/local/laddbox_red.png',
'CP_SHORTED': '/local/laddbox_red.png'
// Add other states and their respective image paths here
};
const mainAttributes = states['sensor.laddbox'].attributes['mainCharger'];
console.log('Main Charger Attributes:', mainAttributes);
const mainStatus = mainAttributes ? mainAttributes['connector'] : null;
console.log('Main Charger Connector Status:', mainStatus);
return stateImages[mainStatus] || `/local/laddbox_${mainStatus === 'NOT_CONNECTED' ? 'off' : 'green'}.png`;
]]]
styles:
card:
- ... # Add styles for the card here
LaddH:
card:
type: custom:button-card
entity: sensor.laddbox
template: charge_custom_fields
icon: false
size: 120%
entity_picture: >
[[[
const stateImages = {
'CHARGING_FINISHED': '/local/laddbox_green.png',
'CHARGING_CANCELLED': '/local/laddbox_green.png',
'CHARGING_PAUSED': '/local/laddbox_green.png',
'NOT_CONNECTED': '/local/laddbox_green.png',
'CONNECTED': '/local/laddbox_green.png',
'SEARCH_COMM': '/local/laddbox_green.png',
'CHARGING': '/local/laddbox_blue.png',
'RCD_FAULT': '/local/laddbox_red.png',
'OVERHEAT': '/local/laddbox_blue.png',
'CRITICAL_TEMPERATURE': '/local/laddbox_red.png',
'INITIALIZATION': '/local/laddbox_green.png',
'CABLE_FAULT': '/local/laddbox_red.png',
'LOCK_FAULT': '/local/laddbox_red.png',
'CONTACTOR_FAULT': '/local/laddbox_red.png',
'VENT_FAULT': '/local/laddbox_red.png',
'DC_ERROR': '/local/laddbox_red.png',
'DISABLED': '/local/laddbox_off.png',
'UNAVAILABLE': '/local/laddbox_blue.png',
'REMOTE_DISABLED': '/local/laddbox_blue.png',
'DC_HARDWARE': '/local/laddbox_red.png',
'CP_FAULT': '/local/laddbox_red.png',
'CP_SHORTED': '/local/laddbox_red.png'
// Add other states and their respective image paths here
};
const twinAttributes = states['sensor.laddbox'].attributes['twinCharger'];
console.log('Twin Charger Attributes:', twinAttributes);
const twinStatus = twinAttributes ? twinAttributes['connector'] : null;
console.log('Twin Charger Connector Status:', twinStatus);
return stateImages[twinStatus] || `/local/laddbox_${twinStatus === 'NOT_CONNECTED' ? 'off' : 'green'}.png`;
]]]
styles:
card:
- ... # Add styles for the card here
´´´
