After several iterations of showing all the stats and information to do with my solar and electricity usage and wanting to replace my smart meter with my own mobile phone display, I eventually created this display.
I’m on Octopus flux and force charge between 2a.m and 5a.m, and running the dishwasher in those times too.
Around 5pm (watching “The Chase” and making dinner!), I check the display and figure whether to force discharge to around 60% (checking again when The Chase has finished) which (depending on where in the year we are, currently June), will power the house until 2.a.m.
To avoid solar anxiety I don’t look at the money earnt I just wait for my 
“win” at the end of every month 
- The battery percentage
- If solar is charging the battery (flashing)
- How long until the battery is charged
- How much solar power is being generated
- How much is feeding in (flashing)
- The yield for the day (not really needed but interesting and I had space)
- The energy consumption by the house
It’s using the horseshoe card the fiddly bit was figuring the (estimated) time to charge for which I created my own sensor.
# battery charges to 98% and capacity is 5.8kwh
- name: solax_battery_predicted_time_to_charge
unique_id: solax_battery_predicted_time_to_charge
state: >
{% set powerLeft = (float(100) - (states('sensor.solax_battery_level') | float )) %}
{% set batteryPower = (states('sensor.solax_battery_power') | float) %}
{% if batteryPower > 0 %}
{% set ratioLeft = powerLeft/batteryPower %}
{{ as_timestamp(now() + timedelta(hours=( 0.98 * float(58) * ratioLeft))) | timestamp_custom("%H:%M", True) }}
{% endif %}
…and the control yaml, in a swipe card if you really do want to see any more info.
There are some extra sensors which are just true/false (like if the battery is charging) to help with setting the animations.
type: custom:swipe-card
start_card: 0
parameters:
height: 180px
initialSlide: 1
centeredSlides: true
effect: cards
slideShadows: false
spaceBetween: 20
slidesPerView: 1
loop: false
preventClicksPropagation: true
preventClicks: true
cards:
- type: grid
cards:
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.solax_battery_level
decimals: 0
unit: '%'
area: Battery
icon: mdi:battery-60
- entity: sensor.solax_battery_power
decimals: 0
unit: W
area: Power
icon: mdi:lightning-bolt-circle
- entity: sensor.solax_battery_predicted_time_to_charge
area: est fully charged
- entity: sensor.solax_is_battery_charging
show:
horseshoe_style: lineargradient
animations:
entity.3:
- state: 'true'
icons:
- animation_id: 0
styles:
- color: orange;
- animation: flash infinite 3s ease-in-out both;
- state: 'false'
icons:
- animation_id: 0
styles:
- color: white;
layout:
hlines:
- id: 0
xpos: 50
ypos: 40
length: 70
styles:
- opacity: 0.2;
states:
- id: 0
entity_index: 0
xpos: 45
ypos: 55
styles:
- font-size: 1.5em;
- id: 1
entity_index: 1
xpos: 50
ypos: 70
styles:
- font-size: 1.5em;
- id: 2
entity_index: 2
xpos: 50
ypos: 100
styles:
- font-size: 1em;
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 30
styles:
- font-size: 1.5em;
- id: 1
entity_index: 2
xpos: 50
ypos: 90
styles:
- font-size: 0.8em;
icons:
- id: 0
animation_id: 0
entity_index: 0
xpos: 35
ypos: 55
align: end
size: 1
- id: 1
entity_index: 1
xpos: 35
ypos: 70
align: end
styles:
- color: orange;
horseshoe_scale:
min: 0
max: 100
color_stops:
'50': rgb(212,175,128)
'90': orange
card_mod:
style: |
ha-card {
# border-radius: 50%;
border:none;
# background: linear-gradient(to top, rgb(0,0,0) ,rgb(64,64,64));
height: 240px;
width: 240px
}
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.solax_solar_total
decimals: 0
unit: W
area: Solar
icon: mdi:solar-power-variant
- entity: sensor.solax_yeild_today
decimals: 0
unit: kWh
area: Yeild
icon: mdi:lightning-bolt-circle
- entity: sensor.solax_feedinpower
decimals: 0
unit: W
area: Feed In
icon: mdi:transmission-tower-export
- entity: sensor.solax_is_exporting
icon: mdi:home-lightning-bolt
- entity: sensor.electricity_current_demand
show:
horseshoe_style: lineargradient
animations:
entity.3:
- state: 'true'
icons:
- animation_id: 0
styles:
- color: orange;
- animation: flash infinite 3s ease-in-out both;
- state: 'false'
icons:
- animation_id: 0
styles:
- color: white;
layout:
hlines:
- id: 0
xpos: 50
ypos: 45
length: 80
styles:
- opacity: 0.5;
vlines:
- id: 0
xpos: 60
ypos: 60
length: 30
styles:
- opacity: 0.5;
states:
- id: 0
entity_index: 0
xpos: 58
ypos: 38
styles:
- font-size: 2em;
- id: 1
entity_index: 1
xpos: 75
ypos: 70
styles:
- font-size: 1.5em;
- id: 2
entity_index: 2
xpos: 30
ypos: 70
styles:
- font-size: 1.5em;
- id: 3
entity_index: 4
xpos: 55
ypos: 90
styles:
- font-size: 1.2em;
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 20
align: centre
styles:
- font-size: 1.5em;
- id: 1
entity_index: 1
xpos: 75
ypos: 55
align: centre
styles:
- font-size: 1em;
- opacity: 0.8;
- id: 2
entity_index: 2
animation_id: 0
xpos: 35
ypos: 55
align: centre
styles:
- font-size: 1.2em;
- opacity: 0.8;
icons:
- id: 0
entity_index: 0
xpos: 35
ypos: 35
align: centre
size: 1
styles:
- color: orange;
- id: 1
entity_index: 2
animation_id: 0
xpos: 58
ypos: 70
align: centre
size: 1
- id: 2
entity_index: 3
xpos: 40
ypos: 89
align: centre
size: 1
styles:
- color: orange;
horseshoe_scale:
min: 0
max: 5000
color_stops:
'50': rgb(212,175,128)
'90': orange
card_mod:
style: |
ha-card {
border:none;
# background: linear-gradient(to top, rgb(0,0,0) ,rgb(64,64,64));
height: 240px;
width: 240px
}
columns: 2
- type: custom:power-flow-card
entities:
battery: sensor.solax_battery_power
battery_charge: sensor.solax_battery_level
grid: sensor.electricity_current_demand
solar: sensor.solax_solar_total
inverted_entities: battery
watt_threshold: 1000
min_flow_rate: 1.5
kw_decimals: 2