Is Openhab yaml code posssible in HA?

[kobelka]

Hi,
I am a long term openhab user…
Now I want to try to switch to HA.
Is a widget like this possible ?

I made it in openhab with yaml

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: May 11, 2023, 12:11:13 PM
component: f7-card
config:
  class:
    - display-flex
    - align-items-center
  style:
    justify-content: center
    padding: 1%
  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;
       opacity: 0;
       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
                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_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
                      padding-bottom: 2.1em
                      text-align: center
                    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
                      padding-bottom: 2.1em
                      text-align: center
                    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
              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.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
                padding-bottom: 2.1em
                text-align: center
              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
                padding-bottom: 2.1em
                text-align: center
              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
                padding-bottom: 2.1em
                text-align: center
              text: =Math.abs(Number.parseFloat(items[props.wallboxladestrom].state.split(" ")[0])) + ' ᵂ'
              visible: '=(Number.parseFloat(items[props.wallboxladestrom].state.split(" ")[0]) >= 0) ? true : false'
          - 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:
              action: popup
              actionModal: page:stromverbrauch
              color: orange
              height: 40em
              icon: e3dc_home
              style:
                margin-top: 1em

Regards
Jörg

[tom_l]

No you cant use that yaml.

You can create something similar with this:

Picture elements card

Or use this custom card:

Power Flow Card Plus

Hello there [power_flow_card_plus] A few days ago I forked the original Power Flow Card and I’ve done quite some work on it since then: Display Individual Power Entities - You can now display individual power entities on the card, making it easier to track specific devices or circuits in your home. Customize Individual Entities’ Label, Icon and Color - With the new update, you can customize the label, icon, and color of each individual entity. This allows you to tailor the card…

[kobelka]

Ok, thank I will have a look on it…