Energy Widget like in Home Assistant Demo

Hi, I saw a super nice energy widget while browsing the Home Assistant Demo. I would like to have something like that implemented in OpenHAB. I already have all the values for it, I am only interested in the UI. Here I unfortunately do not have the skills to program something like that. For example, a battery could be integrated as well here…

Maybe someone of you finds something like this interesting and wants to develop a first approach or give me a first push?

energy

1 Like

Once you get to know Flexbox - CSS Reference and other CSS properties it’s not impossible - mostly copy-paste once you’ve done the first column.
The animations are another story and the lines in the middle need some work but here’s a start:

uid: energy_summary
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Jan 6, 2022, 9:27:00 PM
component: f7-card
config:
  title: Energy Summary (test)
slots:
  content:
    - component: f7-block
      config:
      slots:
        default:
          - component: f7-row
            config:
              style:
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      display: flex
                      justify-content: center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Non-fossil
                - component: f7-col
                  config:
                    style:
                      display: flex
                      justify-content: center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Solar
                - component: f7-col
                  config:
                    style:
                      display: flex
                      justify-content: center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Gas
          - component: f7-row
            config:
              style:
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      display: flex
                      justify-content: center
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            height: 80px
                            width: 80px
                            border: 2px solid darkgreen
                            border-radius: 40px
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:leaf
                                height: 20px
                                color: darkgreen
                            - component: Label
                              config:
                                text: 0.7 kWh
                                style:
                                  font-size: 12px
                                  color: lightgray
                - component: f7-col
                  config:
                    style:
                      display: flex
                      justify-content: center
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            height: 80px
                            width: 80px
                            border: 2px solid orange
                            border-radius: 40px
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:solar-power
                                height: 20px
                                color: orange
                            - component: Label
                              config:
                                text: 9.5 kWh
                                style:
                                  font-size: 12px
                                  color: lightgray
                - component: f7-col
                  config:
                    style:
                      display: flex
                      justify-content: center
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            height: 80px
                            width: 80px
                            border: 2px solid darkred
                            border-radius: 40px
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:gas
                                height: 20px
                                color: darkred
                            - component: Label
                              config:
                                text: 1.7 m³
                                style:
                                  font-size: 12px
                                  color: lightgray
          - component: f7-row
            config:
              style:
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      display: flex
                      justify-content: center
                  slots:
                    default:
                      - 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
                - component: f7-col
                  config:
                    style:
                      display: flex
                      justify-content: center
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            height: 30px
                            width: 2px
                            padding: 0
                            margin: 0
                            margin-right: 4px
                            border: 1px solid purple
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                      - component: f7-block
                        config:
                          style:
                            height: 30px
                            width: 2px
                            padding: 0
                            margin: 0
                            margin-left: 4px
                            border: 1px solid orange
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                - component: f7-col
                  config:
                    style:
                      display: flex
                      justify-content: center
                  slots:
                    default:
                      - 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
          - component: f7-row
            config:
              style:
                display: flex
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      display: flex
                      justify-content: center
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            margin-top: 0
                            height: 80px
                            width: 80px
                            border: 2px solid teal
                            border-radius: 40px
                            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: 2.3 kWh
                                iconF7: arrow_left
                                iconSize: 12px
                                iconColor: purple
                                style:
                                  font-size: 12px
                                  color: lightgray
                                  white-space: nowrap
                            - component: oh-link
                              config:
                                text: 5.7 kWh
                                iconF7: arrow_right
                                iconSize: 12px
                                iconColor: blue
                                style:
                                  font-size: 12px
                                  color: lightgray
                                  white-space: nowrap
                                  
                - component: f7-col
                  config:
                    style:
                      display: flex
                      justify-content: stretch
                      flex-grow: 1
                      height: 80px
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            height: 30px
                            padding: 0
                            margin: 0
                            margin-right: 4px
                            border-right: 2px solid purple
                            border-bottom: 2px solid purple
                            display: flex
                            flex-grow: 1
                            justify-content: center
                            align-items: center
                            flex-direction: column
                      - component: f7-block
                        config:
                          style:
                            height: 30px
                            padding: 0
                            margin: 0
                            margin-left: 4px
                            flex-grow: 1
                            border-left: 2px solid orange
                            border-bottom: 2px solid orange
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                - component: f7-col
                  config:
                    style:
                      display: flex
                      justify-content: center
                  slots:
                    default:
                      - component: f7-block
                        config:
                          style:
                            margin-top: 0
                            height: 80px
                            width: 80px
                            border: 2px solid gray
                            border-radius: 40px
                            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: 12.9 kWh
                                style:
                                  font-size: 12px
                                  color: lightgray
                                  white-space: nowrap

image

3 Likes

2nd iteration (mostly complete) with a single-row layout and completed curvy lines:

uid: energy_summary
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Jan 6, 2022, 11:39:08 PM
component: f7-card
config:
  title: Energy Summary (test)
slots:
  content:
    - component: f7-block
      config:
        style:
          margin: 0
      slots:
        default:
          - component: f7-block
            config:
              style:
                margin: 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: Non-fossil
                      - component: f7-block
                        config:
                          style:
                            height: 80px
                            width: 80px
                            border: 2px solid darkgreen
                            border-radius: 40px
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:leaf
                                height: 20px
                                color: darkgreen
                            - component: Label
                              config:
                                text: 0.7 kWh
                                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
                      - component: f7-block
                        config:
                          style:
                            margin-top: 0
                            height: 80px
                            width: 80px
                            border: 2px solid teal
                            border-radius: 40px
                            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: 2.3 kWh
                                iconF7: arrow_left
                                iconSize: 12px
                                iconColor: purple
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                            - component: oh-link
                              config:
                                text: 5.7 kWh
                                iconF7: 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: Solar
                      - component: f7-block
                        config:
                          style:
                            height: 80px
                            width: 80px
                            border: 2px solid orange
                            border-radius: 40px
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:solar-power
                                height: 20px
                                color: orange
                            - component: Label
                              config:
                                text: 9.5 kWh
                                style:
                                  font-size: 12px
                      - component: f7-block
                        config:
                          style:
                            margin: 0
                            padding: 0
                            width: 100%
                            display: flex
                        slots:
                          default:
                            - component: f7-block
                              config:
                                style:
                                  height: 70px
                                  padding: 0
                                  margin: 0
                                  margin-right: 4px
                                  border-right: 2px solid purple
                                  border-bottom: 2px solid purple
                                  border-radius: 50% 0
                                  display: flex
                                  flex-grow: 1
                                  justify-content: center
                                  align-items: center
                                  flex-direction: column
                            - component: f7-block
                              config:
                                style:
                                  height: 70px
                                  padding: 0
                                  margin: 0
                                  margin-left: 4px
                                  flex-grow: 1
                                  border-left: 2px solid orange
                                  border-bottom: 2px solid orange
                                  border-radius: 0 50%
                                  display: flex
                                  justify-content: center
                                  align-items: center
                                  flex-direction: column
                      - component: f7-block
                        config:
                          style:
                            margin: 0
                            padding: 0
                            width: 100%
                            display: flex
                            border: 1px solid teal
                            margin-top: 5px
                - component: f7-col
                  config:
                    style:
                      display: flex
                      flex-direction: column
                      align-items: center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Gas
                      - component: f7-block
                        config:
                          style:
                            height: 80px
                            width: 80px
                            border: 2px solid darkred
                            border-radius: 40px
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:gas
                                height: 20px
                                color: darkred
                            - component: Label
                              config:
                                text: 1.7 m³
                                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
                      - component: f7-block
                        config:
                          style:
                            margin-top: 0
                            height: 80px
                            width: 80px
                            border: 2px solid gray
                            border-radius: 40px
                            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: 12.9 kWh
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                      - component: Label
                        config:
                          text: Home

image

12 Likes

You just couldn’t resist a challenge! Great work!

2 Likes

Thanks for the great Work !!!

Wow, very cool! Thanks for the work!

Are the animations possible or does the technology not allow it?

Probably yes with offset-path and offset-distance it seems… but as usual you can forget Safari. You can define animation keyframes with the stylesheet config property.

For instance, this demo:

Can be reproduced like so:

component: f7-card
slots:
  content:
    - component: f7-block
      config:
        style:
          height: 150px
        stylesheet: >
          @keyframes path-move {
            0% { offset-distance: 0%; }
            100% { offset-distance: 100%; }
          }
      slots:
        default:
          - component: f7-block
            config:
              style:
                width: 40px
                height: 40px
                background: cyan
                animation: path-move 3000ms infinite alternate ease-in-out
                offset-path: path('M20,20 C20,100 200,0 200,100')

going further note that you can override the animation speed with:

animation-duration: =Math.round(3000 - Number.parseFloat(items.SomeValue.state.split(' ')[0]) * 300) + 'ms'`

(or something better) to e.g. make it faster when the item quantity state increases.

More info here:

I’ll leave that as an exercise for the reader :wink:

1 Like

Wow, this is really awesome. Many thanks for your efforts. I also noticed this widget on HA pages.

I’m very new to OH and haven’t started to make my own pages yet because I’m still setting up my controllers with Modbus interface (e.g. Steca inverter). So, I’m wondering how to use this widget.

This is really great. Did also anybody try to make the energy dashboard:

Is this somehow feasible in OH3 MainUI?

So it may be right - I couldn’t resist a challenge.
So going back to this - and yet it’s a hack and could be improved but here it is (I think some have found out this trick before me):

if you want to build your own HTML hierarchy…: well it turns out you can use the f7-row component because it offers the ability to choose your own HTML tag along with their children.

So if you inspect (“steal the code of…?”) Home Assistant’s page you’ll note that the widget’s animated “pipes” is a rather simple SVG:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
              <path id="return" class="return" vector-effect="non-scaling-stroke" d="M47,0 v15 c0,40 -10,35 -30,35 h-20"></path> 
              <path id="solar" class="solar" vector-effect="non-scaling-stroke" d="M53,0 v15 c0,40 10,35 30,35 h20"></path>
              <path class="grid" id="grid" vector-effect="non-scaling-stroke" d="M0,56 H100"></path>
              <circle r="1" class="return" vector-effect="non-scaling-stroke">
                    <animateMotion repeatCount="indefinite" calcMode="linear" dur="5.26366433175909s">
                      <mpath xlink:href="#return"></mpath>
                    </animateMotion>
                  </circle>
              <circle r="1" class="solar" vector-effect="non-scaling-stroke">
                    <animateMotion repeatCount="indefinite" calcMode="linear" dur="3.511455128333689s">
                      <mpath xlink:href="#solar"></mpath>
                    </animateMotion>
                  </circle>
              <circle r="1" class="grid" vector-effect="non-scaling-stroke">
                    <animateMotion repeatCount="indefinite" calcMode="linear" dur="4.102157928533736s">
                      <mpath xlink:href="#grid"></mpath>
                    </animateMotion>
              </circle>
</svg>

So how would you translate this into openHAB’s widget definition YAML? - well, like this:

- component: f7-row
  config:
    tag: svg
    xmlns: http://www.w3.org/2000/svg
    viewBox: 0 0 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
      - 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
      - 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,56 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"

You can change the speed of the animations (dur properties) with expressions as appropriate.
There could be built-in improvements in this area in the future since it definititely has potential!

2022-01-17_22-35-15

Final widget:

uid: energy_summary
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Jan 7, 2022, 12:59:10 PM
component: f7-card
config:
  title: Energy Summary (test)
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: Non-fossil
                      - component: f7-block
                        config:
                          style:
                            height: 80px
                            width: 80px
                            border: 2px solid darkgreen
                            border-radius: 40px
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:leaf
                                height: 20px
                                color: darkgreen
                            - component: Label
                              config:
                                text: 0.7 kWh
                                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
                      - component: f7-block
                        config:
                          style:
                            margin-top: 0
                            height: 80px
                            width: 80px
                            border: 2px solid teal
                            border-radius: 40px
                            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: 2.3 kWh
                                iconF7: arrow_left
                                iconSize: 12px
                                iconColor: purple
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                            - component: oh-link
                              config:
                                text: 5.7 kWh
                                iconF7: 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: Solar
                      - component: f7-block
                        config:
                          style:
                            height: 80px
                            width: 80px
                            border: 2px solid orange
                            border-radius: 40px
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:solar-power
                                height: 20px
                                color: orange
                            - component: Label
                              config:
                                text: 9.5 kWh
                                style:
                                  font-size: 12px
                      - component: f7-block
                        config:
                          style:
                            margin: 0
                            padding: 0
                            width: 100%
                            display: flex
                            height: 125px
                            justify-content: center
                        slots:
                          default:
                            - component: f7-row
                              config:
                                tag: svg
                                xmlns: http://www.w3.org/2000/svg
                                viewBox: 0 0 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
                                  - 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
                                  - 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,56 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: Gas
                      - component: f7-block
                        config:
                          style:
                            height: 80px
                            width: 80px
                            border: 2px solid darkred
                            border-radius: 40px
                            display: flex
                            justify-content: center
                            align-items: center
                            flex-direction: column
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: if:mdi:gas
                                height: 20px
                                color: darkred
                            - component: Label
                              config:
                                text: 1.7 m³
                                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
                      - component: f7-block
                        config:
                          style:
                            margin-top: 0
                            height: 80px
                            width: 80px
                            border: 2px solid gray
                            border-radius: 40px
                            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: 12.9 kWh
                                style:
                                  font-size: 12px
                                  white-space: nowrap
                      - component: Label
                        config:
                          text: Home

16 Likes

Very nice! This should be in the marketplace for sure.

This is perhaps the coolest thing in OH.

I put this widget on my Overview page (copied the code above). I haven’t included my own data yet but will do once I can read my energy meters. There is one glitch, though. For some reason the lines are too short. I tried to look at the code but didn’t find the parameters that I would need to change. I also tried to change the column widths but this didn’t help.

For sure, but I meant this to be a example/showcase and I’m afraid I’m too busy (read: lazy) to make it into a proper turn-key widget. What I’m willing to try however is to make a Wiki entry in the marketplace so the widget would be initially be the one above with the hardcoded values and eventually (but I’m not holding my breath :sweat_smile:) it would be improved by others who can edit wiki entries?

Many thanks to @ysc. Created my first animated widget!