Sure, what exactly are you interested in?
I started with the picture-elements card that michel72 posted in this topic.
Then I tweaked the cars range a little bit, to give it a more realistic range.
leaf_range_ac_realistic:
friendly_name: "Leaf Range AC real world"
icon_template: "mdi:speedometer"
unit_of_measurement: 'km'
value_template: "{{ (((states('sensor.leaf1stee_range_ac') | float) | multiply(0.8)) | round(0)) }}"
And I combined the current charge level with the last updated time within one sensor:
leaf_charge_and_last_updated:
friendly_name: "Laadniveau + tijd update"
value_template: "{{ states('sensor.leaf1stee_charge') }}% om {{ as_timestamp(state_attr('sensor.leaf1stee_charge', 'updated_on')) | timestamp_custom('%H:%M') }}"
I changed the picture to this one, because thats how my car looks like:
I put the cars data on the left side of the card and the charger data on the right side.
This is the whole picture-elements card:
elements:
- entity: binary_sensor.leaf1stee_charging_status
icon: 'mdi:ev-station'
style:
background-color: 'rgba(0, 0, 0, 0.3)'
bottom: 0
font-size: 16px
left: 0
line-height: 50px
padding: 0 8px
transform: initial
width: 100%
tap_action:
action: call-service
confirmation: true
service: script.leaf_charge
type: state-icon
- entity: sensor.leaf1stee_charge
icon: 'mdi:reload'
style:
bottom: 0
color: white
left: 38%
line-height: 32px
margin: 0px 0px -5px 0px
padding: 8px
transform: initial
tap_action:
action: call-service
confirmation: true
service: script.leaf_update
type: state-icon
- entity: switch.leaf1stee_climate_control
icon: 'mdi:fan'
style:
bottom: 0
color: white
line-height: 32px
margin: 5px 0px -5px 0px
padding: 8px
right: 0
transform: initial
tap_action:
action: toggle
confirmation: true
type: state-icon
- entity: binary_sensor.leaf1stee_plug_status
style:
'--paper-item-icon-color': null
left: 0
margin: 10px 10px
top: 0
type: state-icon
- entity: sensor.zappi_charge_mode
style:
font-size: 12px
color: null
line-height: 32px
margin: 17px 0px
pointer-events: none
right: 0
text-shadow: 'rgb(0, 0, 0, 0.2) 0px 0px 2px'
top: 0
transform: initial
type: state-label
- entity: sensor.zappi_evse
style:
font-size: 12px
color: null
line-height: 32px
margin: 1px 0px
pointer-events: none
right: 0
text-shadow: 'rgb(0, 0, 0, 0.2) 0px 0px 2px'
top: 0
transform: initial
type: state-label
- entity: sensor.leaf_charge_and_last_updated
style:
color: null
font-size: 12px
line-height: 32px
margin: 7px 15px
pointer-events: none
left: 0
text-shadow: 'rgb(0, 0, 0, 0.2) 0px 0px 2px'
top: 0
transform: initial
type: state-label
- entity: input_datetime.departure_datetime
style:
color: null
font-size: 12px
line-height: 32px
margin: '-15px 0px'
pointer-events: none
right: 0
text-shadow: 'rgb(0, 0, 0, 0.2) 0px 0px 2px'
top: 0
transform: initial
type: state-label
- entity: sensor.leaf_range_ac_realistic
style:
color: null
font-size: 12px
line-height: 32px
margin: '-10px 15px'
pointer-events: none
left: 0
text-shadow: 'rgb(0, 0, 0, 0.2) 0px 0px 2px'
top: 0
transform: initial
type: state-label
image: /local/images/car/nissan-leaf-gun-metallic-650x425-edit.png
type: picture-elements
The buttons outside the picture-elements card are all input_booleans for the Node Red automation, which turns my Zappi charger on and off, when I think is best for the battery pack and my wallet.