E3DC Solar Power Station Widget

animine4

Animated Energy Widget for E3DC Solar Home Power Stations.

Screenshots

animine5
e3dc_akku_0
e3dc_akku_75
e3dc_akku_50
e3dc_akku_25
e3dc_home
e3dc
e3dc_pv_sun
e3dc_akku_100
e3dc_akku_90
e3dc_wallbox
e3dc_extern

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

could you share icon set?

? You can download the icons above :wink:

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

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

 icon: e3dc_net

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

image

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

Gruß Norman

I think you have a wrong Item connected

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?

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

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

You can add the height in line 60
image

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

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

Maybe, Put in Line 57

1 Like

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.

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

Ahhh…
Easy going.
Thank you very much.

By the way, great Widget :wink:

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.