Energy Dashboard

Hello,

Is it somehow possible in OH3 MainUI to create an Energy Dashboard, which visualizes the energy consumption daily, monthly, early…

In general something like this where you can also select Today, Week, Monath, Year:

As data source I’m using Volkszaehler, I don’t want to use Grafana, looking for a way which perfectly fits into the MainUI.

1 Like

Take a look at: Energy Widget like in Home Assistant Demo

Yes I know, this is a first widget, which is really cool, but the problem is how can we create this dashboard in OH3 MainUI. I’m even not sure if it is possible at all.

Nice example.
All tools are available in openhab to recreate something similar. I haven’t seen anyone who has done this and then shared it with the community.

I made myself a simple gauger to display my current power consumption.

I’m not that good at making fancy widgets

It is just a combination of some charts, gauges and the nice new widget @ysc created …
So should be not to difficult to recreate, now that Yannick did the difficult stuff…

The problem for me is the graph with buttons like “Today, Week, Monath, Year”. Maybe somebody could create a similar dashboard on the OpenHab Demo page, I think this is a very nice example.

I did once make sort of a copy of their small widget
If there is interest I can share

image

Would you lik t share your widget?

Sure

here you go.
note: It is bit finicky wrt the width, as it needs bit more than the default width of the masonry so I changed the colomns with this config:

config:
  cols:
    "768": 1
    "1023": 3
    "1280": 1
    default: 3
uid: energyWidget01
tags: []
props:
  parameters:
    - default: Energy Dashboard
      label: Header Text
      name: headerText
      required: true
      type: TEXT
    - context: item
      default: SE5k_Live_Production
      description: Solar Production
      label: Solar Production
      name: solarProduction
      required: true
      type: TEXT
    - context: item
      default: Gas_Usage
      label: Gas Consumption
      name: gas
      required: true
      type: TEXT
    - context: item
      default: Power_Usage
      description: Power Consumption total home
      label: Power Consumption Home
      name: powerConsumption
      required: false
      type: TEXT
    - context: item
      default: Power_Import
      description: Power Consumption from net
      label: Power Consumption (net)
      name: powerFromNet
      required: false
      type: TEXT
    - context: item
      default: Power_Return
      description: Power Delivery to net (Export)
      label: Power Export (net)
      name: powerToNet
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Apr 7, 2022, 4:39:20 PM
component: f7-card
config: {}
slots:
  default:
    - component: f7-block
      config:
        style:
          background-color: white
          border-radius: 5%
          height: 215px
          left: 0px
          margin-left: auto
          margin-right: auto
          margin-top: auto
          position: absolute
          right: 81px
          top: 00px
          width: 330px
      slots:
        default:
          - component: Label
            config:
              style:
                color: black
                font-size: 10
                font-weight: bold
                text-align: center
              text: = props.headerText
    - component: f7-block
      config:
        style:
          border-style: solid
          border-width: 0px
          height: 200px
          left: 0px
          margin-left: auto
          margin-right: auto
          margin-top: auto
          position: absolute
          right: -200px
          top: 100px
          transform: translate(-50%, -50%)
          width: 280px
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 12px
                height: 50px
                left: 125px
                position: absolute
                right: 0px
                top: 66px
                width: 150px
              text: =(items[props.solarProduction].state)
          - component: Label
            config:
              style:
                color: black
                font-size: 12px
                left: 225px
                position: absolute
                right: 0px
                top: 160px
                width: 70px
              text: =(items[props.powerConsumption].displayState)
              oldtext: '= Number(items[props.powerFromNet].state.split(" ")[0] )+ Number(items[props.solarProduction].state.split(" ")[0]) + items[props.powerFromNet].state.split(" ")[1] '
          - component: Label
            config:
              style:
                font-size: 12px
                height: 50px
                left: 225px
                position: absolute
                right: 0px
                top: 66px
                width: 150px
              text: =(items[props.gas].displayState)
          - component: Label
            config:
              style:
                font-size: 12px
                height: 50px
                left: 25px
                position: absolute
                right: 0px
                top: 166px
                width: 150px
              text: =items[props.powerFromNet].displayState
          - component: Label
            config:
              style:
                font-size: 12px
                height: 50px
                left: 25px
                position: absolute
                right: 0px
                top: 176px
                width: 150px
              text: =items[props.powerToNet].displayState
          - component: f7-icon
            config:
              color: black
              f7: arrow_right
              style:
                font-size: 12px
                height: 50px
                left: -6px
                position: absolute
                right: 0px
                top: 170px
                width: 50px
          - component: f7-icon
            config:
              color: black
              f7: arrow_left
              style:
                font-size: 12px
                height: 50px
                left: -6px
                position: absolute
                right: 0px
                top: 180px
                width: 50px
    - component: f7-block
      config:
        style:
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path id="solar" fill="none" stroke="orange" class="solar" vector-effect="non-scaling-stroke" d="M150,34 v15 c0,40 10,35 32,35 h20"></path> <circle r="3" fill="orange">    <animateMotion dur="5s" repeatCount="indefinite" path="M150,34 v15 c0,40 10,35 30,35 h20"/>  </circle></svg>')
          border-style: solid
          border-width: 0px
          height: 150px
          left: 0px
          margin-left: auto
          margin-right: auto
          margin-top: auto
          position: absolute
          right: -200px
          top: 140px
          transform: translate(-50%, -50%)
          width: 280px
    - component: f7-block
      config:
        style:
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path id="solar" fill="none" stroke="green" class="solar" vector-effect="non-scaling-stroke" d="M130,34 v15 c0,40 -10,35 -35,35 h-20"></path> <circle r="3" fill="green"><animateMotion dur="25s" repeatCount="indefinite" path="M130,34 v15 c0,40 -10,35 -35,35 h-20"/>  </circle></svg>')
          border-style: solid
          border-width: 0px
          height: 150px
          left: 0px
          margin-left: auto
          margin-right: auto
          margin-top: auto
          position: absolute
          right: -200px
          top: 140px
          transform: translate(-50%, -50%)
          width: 280px
    - component: f7-block
      config:
        style:
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path stroke="blue" id="power_consumption" d="m78,5l122,0" opacity="undefined" stroke-linecap="undefined" stroke-linejoin="undefined" fill="none"/><circle r="3" fill="blue">    <animateMotion dur="10s" repeatCount="indefinite" path="m78,5l122,0" />  </circle> </svg>')
          border-style: solid
          border-width: 0px
          height: 10px
          left: 0px
          margin-left: auto
          margin-right: auto
          margin-top: auto
          position: absolute
          right: -200px
          top: 170px
          transform: translate(-50%, -50%)
          width: 280px
    - component: f7-block
      config:
        style:
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path stroke="purple" id="power_consumption" d="m238,37l0,25" opacity="undefined" stroke-linecap="undefined" stroke-linejoin="undefined" fill="none"/><circle r="3" fill="purple"><animateMotion dur="8s" repeatCount="indefinite" path="m238,37l0,25" />  </circle> </svg>')
          border-style: solid
          border-width: 0px
          height: 150px
          left: 0px
          margin-left: auto
          margin-right: auto
          margin-top: auto
          position: absolute
          right: -200px
          top: 140px
          transform: translate(-50%, -50%)
          width: 280px
    - component: f7-block
      config:
        style:
          border-color: grey
          border-radius: 50%
          border-style: solid
          border-width: 0px
          height: 80px
          left: -200px
          margin-left: auto
          margin-right: auto
          margin-top: auto
          position: absolute
          right: 0
          top: 62px
          transform: translate(-50%, -50%)
          width: 80px
    - component: f7-block
      config:
        style:
          border-color: orange
          border-radius: 50%
          border-style: solid
          border-width: 1px
          height: 80px
          left: 00px
          margin-left: auto
          margin-right: auto
          margin-top: auto
          position: absolute
          right: 0
          top: 62px
          transform: translate(-50%, -50%)
          width: 80px
    - component: f7-block
      config:
        style:
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M15 4v2.594l-1.813-1.782l-1.374 1.375L13.592 8H11v2h2.594l-1.781 1.813l1.374 1.374L15 11.408V14h2v-2.594l1.813 1.781l1.375-1.374L18.405 10H21V8h-2.594l1.782-1.813l-1.375-1.375L17 6.595V4zm1 3c1.102 0 2 .898 2 2c0 1.102-.898 2-2 2c-1.102 0-2-.898-2-2c0-1.102.898-2 2-2zm-9.781 9L4 24.875V28h24v-3.125L25.781 16zm1.562 2H24.22L26 25.125V26H6v-.875zM9 19l-.406 1.813h2.094L11 19zm4 0l-.188 1.813h2.094L15 19zm4 0l.094 1.813h2.093L19 19zm4 0l.313 1.813h2.093L23 19zM8.187 22.813L7.814 25h2.28l.313-2.188zm4.5 0L12.5 25h2.313l.093-2.188zm4.407 0L17.187 25H19.5l-.188-2.188zm4.5 0L21.906 25h2.282l-.375-2.188z" fill="currentColor"/></svg>')
          background-position: center
          background-repeat: no-repeat
          background-size: 100% 100%
          height: 30px
          left: 0px
          margin-left: auto
          margin-right: auto
          margin-top: auto
          position: absolute
          right: 45px
          top: 50px
          transform: translate(-50%, -50%)
          width: 30px
    - component: f7-block
      config:
        style:
          border-color: blue
          border-radius: 50%
          border-style: solid
          border-width: 3px
          height: 80px
          left: 200px
          margin-left: auto
          margin-right: auto
          margin-top: auto
          position: absolute
          right: 0
          top: 165px
          transform: translate(-50%, -50%)
          width: 80px
    - component: f7-block
      config:
        style:
          border-color: blue
          border-radius: 50%
          border-style: solid
          border-width: 1px
          height: 80px
          left: -200px
          margin-left: auto
          margin-right: auto
          margin-top: auto
          position: absolute
          right: 0
          top: 165px
          transform: translate(-50%, -50%)
          width: 80px
    - component: f7-block
      config:
        style:
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" focusable="false" viewBox="0 0 24 24"><path d="M8.28,5.45L6.5,4.55L7.76,2H16.23L17.5,4.55L15.72,5.44L15,4H9L8.28,5.45M18.62,8H14.09L13.3,5H10.7L9.91,8H5.38L4.1,10.55L5.89,11.44L6.62,10H17.38L18.1,11.45L19.89,10.56L18.62,8M17.77,22H15.7L15.46,21.1L12,15.9L8.53,21.1L8.3,22H6.23L9.12,11H11.19L10.83,12.35L12,14.1L13.16,12.35L12.81,11H14.88L17.77,22M11.4,15L10.5,13.65L9.32,18.13L11.4,15M14.68,18.12L13.5,13.64L12.6,15L14.68,18.12Z"></path></svg>')
          background-position: center
          background-repeat: no-repeat
          background-size: 100% 100%
          height: 25px
          left: -280px
          margin-left: auto
          margin-right: auto
          margin-top: auto
          position: absolute
          right: 0
          top: 136px
          width: 20px
    - component: f7-icon
      config:
        f7: house_fill
        size: 21
        style:
          color: black
          left: 143px
          margin-left: auto
          margin-right: auto
          margin-top: auto
          position: absolute
          right: 0
          top: 150px
          transform: translate(-50%, -50%)
    - component: f7-block
      config:
        style:
          border-color: purple
          border-radius: 50%
          border-style: solid
          border-width: 1px
          height: 80px
          left: 200px
          margin-left: auto
          margin-right: auto
          margin-top: auto
          position: absolute
          right: 0
          top: 62px
          transform: translate(-50%, -50%)
          width: 80px
    - component: f7-block
      config:
        style:
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"><path d="M17.66 11.2C17.43 10.9 17.15 10.64 16.89 10.38C16.22 9.78 15.46 9.35 14.82 8.72C13.33 7.26 13 4.85 13.95 3C13 3.23 12.17 3.75 11.46 4.32C8.87 6.4 7.85 10.07 9.07 13.22C9.11 13.32 9.15 13.42 9.15 13.55C9.15 13.77 9 13.97 8.8 14.05C8.57 14.15 8.33 14.09 8.14 13.93C8.08 13.88 8.04 13.83 8 13.76C6.87 12.33 6.69 10.28 7.45 8.64C5.78 10 4.87 12.3 5 14.47C5.06 14.97 5.12 15.47 5.29 15.97C5.43 16.57 5.7 17.17 6 17.7C7.08 19.43 8.95 20.67 10.96 20.92C13.1 21.19 15.39 20.8 17.03 19.32C18.86 17.66 19.5 15 18.56 12.72L18.43 12.46C18.22 12 17.66 11.2 17.66 11.2M14.5 17.5C14.22 17.74 13.76 18 13.4 18.1C12.28 18.5 11.16 17.94 10.5 17.28C11.69 17 12.4 16.12 12.61 15.23C12.78 14.43 12.46 13.77 12.33 13C12.21 12.26 12.23 11.63 12.5 10.94C12.69 11.32 12.89 11.7 13.13 12C13.9 13 15.11 13.44 15.37 14.8C15.41 14.94 15.43 15.08 15.43 15.23C15.46 16.05 15.1 16.95 14.5 17.5H14.5Z"></path></svg>')
          background-position: center
          background-repeat: no-repeat
          background-size: 100% 100%
          height: 30px
          left: 50px
          margin-left: auto
          margin-right: auto
          margin-top: auto
          position: absolute
          right: 0px
          top: 50px
          transform: translate(100%, -50%)
          width: 30px

Notes:

  • What is not implemented is the adjustment of the speed of the moviong bubbles based on the amount of W.
    This can be added by changing the dur="25s" to something calculated from the W in the SVG
  • The items are defaulted to my item names. Be sure to configure it with yours
  • Dunno why the house icon is not showing right here. It is visible in the edit page :woozy_face:

1 Like

Thank you very much!
Btw, same house icon issue :wink: