E3DC Solar Power Station Widget

[vbbaby3 (Jörg)]

Animated Energy Widget for E3DC Solar Home Power Stations.

Screenshots

Resources

uid: E3DC_Portal
tags: []
props:
  parameters:
    - context: item
      label: Stromnetz Verbrauch
      name: netzverbrauch
      required: true
      type: TEXT
    - context: item
      label: Stromnetz Einspeisung
      name: netzeinspeisung
      required: true
      type: TEXT
    - context: item
      label: Haushalt Verbrauch
      name: gesamtverbrauch
      required: true
      type: TEXT
    - context: item
      label: PV Leistung
      name: pv_leistung
      required: true
      type: TEXT
    - context: item
      label: Batterie Laden
      name: batterieladen
      required: true
      type: TEXT
    - context: item
      label: Batterie Entladen
      name: batterieentladen
      required: true
      type: TEXT
    - context: item
      label: Batterie Ladezustand
      name: batterylevel
      required: true
      type: TEXT
    - context: item
      label: Wallbox Ladestrom
      name: wallboxladestrom
      required: false
      type: TEXT
    - context: item
      label: externer Stromproduzent
      name: externerg
      required: false
      type: TEXT        
  parameterGroups: []
timestamp: Mar 10, 2022, 10:08:22 AM
component: f7-card
config:
  style:
    padding: 1%
    justify-content: center
  class:
    - display-flex
    - align-items-center
  stylesheet: >
    .arrowleft {
       #position: absolute;
       #top: 50%;
       #left: 50%;
       #transform: translate(50%,50%);
     }
    .arrowleft div {
       display: block;
       width: 0.4em;
       height: 0.4em;
       border-bottom: 0.15em solid var(--f7-text-color);
       border-right: 0.15em solid var(--f7-text-color);
       transform: rotate(135deg);
       #margin: -25px;
       animation: animate 2s infinite;
    }  .arrowleft div:nth-child(2){
        animation-delay: -0.2s;
    }  .arrowleft div:nth-child(3){
        animation-delay: -0.4s;
    }  @keyframes animate {
        0%{
            opacity: 0;
            transform: rotate(135deg) translate(-0.7em,-0.7em);
        }
        50%{
            opacity: 1;
        }
        100%{
            opacity: 0;
            transform: rotate(135deg) translate(0.7em,0.7em);
        }
    }                 .arrowright {
       #position: absolute;
       #top: 50%;
       #left: 50%;
       #transform: translate(-50%,-50%);
     }
    .arrowright div {
       display: block;
       width: 0.4em;
       height: 0.4em;
       border-bottom: 0.15em solid var(--f7-text-color);
       border-right: 0.15em solid var(--f7-text-color);
       transform: rotate(-45deg);
       #margin: -25px;
       animation: animate2 2s infinite;
    }    .arrowright div:nth-child(2) {
        animation-delay: 0.2s;
    }      .arrowright div:nth-child(3) {
        animation-delay: 0.4s;
    }     @keyframes animate2 {
        0%{
            opacity: 0;
            transform: rotate(-45deg) translate(-0.7em,-0.7em);
        }
        50%{
            opacity: 1;
        }
        100%{
            opacity: 0;
            transform: rotate(-45deg) translate(0.7em,0.7em);
        }
    }                   
slots:
  default:
    - component: f7-col
      config:
        style:
          align-items: center
          display: flex
          flex-direction: column
          justify-content: center
          width: 20%
      slots:
        default:
          - component: oh-icon
            config:
              height: 40em
              icon: e3dc_pv_sun
          - component: oh-icon
            config:
              height: 40em
              icon: e3dc_extern
              style:
                margin-top: 1em
              visible: '=(Number.parseFloat(items[props.externerg].state.split(" ")[0]) >= 0) ? true : false'
          - component: Label
            config:
              style:
                font-size: 1em
                font-weight: bold
                text-align: center
                margin-top: 0.7em
              text: =items[props.batterylevel].state
          - component: oh-icon
            config:
              icon: e3dc_akku_0
              height: 40em
              visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 2) ? true : false'
          - component: oh-icon
            config:
              icon: e3dc_akku_25
              height: 40em
              visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 2 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 25) ? true : false'
          - component: oh-icon
            config:
              icon: e3dc_akku_50
              height: 40em
              visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 25 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 50) ? true : false'
          - component: oh-icon
            config:
              icon: e3dc_akku_75
              height: 40em
              visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 50 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 75) ? true : false'
          - component: oh-icon
            config:
              icon: e3dc_akku_90
              height: 40em
              visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 75 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 99) ? true : false'
          - component: oh-icon
            config:
              icon: e3dc_akku_100
              height: 40em
              visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 99) ? true : false'
    - component: f7-col
      config:
        style:
          align-items: center
          display: flex
          flex-direction: column
          width: 20%
      slots:
        default:
          - component: f7-row
            config:
              class: arrowright
              visible: '=(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0]) > 0) ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
          - component: f7-row
            slots:
              default:
                - component: Label
                  config:
                    style:
                      font-size: 1em
                      font-weight: bold
                      text-align: center
                      padding-bottom: 2.1em                      
                    text: =Math.abs(Number.parseFloat(items[props.pv_leistung].state.split(" ")[0])) + ' ᵂ'
          - component: f7-row
            config:
              class: arrowright
              visible: '=(Number.parseFloat(items[props.externerg].state.split(" ")[0]) >= 0) ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
          - component: f7-row
            slots:
              default:
                - component: Label
                  config:
                    style:
                      font-size: 1em
                      font-weight: bold
                      text-align: center
                      padding-bottom: 2.1em
                    text: =Math.abs(Number.parseFloat(items[props.externerg].state.split(" ")[0])) + ' ᵂ'
                    visible: '=(Number.parseFloat(items[props.externerg].state.split(" ")[0]) >= 0) ? true : false'
          - component: f7-row
            config:
              class: arrowright
              visible: '=(Number.parseFloat(items[props.batterieentladen].state.split(" ")[0]) > 0) ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
          - component: f7-row
            config:
              class: arrowleft
              visible: '=(Number.parseFloat(items[props.batterieladen].state.split(" ")[0]) > 0) ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowleft div
                - component: Label
                  config:
                    class: arrowleft div
                - component: Label
                  config:
                    class: arrowleft div
          - component: Label
            config:
              style:
                color: green
                font-size: 1em
                font-weight: bold
                text-align: center
              text: =Math.abs(Number.parseFloat(items[props.batterieladen].state.split(" ")[0])) + ' ᵂ'
              visible: '=(Number.parseFloat(items[props.batterieladen].state.split(" ")[0]) > 0) ? true : false'
          - component: Label
            config:
              style:
                color: red
                font-size: 1em
                font-weight: bold
                text-align: center
              text: =Math.abs(Number.parseFloat(items[props.batterieentladen].state.split(" ")[0])) + ' ᵂ'
              visible: '=(Number.parseFloat(items[props.batterieentladen].state.split(" ")[0]) > 0) ? true : false'
    - component: f7-col
      config:
        style:
          align-items: center
          display: flex
          flex-direction: column
          justify-content: center
          width: 20%
      slots:
        default:
          - component: f7-block
            config:
              style:
                align-items: center
                display: flex
                flex-direction: column
                justify-content: center
            slots: {}
          - component: oh-icon
            config:
              height: 60em
              width: 60em
              icon: e3dc
    - component: f7-col
      config:
        style:
          align-items: center
          display: flex
          flex-direction: column
          justify-content: center
          width: 20%
      slots:
        default:
          - component: f7-row
            config:
              class: arrowright
              visible: '=(Number.parseFloat(items[props.netzverbrauch].state.split(" ")[0]) > 0) ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
          - component: f7-row
            config:
              class: arrowleft
              visible: '=(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0]) > 0) ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowleft div
                - component: Label
                  config:
                    class: arrowleft div
                - component: Label
                  config:
                    class: arrowleft div
          - component: Label
            config:
              style:
                color: red
                font-size: 1em
                font-weight: bold
                text-align: center
                padding-bottom: 2.1em
              text: =Math.abs(Number.parseFloat(items[props.netzeinspeisung].state.split(" ")[0])) + ' ᵂ'
              visible: '=(Number.parseFloat(items[props.netzverbrauch].state.split(" ")[0]) == 0) ? true : false'
          - component: Label
            config:
              style:
                color: green
                font-size: 1em
                font-weight: bold
                text-align: center
                padding-bottom: 2.1em
              text: =Math.abs(Number.parseFloat(items[props.netzverbrauch].state.split(" ")[0])) + ' ᵂ'
              visible: '=(Number.parseFloat(items[props.netzverbrauch].state.split(" ")[0]) > 0) ? true : false'
          - component: f7-row
            config:
              class: arrowright
              visible: '=(Number.parseFloat(items[props.wallboxladestrom].state.split(" ")[0]) >= 0) ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
          - component: Label
            config:
              style:
                font-size: 1em
                font-weight: bold
                text-align: center
                padding-bottom: 2.1em 
              visible: '=(Number.parseFloat(items[props.wallboxladestrom].state.split(" ")[0]) >= 0) ? true : false'
              text: =Math.abs(Number.parseFloat(items[props.wallboxladestrom].state.split(" ")[0])) + ' ᵂ'
          - component: f7-row
            config:
              class: arrowright
              visible: '=(Number.parseFloat(items[props.gesamtverbrauch].state.split(" ")[0]) > 0) ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
          - component: Label
            config:
              style:
                font-size: 1em
                font-weight: bold
                text-align: center
              text: =Math.abs(Number.parseFloat(items[props.gesamtverbrauch].state.split(" ")[0])) + ' ᵂ'
    - component: f7-col
      config:
        style:
          align-items: center
          display: flex
          flex-direction: column
          justify-content: center
          width: 20%
      slots:
        default:
          - component: oh-icon
            config:
              height: 40em
              icon: e3dc_net
          - component: oh-icon
            config:
              height: 40em
              icon: e3dc_wallbox
              style:
                margin-top: 1em
              visible: '=(Number.parseFloat(items[props.wallboxladestrom].state.split(" ")[0]) >= 0) ? true : false'
          - component: oh-icon
            config:
              color: orange
              height: 40em
              icon: e3dc_home
              style:
                margin-top: 1em

[stefano_chiesa]

could you share icon set?

[vbbaby3 (Jörg)]

? You can download the icons above

[stefano_chiesa]

You can, you are right but with unknown name that’s why I’m asking

[vbbaby3 (Jörg)]

@vbbaby3

icon: e3dc_net

Hi,
i can´t upload a zip file here…you can get the title of the icon out of the code:

 icon: e3dc_net

[BlackEagle (Norman K.)]

Hello,
thanks for the greate E3DC portal layout. Can you tell me where is my mistake and how can I get the widget bigger?

Might there be an update as the current portal looks like this

Gruß Norman

[vbbaby3 (Jörg)]

I think you have a wrong Item connected
…

[BlackEagle (Norman K.)]

Hello Jörg,
today it looks very different for me. The arrows go right all of a sudden and the outer icons also look right. I’m just missing the icon in the middle and is it possible to adjust the height of the widget?

[vbbaby3 (Jörg)]

Take a look at your icon names…the middle icon must be named e3dc
Changing the size is not so easy …

[BlackEagle (Norman K.)]

Thanks for the icon, now I just have to stretch the whole thing up a bit.

[vbbaby3 (Jörg)]

You can add the height in line 60

But that is not all…Then the rest is centered…
If you don´t want that you have to change a lot more, but you must do try and error with the other
style elements in the code…like:

padding-bottom:
margin-top

[BlackEagle (Norman K.)]

hmm,
could it be that your code is different than what I can copy above?

[vbbaby3 (Jörg)]

Maybe, Put in Line 57

[sascha127 (Sascha Reiß)]

Hi everyone,
Can someone explain to me why the values ​​are not saved when i put them over “set props”?
I see the values when i put them in, after i click DONE and SAVE the Widget, close the Widget and open it again, the values are empty.

What i am doing wrong?

Thanks for help.

[vbbaby3 (Jörg)]

You must put the widget on the Homepage and then fill the props

[sascha127 (Sascha Reiß)]

Ahhh…
Easy going.
Thank you very much.

By the way, great Widget

[JensHauser]

Hi, thanks for this widget, very helpful.

It looks like this:

When there is no battery (dis)charging, the 488W are shifted down.

Is there a chance to keep them close to the sun icon?

Another learning is the mapping of items to the widget. I don´t have an external source, so only this one is left empty. Works fine, but I get a log entry, which is quite misleading. Is it possible to leave the item empty and avoid a log entry? Currently, I use an empty item and get the related icon with 0W shown.

[ThomasT (Thomas Theimer)]

Hi, the error messages when the optional items are left empty are because the state of these items is used without checking if the corresponding props are filled. So the widget reads non-existing items.
I am working on a revised version to fix that. I also noticed that grid consumption (grid-to-home) and home-to-grid (Einspeisung) should be swapped to get a correct view. If there is interest I can post the updated version once it is tested.

[JensHauser]

I´d love to test it, thanks a lot for picking up the issues in next version.

[ThomasT (Thomas Theimer)]

Here is a new version for testing.
Changes: translated props to english, config menu is now bilingual, gridtohome and hometogrid should map to correct arrows/directions, added checks for optional items to avoid error messages (hopefully), added some tags.
The widget has to be completely removed and added again as the parameter names have changed. Just replacing the code is not enough.

So here it is (hope this works):

uid: E3DC_Widget
tags:
  - e3dc
  - pv
  - version 1.3
props:
  parameters:
    - context: item
      label: Stromnetz Bezug / Grid-to-Home
      name: gridtohome
      required: true
      type: TEXT
    - context: item
      label: Stromnetz Einspeisung / Home-to-Grid
      name: hometogrid
      required: true
      type: TEXT
    - context: item
      label: Haushalt Verbrauch / Household Consumption
      name: household_consumption
      required: true
      type: TEXT
    - context: item
      label: PV Leistung / PV Power
      name: pv_power
      required: true
      type: TEXT
    - context: item
      label: Batterie Laden / Battery Charge
      name: battery_charge
      required: true
      type: TEXT
    - context: item
      label: Batterie Entladen / Battery Discharge
      name: battery_discharge
      required: true
      type: TEXT
    - context: item
      label: Batterie Ladezustand / Battery SoC
      name: batterylevel
      required: true
      type: TEXT
    - context: item
      label: Wallbox Ladestrom / Wallbox Charging
      name: wallbox_charge
      required: false
      type: TEXT
    - context: item
      label: externer Stromproduzent / External Inverter
      name: external_energy
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 4, 2023, 6:18:37 PM
component: f7-card
config:
  style:
    padding: 1%
    justify-content: center
  class:
    - display-flex
    - align-items-center
  stylesheet: >
    .arrowleft {
       #position: absolute;
       #top: 50%;
       #left: 50%;
       #transform: translate(50%,50%);
     }
    .arrowleft div {
       display: block;
       width: 0.4em;
       height: 0.4em;
       border-bottom: 0.15em solid var(--f7-text-color);
       border-right: 0.15em solid var(--f7-text-color);
       transform: rotate(135deg);
       #margin: -25px;
       animation: animate 2s infinite;
    }  .arrowleft div:nth-child(2){
        animation-delay: -0.2s;
    }  .arrowleft div:nth-child(3){
        animation-delay: -0.4s;
    }  @keyframes animate {
        0%{
            opacity: 0;
            transform: rotate(135deg) translate(-0.7em,-0.7em);
        }
        50%{
            opacity: 1;
        }
        100%{
            opacity: 0;
            transform: rotate(135deg) translate(0.7em,0.7em);
        }
    }                 .arrowright {
       #position: absolute;
       #top: 50%;
       #left: 50%;
       #transform: translate(-50%,-50%);
     }
    .arrowright div {
       display: block;
       width: 0.4em;
       height: 0.4em;
       border-bottom: 0.15em solid var(--f7-text-color);
       border-right: 0.15em solid var(--f7-text-color);
       transform: rotate(-45deg);
       #margin: -25px;
       animation: animate2 2s infinite;
    }    .arrowright div:nth-child(2) {
        animation-delay: 0.2s;
    }      .arrowright div:nth-child(3) {
        animation-delay: 0.4s;
    }     @keyframes animate2 {
        0%{
            opacity: 0;
            transform: rotate(-45deg) translate(-0.7em,-0.7em);
        }
        50%{
            opacity: 1;
        }
        100%{
            opacity: 0;
            transform: rotate(-45deg) translate(0.7em,0.7em);
        }
    }                   
slots:
  default:
    - component: f7-col
      config:
        style:
          align-items: center
          display: flex
          flex-direction: column
          justify-content: center
          width: 20%
      slots:
        default:
          - component: oh-icon
            config:
              height: 40em
              icon: e3dc_pv_sun
          - component: oh-icon
            config:
              height: 40em
              icon: e3dc_extern
              style:
                margin-top: 1em
              visible: '=props.external_energy ? (Number.parseFloat(items[props.external_energy].state.split(" ")[0]) > 0) ? true : false : false'
          - component: Label
            config:
              style:
                font-size: 1em
                font-weight: bold
                margin-top: 0.7em
                text-align: center
              text: =items[props.batterylevel].state
          - component: oh-icon
            config:
              height: 40em
              icon: e3dc_akku_0
              visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 2) ? true : false'
          - component: oh-icon
            config:
              height: 40em
              icon: e3dc_akku_25
              visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 2 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 25) ? true : false'
          - component: oh-icon
            config:
              height: 40em
              icon: e3dc_akku_50
              visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 25 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 50) ? true : false'
          - component: oh-icon
            config:
              height: 40em
              icon: e3dc_akku_75
              visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 50 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 75) ? true : false'
          - component: oh-icon
            config:
              height: 40em
              icon: e3dc_akku_90
              visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 75 && Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) < 99) ? true : false'
          - component: oh-icon
            config:
              height: 40em
              icon: e3dc_akku_100
              visible: '=(Number.parseFloat(items[props.batterylevel].state.split(" ")[0]) >= 99) ? true : false'
    - component: f7-col
      config:
        style:
          align-items: center
          display: flex
          flex-direction: column
          width: 20%
      slots:
        default:
          - component: f7-row
            config:
              class: arrowright
              visible: '=(Number.parseFloat(items[props.pv_power].state.split(" ")[0]) > 0) ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
          - component: f7-row
            slots:
              default:
                - component: Label
                  config:
                    style:
                      font-size: 1em
                      font-weight: bold
                      padding-bottom: 2.1em
                      text-align: center
                    text: =Math.abs(Number.parseFloat(items[props.pv_power].state.split(" ")[0])) + ' ᵂ'
          - component: f7-row
            config:
              class: arrowright
              visible: '=props.external_energy ? (Number.parseFloat(items[props.external_energy].state.split(" ")[0]) > 0) ? true : false : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
          - component: f7-row
            slots:
              default:
                - component: Label
                  config:
                    style:
                      font-size: 1em
                      font-weight: bold
                      padding-bottom: 2.1em
                      text-align: center
                    text: '=props.external_energy ? Math.abs(Number.parseFloat(items[props.external_energy].state.split(" ")[0])) + " ᵂ" : ""'
                    visible: '=props.external_energy ? (Number.parseFloat(items[props.external_energy].state.split(" ")[0]) > 0) ? true : false : false'
          - component: f7-row
            config:
              class: arrowright
              visible: '=(Number.parseFloat(items[props.battery_discharge].state.split(" ")[0]) > 0) ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
          - component: f7-row
            config:
              class: arrowleft
              visible: '=(Number.parseFloat(items[props.battery_charge].state.split(" ")[0]) > 0) ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowleft div
                - component: Label
                  config:
                    class: arrowleft div
                - component: Label
                  config:
                    class: arrowleft div
          - component: Label
            config:
              style:
                color: green
                font-size: 1em
                font-weight: bold
                text-align: center
              text: =Math.abs(Number.parseFloat(items[props.battery_charge].state.split(" ")[0])) + ' ᵂ'
              visible: '=(Number.parseFloat(items[props.battery_charge].state.split(" ")[0]) > 0) ? true : false'
          - component: Label
            config:
              style:
                color: red
                font-size: 1em
                font-weight: bold
                text-align: center
              text: =Math.abs(Number.parseFloat(items[props.battery_discharge].state.split(" ")[0])) + ' ᵂ'
              visible: '=(Number.parseFloat(items[props.battery_discharge].state.split(" ")[0]) > 0) ? true : false'
    - component: f7-col
      config:
        style:
          align-items: center
          display: flex
          flex-direction: column
          justify-content: center
          width: 20%
      slots:
        default:
          - component: f7-block
            config:
              style:
                align-items: center
                display: flex
                flex-direction: column
                justify-content: center
            slots: {}
          - component: oh-icon
            config:
              height: 60em
              icon: e3dc
              width: 60em
    - component: f7-col
      config:
        style:
          align-items: center
          display: flex
          flex-direction: column
          justify-content: center
          width: 20%
      slots:
        default:
          - component: f7-row
            config:
              class: arrowright
              visible: '=(Number.parseFloat(items[props.hometogrid].state.split(" ")[0]) > 0) ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
          - component: f7-row
            config:
              class: arrowleft
              visible: '=(Number.parseFloat(items[props.gridtohome].state.split(" ")[0]) > 0) ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowleft div
                - component: Label
                  config:
                    class: arrowleft div
                - component: Label
                  config:
                    class: arrowleft div
          - component: Label
            config:
              style:
                color: red
                font-size: 1em
                font-weight: bold
                padding-bottom: 2.1em
                text-align: center
              text: =Math.abs(Number.parseFloat(items[props.gridtohome].state.split(" ")[0])) + ' ᵂ'
              visible: '=(Number.parseFloat(items[props.hometogrid].state.split(" ")[0]) == 0) ? true : false'
          - component: Label
            config:
              style:
                color: green
                font-size: 1em
                font-weight: bold
                padding-bottom: 2.1em
                text-align: center
              text: =Math.abs(Number.parseFloat(items[props.hometogrid].state.split(" ")[0])) + ' ᵂ'
              visible: '=(Number.parseFloat(items[props.hometogrid].state.split(" ")[0]) > 0) ? true : false'
          - component: f7-row
            config:
              class: arrowright
              visible: '=props.wallbox_charge ? (Number.parseFloat(items[props.wallbox_charge].state.split(" ")[0]) > 0) ? true : false : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
          - component: Label
            config:
              style:
                font-size: 1em
                font-weight: bold
                padding-bottom: 2.1em
                text-align: center
              text: '=props.wallbox_charge ? Math.abs(Number.parseFloat(items[props.wallbox_charge].state.split(" ")[0])) + " ᵂ" : ""'
              visible: '=props.wallbox_charge ? (Number.parseFloat(items[props.wallbox_charge].state.split(" ")[0]) > 0) ? true : false : false'
          - component: f7-row
            config:
              class: arrowright
              visible: '=(Number.parseFloat(items[props.household_consumption].state.split(" ")[0]) > 0) ? true : false'
            slots:
              default:
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
                - component: Label
                  config:
                    class: arrowright div
          - component: Label
            config:
              style:
                font-size: 1em
                font-weight: bold
                text-align: center
              text: =Math.abs(Number.parseFloat(items[props.household_consumption].state.split(" ")[0])) + ' ᵂ'
    - component: f7-col
      config:
        style:
          align-items: center
          display: flex
          flex-direction: column
          justify-content: center
          width: 20%
      slots:
        default:
          - component: oh-icon
            config:
              height: 40em
              icon: e3dc_net
          - component: oh-icon
            config:
              height: 40em
              icon: e3dc_wallbox
              style:
                margin-top: 1em
              visible: '=props.wallbox_charge ? (Number.parseFloat(items[props.wallbox_charge].state.split(" ")[0]) > 0) ? true : false : false'
          - component: oh-icon
            config:
              color: orange
              height: 40em
              icon: e3dc_home
              style:
                margin-top: 1em

Please keep in mind that the pages are cached. You have to completely restart the app or browser windows, ideally also delete the cache, to make sure the new version gets displayed and used. Otherwise you might still get errors. Happy testing.
@vbbaby3 : As you are the creator/maintainer of the widget, please take a look and see if you like it.