nice! Do you have an image of what that looks like?
Hello
As I am beginner in HA, can you tell me where you put this code (pv_panel: …) ?
Is is in the ui-lovelace.yaml file ?
Thanks
V.
Here’s the background image I used:
I cropped it out of a larger image I found on google image search, so hopefully it’s fair use.
For the whole setup, I
- Installed button-card (GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant) via HACS
- Uploaded the panel.png image into my homassisstant server at homeassistant/config/www/images/solaredge/panel.png
- Used the “Raw configuration editor” to edit the dashboard where I wanted to put this. I created a top-level
button_card_templateselement andpv_panelwas nested directly underneath that. - Used the
ADD CARDbutton to add a Grid Card and used the raw configuration editor to customize the card as I posted above.
I’m running Home Assistant via docker on a NAS, so I don’t have dedicated hardware and I don’t have a ui-lovelace.yaml file to edit manually.
Looks great. But I think that the text would be too small for a mobile view.
I’m using the following auto-entities card that automatically shows all modules using multiple-entity-row card:
type: custom:auto-entities
card:
type: entities
title: solaredgeoptimizers
filter:
template: >-
{% for entity_id in integration_entities("solaredgeoptimizers") |
select("match", "sensor.power.*") -%}
{{
{
'type': 'custom:multiple-entity-row',
'entity': entity_id,
'name': state_attr(entity_id, 'friendly_name').replace('Power_', ''),
'format': 'precision1',
'entities':
[
{
'entity': entity_id.replace('power', 'lifetime_energy'),
'name': ' ',
'format': 'precision1'
},
{
'entity': entity_id.replace('power', 'voltage'),
'name': ' ',
'format': 'precision1'
},
{
'entity': entity_id.replace('power', 'current'),
'name': ' ',
'format': 'precision1'
}
],
}
}},
{%- endfor %}
I found a more mobile-friendly way to do this by replacing the grid with layout-cards (GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards.)
- type: custom:layout-card
layout_type: custom:masonry-layout
layout:
max_cols: 5
cards:
- entity: sensor.power_1_0_1
type: custom:button-card
template: pv_panel
- ....
title: SolarEdge Power Optimizers
1 Like
Any chance you could share a picture of what this looks like?
did you hard code all buttons there, or did you already find a way to combine the layout card with auto-entities , a bit like the card above with multiple-entity-row.
also, you could make that button-card template a lot more readable if you set the ‘id’ in a variable, and inject that in the other fields.
variables:
panel: >
[[[ return entity.entity_id.replace(/^sensor\.power\_/, '').replace(/\_/g, '.'); ]]]
id: >
[[[ return entity.entity_id.split('power_')[1]; ]]]
label: >
[[[ return variables.panel; ]]]
or, since we now can use nested variables when they are declared in alphabetical order:
variables:
id: >
[[[ return entity.entity_id.split('power_')[1]; ]]]
panel: >
[[[ return variables.id.replace(/\_/g, '.'); ]]]
label: |
[[[ return variables.panel; ]]]
and call them like:
custom_fields:
current: |
[[[return `Current <br/> ${states['sensor.current_'+ variables.id].state} A`;]]]
voltage: >
[[[ return `Voltage <br/> ${states['sensor.voltage_'+ variables.id].state} V`; ]]]
optimizer_voltage: >
[[[ return `Optimizer <br/> ${states['sensor.optimizer_voltage_'+ variables.id].state} V`; ]]]
lifetime: >
[[[ return `Lifetime <br/> ${states['sensor.lifetime_energy_'+ variables.id].state} kWh`; ]]]
having 2 of these on mobile is the max though, so it might not be easy to make it resemble the actual plane layout
btw, I added a bit to that multiple-entity-row code to make it display with some niceties in the dashboard:
- type: entities
entities:
- type: custom:auto-entities
card:
type: entities
card_mod:
class: class-header-margin
style: |
ha-card {
box-shadow: none;
margin: -16px;
}
.card-content {
max-height: 450px;
overflow-y: scroll;
}
title: SolarEdge optimizers
filter:
template: >-
{% for entity_id in integration_entities("solaredgeoptimizers") |
select("match", "sensor.power.*") -%}
{{
{
'type': 'custom:multiple-entity-row',
'entity': entity_id,
'name': state_attr(entity_id, 'friendly_name').replace('Power_', ''),
'format': 'precision1',
'styles': {'width': '30px'},
'entities':
[
{
'entity': entity_id.replace('power', 'lifetime_energy'),
'name': ' ',
'format': 'precision1',
'styles': {'width': '50px'}
},
{
'entity': entity_id.replace('power', 'voltage'),
'name': ' ',
'format': 'precision1',
'styles': {'width': '30px'}
},
{
'entity': entity_id.replace('power', 'current'),
'name': ' ',
'format': 'precision1',
'styles': {'width': '30px'}
}
],
}
}},
{%- endfor %}
its kind of basic, but friendly for mobile and allows for a direct, no whistle&bells overview. Might need to add some exception handling, not sure yet, they havent failed until now 
2 Likes
Hello
I cannot reach to that result because I don’t know how to create this top level button card template. Can you give me an example of what to code in the raw configuration editor before writing that pv_panel element ?
Thanks
V.
@langestefan, sorry but I can’t make it working. I think my first issue is that you are using the type: custom:stack-in-card that IIRC is an HACS component. I didn’t find any reference to that in your instructions
Well you can just install it if that’s the problem
@langestefan , yes of course that’s can fix the problem; but for a rookie like me a little bit of more info will be really appreciate
see Per-panel PV power / energy visualization (solaredge optimizer data) - #3 by Mariusthvdb how to use it with vertical-stack (core card)
Marius, you could compare the output of each panel with the average or sum of all panels. I am working on a set of sensors that aggregate the kWh production per panel (utility meter) and compare with the sum of all panels. The ratio should be approximately the same at the end of each day.
We could try to do the same with voltage, not sure what works better. Will post my sensor when bugs (peaks in ratio) are ironed out.
Edit: voltage may work better; dividing panel kWh by total kWh yields larger errors at the start of the day due to dividing small values.
Thank you @Mariusthvdb, I’m getting close 
if you don’t mind can you share how you defined the button_default_title template?
i
ofc, please see:
button_default_title:
# aspect_ratio: 12/1
show_state: false
show_icon: false
tap_action:
action: none
styles:
card:
# - border: none
- background: var(--background-color-off)
- color: var(--text-color-off)
- font-size: 20px #24px
- font-weight: 400 #300
#- letter-spacing: 0px
# - font-weight: bold
- padding: 12px
# - pointer-events: none
name:
- justify-self: left
I messed up something…
my expectation was to fo that
probably i need to read better the previous posts
working on that…
I’m trying to reproduce your template sensor for mu - 2*sd, but was wondering what you mean with ‘zonnepanelen bereik’ (I’m Dutch too)? Is it the total power of all the optimizers together?