Hi All, for those of you in the UK using the Octopus Intelligent smart charging for your car I thought I would try and recreate the app into a lovelace panel. In this way I can have all details for my car and the octopus page all together in lovelace. Here is the code and pictures if anyone is interested to copy.
Screenshot from my mobile:
Pre-requisite you must have the Home Assistant Octopus Energy add-on installed through HACS.
Where i have put XXXX in all the sensors and yaml below you will need to replace this with your id in your sensors that are generated by the Home Assistant Octopus Energy Add on.
- Set up the following 3 helpers as template sensors:
- Helper 1 - sensor.octopus_smart_charge_slot_1
- Helper 2 - sensor.octopus_smart_charge_slot_2
- Helper 3 - sensor.octopus_smart_charge_slot_3
Code for each template is below:
Helper 1 Template code:
{{as_timestamp(state_attr('binary_sensor.octopus_energy_a_XXXXX_intelligent_dispatching','planned_dispatches')[0].start) | timestamp_custom('%I:%M %p')}} - {{ as_timestamp(state_attr('binary_sensor.octopus_energy_a_XXXXX_intelligent_dispatching','planned_dispatches')[0].end) | timestamp_custom('%I:%M %p')}}
Helper 2 Template code:
{{as_timestamp(state_attr('binary_sensor.octopus_energy_a_XXXXX_intelligent_dispatching','planned_dispatches')[1].start) | timestamp_custom('%I:%M %p')}} - {{ as_timestamp(state_attr('binary_sensor.octopus_energy_a_XXXXX_intelligent_dispatching','planned_dispatches')[1].end) | timestamp_custom('%I:%M %p')}}
Helper 3 Template code:
{{as_timestamp(state_attr('binary_sensor.octopus_energy_a_XXXXX_intelligent_dispatching','planned_dispatches')[2].start) | timestamp_custom('%I:%M %p')}} - {{ as_timestamp(state_attr('binary_sensor.octopus_energy_a_XXXXX_intelligent_dispatching','planned_dispatches')[2].end) | timestamp_custom('%I:%M %p')}}
- Upload the following 2 pictures to your /www/images/ directory in your home assistant config folder. They must be named as indicated above each picture.
- Now in any lovelace page you need to create 3 conditional picture elements cards.
My lovelace yaml is below. Please replace the XXXX in the sensors with your id from your Octopus Energy device/sensors.
Lovelace yaml
cards:
- type: conditional
conditions:
- condition: state
entity: >-
binary_sensor.octopus_energy_a_XXXX_intelligent_dispatching
state: 'on'
card:
type: picture-elements
elements:
- type: state-label
entity: sensor.octopus_smart_charge_slot_1
style:
top: 51.8%
left: 10%
font-size: 140%
transform: none
- type: state-label
entity: sensor.octopus_smart_charge_slot_2
style:
top: 57.1%
left: 10%
font-size: 140%
transform: none
- type: state-label
entity: sensor.octopus_smart_charge_slot_3
style:
top: 62.2%
left: 10%
font-size: 140%
transform: none
- type: state-label
entity: number.octopus_energy_a_XXXX_intelligent_charge_limit
style:
top: 85.6%
left: 5.9%
font-size: 300%
transform: none
- type: state-label
entity: time.octopus_energy_a_XXXX_intelligent_ready_time
style:
top: 85.6%
left: 53.3%
font-size: 300%
transform: none
- type: service-button
title: Bump Charge Now
service: switch.turn_on
entity: switch.octopus_energy_a_XXXX_intelligent_bump_charge
style:
top: 95.4%
left: 65.7%
font-size: 300%
font-style: underline
transform: none
image: /local/images/octopus_plugged_extended.png
- type: conditional
conditions:
- condition: state
entity: >-
binary_sensor.octopus_energy_a_XXXX_intelligent_dispatching
state: 'off'
card:
type: picture-elements
elements:
- type: state-label
entity: number.octopus_energy_a_XXXX_intelligent_charge_limit
style:
top: 78.6%
left: 5.9%
font-size: 300%
transform: none
- type: state-label
entity: time.octopus_energy_a_XXXX_intelligent_ready_time
style:
top: 78.6%
left: 53.6%
font-size: 300%
transform: none
- type: service-button
title: Bump Charge Now
service: switch.turn_on
entity: switch.octopus_energy_a_XXXX_intelligent_bump_charge
style:
top: 93%
left: 66%
font-size: 300%
font-style: underline
transform: none
image: /local/images/octopus_unplugged.png
Now you’ll have a lovelace card that looks like the app and will change its appearance when charge slots have been scheduled replicating the app. The “bump charge now” button will work and force the charge like the app.