OH3 Livio Energy Summary Animated

Based on this forum discussion I have created the configurable energy animated widget.
Required ITEMS are:

  • Consumption From Grid

  • Home Consumption

Other ITEMS are not mandatory and widget will display/hide the section accordingly.
Title it’s not mandatory, if missing the title section will not be displayed.

Changelog

Version 0.1

  • initial release

Resources

uid: OH3_Livio_Energy_Summary
tags: []
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Consumption From Grid
      label: Consumption From Grid Item
      name: itemConsumptionFromGrid
      required: true
      type: TEXT
    - context: item
      description: Production to Grid
      label: Production to Grid Item
      name: itemProductionToGrid
      required: false
      type: TEXT
    - context: item
      description: Item Solar Production
      label: Solar Production Item
      name: itemSolar
      required: false
      type: TEXT
    - context: item
      description: Home Consumption
      label: Home Consumption Item
      name: itemHomeConsumption
      required: true
      type: TEXT
    - context: item
      description: Gas Consumption Item
      label: Item Gas Consumption
      name: itemGas
      required: false
      type: TEXT
    - context: item
      description: Non Fossil Value Item
      label: Non Fossile Item
      name: itemNonFossil
      required: false
      type: TEXT
    - description: Icon Dimension in px, insert only the numeric value (default 100px, stay within 80px and 120px for best results)
      label: Icon Dimension
      name: iconDimension
      required: false
    - description: Border Radius, enter a numeric value from 0 to 100 (significant changes are visible from value between 40 and 70)
      label: Border Radius
      name: borderRadius
      required: false
  parameterGroups: []
timestamp: Jun 4, 2022, 12:54:59 PM
component: f7-card
config:
  title: = props.title
slots:
  content:
    - component: f7-block
      config:
        style:
          margin: 0
          padding: 0
      slots:
        default:
          - component: f7-block
            config:
              style:
                margin: 0
                padding: 0
                display: flex
                justify-content: space-between
                --f7-theme-color: var(--f7-text-color)
                --f7-block-font-size: 12px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      display: flex
                      flex-direction: column
                      align-items: center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemNonFossil) ? 'Non-Fossil' : ''"
                      - component: f7-block
                        config:
                          style:
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            border: 2px solid darkgreen
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                          visible: "=(props.itemNonFossil) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: "=(props.itemNonFossil) ? 'if:mdi:leaf' : ''"
                                height: 20px
                                color: darkgreen
                            - component: Label
                              config:
                                text: = items[props.itemNonFossil].displayState
                                style:
                                  font-size: 12px
                      - component: f7-block
                        config:
                          style:
                            height: 30px
                            width: 2px
                            padding: 0
                            margin: 0
                            border: 1px solid darkgreen
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                          visible: "=(props.itemNonFossil) ? true : false"
                      - component: f7-block
                        config:
                          style:
                            margin-top: "=(props.itemNonFossil) ? '0px' : (props.itemSolar) ? '150px' : (props.itemGas) ? '150px' : '0px'"
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            border: 2px solid teal
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:transmission-tower
                                height: 20px
                                color: teal
                            - component: oh-link
                              config:
                                text: = items[props.itemProductionToGrid].displayState
                                iconF7: "=(props.itemProductionToGrid) ? 'arrow_left' : ''"
                                iconSize: 12px
                                iconColor: purple
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                visible: = props.itemProductionToGrid
                            - component: oh-link
                              config:
                                text: = items[props.itemConsumptionFromGrid].displayState
                                iconF7: "=(props.itemConsumptionFromGrid) ? 'arrow_right' : ''"
                                iconSize: 12px
                                iconColor: blue
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                      - component: Label
                        config:
                          text: Grid
                - component: f7-col
                  config:
                    style:
                      flex-grow: 1
                      display: flex
                      flex-direction: column
                      align-items: center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemSolar) ? 'Solar' : ''"
                      - component: f7-block
                        config:
                          style:
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            border: 2px solid orange
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                          visible: "=(props.itemSolar) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:solar-power
                                height: 20px
                                color: orange
                            - component: Label
                              config:
                                text: =items[props.itemSolar].displayState
                                style:
                                  font-size: 12px
                      - component: f7-block
                        config:
                          style:
                            margin: 0
                            padding: 0
                            width: 100%
                            display: flex
                            height: "=((props.itemNonFossil) && (props.itemSolar) && (props.itemGas)) ? '145px' : ((props.itemNonFossil) && (props.itemSolar)) ? '145px' : ((props.itemNonFossil) && (props.itemGas)) ? '320px' : ((props.itemSolar) && (props.itemGas)) ? '145px' : (props.itemNonFossil) ? '320px' : (props.itemGas) ? '320px' : '145px'"
                            justify-content: center
                        slots:
                          default:
                            - component: f7-row
                              config:
                                tag: svg
                                xmlns: http://www.w3.org/2000/svg
                                viewBox: "=((props.itemNonFossil) || (props.itemSolar) || (props.itemGas))?  '0 0 100 100' : '0 8 100 100'"
                                preserveAspectRatio: xMidYMid slice
                                style:
                                  height: auto
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      tag: path
                                      id: path1
                                      d: M53,0 v15 c0,40 10,35 30,35 h20
                                      stroke: orange
                                      stroke-width: 1
                                      vector-effect: non-scaling-stroke
                                      fill: none
                                      visible: "=(props.itemSolar) ? true : false"
                                  - component: f7-row
                                    config:
                                      tag: circle
                                      r: 1
                                      vector-effect: non-scaling-stroke
                                      fill: orange
                                      style:
                                        stroke-width: 4
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: animateMotion
                                            repeatCount: indefinite
                                            calcMode: linear
                                            dur: 5s
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path1"
                                  - component: f7-row
                                    config:
                                      tag: path
                                      id: path2
                                      d: M47,0 v15 c0,40 -10,35 -30,35 h-20
                                      stroke: purple
                                      stroke-width: 1
                                      vector-effect: non-scaling-stroke
                                      fill: none
                                      visible: "=(props.itemSolar) ? true : false"
                                  - component: f7-row
                                    config:
                                      tag: circle
                                      r: 1
                                      vectorEffect: non-scaling-stroke
                                      strokeWidth: 10
                                      fill: purple
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: animateMotion
                                            repeatCount: indefinite
                                            calcMode: linear
                                            dur: 3s
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path2"
                                  - component: f7-row
                                    config:
                                      tag: path
                                      id: path3
                                      d: M0,55 H100
                                      stroke: teal
                                      stroke-width: 1
                                      vector-effect: non-scaling-stroke
                                      fill: none
                                  - component: f7-row
                                    config:
                                      tag: circle
                                      r: 1
                                      vectorEffect: non-scaling-stroke
                                      strokeWidth: 10
                                      fill: teal
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: animateMotion
                                            repeatCount: indefinite
                                            calcMode: linear
                                            dur: 3s
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path3"
                - component: f7-col
                  config:
                    style:
                      display: flex
                      flex-direction: column
                      align-items: center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemGas) ? 'Gas' : ''"
                      - component: f7-block
                        config:
                          style:
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            border: 2px solid darkred
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                          visible: "=(props.itemGas) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:gas
                                height: 20px
                                color: darkred
                            - component: Label
                              config:
                                text: = items[props.itemGas].displayState
                                style:
                                  font-size: 12px
                      - component: f7-block
                        config:
                          style:
                            height: 30px
                            width: 2px
                            padding: 0
                            margin: 0
                            border: 1px solid darkred
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                          visible: "=(props.itemGas) ? true : false"
                      - component: f7-block
                        config:
                          style:
                            margin-top: "=((props.itemNonFossil) && (props.itemGas)) ? '0px' : ((props.itemSolar) && (props.itemGas)) ? '0px' : ((props.itemSolar) || (props.itemNonFossil)) ? '150px' : '0px'"
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            border: 2px solid gray
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:home
                                height: 20px
                                color: gray
                            - component: Label
                              config:
                                text: = items[props.itemHomeConsumption].displayState
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                      - component: Label
                        config:
                          text: Home

following complete code

uid: OH3_Livio_Energy_Summary
tags: []
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Consumption From Grid
      label: Consumption From Grid Item
      name: itemConsumptionFromGrid
      required: true
      type: TEXT
    - context: item
      description: Production to Grid
      label: Production to Grid Item
      name: itemProductionToGrid
      required: false
      type: TEXT
    - context: item
      description: Item Solar Production
      label: Solar Production Item
      name: itemSolar
      required: false
      type: TEXT
    - context: item
      description: Home Consumption
      label: Home Consumption Item
      name: itemHomeConsumption
      required: true
      type: TEXT
    - context: item
      description: Gas Consumption Item
      label: Item Gas Consumption
      name: itemGas
      required: false
      type: TEXT
    - context: item
      description: Non Fossil Value Item
      label: Non Fossile Item
      name: itemNonFossil
      required: false
      type: TEXT
    - description: Icon Dimension in px, insert only the numeric value (default 100px, stay within 80px and 120px for best results)
      label: Icon Dimension
      name: iconDimension
      required: false
    - description: Border Radius, enter a numeric value from 0 to 100 (significant changes are visible from value between 40 and 70)
      label: Border Radius
      name: borderRadius
      required: false
  parameterGroups: []
timestamp: Jun 4, 2022, 12:54:59 PM
component: f7-card
config:
  title: = props.title
slots:
  content:
    - component: f7-block
      config:
        style:
          margin: 0
          padding: 0
      slots:
        default:
          - component: f7-block
            config:
              style:
                margin: 0
                padding: 0
                display: flex
                justify-content: space-between
                --f7-theme-color: var(--f7-text-color)
                --f7-block-font-size: 12px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      display: flex
                      flex-direction: column
                      align-items: center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemNonFossil) ? 'Non-Fossil' : ''"
                      - component: f7-block
                        config:
                          style:
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            border: 2px solid darkgreen
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                          visible: "=(props.itemNonFossil) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: "=(props.itemNonFossil) ? 'if:mdi:leaf' : ''"
                                height: 20px
                                color: darkgreen
                            - component: Label
                              config:
                                text: = items[props.itemNonFossil].displayState
                                style:
                                  font-size: 12px
                      - component: f7-block
                        config:
                          style:
                            height: 30px
                            width: 2px
                            padding: 0
                            margin: 0
                            border: 1px solid darkgreen
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                          visible: "=(props.itemNonFossil) ? true : false"
                      - component: f7-block
                        config:
                          style:
                            margin-top: "=(props.itemNonFossil) ? '0px' : (props.itemSolar) ? '150px' : (props.itemGas) ? '150px' : '0px'"
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            border: 2px solid teal
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:transmission-tower
                                height: 20px
                                color: teal
                            - component: oh-link
                              config:
                                text: = items[props.itemProductionToGrid].displayState
                                iconF7: "=(props.itemProductionToGrid) ? 'arrow_left' : ''"
                                iconSize: 12px
                                iconColor: purple
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                visible: = props.itemProductionToGrid
                            - component: oh-link
                              config:
                                text: = items[props.itemConsumptionFromGrid].displayState
                                iconF7: "=(props.itemConsumptionFromGrid) ? 'arrow_right' : ''"
                                iconSize: 12px
                                iconColor: blue
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                      - component: Label
                        config:
                          text: Grid
                - component: f7-col
                  config:
                    style:
                      flex-grow: 1
                      display: flex
                      flex-direction: column
                      align-items: center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemSolar) ? 'Solar' : ''"
                      - component: f7-block
                        config:
                          style:
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            border: 2px solid orange
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                          visible: "=(props.itemSolar) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:solar-power
                                height: 20px
                                color: orange
                            - component: Label
                              config:
                                text: =items[props.itemSolar].displayState
                                style:
                                  font-size: 12px
                      - component: f7-block
                        config:
                          style:
                            margin: 0
                            padding: 0
                            width: 100%
                            display: flex
                            height: "=((props.itemNonFossil) && (props.itemSolar) && (props.itemGas)) ? '145px' : ((props.itemNonFossil) && (props.itemSolar)) ? '145px' : ((props.itemNonFossil) && (props.itemGas)) ? '320px' : ((props.itemSolar) && (props.itemGas)) ? '145px' : (props.itemNonFossil) ? '320px' : (props.itemGas) ? '320px' : '145px'"
                            justify-content: center
                        slots:
                          default:
                            - component: f7-row
                              config:
                                tag: svg
                                xmlns: http://www.w3.org/2000/svg
                                viewBox: "=((props.itemNonFossil) || (props.itemSolar) || (props.itemGas))?  '0 0 100 100' : '0 8 100 100'"
                                preserveAspectRatio: xMidYMid slice
                                style:
                                  height: auto
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      tag: path
                                      id: path1
                                      d: M53,0 v15 c0,40 10,35 30,35 h20
                                      stroke: orange
                                      stroke-width: 1
                                      vector-effect: non-scaling-stroke
                                      fill: none
                                      visible: "=(props.itemSolar) ? true : false"
                                  - component: f7-row
                                    config:
                                      tag: circle
                                      r: 1
                                      vector-effect: non-scaling-stroke
                                      fill: orange
                                      style:
                                        stroke-width: 4
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: animateMotion
                                            repeatCount: indefinite
                                            calcMode: linear
                                            dur: 5s
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path1"
                                  - component: f7-row
                                    config:
                                      tag: path
                                      id: path2
                                      d: M47,0 v15 c0,40 -10,35 -30,35 h-20
                                      stroke: purple
                                      stroke-width: 1
                                      vector-effect: non-scaling-stroke
                                      fill: none
                                      visible: "=(props.itemSolar) ? true : false"
                                  - component: f7-row
                                    config:
                                      tag: circle
                                      r: 1
                                      vectorEffect: non-scaling-stroke
                                      strokeWidth: 10
                                      fill: purple
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: animateMotion
                                            repeatCount: indefinite
                                            calcMode: linear
                                            dur: 3s
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path2"
                                  - component: f7-row
                                    config:
                                      tag: path
                                      id: path3
                                      d: M0,55 H100
                                      stroke: teal
                                      stroke-width: 1
                                      vector-effect: non-scaling-stroke
                                      fill: none
                                  - component: f7-row
                                    config:
                                      tag: circle
                                      r: 1
                                      vectorEffect: non-scaling-stroke
                                      strokeWidth: 10
                                      fill: teal
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: animateMotion
                                            repeatCount: indefinite
                                            calcMode: linear
                                            dur: 3s
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path3"
                - component: f7-col
                  config:
                    style:
                      display: flex
                      flex-direction: column
                      align-items: center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemGas) ? 'Gas' : ''"
                      - component: f7-block
                        config:
                          style:
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            border: 2px solid darkred
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                          visible: "=(props.itemGas) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:gas
                                height: 20px
                                color: darkred
                            - component: Label
                              config:
                                text: = items[props.itemGas].displayState
                                style:
                                  font-size: 12px
                      - component: f7-block
                        config:
                          style:
                            height: 30px
                            width: 2px
                            padding: 0
                            margin: 0
                            border: 1px solid darkred
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                          visible: "=(props.itemGas) ? true : false"
                      - component: f7-block
                        config:
                          style:
                            margin-top: "=((props.itemNonFossil) && (props.itemGas)) ? '0px' : ((props.itemSolar) && (props.itemGas)) ? '0px' : ((props.itemSolar) || (props.itemNonFossil)) ? '150px' : '0px'"
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            border: 2px solid gray
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:home
                                height: 20px
                                color: gray
                            - component: Label
                              config:
                                text: = items[props.itemHomeConsumption].displayState
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                      - component: Label
                        config:
                          text: Home

Please let me know if you find some bugs or if you would suggest some improvements

6 Likes

Hi, very good. I want ask, if also information about battery is in the plan to add into animation ?
Thanks

2 Likes

Even though my consumption from grid is 0 W, I see an animation from the grid to home. Is this expected behavior?

2 Likes

I have the same with the other animations as well. Solar Production is 0 W but there is an Animation to the grid and to the home.

I filled in all items (except the non fossile one) and get a realy strange animation… I see some flows but no values.

The three dots are all coming from ‘Solar’, but no sun anymore atm.
All these items are in kW.

I had this problem - my values are formatted as W whole number, and they would not show up unless they had a decimal

For each entry that looks like this, in the widget:

text: = items[props.itemProductionToGrid].displayStat

change it to

text: = items[props.itemProductionToGrid].displayState || items[props.itemProductionToGrid].state

Nice, much better!

Hopefully this will fix the problem with the animation, if no energy flow is present.
I’ve done a test today. If solar generation is > 0, the circles will “flow” in the right direction. After sunset, there is no circle moving. I hope i’ve also matched the grid to home and solar to grid circles.

uid: OH3_Livio_Energy_Summary
tags:
  - Energy
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Consumption From Grid
      label: Consumption From Grid Item
      name: itemConsumptionFromGrid
      required: true
      type: TEXT
    - context: item
      description: Production to Grid
      label: Production to Grid Item
      name: itemProductionToGrid
      required: false
      type: TEXT
    - context: item
      description: Item Solar Production
      label: Solar Production Item
      name: itemSolar
      required: false
      type: TEXT
    - context: item
      description: Home Consumption
      label: Home Consumption Item
      name: itemHomeConsumption
      required: true
      type: TEXT
    - context: item
      description: Gas Consumption Item
      label: Item Gas Consumption
      name: itemGas
      required: false
      type: TEXT
    - context: item
      description: Non Fossil Value Item
      label: Non Fossile Item
      name: itemNonFossil
      required: false
      type: TEXT
    - description: Icon Dimension in px, insert only the numeric value (default 100px, stay within 80px and 120px for best results)
      label: Icon Dimension
      name: iconDimension
      required: false
    - description: Border Radius, enter a numeric value from 0 to 100 (significant changes are visible from value between 40 and 70)
      label: Border Radius
      name: borderRadius
      required: false
  parameterGroups: []
timestamp: Jun 4, 2022, 12:54:59 PM
component: f7-card
config:
  title: = props.title
slots:
  content:
    - component: f7-block
      config:
        style:
          margin: 0
          padding: 0
      slots:
        default:
          - component: f7-block
            config:
              style:
                margin: 0
                padding: 0
                display: flex
                justify-content: space-between
                --f7-theme-color: var(--f7-text-color)
                --f7-block-font-size: 12px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      display: flex
                      flex-direction: column
                      align-items: center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemNonFossil) ? 'Non-Fossil' : ''"
                      - component: f7-block
                        config:
                          style:
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            border: 2px solid darkgreen
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                          visible: "=(props.itemNonFossil) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: "=(props.itemNonFossil) ? 'if:mdi:leaf' : ''"
                                height: 20px
                                color: darkgreen
                            - component: Label
                              config:
                                text: = items[props.itemNonFossil].displayState
                                style:
                                  font-size: 12px
                      - component: f7-block
                        config:
                          style:
                            height: 30px
                            width: 2px
                            padding: 0
                            margin: 0
                            border: 1px solid darkgreen
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                          visible: "=(props.itemNonFossil) ? true : false"
                      - component: f7-block
                        config:
                          style:
                            margin-top: "=(props.itemNonFossil) ? '0px' : (props.itemSolar) ? '150px' : (props.itemGas) ? '150px' : '0px'"
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            border: 2px solid teal
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:transmission-tower
                                height: 20px
                                color: teal
                            - component: oh-link
                              config:
                                text: = items[props.itemProductionToGrid].displayState
                                iconF7: "=(props.itemProductionToGrid) ? 'arrow_left' : ''"
                                iconSize: 12px
                                iconColor: purple
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                visible: = props.itemProductionToGrid
                            - component: oh-link
                              config:
                                text: = items[props.itemConsumptionFromGrid].displayState
                                iconF7: "=(props.itemConsumptionFromGrid) ? 'arrow_right' : ''"
                                iconSize: 12px
                                iconColor: blue
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                      - component: Label
                        config:
                          text: Grid
                - component: f7-col
                  config:
                    style:
                      flex-grow: 1
                      display: flex
                      flex-direction: column
                      align-items: center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemSolar) ? 'Solar' : ''"
                      - component: f7-block
                        config:
                          style:
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            border: 2px solid orange
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                          visible: "=(props.itemSolar) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:solar-power
                                height: 20px
                                color: orange
                            - component: Label
                              config:
                                text: =items[props.itemSolar].displayState
                                style:
                                  font-size: 12px
                      - component: f7-block
                        config:
                          style:
                            margin: 0
                            padding: 0
                            width: 100%
                            display: flex
                            height: "=((props.itemNonFossil) && (props.itemSolar) && (props.itemGas)) ? '145px' : ((props.itemNonFossil) && (props.itemSolar)) ? '145px' : ((props.itemNonFossil) && (props.itemGas)) ? '320px' : ((props.itemSolar) && (props.itemGas)) ? '145px' : (props.itemNonFossil) ? '320px' : (props.itemGas) ? '320px' : '145px'"
                            justify-content: center
                        slots:
                          default:
                            - component: f7-row
                              config:
                                tag: svg
                                xmlns: http://www.w3.org/2000/svg
                                viewBox: "=((props.itemNonFossil) || (props.itemSolar) || (props.itemGas))?  '0 0 100 100' : '0 8 100 100'"
                                preserveAspectRatio: xMidYMid slice
                                style:
                                  height: auto
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      tag: path
                                      id: path1
                                      d: M53,0 v15 c0,40 10,35 30,35 h20
                                      stroke: orange
                                      stroke-width: 1
                                      vector-effect: non-scaling-stroke
                                      fill: none
                                      visible: "=(props.itemSolar) ? true : false"
                                  - component: f7-row
                                    # draw circle for solar to home
                                    config:
                                      tag: circle
                                      r: 1
                                      vector-effect: non-scaling-stroke
                                      fill: orange
                                      style:
                                        stroke-width: 4
                                      visible: =items[props.itemSolar].state > 0
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: animateMotion
                                            repeatCount: indefinite
                                            calcMode: linear
                                            dur: 5s
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path1"
                                  - component: f7-row
                                    config:
                                      tag: path
                                      id: path2
                                      d: M47,0 v15 c0,40 -10,35 -30,35 h-20
                                      stroke: purple
                                      stroke-width: 1
                                      vector-effect: non-scaling-stroke
                                      fill: none
                                      visible: "=(props.itemSolar) ? true : false"
                                  - component: f7-row
                                    # draw circle for solar to grid
                                    config:
                                      tag: circle
                                      r: 1
                                      vectorEffect: non-scaling-stroke
                                      strokeWidth: 10
                                      fill: purple
                                      visible: =items[props.itemProductionToGrid].state > 0
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: animateMotion
                                            repeatCount: indefinite
                                            calcMode: linear
                                            dur: 3s
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path2"
                                  - component: f7-row
                                    config:
                                      tag: path
                                      id: path3
                                      d: M0,55 H100
                                      stroke: teal
                                      stroke-width: 1
                                      vector-effect: non-scaling-stroke
                                      fill: none
                                  - component: f7-row
                                    # draw circle for grid to home
                                    config:
                                      tag: circle
                                      r: 1
                                      vectorEffect: non-scaling-stroke
                                      strokeWidth: 10
                                      fill: teal
                                      visible: =items[props.itemConsumptionFromGrid].state > 0
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: animateMotion
                                            repeatCount: indefinite
                                            calcMode: linear
                                            dur: 3s
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path3"
                - component: f7-col
                  config:
                    style:
                      display: flex
                      flex-direction: column
                      align-items: center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemGas) ? 'Gas' : ''"
                      - component: f7-block
                        config:
                          style:
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            border: 2px solid darkred
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                          visible: "=(props.itemGas) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:gas
                                height: 20px
                                color: darkred
                            - component: Label
                              config:
                                text: = items[props.itemGas].displayState
                                style:
                                  font-size: 12px
                      - component: f7-block
                        config:
                          style:
                            height: 30px
                            width: 2px
                            padding: 0
                            margin: 0
                            border: 1px solid darkred
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                          visible: "=(props.itemGas) ? true : false"
                      - component: f7-block
                        config:
                          style:
                            margin-top: "=((props.itemNonFossil) && (props.itemGas)) ? '0px' : ((props.itemSolar) && (props.itemGas)) ? '0px' : ((props.itemSolar) || (props.itemNonFossil)) ? '150px' : '0px'"
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            border: 2px solid gray
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:home
                                height: 20px
                                color: gray
                            - component: Label
                              config:
                                text: = items[props.itemHomeConsumption].displayState
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                      - component: Label
                        config:
                          text: Home```

Hello,
using the code in the first post I get lines not connected, do you know why?

Hello,
in my environment, the widget is displayed outside the box (see Home-Box).
Any Ideas?
grafik

Thanks.

i had the problem with the widget-code that the bubbles were not flowing on my site. So i fixed it and added a little gimmick, that the bubbles are flying faster or slower as how much power is which is in the line. My items are measured in W. If you have your items in kW search for 3 times “1000” in the widget and change this to 1. Here the new code for them which wants to use:

uid: OH3_Livio_Energy_Summary
tags:
  - Energy
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Consumption From Grid
      label: Consumption From Grid Item
      name: itemConsumptionFromGrid
      required: true
      type: TEXT
    - context: item
      description: Production to Grid
      label: Production to Grid Item
      name: itemProductionToGrid
      required: false
      type: TEXT
    - context: item
      description: Item Solar Production
      label: Solar Production Item
      name: itemSolar
      required: false
      type: TEXT
    - context: item
      description: Home Consumption
      label: Home Consumption Item
      name: itemHomeConsumption
      required: true
      type: TEXT
    - context: item
      description: Gas Consumption Item
      label: Item Gas Consumption
      name: itemGas
      required: false
      type: TEXT
    - context: item
      description: Non Fossil Value Item
      label: Non Fossile Item
      name: itemNonFossil
      required: false
      type: TEXT
    - description: Icon Dimension in px, insert only the numeric value (default 100px, stay within 80px and 120px for best results)
      label: Icon Dimension
      name: iconDimension
      required: false
    - description: Border Radius, enter a numeric value from 0 to 100 (significant changes are visible from value between 40 and 70)
      label: Border Radius
      name: borderRadius
      required: false
  parameterGroups: []
timestamp: Sep 10, 2023, 6:07:15 PM
component: f7-card
config:
  title: = props.title
slots:
  content:
    - component: f7-block
      config:
        style:
          margin: 0
          padding: 0
      slots:
        default:
          - component: f7-block
            config:
              style:
                --f7-block-font-size: 12px
                --f7-theme-color: var(--f7-text-color)
                display: flex
                justify-content: space-between
                margin: 0
                padding: 0
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemNonFossil) ? 'Non-Fossil' : ''"
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 2px solid darkgreen
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            justify-content: center
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                          visible: "=(props.itemNonFossil) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: darkgreen
                                height: 20px
                                icon: "=(props.itemNonFossil) ? 'if:mdi:leaf' : ''"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                text: = items[props.itemNonFossil].displayState
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 1px solid darkgreen
                            display: flex
                            flex-direction: column
                            height: 30px
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 2px
                          visible: "=(props.itemNonFossil) ? true : false"
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 2px solid teal
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            justify-content: center
                            margin-top: "=(props.itemNonFossil) ? '0px' : (props.itemSolar) ? '150px' : (props.itemGas) ? '150px' : '0px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: teal
                                height: 20px
                                icon: if:mdi:transmission-tower
                            - component: oh-link
                              config:
                                iconColor: purple
                                iconF7: "=(props.itemProductionToGrid) ? 'arrow_left' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemProductionToGrid].displayState
                                visible: = props.itemProductionToGrid
                            - component: oh-link
                              config:
                                iconColor: blue
                                iconF7: "=(props.itemConsumptionFromGrid) ? 'arrow_right' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemConsumptionFromGrid].displayState
                      - component: Label
                        config:
                          text: Grid
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      flex-grow: 1
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemSolar) ? 'Solar' : ''"
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 2px solid orange
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            justify-content: center
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                          visible: "=(props.itemSolar) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: orange
                                height: 20px
                                icon: if:mdi:solar-power
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                text: =items[props.itemSolar].displayState
                      - component: f7-block
                        config:
                          style:
                            display: flex
                            height: "=((props.itemNonFossil) && (props.itemSolar) && (props.itemGas)) ? '145px' : ((props.itemNonFossil) && (props.itemSolar)) ? '145px' : ((props.itemNonFossil) && (props.itemGas)) ? '320px' : ((props.itemSolar) && (props.itemGas)) ? '145px' : (props.itemNonFossil) ? '320px' : (props.itemGas) ? '320px' : '145px'"
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 100%
                        slots:
                          default:
                            - component: f7-row
                              config:
                                preserveAspectRatio: xMidYMid slice
                                style:
                                  height: auto
                                tag: svg
                                viewBox: "=((props.itemNonFossil) || (props.itemSolar) || (props.itemGas))?  '0 0 100 100' : '0 8 100 100'"
                                xmlns: http://www.w3.org/2000/svg
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      d: M53,0 v15 c0,40 10,35 30,35 h20
                                      fill: none
                                      id: path1
                                      stroke: orange
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                      visible: "=(props.itemSolar) ? true : false"
                                  - component: f7-row
                                    config:
                                      fill: orange
                                      r: 1
                                      style:
                                        stroke-width: 4
                                      tag: circle
                                      vector-effect: non-scaling-stroke
                                      visible: =Number.parseFloat(items[props.itemSolar].state) > 0
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: =0.2+1000/Number.parseFloat(items[props.itemSolar].state)+0.1
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path1"
                                  - component: f7-row
                                    config:
                                      d: M47,0 v15 c0,40 -10,35 -30,35 h-20
                                      fill: none
                                      id: path2
                                      stroke: purple
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                      visible: "=(props.itemSolar) ? true : false"
                                  - component: f7-row
                                    config:
                                      fill: purple
                                      r: 1
                                      strokeWidth: 10
                                      tag: circle
                                      vectorEffect: non-scaling-stroke
                                      visible: =Number.parseFloat(items[props.itemProductionToGrid].state) > 0
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: =0.2+1000/Number.parseFloat(items[props.itemProductionToGrid].state)+0.1
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path2"
                                  - component: f7-row
                                    config:
                                      d: M0,55 H100
                                      fill: none
                                      id: path3
                                      stroke: teal
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                  - component: f7-row
                                    config:
                                      fill: teal
                                      r: 1
                                      strokeWidth: 10
                                      tag: circle
                                      vectorEffect: non-scaling-stroke
                                      visible: =Number.parseFloat(items[props.itemConsumptionFromGrid].state) > 0
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: =0.2+1000/Number.parseFloat(items[props.itemConsumptionFromGrid].state)+0.1
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path3"
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemGas) ? 'Gas' : ''"
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 2px solid darkred
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            justify-content: center
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                          visible: "=(props.itemGas) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: darkred
                                height: 20px
                                icon: if:mdi:gas
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                text: = items[props.itemGas].displayState
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 1px solid darkred
                            display: flex
                            flex-direction: column
                            height: 30px
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 2px
                          visible: "=(props.itemGas) ? true : false"
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 2px solid gray
                            border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            justify-content: center
                            margin-top: "=((props.itemNonFossil) && (props.itemGas)) ? '0px' : ((props.itemSolar) && (props.itemGas)) ? '0px' : ((props.itemSolar) || (props.itemNonFossil)) ? '150px' : '0px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: gray
                                height: 20px
                                icon: if:mdi:home
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemHomeConsumption].displayState
                      - component: Label
                        config:
                          text: Home

I extended/changed the widget in order to support my managed equipment. I added:

  • Battery
  • Water
  • Electric Car

All elements are supporing multiple lines, e.g. for SOC, status, …

The name of each Element can be changed. E.g. CarAudi Q5

Electric consumers are visualized using the purple colored arrow and a minus prefix.
Electric generators are visualized using the blue colored arrow.

Small improvements incl the one from above are implemented (state v.s. displayState, animation only when energy flows).

All can be configured:

Source

uid: OH3_Livio_Energy_Summary_MikeTheTux
tags: []
props:
  parameters:
    - description: Widget Title
      label: Widget Title
      name: title
      required: false
      type: TEXT
    - description: Grid Title
      label: Grid Title
      name: titleGrid
      required: false
      type: TEXT
    - context: item
      description: Consumption From Grid
      label: Consumption From Grid Item
      name: itemConsumptionFromGrid
      required: true
      type: TEXT
    - context: item
      description: Production to Grid
      label: Production to Grid Item
      name: itemProductionToGrid
      required: false
      type: TEXT
    - description: Solar Title
      label: Solar Title
      name: titleSolar
      required: false
      type: TEXT
    - context: item
      description: Item Solar Production (first)
      label: Solar Production Item (first)
      name: itemSolar
      required: false
      type: TEXT
    - context: item
      description: Item Solar Production (second)
      label: Solar Production Item (second)
      name: itemSolar2
      required: false
      type: TEXT
    - context: item
      description: Item Solar Production (third)
      label: Solar Production Item (third)
      name: itemSolar3
      required: false
      type: TEXT
    - description: Home Title
      label: Home Title
      name: titleHome
      required: false
      type: TEXT
    - context: item
      description: Home Consumption (first)
      label: Home Consumption Item (first)
      name: itemHomeConsumption
      required: true
      type: TEXT
    - context: item
      description: Home Consumption (second)
      label: Home Consumption Item (second)
      name: itemHomeConsumption2
      required: false
      type: TEXT
    - context: item
      description: Home Consumption (third)
      label: Home Consumption Item (third)
      name: itemHomeConsumption3
      required: false
      type: TEXT
    - description: Battery Title
      label: Battery Title
      name: titleBattery
      required: false
      type: TEXT
    - context: item
      description: Battery Load/Decharge Item (first)
      label: Item Battery Load/Decharge (first)
      name: itemBattery
      required: false
      type: TEXT
    - context: item
      description: Battery Load/Decharge Item (second)
      label: Item Battery Load/Decharge (second)
      name: itemBattery2
      required: false
      type: TEXT
    - context: item
      description: Battery Load/Decharge Item (third)
      label: Item Battery Load/Decharge (third)
      name: itemBattery3
      required: false
      type: TEXT
    - description: Car Title
      label: Car Title
      name: titleCar
      required: false
      type: TEXT
    - context: item
      description: Car Load Item (first)
      label: Item Car Load (first)
      name: itemCar
      required: false
      type: TEXT
    - context: item
      description: Car Load Item (second)
      label: Item Car Load (second)
      name: itemCar2
      required: false
      type: TEXT
    - context: item
      description: Car Load Item (third)
      label: Item Car Load (third)
      name: itemCar3
      required: false
      type: TEXT
    - description: Water Title
      label: Water Title
      name: titleWater
      required: false
      type: TEXT
    - context: item
      description: Water Load Item (first)
      label: Item Water Load (first)
      name: itemWater
      required: false
      type: TEXT
    - context: item
      description: Water Load Item (second)
      label: Item Water Load (second)
      name: itemWater2
      required: false
      type: TEXT
    - context: item
      description: Water Load Item (third)
      label: Item Water Load (third)
      name: itemWater3
      required: false
      type: TEXT
    - description: Non Fossil Title
      label: Non Fossil Title
      name: titleNonFossil
      required: false
      type: TEXT
    - context: item
      description: Non Fossil Value Item
      label: Non Fossile Item
      name: itemNonFossil
      required: false
      type: TEXT
    - description: Icon Dimension in px, insert only the numeric value (default 100px, stay within 80px and 120px for best results)
      label: Icon Dimension
      name: iconDimension
      required: false
    - description: Border Radius, enter a numeric value from 0 to 100 (significant changes are visible from value between 40 and 70)
      label: Border Radius
      name: borderRadius
      required: false
  parameterGroups: []
timestamp: Sep 27, 2023, 2:42:26 PM
component: f7-card
config:
  title: = props.title
slots:
  content:
    - component: f7-block
      config:
        style:
          margin: 0
          padding: 0
      slots:
        default:
          - component: f7-block
            config:
              style:
                --f7-block-font-size: 12px
                --f7-theme-color: var(--f7-text-color)
                display: flex
                justify-content: space-between
                margin: 0
                padding: 0
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemNonFossil) ? ((props.titleNonFossil) ? props.titleNonFossil : 'Non-Fossil') : ''"
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 2px solid brown
                            border-radius: "=props.borderRadius ? Number(props.borderRadius) +'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            justify-content: center
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                          visible: "=(props.itemNonFossil) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: red
                                height: 20px
                                icon: "=(props.itemNonFossil) ? 'if:mdi:fire' : ''"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemNonFossil].displayState || items[props.itemNonFossil].state
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 1px solid brown
                            display: flex
                            flex-direction: column
                            height: 22px
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 1px
                          visible: "=(props.itemNonFossil) ? true : false"
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 2px solid teal
                            border-radius: "=props.borderRadius ? Number(props.borderRadius) +'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            justify-content: center
                            margin-top: "=(props.itemNonFossil) ? '0px' : (props.itemSolar) ? '150px' : (props.itemCar) ? '150px' : '0px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: teal
                                height: 20px
                                icon: if:mdi:transmission-tower
                            - component: oh-link
                              config:
                                iconColor: purple
                                iconF7: "=(props.itemProductionToGrid) ? 'arrow_left' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: "= ((Number((items[props.itemProductionToGrid].displayState || items[props.itemProductionToGrid].state).split(' ')[0]) > 0) ? '-' : '') + (items[props.itemProductionToGrid].displayState || items[props.itemProductionToGrid].state)"
                                visible: "=(props.itemProductionToGrid) ? true : false"
                            - component: oh-link
                              config:
                                iconColor: blue
                                iconF7: "=(props.itemConsumptionFromGrid) ? 'arrow_right' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemConsumptionFromGrid].displayState || items[props.itemConsumptionFromGrid].state
                                visible: "=(props.itemConsumptionFromGrid) ? true : false"
                      - component: Label
                        config:
                          text: "=(props.titleGrid) ? props.titleGrid : 'Grid'"
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      flex-grow: 1
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemSolar) ? ((props.titleSolar) ? props.titleSolar : 'Solar') : ''"
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 2px solid orange
                            border-radius: "=props.borderRadius ? Number(props.borderRadius) +'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            justify-content: center
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                          visible: "=(props.itemSolar) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: orange
                                height: 20px
                                icon: if:mdi:solar-power
                            - component: oh-link
                              config:
                                iconColor: blue
                                iconF7: "=(props.itemProductionToGrid) ? 'arrow_down' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemSolar].displayState || items[props.itemSolar].state
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemSolar2].displayState || items[props.itemSolar2].state
                                visible: "=(props.itemSolar2) ? true : false"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemSolar3].displayState || items[props.itemSolar3].state
                                visible: "=(props.itemSolar3) ? true : false"
                      - component: f7-block
                        config:
                          style:
                            display: flex
                            height: "=((props.itemNonFossil) && (props.itemSolar) && (props.itemCar)) ? '145px' : ((props.itemNonFossil) && (props.itemSolar)) ? '145px' : ((props.itemNonFossil) && (props.itemCar)) ? '320px' : ((props.itemSolar) && (props.itemCar)) ? '145px' : (props.itemNonFossil) ? '320px' : (props.itemCar) ? '320px' : '145px'"
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 100%
                        slots:
                          default:
                            - component: f7-row
                              config:
                                preserveAspectRatio: xMidYMid slice
                                style:
                                  height: auto
                                tag: svg
                                viewBox: "=((props.itemNonFossil) || (props.itemSolar) || (props.itemCar)) ? '0 0 100 100' : '0 8 100 100'"
                                xmlns: http://www.w3.org/2000/svg
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      d: M53,0 v15 c0,27 10,32 30,32 h20
                                      fill: none
                                      id: path1
                                      stroke: orange
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                      visible: "=(props.itemSolar) ? true : false"
                                  - component: f7-row
                                    config:
                                      fill: orange
                                      r: 1
                                      style:
                                        stroke-width: 4
                                      tag: circle
                                      vector-effect: non-scaling-stroke
                                      visible: "=(props.itemSolar && (Number((items[props.itemSolar].displayState || items[props.itemSolar].state).split(' ')[0]) > 0)) ? true : false"
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: 5s
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path1"
                                  - component: f7-row
                                    config:
                                      d: M47,0 v15 c0,27 -10,32 -30,32 h-20
                                      fill: none
                                      id: path2
                                      stroke: purple
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                      visible: "=(props.itemSolar) ? true : false"
                                  - component: f7-row
                                    config:
                                      fill: purple
                                      r: 1
                                      strokeWidth: 10
                                      tag: circle
                                      vectorEffect: non-scaling-stroke
                                      visible: "=(props.itemSolar && (Number((items[props.itemProductionToGrid].displayState || items[props.itemProductionToGrid].state).split(' ')[0]) > 0)) ? true : false"
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: 3s
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path2"
                                  - component: f7-row
                                    config:
                                      d: M0,50 H100
                                      fill: none
                                      id: path3
                                      stroke: teal
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                  - component: f7-row
                                    config:
                                      fill: teal
                                      r: 1
                                      strokeWidth: 10
                                      tag: circle
                                      vectorEffect: non-scaling-stroke
                                      visible: "=(Number((items[props.itemProductionFromGrid].displayState || items[props.itemProductionFromGrid].state).split(' ')[0]) = 0) ? true : false"
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: 3s
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path3"
                                  - component: f7-row
                                    config:
                                      d: M50,0 v100
                                      fill: none
                                      id: path4
                                      stroke: green
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                      visible: "=(props.itemBattery) ? true : false"
                                  - component: f7-row
                                    config:
                                      fill: green
                                      r: 1
                                      style:
                                        stroke-width: 4
                                      tag: circle
                                      vector-effect: non-scaling-stroke
                                      visible: "=(props.itemBattery && (Number((items[props.itemBattery].displayState || items[props.itemBattery].state).split(' ')[0]) < 0)) ? true : false"
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: 5s
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path4"
                                  - component: f7-row
                                    config:
                                      d: M53,100 v-15 c0,-27 10,-32 30,-32 h20
                                      fill: none
                                      id: path5
                                      stroke: green
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                      visible: "=(props.itemBattery) ? true : false"
                                  - component: f7-row
                                    config:
                                      fill: green
                                      r: 1
                                      style:
                                        stroke-width: 4
                                      tag: circle
                                      vector-effect: non-scaling-stroke
                                      visible: "=(props.itemBattery && (Number((items[props.itemBattery].displayState || items[props.itemBattery].state).split(' ')[0]) > 0)) ? true : false"
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: 5s
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path5"
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 1px solid green
                            display: flex
                            flex-direction: column
                            height: 30px
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 1px
                          visible: "=(props.itemBattery) ? false : false"
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 2px solid green
                            border-radius: "=props.borderRadius ? Number(props.borderRadius) +'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            justify-content: center
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                          visible: "=(props.itemBattery) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: green
                                height: 20px
                                icon: if:mdi:battery-charging
                            - component: oh-link
                              config:
                                iconColor: "=(props.itemBattery) ? ((Number((items[props.itemBattery].displayState || items[props.itemBattery].state).split(' ')[0]) < 0) ? 'purple' : 'blue') : ''"
                                iconF7: "=(props.itemBattery) ? ((Number((items[props.itemBattery].displayState || items[props.itemBattery].state).split(' ')[0]) < 0) ? 'arrow_down' : 'arrow_up') : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemBattery].displayState || items[props.itemBattery].state
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemBattery2].displayState || items[props.itemBattery2].state
                                visible: "=(props.itemBattery2) ? true : false"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemBattery3].displayState || items[props.itemBattery3].state
                                visible: "=(props.itemBattery3) ? true : false"
                      - component: Label
                        config:
                          text: "=(props.itemBattery) ? ((props.titleBattery) ? props.titleBattery : 'Battery') : ''"
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemCar) ? ((props.titleCar) ? props.titleCar : 'Car') : ''"
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 2px solid lightblue
                            border-radius: "=props.borderRadius ? Number(props.borderRadius) +'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            justify-content: center
                            margin-top: 0px
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                          visible: "=(props.itemCar) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: lightblue
                                height: 20px
                                icon: if:mdi:car
                            - component: oh-link
                              config:
                                iconColor: purple
                                iconF7: "=(props.itemCar) ? 'arrow_up' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: "= ((Number((items[props.itemCar].displayState || items[props.itemCar].state).split(' ')[0]) > 0) ? '-' : '') + (items[props.itemCar].displayState || items[props.itemCar].state)"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemCar2].displayState || items[props.itemCar2].state
                                visible: "=(props.itemCar2) ? true : false"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemCar3].displayState || items[props.itemCar3].state
                                visible: "=(props.itemCar3) ? true : false"
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 1px solid lightblue
                            display: flex
                            flex-direction: column
                            height: 22px
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 1px
                          visible: "=(props.itemCar) ? true : false"
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 2px solid gray
                            border-radius: "=props.borderRadius ? Number(props.borderRadius) +'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            justify-content: center
                            margin-top: "=((props.itemNonFossil) && (props.itemBattery)) ? '0px' : ((props.itemSolar) && (props.itemBattery)) ? '0px' : ((props.itemSolar) || (props.itemNonFossil)) ? '150px' : '0px'"
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: gray
                                height: 20px
                                icon: if:mdi:home
                            - component: oh-link
                              config:
                                iconColor: purple
                                iconF7: "=(props.itemHomeConsumption) ? 'arrow_right' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: "= ((Number((items[props.itemHomeConsumption].displayState || items[props.itemHomeConsumption].state).split(' ')[0]) > 0) ? '-' : '') + (items[props.itemHomeConsumption].displayState || items[props.itemHomeConsumption].state)"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemHomeConsumption2].displayState || items[props.itemHomeConsumption2].state
                                visible: "=(props.itemHomeConsumption2) ? true : false"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemHomeConsumption3].displayState || items[props.itemHomeConsumption3].state
                                visible: "=(props.itemHomeConsumption3) ? true : false"
                      - component: Label
                        config:
                          text: "=(props.titleHome) ? props.titleHome : 'Home'"
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 1px solid blue
                            display: flex
                            flex-direction: column
                            height: 5px
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 1px
                          visible: "=(props.itemWater) ? true : false"
                      - component: f7-block
                        config:
                          style:
                            align-items: center
                            border: 2px solid blue
                            border-radius: "=props.borderRadius ? Number(props.borderRadius) +'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                            justify-content: center
                            margin-top: 0px
                            width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
                          visible: "=(props.itemWater) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: blue
                                height: 20px
                                icon: if:mdi:water
                            - component: oh-link
                              config:
                                iconColor: purple
                                iconF7: "=(props.itemWater) ? 'arrow_down' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: "= ((Number((items[props.itemWater].displayState || items[props.itemWater].state).split(' ')[0]) > 0) ? '-' : '') + (items[props.itemWater].displayState || items[props.itemWater].state)"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemWater2].displayState || items[props.itemWater2].state
                                visible: "=(props.itemWater2) ? true : false"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = items[props.itemWater3].displayState || items[props.itemWater3].state
                                visible: "=(props.itemWater3) ? true : false"
                      - component: Label
                        config:
                          text: "=(props.itemWater) ? ((props.titleWater) ? props.titleWater : 'Water') : ''"

Have fun!

1 Like

This is awesome! I thank you all for contributing in making this widget so great.
I am trying to adapt it for my needs and am only missing one little thing.

I would like to make a doughnut chart out of the ‘Home’ consumption circle to display graphically how much is consumed in the center in kwh and how much is being used from PV or from the grid.
Like that:
IMG_4623
IMG_4622

Unfortunately, my SVG capabilities in OH widgets are limited. Does anyone know how to implement this?
Thank you all!

Good idea.
I did a mock-up that looks the following:

Issues / to be improved:

  • Initial house icon is lost
  • :arrow_right: Arrow in front of the load is lost
  • Gauge can only show 2 values (Grid and Solar+Battery) but not 3 (Grid, Solar and Battery separate)
  • Issues in the calculation if the items provide the values in different units (kW vs W)
  • Autoarky applies for the entire load (Home + Water + Car) but is shown at the Home only (minor flaw in visualization)
  • Take a pre-calculate autarky-rate from an item instead of the calculation within the widget
  • Home supports now only 2 instead of 3 possible lines

Btw, you mix up kW with kWh.
Or do you want to show the autarky-rate for the last day (or week, or month) and not the actual moment?

Replace the “Home f7-block” with the following code:

- component: oh-gauge
  config:
    borderBgColor: teal
    borderColor: orange
    borderWidth: 2
    value: "=Math.abs(Number.parseFloat((@props.itemHomeConsumption))) + Math.abs(Number.parseFloat((@props.itemCar))) + Math.abs(Number.parseFloat((@props.itemWater))) - Math.abs(Number.parseFloat((@props.itemConsumptionFromGrid)))"
    valueText: "= '🏠 ' + ((Number.parseFloat((@props.itemHomeConsumption)) > 0) ? '-' : '') + @props.itemHomeConsumption"
    labelText: "= '🔆 ' + (100.0 - Math.round(1000.0 * Math.abs(Number.parseFloat((@props.itemConsumptionFromGrid))) / (Math.abs(Number.parseFloat((@props.itemHomeConsumption))) + Math.abs(Number.parseFloat((@props.itemCar))) + Math.abs(Number.parseFloat((@props.itemWater))))) / 10.0).toFixed(1) + ' %'"
    max: "=Math.abs(Number.parseFloat((@props.itemHomeConsumption))) + Math.abs(Number.parseFloat((@props.itemCar))) + Math.abs(Number.parseFloat((@props.itemWater)))"
    min: 0
    type: circle
    valueTextColor: white
    valueFontSize: 12
    labelFontSize: 12
    labelTextColor: orange
    valueFontWeight: 400
    size: 100
1 Like

Wow, this is simply great!
I believe the autoarky rate is good when shown like that (the actual value). If any and we would like to check historical values we can add an action to the icon and show a popup with the chart I think!

Simply great. Thank you very very much!

I’m thinking of changing the layout into a similar setup like:

Having the Inverter in the center, the Inverter can than show the autartky-rate in total for all the different loads (Home, Car, Water).

Draft:

v3:

Great idea indeed.
Would you mind sharing the code? :wink:

Here is the code of my latest version (v3).

uid: OH3_Livio_Energy_Summary_MikeTheTux_3
tags: []
props:
  parameters:
    - description: Widget Title
      label: Widget Title
      name: title
      required: false
      type: TEXT
    - description: Grid Title
      label: Grid Title
      name: titleGrid
      required: false
      type: TEXT
    - context: item
      description: Consumption From Grid
      label: Consumption From Grid Item
      name: itemConsumptionFromGrid
      required: true
      type: TEXT
    - context: item
      description: Production to Grid
      label: Production to Grid Item
      name: itemProductionToGrid
      required: false
      type: TEXT
    - description: Solar Title
      label: Solar Title
      name: titleSolar
      required: false
      type: TEXT
    - context: item
      description: Item Solar Production (first)
      label: Solar Production Item (first)
      name: itemSolar
      required: false
      type: TEXT
    - context: item
      description: Item Solar Production (second)
      label: Solar Production Item (second)
      name: itemSolar2
      required: false
      type: TEXT
    - context: item
      description: Item Solar Production (third)
      label: Solar Production Item (third)
      name: itemSolar3
      required: false
      type: TEXT
    - description: Home Title
      label: Home Title
      name: titleHome
      required: false
      type: TEXT
    - context: item
      description: Home Consumption (first)
      label: Home Consumption Item (first)
      name: itemHomeConsumption
      required: true
      type: TEXT
    - context: item
      description: Home Consumption (second)
      label: Home Consumption Item (second)
      name: itemHomeConsumption2
      required: false
      type: TEXT
    - context: item
      description: Home Consumption (third)
      label: Home Consumption Item (third)
      name: itemHomeConsumption3
      required: false
      type: TEXT
    - description: Battery Title
      label: Battery Title
      name: titleBattery
      required: false
      type: TEXT
    - context: item
      description: Battery Load/Decharge Item (first)
      label: Item Battery Load/Decharge (first)
      name: itemBattery
      required: false
      type: TEXT
    - context: item
      description: Battery Load/Decharge Item (second)
      label: Item Battery Load/Decharge (second)
      name: itemBattery2
      required: false
      type: TEXT
    - context: item
      description: Battery Load/Decharge Item (third)
      label: Item Battery Load/Decharge (third)
      name: itemBattery3
      required: false
      type: TEXT
    - description: Car Title
      label: Car Title
      name: titleCar
      required: false
      type: TEXT
    - context: item
      description: Car Load Item (first)
      label: Item Car Load (first)
      name: itemCar
      required: false
      type: TEXT
    - context: item
      description: Car Load Item (second)
      label: Item Car Load (second)
      name: itemCar2
      required: false
      type: TEXT
    - context: item
      description: Car Load Item (third)
      label: Item Car Load (third)
      name: itemCar3
      required: false
      type: TEXT
    - description: Water Title
      label: Water Title
      name: titleWater
      required: false
      type: TEXT
    - context: item
      description: Water Load Item (first)
      label: Item Water Load (first)
      name: itemWater
      required: false
      type: TEXT
    - context: item
      description: Water Load Item (second)
      label: Item Water Load (second)
      name: itemWater2
      required: false
      type: TEXT
    - context: item
      description: Water Load Item (third)
      label: Item Water Load (third)
      name: itemWater3
      required: false
      type: TEXT
    - description: Non Fossil Title
      label: Non Fossil Title
      name: titleNonFossil
      required: false
      type: TEXT
    - context: item
      description: Non Fossil Value Item
      label: Non Fossile Item
      name: itemNonFossil
      required: false
      type: TEXT
    - description: Icon Dimension in px (default 100px, stay within 80 and 120px for best results)
      label: Icon Dimension
      name: iconDimension
      required: false
    - description: Border Radius in px (default 0px, significant changes between 40 and 70px)
      label: Border Radius
      name: borderRadius
      required: false
  parameterGroups: []
timestamp: Nov 8, 2023, 9:05:24 PM
component: f7-card
config:
  title: = props.title
slots:
  content:
    - component: f7-block
      config:
        style:
          margin: 0
          padding: 0
      slots:
        default:
          - component: f7-block
            config:
              style:
                --f7-block-font-size: 12px
                --f7-theme-color: var(--f7-text-color)
                display: flex
                justify-content: space-between
                margin: 0
                padding: 0
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemNonFossil) ? ((props.titleNonFossil) ? props.titleNonFossil : 'Non-Fossil') : ''"
                      - component: f7-block
                        config:
                          bgColor: black
                          style:
                            align-items: center
                            border: 2px solid brown
                            border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            justify-content: center
                            width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                          visible: "=(props.itemNonFossil) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: red
                                height: 20px
                                icon: "=(props.itemNonFossil) ? 'if:mdi:fire' : ''"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemNonFossil
                      - component: f7-block
                        config:
                          bgColor: black
                          style:
                            align-items: center
                            border: 1px solid brown
                            display: flex
                            flex-direction: column
                            height: 22px
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 1px
                          visible: "=(props.itemNonFossil) ? true : false"
                      - component: f7-block
                        config:
                          bgColor: black
                          style:
                            align-items: center
                            border: 2px solid teal
                            border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            justify-content: center
                            margin-top: "=(props.itemNonFossil) ? '0px' : (((props.itemSolar) || (props.itemCar)) ? '140px' : '0px')"
                            width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: teal
                                height: 20px
                                icon: if:mdi:transmission-tower
                            - component: oh-link
                              config:
                                iconColor: purple
                                iconF7: "=(props.itemProductionToGrid) ? 'arrow_left' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: "=((Number.parseFloat(@props.itemProductionToGrid) > 0) ? '-' : '') + @props.itemProductionToGrid"
                                visible: "=(props.itemProductionToGrid) ? true : false"
                            - component: oh-link
                              config:
                                iconColor: blue
                                iconF7: "=(props.itemConsumptionFromGrid) ? 'arrow_right' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemConsumptionFromGrid
                                visible: "=(props.itemConsumptionFromGrid) ? true : false"
                      - component: Label
                        config:
                          text: "=(props.titleGrid) ? props.titleGrid : 'Grid'"
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      flex-grow: 1
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemSolar) ? ((props.titleSolar) ? props.titleSolar : 'Solar') : ''"
                      - component: f7-block
                        config:
                          bgColor: black
                          style:
                            align-items: center
                            border: 2px solid orange
                            border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            justify-content: center
                            width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                          visible: "=(props.itemSolar) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: orange
                                height: 20px
                                icon: if:mdi:solar-power
                            - component: oh-link
                              config:
                                iconColor: blue
                                iconF7: "=(props.itemProductionToGrid) ? 'arrow_down' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemSolar
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemSolar2
                                visible: "=(props.itemSolar2) ? true : false"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemSolar3
                                visible: "=(props.itemSolar3) ? true : false"
                      - component: f7-block
                        config:
                          style:
                            display: flex
                            height: "=(props.itemSolar) ? '145px' : (((props.itemNonFossil) || (props.itemCar)) ? '320px' : '145px')"
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 100%
                          visible: true
                        slots:
                          default:
                            - component: f7-row
                              config:
                                preserveAspectRatio: xMidYMid slice
                                style:
                                  height: auto
                                tag: svg
                                viewBox: "=((props.itemNonFossil) || (props.itemSolar) || (props.itemCar)) ? '0 0 100 100' : '0 8 100 100'"
                                xmlns: http://www.w3.org/2000/svg
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      d: M53,0 v15 c0,27 10,32 30,32 h20
                                      fill: none
                                      id: path1
                                      stroke: orange
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                      visible: "=(props.itemSolar) ? true : false"
                                  - component: f7-row
                                    config:
                                      fill: orange
                                      r: 1
                                      style:
                                        stroke-width: 4
                                      tag: circle
                                      vector-effect: non-scaling-stroke
                                      visible: "=((props.itemSolar) && (Number.parseFloat(@props.itemSolar) > 0)) ? true : false"
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: 5s
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path1"
                                  - component: f7-row
                                    config:
                                      d: M47,0 v15 c0,27 -10,32 -30,32 h-20
                                      fill: none
                                      id: path2
                                      stroke: purple
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                      visible: "=(props.itemSolar) ? true : false"
                                  - component: f7-row
                                    config:
                                      fill: purple
                                      r: 1
                                      strokeWidth: 10
                                      tag: circle
                                      vectorEffect: non-scaling-stroke
                                      visible: "=((props.itemSolar) && (Number.parseFloat(@props.itemProductionToGrid) > 0)) ? true : false"
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: 3s
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path2"
                                  - component: f7-row
                                    config:
                                      d: M0,50 H100
                                      fill: none
                                      id: path3
                                      stroke: teal
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                  - component: f7-row
                                    config:
                                      fill: teal
                                      r: 1
                                      strokeWidth: 10
                                      tag: circle
                                      vectorEffect: non-scaling-stroke
                                      visible: "=(Number.parseFloat(@props.itemProductionFromGrid) = 0) ? true : false"
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: 3s
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path3"
                                  - component: f7-row
                                    config:
                                      d: M50,0 v100
                                      fill: none
                                      id: path4
                                      stroke: green
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                      visible: "=((props.itemBattery) && (props.itemSolar)) ? true : false"
                                  - component: f7-row
                                    config:
                                      fill: green
                                      r: 1
                                      style:
                                        stroke-width: 4
                                      tag: circle
                                      vector-effect: non-scaling-stroke
                                      visible: "=((props.itemBattery) && (props.itemSolar) && (Number.parseFloat(@props.itemBattery) < 0)) ? true : false"
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: 5s
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path4"
                                  - component: f7-row
                                    config:
                                      d: M53,100 v-15 c0,-27 10,-32 30,-32 h20
                                      fill: none
                                      id: path5
                                      stroke: green
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                      visible: "=(props.itemBattery) ? true : false"
                                  - component: f7-row
                                    config:
                                      fill: green
                                      r: 1
                                      style:
                                        stroke-width: 4
                                      tag: circle
                                      vector-effect: non-scaling-stroke
                                      visible: "=((props.itemBattery) && (Number.parseFloat(@props.itemBattery) > 0)) ? true : false"
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: 5s
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path5"
                      - component: oh-gauge
                        config:
                          bgColor: black
                          borderBgColor: teal
                          borderWidth: 2
                          labelFontSize: 12
                          valueFontSize: 12
                          valueFontWeight: 400
                          size: "=(props.iconDimension) ? (Number.parseInt(props.iconDimension) / 2) : '50'"
                          style:
                            z-index: 100
                            margin-top: -100px
                          type: circle
                          labelText: "=(Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) > 0) ? '🔆' : '💸'"
                          borderColor: "=(Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) > 0) ? 'orange' : 'gray'"
                          labelTextColor: "=(Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) > 0) ? 'orange' : 'gray'"
                          valueTextColor: "=(Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) > 0) ? 'orange' : 'gray'"
                          max: "=(Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) > 0) ? Math.abs(Number.parseFloat(@props.itemHomeConsumption)) + Math.abs(Number.parseFloat(@props.itemCar)) + Math.abs(Number.parseFloat(@props.itemWater)) - ((Number.parseFloat(@props.itemBattery) < 0) ? Number.parseFloat(@props.itemBattery) : 0) : Math.abs(Number.parseFloat(@props.itemSolar)) + ((Number.parseFloat(@props.itemBattery) > 0) ? Number.parseFloat(@props.itemBattery) : 0)"
                          min: 0
                          value: "=(Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) > 0) ? Math.abs(Number.parseFloat(@props.itemHomeConsumption)) + Math.abs(Number.parseFloat(@props.itemCar)) + Math.abs(Number.parseFloat(@props.itemWater)) - ((Number.parseFloat(@props.itemBattery) < 0) ? Number.parseFloat(@props.itemBattery) : 0) - Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) : Math.abs(Number.parseFloat(@props.itemSolar)) + ((Number.parseFloat(@props.itemBattery) > 0) ? Number.parseFloat(@props.itemBattery) : 0) - Math.abs(Number.parseFloat(@props.itemProductionToGrid))"
                          valueText: "=(Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) > 0) ? (100.0 - (100.0 * Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) / ( Math.abs(Number.parseFloat(@props.itemHomeConsumption)) + Math.abs(Number.parseFloat(@props.itemCar)) + Math.abs(Number.parseFloat(@props.itemWater)) - ((Number.parseFloat(@props.itemBattery) < 0) ? Number.parseFloat(@props.itemBattery) : 0) ))).toFixed(1) + ' %' : ((100.0 - (100.0 * Math.abs(Number.parseFloat(@props.itemProductionToGrid)) / ( Math.abs(Number.parseFloat(@props.itemSolar)) + ((Number.parseFloat(@props.itemBattery) > 0) ? Number.parseFloat(@props.itemBattery) : 0) ))).toFixed(1) + ' %')"
                      - component: f7-block
                        config:
                          bgColor: black
                          style:
                            align-items: center
                            border: 2px solid green
                            border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            justify-content: center
                            width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            margin-top: 46px
                          visible: "=(props.itemBattery) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: green
                                height: 20px
                                icon: if:mdi:battery-charging
                            - component: oh-link
                              config:
                                iconColor: "=(props.itemBattery) ? ((Number.parseFloat(@props.itemBattery) < 0) ? 'purple' : 'blue') : ''"
                                iconF7: "=(props.itemBattery) ? ((Number.parseFloat(@props.itemBattery) < 0) ? 'arrow_down' : 'arrow_up') : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemBattery
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemBattery2
                                visible: "=(props.itemBattery2) ? true : false"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemBattery3
                                visible: "=(props.itemBattery3) ? true : false"
                      - component: Label
                        config:
                          text: "=(props.itemBattery) ? ((props.titleBattery) ? props.titleBattery : 'Battery') : ''"
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemCar) ? ((props.titleCar) ? props.titleCar : 'Car') : ''"
                      - component: f7-block
                        config:
                          bgColor: black
                          style:
                            align-items: center
                            border: 2px solid lightblue
                            border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            justify-content: center
                            margin-top: 0px
                            width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                          visible: "=(props.itemCar) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: lightblue
                                height: 20px
                                icon: if:mdi:car
                            - component: oh-link
                              config:
                                iconColor: purple
                                iconF7: "=(props.itemCar) ? 'arrow_up' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: "=((Number.parseFloat(@props.itemCar) > 0) ? '-' : '') + @props.itemCar"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemCar2
                                visible: "=(props.itemCar2) ? true : false"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemCar3
                                visible: "=(props.itemCar3) ? true : false"
                      - component: f7-block
                        config:
                          bgColor: black
                          style:
                            align-items: center
                            border: 1px solid lightblue
                            display: flex
                            flex-direction: column
                            height: 22px
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 1px
                          visible: "=(props.itemCar) ? true : false"
                      - component: f7-block
                        config:
                          bgColor: black
                          style:
                            align-items: center
                            border: 2px solid gray
                            border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            justify-content: center
                            margin-top: "=(props.itemCar) ? '0px' : (((props.itemSolar) || (props.itemNonFossil)) ? '140px' : '0px')"
                            width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: gray
                                height: 20px
                                icon: if:mdi:home
                            - component: oh-link
                              config:
                                iconColor: purple
                                iconF7: "=(props.itemHomeConsumption) ? 'arrow_right' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: "=((Number.parseFloat(@props.itemHomeConsumption) > 0) ? '-' : '') + @props.itemHomeConsumption"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemHomeConsumption2
                                visible: "=(props.itemHomeConsumption2) ? true : false"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemHomeConsumption3
                                visible: "=(props.itemHomeConsumption3) ? true : false"
                      - component: Label
                        config:
                          text: "=(props.titleHome) ? props.titleHome : 'Home'"
                      - component: f7-block
                        config:
                          bgColor: black
                          style:
                            align-items: center
                            border: 1px solid blue
                            display: flex
                            flex-direction: column
                            height: 5px
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 1px
                          visible: "=(props.itemWater) ? true : false"
                      - component: f7-block
                        config:
                          bgColor: black
                          style:
                            align-items: center
                            border: 2px solid blue
                            border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            justify-content: center
                            margin-top: 0px
                            width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                          visible: "=(props.itemWater) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: blue
                                height: 20px
                                icon: if:mdi:water
                            - component: oh-link
                              config:
                                iconColor: purple
                                iconF7: "=(props.itemWater) ? 'arrow_down' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: "=((Number.parseFloat(@props.itemWater) > 0) ? '-' : '') + @props.itemWater"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemWater2
                                visible: "=(props.itemWater2) ? true : false"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemWater3
                                visible: "=(props.itemWater3) ? true : false"
                      - component: Label
                        config:
                          text: "=(props.itemWater) ? ((props.titleWater) ? props.titleWater : 'Water') : ''"

It shows the autarky rate via the :high_brightness: symbol or the self-consumption rate via the :money_with_wings: symbol (dependent on Grid IN or Grid OUT)

You may need to tweak some offsets if you do not use all the elements.

Please provide feedback if you find any issue. Then I update the shared sources.

have fun

1 Like

Thank you it is working great!

Hi, my very first post in this forum.
A modified version of the above energy summary widget by MikeTheTux_3. The main change is that (most) colors and background colors are now included as widget properties.

A (maybe not complete) list of changes to version OH3_Livio_Energy_Summary_MikeTheTux_3 :

  1. Introduced individual Colors and Background for every Item and block
  2. Removed arrow right and “-” from Home Consumption
  3. Item itemHomeConsumption2 designed to show now “Import kWh” , added arrow right
  4. Item itemHomeConsumption3 designed to show now “Export kWh” , added arrow left
  5. Removed “-” from Export to Grid
  6. Removed “arrow_up” and “-” from Export to Car
  7. Import line from grid visible if import itemProductionFromGrid is > 0 (was =0)
  8. Changed Icon for Water to water-thermometer (was water)
  9. Default color for NonFossile to darkred (was red)
  10. Icon for Water changed to “Flame” visible when WaterItem > 5
  11. Moved lines for Solar and Grid a bit down (moving circle was not on the line in my setup)
    path1 now M53,0 v15 c0,27 10,36 30,36 h20 (was M53,0 v15 c0,27 10,32 30,32 h20)
    path2 now M47,0 v15 c0,27 -10,36 -30,36 h-20 (was M47,0 v15 c0,27 -10,32 -30,32 h-20)
    path3 now M0,54 H100 (was M0,50 H100)
  12. Gauge in the middle shows now just an individual Item: itemSelfConsumption and a configurable ItemName. No color changes here any more.

And here the widgets YAML code:

uid: Energy_Summary_eho_v1
tags:
  - solar
  - energy
  - energy summary
props:
  parameters:
    - description: Widget Title
      label: Widget Title
      name: title
      required: false
      type: TEXT
    - description: Grid Title
      label: Grid Title
      name: titleGrid
      required: false
      type: TEXT
    - description: Background Color of Grid Title 
      label: Grid Title Background Color
      name: titleGridBgColor
      required: false
      type: TEXT      
    - context: item
      description: Consumption From Grid
      label: Consumption From Grid Item
      name: itemConsumptionFromGrid
      required: true
      type: TEXT
    - context: item
      description: Production to Grid
      label: Production to Grid Item
      name: itemProductionToGrid
      required: false
      type: TEXT
    - description: Color of Grid block (default= teal)
      label: Color of Grid block
      name: ColorGrid
      required: false    
    - description: Background Color of Grid block
      label: Background Color Grid
      name: backColorGrid
      required: false
    - description: Solar Title
      label: Solar Title
      name: titleSolar
      required: false
      type: TEXT
    - description: Solar Title Background Color
      label: Solar Title Background Color
      name: titleSolarBgColor
      required: false
      type: TEXT     
    - context: item
      description: Item Solar Production (first)
      label: Solar Production Item (first)
      name: itemSolar
      required: false
      type: TEXT
    - context: item
      description: Item Solar Production (second)
      label: Solar Production Item (second)
      name: itemSolar2
      required: false
      type: TEXT
    - context: item
      description: Item Solar Production (third)
      label: Solar Production Item (third)
      name: itemSolar3
      required: false
      type: TEXT
    - description: Color of Solar block (default= orange)
      label: Color of Solar block
      name: ColorSolar
      required: false    
    - description: Background Color Solar of Solar block
      label: Background Color Solar
      name: backColorSolar
    - description: Home Title
      label: Home Title
      name: titleHome
      required: false
      type: TEXT
    - description: Home Title Background Color
      label: Home Title Background Color
      name: titleHomeBgColor
      required: false
      type: TEXT    
    - context: item
      description: Home Consumption (first)
      label: Home Consumption Item (first)
      name: itemHomeConsumption
      required: true
      type: TEXT
    - context: item
      description: Home Consumption (second)
      label: Home Consumption Item (second)
      name: itemHomeConsumption2
      required: false
      type: TEXT
    - context: item
      description: Home Consumption (third)
      label: Home Consumption Item (third)
      name: itemHomeConsumption3
      required: false
      type: TEXT
    - description: Color of Home block (default= gray)
      label: Color of Home block
      name: ColorHome
      required: false         
    - description: Background Color of Home block
      label: Background Color Home
      name: backColorHome
    - description: Self Consumption Title
      label: Self Consumption Title
      name: titleSelfConsumption
      required: false
      type: TEXT
    - description: Self Consumption Title Background Color
      label: Self Consumption Title Background Color
      name: titleSelfConsBgColor
      required: false
      type: TEXT    
    - context: item
      description: Home Self Consumption in percent
      label: Home Self Consumption in percent
      name: itemSelfConsumption
      required: true
      type: TEXT
    - description: Color of Self Consumption block (default= teal)
      label: Color of Self Consumption block
      name: ColorSelfConsumption
      required: false
    - description: Background Color Home Self Consumption
      label: Background Color Home Self Consumption
      name: backColorSelfConsumption
    - description: Battery Title
      label: Battery Title
      name: titleBattery
      required: false
      type: TEXT
    - description: Battery Title Background Color
      label: Battery Title Background Color
      name: titleBatteryBgColor
      required: false
      type: TEXT         
    - context: item
      description: Battery Load/Decharge Item (first)
      label: Item Battery Load/Decharge (first)
      name: itemBattery
      required: false
      type: TEXT
    - context: item
      description: Battery Load/Decharge Item (second)
      label: Item Battery Load/Decharge (second)
      name: itemBattery2
      required: false
      type: TEXT
    - context: item
      description: Battery Load/Decharge Item (third)
      label: Item Battery Load/Decharge (third)
      name: itemBattery3
      required: false
      type: TEXT
    - description: Color of Battery block (default= green)
      label: Color of Battery block
      name: ColorBattery
      required: false        
    - description: Background Color Battery
      label: Background Color Battery
      name: backColorBattery
    - description: Car Title
      label: Car Title
      name: titleCar
      required: false
      type: TEXT
    - description: Car Title Background Color
      label: Car Title Background Color
      name: titleCarBgColor
      required: false
      type: TEXT   
    - context: item
      description: Car Load Item (first)
      label: Item Car Load (first)
      name: itemCar
      required: false
      type: TEXT
    - context: item
      description: Car Load Item (second)
      label: Item Car Load (second)
      name: itemCar2
      required: false
      type: TEXT
    - context: item
      description: Car Load Item (third)
      label: Item Car Load (third)
      name: itemCar3
      required: false
      type: TEXT
    - description: Color of Car block (default= lightblue)
      label: Color of Car block
      name: ColorCar
      required: false          
    - description: Background Color Car
      label: Background Color Car
      name: backColorCar     
    - description: Water Title
      label: Water Title
      name: titleWater
      required: false
      type: TEXT
    - description: Background Color of Water Title 
      label: Water Title Background Color
      name: titleWaterBgColor
      required: false
      type: TEXT   
    - context: item
      description: Water Load Item (first)
      label: Item Water Load (first)
      name: itemWater
      required: false
      type: TEXT
    - context: item
      description: Water Load Item (second)
      label: Item Water Load (second)
      name: itemWater2
      required: false
      type: TEXT
    - context: item
      description: Water Load Item (third)
      label: Item Water Load (third)
      name: itemWater3
      required: false
      type: TEXT
    - description: Color of Water block (default= blue)
      label: Color of Water block
      name: ColorWater
      required: false          
    - description: Background Color Water
      label: Background Color Water
      name: backColorWater          
    - description: Non Fossil Title
      label: Non Fossil Title
      name: titleNonFossil
      required: false
      type: TEXT
    - description: Non Fossil Title Background Color
      label: Non Fossil Title Background Color
      name: titleNonFossilBgColor
      required: false
      type: TEXT   
    - context: item
      description: Non Fossil Value Item
      label: Non Fossile Item
      name: itemNonFossil
      required: false
      type: TEXT
    - description: Color of Non Fossil block  (default= darkred)
      label: Color Non Fossil
      name: ColorNonFossil            
    - description: Background Color Non Fossil
      label: Background Color Non Fossil
      name: backColorNonFossil            
    - description: Icon Dimension in px (default 100px, stay within 80 and 120px for best results)
      label: Icon Dimension
      name: iconDimension
      required: false
    - description: Border Radius in px (default 0px, significant changes between 40 and 70px)
      label: Border Radius
      name: borderRadius
      required: false    
  parameterGroups: []
timestamp: Nov 8, 2023, 9:05:24 PM
component: f7-card
config:
  title: = props.title
slots:
  content:
    - component: f7-block
      config:
        style:
          margin: 0
          padding: 0
      slots:
        default:
          - component: f7-block
            config:
              style:
                --f7-block-font-size: 12px
                --f7-theme-color: var(--f7-text-color)
                display: flex
                justify-content: space-between
                margin: 0
                padding: 0
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemNonFossil) ? ((props.titleNonFossil) ? props.titleNonFossil : 'Non-Fossil') : ''"
                          style:
                            background: "=(props.titleNonFossilBgColor) ? props.titleNonFossilBgColor : 'transparent'"
                      - component: f7-block
                        config:
                          bgColor: "=(props.backColorNonFossil)"
                          style:
                            align-items: center
                            border: "=(props.ColorNonFossil) ? (props.ColorNonFossil) + ' 2px solid' : 'darkred 2px solid'"
                            border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            justify-content: center
                            width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                          visible: "=(props.itemNonFossil) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color:  "=(props.ColorNonFossil) ? (props.ColorNonFossil) : 'darkred"
                                height: 20px
                                icon: "=(props.itemNonFossil) ? 'if:mdi:heater' : ''"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemNonFossil
                      - component: f7-block
                        config:
                          bgColor: "=(props.backColorNonFossil)"
                          style:
                            align-items: center
                            border: 1px solid transparent
                            display: flex
                            flex-direction: column
                            height: 22px
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 1px
                          visible: "=(props.itemNonFossil) ? true : false"
                      - component: f7-block
                        config:
                          bgColor: "=(props.backColorGrid)"
                          style:
                            align-items: center
                            border: "=(props.ColorGrid) ? (props.ColorGrid) + ' 2px solid' : 'teal 2px solid'"
                            border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            justify-content: center
                            margin-top: "=(props.itemNonFossil) ? '0px' : (((props.itemSolar) || (props.itemCar)) ? '140px' : '0px')"
                            width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: "=(props.ColorGrid) ? (props.ColorGrid) : 'teal'"
                                height: 20px
                                icon: if:mdi:transmission-tower
                            - component: oh-link
                              config:
                                iconColor: purple
                                iconF7: "=(props.itemProductionToGrid) ? 'arrow_left' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: =@props.itemProductionToGrid
                                visible: "=(props.itemProductionToGrid) ? true : false"
                            - component: oh-link
                              config:
                                iconColor: blue
                                iconF7: "=(props.itemConsumptionFromGrid) ? 'arrow_right' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemConsumptionFromGrid
                                visible: "=(props.itemConsumptionFromGrid) ? true : false"
                      - component: Label
                        config:
                          text: "=(props.titleGrid) ? props.titleGrid : 'Grid'"
                          style:
                            background: "=(props.titleGridBgColor) ? props.titleGridBgColor : 'transparent'"
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                      flex-grow: 1
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemSolar) ? ((props.titleSolar) ? props.titleSolar : 'Solar') : ''"
                          style:
                            background: "=(props.titleSolarBgColor) ? props.titleSolarBgColor : 'transparent'"
                      - component: f7-block
                        config:
                          bgColor: "=(props.backColorSolar)"
                          style:
                            align-items: center
                            border: "=(props.ColorSolar) ? (props.ColorSolar) + ' 2px solid' : 'orange 2px solid'"
                            border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            justify-content: center
                            width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                          visible: "=(props.itemSolar) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: "=(props.ColorSolar) ? (props.ColorSolar) : 'orange'"
                                height: 20px
                                icon: if:mdi:solar-power-variant
                            - component: oh-link
                              config:
                                iconColor: blue
                                iconF7: "=(props.itemProductionToGrid) ? 'arrow_down' : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemSolar
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemSolar2
                                visible: "=(props.itemSolar2) ? true : false"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemSolar3
                                visible: "=(props.itemSolar3) ? true : false"
                      - component: f7-block
                        config:
                          style:
                            display: flex
                            height: "=(props.itemSolar) ? '145px' : (((props.itemNonFossil) || (props.itemCar)) ? '320px' : '145px')"
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 100%
                          visible: true
                        slots:
                          default:
                            - component: f7-row
                              config:
                                preserveAspectRatio: xMidYMid slice
                                style:
                                  height: auto
                                tag: svg
                                viewBox: "=((props.itemNonFossil) || (props.itemSolar) || (props.itemCar)) ? '0 0 100 100' : '0 8 100 100'"
                                xmlns: http://www.w3.org/2000/svg
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      d: M53,0 v15 c0,27 10,36 30,36 h20
                                      fill: none
                                      id: path1
                                      stroke: "=(props.ColorSolar) ? (props.ColorSolar) : 'orange'"
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                      visible: "=((props.itemSolar) && (Number.parseFloat(@props.itemSolar) > 0)) ? true : false"
                                  - component: f7-row
                                    config:
                                      fill: "=(props.ColorSolar) ? (props.ColorSolar) : 'orange'"
                                      r: 1
                                      style:
                                        stroke-width: 4
                                      tag: circle
                                      vector-effect: non-scaling-stroke
                                      visible: "=((props.itemSolar) && (Number.parseFloat(@props.itemSolar) > 0)) ? true : false"
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: 5s
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path1"
                                  - component: f7-row
                                    config:
                                      d: M47,0 v15 c0,27 -10,36 -30,36 h-20
                                      fill: none
                                      id: path2
                                      stroke: purple
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                      visible: "=((props.itemSolar) && (Number.parseFloat(@props.itemProductionToGrid) > 0)) ? true : false"
                                  - component: f7-row
                                    config:
                                      fill: purple
                                      r: 1
                                      strokeWidth: 10
                                      tag: circle
                                      vectorEffect: non-scaling-stroke
                                      visible: "=((props.itemSolar) && (Number.parseFloat(@props.itemProductionToGrid) > 0)) ? true : false"
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: 3s
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path2"
                                  - component: f7-row
                                    config:
                                      d: M0,54 H100
                                      fill: none
                                      id: path3
                                      stroke: "=(props.ColorGrid) ? (props.ColorGrid) : 'teal'"
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                      visible: "=(Number.parseFloat(@props.itemConsumptionFromGrid) > 0) ? true : false"
                                  - component: f7-row
                                    config:
                                      tag: circle
                                      r: 1
                                      vectorEffect: non-scaling-stroke
                                      strokeWidth: 10
                                      fill: "=(props.ColorGrid) ? (props.ColorGrid) : 'teal'"
                                      visible: "=(Number.parseFloat(@props.itemConsumptionFromGrid) > 0) ? true : false"
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            tag: animateMotion
                                            repeatCount: indefinite
                                            calcMode: linear
                                            dur: 3s
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path3"
                                  - component: f7-row
                                    config:
                                      d: M50,0 v100
                                      fill: none
                                      id: path4
                                      stroke: "=(props.ColorBattery) ? (props.ColorBattery) : 'green'"
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                      visible: "=((props.itemBattery) && (props.itemSolar)) ? true : false"
                                  - component: f7-row
                                    config:
                                      fill: "=(props.ColorBattery) ? (props.ColorBattery) : 'green'"
                                      r: 1
                                      style:
                                        stroke-width: 4
                                      tag: circle
                                      vector-effect: non-scaling-stroke
                                      visible: "=((props.itemBattery) && (props.itemSolar) && (Number.parseFloat(@props.itemBattery) < 0)) ? true : false"
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: 5s
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path4"
                                  - component: f7-row
                                    config:
                                      d: M53,100 v-15 c0,-27 10,-32 30,-32 h20
                                      fill: none
                                      id: path5
                                      stroke: "=(props.ColorBattery) ? (props.ColorBattery) : 'green'"
                                      stroke-width: 1
                                      tag: path
                                      vector-effect: non-scaling-stroke
                                      visible: "=(props.itemBattery) ? true : false"
                                  - component: f7-row
                                    config:
                                      fill: "=(props.ColorBattery) ? (props.ColorBattery) : 'green'"
                                      r: 1
                                      style:
                                        stroke-width: 4
                                      tag: circle
                                      vector-effect: non-scaling-stroke
                                      visible: "=((props.itemBattery) && (Number.parseFloat(@props.itemBattery) > 0)) ? true : false"
                                    slots:
                                      default:
                                        - component: f7-row
                                          config:
                                            calcMode: linear
                                            dur: 5s
                                            repeatCount: indefinite
                                            tag: animateMotion
                                          slots:
                                            default:
                                              - component: f7-row
                                                config:
                                                  tag: mpath
                                                  xlink:href: "#path5"
                      - component: oh-gauge
                        config:
                          bgColor: "=(props.backColorSelfConsumption)"
                          borderBgColor: "=(props.ColorSelfConsumption) ? (props.ColorSelfConsumption) : 'teal'"
                          borderWidth: 2
                          labelFontSize: 12
                          valueFontSize: 12
                          valueFontWeight: 400
                          size: "=(props.iconDimension) ? (Number.parseInt(props.iconDimension) / 1.65) : '50'"
                          style:
                            z-index: 100
                            margin-top: -100px
                          type: circle
                          labelText: "=(props.itemSelfConsumption) ? ((props.titleSelfConsumption) ? props.titleSelfConsumption : 'SC') : ''"
                          borderColor: "=(props.ColorSelfConsumption) ? (props.ColorSelfConsumption) : 'teal'"
                          labelTextColor: black
                          value: = @props.itemSelfConsumption
                          valueText: = @props.itemSelfConsumption
                      - component: f7-block
                        config:
                          bgColor: "=(props.backColorBattery)"
                          style:
                            align-items: center
                            border: "=(props.ColorBattery) ? (props.ColorBattery) + ' 2px solid' : 'green 2px solid'"
                            border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            justify-content: center
                            width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            margin-top: 46px
                          visible: "=(props.itemBattery) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: "=(props.ColorBattery) ? (props.ColorBattery) : 'green'"
                                height: 20px
                                icon: if:mdi:battery-charging
                            - component: oh-link
                              config:
                                iconColor: "=(props.itemBattery) ? ((Number.parseFloat(@props.itemBattery) < 0) ? 'purple' : 'blue') : ''"
                                iconF7: "=(props.itemBattery) ? ((Number.parseFloat(@props.itemBattery) < 0) ? 'arrow_down' : 'arrow_up') : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemBattery
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemBattery2
                                visible: "=(props.itemBattery2) ? true : false"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemBattery3
                                visible: "=(props.itemBattery3) ? true : false"
                      - component: Label
                        config:
                          text: "=(props.itemBattery) ? ((props.titleBattery) ? props.titleBattery : 'Battery') : ''"
                          style:
                            background: "=(props.titleBatteryBgColor) ? props.titleBatteryBgColor : 'transparent'"
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      flex-direction: column
                  slots:
                    default:
                      - component: Label
                        config:
                          text: "=(props.itemCar) ? ((props.titleCar) ? props.titleCar : 'Car') : ''"
                          style:
                            background: "=(props.titleCarBgColor) ? props.titleCarBgColor : 'transparent'"
                      - component: f7-block
                        config:
                          bgColor: "=(props.backColorCar)"
                          style:
                            align-items: center
                            border: "=(props.ColorCar) ? (props.ColorCar) + ' 2px solid' : 'lightblue 2px solid'"
                            border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            justify-content: center
                            margin-top: 0px
                            width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                          visible: "=(props.itemCar) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: "=(props.ColorCar) ? (props.ColorCar) : 'lightblue'"
                                height: 20px
                                icon: if:mdi:car
                            - component: oh-link
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: =@props.itemCar
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemCar2
                                visible: "=(props.itemCar2) ? true : false"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemCar3
                                visible: "=(props.itemCar3) ? true : false"
                      - component: f7-block
                        config:
                          bgColor: "=(props.backColorCar)"
                          style:
                            align-items: center
                            border:  "=(props.ColorCar) ? (props.ColorCar) + ' 1px solid' : 'lightblue 1px solid'"
                            display: flex
                            flex-direction: column
                            height: 22px
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 1px
                          visible: "=(props.itemCar) ? true : false"
                      - component: f7-block
                        config:
                          bgColor: "=(props.backColorHome)"
                          style:
                            align-items: center
                            border: "=(props.ColorHome) ? (props.ColorHome) + ' 2px solid' : 'gray 2px solid'"
                            border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            justify-content: center
                            margin-top: "=(props.itemCar) ? '0px' : (((props.itemSolar) || (props.itemNonFossil)) ? '140px' : '0px')"
                            width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: "=(props.ColorHome) ? (props.ColorHome) : 'gray'"
                                height: 20px
                                icon: if:mdi:home
                            - component: oh-link
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: =@props.itemHomeConsumption
                            - component: oh-link
                              config:
                                iconColor: blue
                                iconF7: "=(props.itemHomeConsumption2) ? 'arrow_right' : ''"
                                iconSize: 12px                              
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: =@props.itemHomeConsumption2
                                visible: "=(props.itemHomeConsumption2) ? true : false"
                            - component: oh-link
                              config:
                                iconColor: purple
                                iconF7: "=(props.itemHomeConsumption3) ? 'arrow_left' : ''"
                                iconSize: 12px                              
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: =@props.itemHomeConsumption3
                                visible: "=(props.itemHomeConsumption3) ? true : false"
                      - component: Label
                        config:
                          text: "=(props.titleHome) ? props.titleHome : 'Home'"
                          style:
                            background: "=(props.titleHomeBgColor) ? props.titleHomeBgColor : 'transparent'"
                      - component: f7-block
                        config:
                          bgColor: "=(props.backColorWater)"
                          style:
                            align-items: center
                            border: "=(props.ColorWater) ? (props.ColorWater) + ' 1px solid' : 'blue 1px solid'"
                            display: flex
                            flex-direction: column
                            height: 5px
                            justify-content: center
                            margin: 0
                            padding: 0
                            width: 1px
                          visible: "=(props.itemWater) ? true : false"
                      - component: f7-block
                        config:
                          bgColor: "=(props.backColorWater)"
                          style:
                            align-items: center
                            border: "=(props.ColorWater) ? (props.ColorWater) + ' 2px solid' : 'blue 2px solid'"
                            border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
                            display: flex
                            flex-direction: column
                            height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                            justify-content: center
                            margin-top: 0px
                            width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
                          visible: "=(props.itemWater) ? true : false"
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                color: "=(props.ColorWater) ? (props.ColorWater) : 'blue'"
                                height: 20px
                                icon: if:mdi:water-thermometer
                            - component: oh-link
                              config:
                                iconColor: darkred
                                iconF7: "=(props.itemWater) ? ((Number.parseFloat(@props.itemWater) > 5) ? 'flame_fill' : '') : ''"
                                iconSize: 12px
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: "=((Number.parseFloat(@props.itemWater) > 0) ? @props.itemWater : '')"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemWater2
                                visible: "=(props.itemWater2) ? true : false"
                            - component: Label
                              config:
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                                text: = @props.itemWater3
                                visible: "=(props.itemWater3) ? true : false"
                      - component: Label
                        config:
                          text: "=(props.itemWater) ? ((props.titleWater) ? props.titleWater : 'Water') : ''"
                          style:
                            background: "=(props.titleWaterBgColor) ? props.titleWaterBgColor : 'transparent'"

And some example config (sorry for english/german mixup):

component: widget:Energy_Summary_eho_v1
config:
  title: Leistungsverteilung
  titleGrid: Netz
  itemConsumptionFromGrid: Generic_MQTT_Thing_Smartmeter_power_import
  itemProductionToGrid: Generic_MQTT_Thing_Smartmeter_power_export
  titleSolar: PV
  itemSolar: Fronius_Symo_Inverter_AC_Power
  itemSolar2: PV_Gesamt_Tagesproduktion
  titleHome: Haus
  itemHomeConsumption: Stromverbrauch_aktuell
  itemHomeConsumption2: Generic_MQTT_Thing_Smartmeter_import_day
  itemHomeConsumption3: Generic_MQTT_Thing_Smartmeter_export_day
  borderRadius: "5"
  itemCar2: car_charge_current_solar_kwh
  itemCar3: GoeCharger_Maximum_Current
  iconDimension: "75"
  titleBatteryBgColor: green
  titleSelfConsumption: EV
  itemSelfConsumption: Eigenverbrauch_el_tag_prozent
  titleSelfConsBgColor: black
  backColorSelfConsumption: white
  titleWater: Wa.Wasser
  itemWater: WaWaWp_Strom_Stromverbrauch
  itemWater2: Generic_MQTT_Thing_WarmwasserTemperatur1
  ColorSelfConsumption: black
  ColorHome: black
  ColorWater: red
  itemWater3: WaWaWp_Strom_modus