no issue - just thank you

[guevara777]

Thank you for that great integration. Been searching for something like this for a long time. IM 💯 % HAPPY

[ProudElm]

Thank you!

That looks cool! Was it a lot of work?

[guevara777]

Not really. I´ve created a custom:button-card template for the header (alle Panels on one roof-side) and a custom:button-card template for the single panels.

This is the template for the "panel-group" (i´ve created template-sensors to sum up the panels)

  solar_panel_card_group:
    type: custom:button-card
    template: solar_panel_card
    variables:
      current_energy: '[[[ return `${entity.entity_id}` ]]] '
      daily_energy: >-
        [[[ return `${entity.entity_id.replace("power","lifetime_energy")}` +
        "_daily" ]]]
      lifetime_energy: '[[[ return `${entity.entity_id.replace("power","lifetime_energy")}` ]]]'
    show_icon: false
    show_state: false
    show_name: true
    name: Insgesamt
    styles:
      card:
        - background-size: cover
        - padding: 0px
        - border: 1px solid rgb(150,150,150,0.5)
        - box-shadow: none
        - opacity: 0.8
      name:
        - color: rgb(50,50,50)
        - font-weight: bold
        - font-size: 1rem
      grid:
        - grid-template-areas: '"n n n" "power today lifetime"'
        - grid-template-columns: 1fr 1fr 1fr
      custom_fields:
        power:
          - filter: opacity(100%)
          - overflow: visible
          - padding: 3px
        today:
          - filter: opacity(100%)
          - overflow: visible
          - padding: 3px
        lifetime:
          - filter: opacity(100%)
          - overflow: visible
          - padding: 3px
    custom_fields:
      power:
        card:
          type: custom:mushroom-template-card
          entity: '[[[ return variables.current_energy ]]] '
          tap_action:
            action: more-info
          icon: mdi:lightning-bolt
          name: Aktuell
          icon_color: orange
          primary: >-
            {{states(config.entity) | round(0) }}
            {{state_attr(config.entity,"unit_of_measurement") }}
          secondary: aktuell
          card_mod:
            style: |
              ha-card {
                padding: 0px !important;
                text-align: left !important;
              }
      today:
        card:
          type: custom:mushroom-template-card
          entity: '[[[ return variables.daily_energy ]]] '
          tap_action:
            action: more-info
          icon: mdi:counter
          name: heute
          icon_color: orange
          primary: >-
            {{states(config.entity) | round(3) }}
            {{state_attr(config.entity,"unit_of_measurement") }}
          secondary: heute
          card_mod:
            style: |
              ha-card {
                padding: 0px !important;
                text-align: left !important;
              }
      lifetime:
        card:
          type: custom:mushroom-template-card
          entity: '[[[ return variables.lifetime_energy ]]] '
          tap_action:
            action: more-info
          icon: mdi:counter
          icon_color: orange
          primary: >-
            {{states(config.entity) | round(0) }}
            {{state_attr(config.entity,"unit_of_measurement") }}
          secondary: gesamt
          card_mod:
            style: |
              ha-card {
                padding: 0px !important;
                text-align: left !important;
              }

This is the template for the "single panel"

  solar_panel_card:
    type: custom:button-card
    variables:
      name: >-
        [[[ return "Modul " +
        `${entity.entity_id.replace("sensor.power_","").replace("_",".").replace("_",".")}`
        ]]]
      current_energy: '[[[ return `${entity.entity_id}` ]]] '
      daily_energy: >-
        [[[ return `${entity.entity_id.replace("power","lifetime_energy")}` +
        "_daily" ]]]
      lifetime_energy: '[[[ return `${entity.entity_id.replace("power","lifetime_energy")}` ]]]'
    show_icon: false
    show_state: false
    show_name: true
    name: '[[[ return variables.name ]]] '
    styles:
      card:
        - padding: 0px
        - opacity: 0.9
      name:
        - font-weight: bold
        - font-size: 1rem
      grid:
        - grid-template-areas: '"n" "power" "today" "lifetime"'
        - grid-template-columns: auto
      custom_fields:
        power:
          - filter: opacity(100%)
          - overflow: visible
          - padding: 3px
        today:
          - filter: opacity(100%)
          - overflow: visible
          - padding: 3px
        lifetime:
          - filter: opacity(100%)
          - overflow: visible
          - padding: 3px
    custom_fields:
      power:
        card:
          type: custom:mushroom-template-card
          entity: '[[[ return variables.current_energy ]]] '
          tap_action:
            action: more-info
          icon: mdi:lightning-bolt
          name: Aktuell
          icon_color: orange
          primary: >-
            {{states(config.entity) | round(0) }}
            {{state_attr(config.entity,"unit_of_measurement") }}
          secondary: aktuell
          card_mod:
            style: |
              ha-card {
                padding: 0px !important;
                text-align: left !important;
              }
      today:
        card:
          type: custom:mushroom-template-card
          entity: '[[[ return variables.daily_energy ]]] '
          tap_action:
            action: more-info
          icon: mdi:counter
          name: heute
          icon_color: orange
          primary: >-
            {{states(config.entity) | round(3) }}
            {{state_attr(config.entity,"unit_of_measurement") }}
          secondary: heute
          card_mod:
            style: |
              ha-card {
                padding: 0px !important;
                text-align: left !important;
              }
      lifetime:
        card:
          type: custom:mushroom-template-card
          entity: '[[[ return variables.lifetime_energy ]]] '
          tap_action:
            action: more-info
          icon: mdi:counter
          icon_color: orange
          primary: >-
            {{states(config.entity) | round(0) }}
            {{state_attr(config.entity,"unit_of_measurement") }}
          secondary: gesamt
          card_mod:
            style: |
              ha-card {
                padding: 0px !important;
                text-align: left !important;
              }

and this is the card for one "roof-side"

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      background: rgb(255,255,255,0.7);
      color: rgb(50,50,50);
      --primary-text-color: rgb(50,50,50);
      --secondary-text-color: rgb(50,50,50);
      padding: 3px;
      background-image: url('/local/img/westdach.png'); #this is the background-image for the card
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
card:
  square: false
  columns: 1
  type: grid
  cards:
    - type: custom:button-card
      template: ueberschrift
      color: rgb(200,200,200,0.7)
      variables:
        text: West-Dach
        symbol: mdi:home-roof
    - type: custom:button-card
      template: solar_panel_card_group
      entity: sensor.template_module_westdach_power
    - square: false
      columns: 2
      type: grid
      cards:
        - type: custom:button-card
          template: solar_panel_card
          entity: sensor.power_1_1_7
        - type: custom:button-card
          template: solar_panel_card
          entity: sensor.power_1_1_6
        - type: custom:button-card
          template: solar_panel_card
          entity: sensor.power_1_1_8
        - type: custom:button-card
          template: solar_panel_card
          entity: sensor.power_1_1_9
        - type: custom:button-card
          template: solar_panel_card
          entity: sensor.power_1_1_11
        - type: custom:button-card
          template: solar_panel_card
          entity: sensor.power_1_1_10
        - type: custom:button-card
          template: solar_panel_card
          entity: sensor.power_1_1_12
        - type: custom:button-card
          template: solar_panel_card
          entity: sensor.power_1_1_13

[Bassie007]

you made a nice overview. I tried to use it (if you don't mind ;)) but when I put the "panel-group" or the "single panel" in the template editor to test it, I get the error "UndefinedError: 'config' is undefined" I must be doing something wrong, but can you give me some pointers on what I should do to be able to use your design idea?

[ChristophCaina]

well... I wonder, why I haven't found this earlier - but YES! finally :)

Now, I need to see how I can implement this in a nice looking way without creating a mess on my dashboard :D :D :D

[ubarni]

I just used Glance Cards and added „empty“ entitities.

[ChristophCaina]

:) probably I will try to recreate the Layout... maybe, I'll work with a Picture element and place the information somehow directly there.

But right now, I just noticed, that one of the optimizers is not providing the current ... affected is optimizer 1.1.1 (maybe that's relevant?)

while the others do (ok, I've not checked all 39...)

[ProudElm]

it does that sometimes yes, im not sure why, it is the first sensor always somehow.. But i normally fixes it self after an other run (every 15 min the data is retrieved).

[Oulewappeur]

I just want to second this thank you! I've been living in my house for almost 3 years now, and I've had multiple times where an optimizer failed which I just found out like way later, or my installer notified me (also days or weeks after).

Simply because I don't monitor the solaredge app/website on a daily basis. I do use HA on a daily basis, and I'm gonna think of a way to make an automation that triggers a notification when one of the optimizer fails.