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.
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
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:
dur="25s" to something calculated from the W in the SVG
Thank you very much!
Btw, same house icon issue 
Hi @marcel_verpaalen, @stefaanbolle,
Really like this Energy Dashboard, thanks for posting. I am also having the issue where the house icon shows in the widget edit page but does not show in a page. Just wondered if you ever solved the issue?
I modified the widget to better suit my setup as follows.
uid: energyWidget01
tags: []
props:
parameters:
- default: Energy Dashboard
label: Header Text
name: headerText
required: true
type: TEXT
- context: item
description: Solar Power Generation
label: Solar Power Generation
name: solarGen
required: false
type: TEXT
- context: item
default: Power_Grid
description: Power from/to Grid
label: Power Grid (net)
name: powerGrid
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 30, 2022, 2:50:52 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: relative
right: 80px
top: 00px
width: 320px
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: 14px
font-weight: bold
height: 50px
left: 154px
position: absolute
right: 0px
top: 66px
width: 150px
text: =(-Number.parseFloat(items[props.solarGen].state.split(" ")[0]) / 1000).toFixed(2) + 'kW'
- component: Label
config:
style:
color: black
font-size: 14px
font-weight: bold
left: 254px
position: absolute
right: 0px
top: 166px
width: 70px
text: =((Number(items[props.powerGrid].state.split(" ")[0] )- Number(items[props.solarGen].state.split(" ")[0])) / 1000).toFixed(2) + 'kW'
- component: Label
config:
style:
color: '= (Number.parseFloat(items[props.powerGrid].state.split(" ")[0]) > 0) ? "red" : "green"'
font-size: 14px
font-weight: bold
height: 50px
left: 54px
position: absolute
right: 0px
top: 166px
width: 150px
text: =(Number.parseFloat(items[props.powerGrid].state.split(" ")[0]) / 1000).toFixed(2) + 'kW'
- component: f7-block
config:
style:
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path stroke="red" stroke-width="2" id="grid_import" d="m80,5l60,0" opacity="undefined" stroke-linecap="undefined" stroke-linejoin="undefined" fill="none"/><circle r="5" fill="red"> <animateMotion dur="5s" repeatCount="indefinite" path="m80,5l60,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: -280px
top: 170px
transform: translate(-50%, -50%)
filter: '= (Number.parseInt(items[props.powerGrid].state.split(" ")[0]) > 0) ? "opacity(100%)" : "opacity(0%)"'
width: 280px
- component: f7-block
config:
style:
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path stroke="green" stroke-width="2" id="grid_export" d="m80,5l60,0" opacity="undefined" stroke-linecap="undefined" stroke-linejoin="undefined" fill="none"/><circle r="5" fill="green"> <animateMotion dur="5s" repeatCount="indefinite" path="m140,5l-60,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: -280px
top: 170px
transform: translate(-50%, -50%)
filter: '= (Number.parseInt(items[props.powerGrid].state.split(" ")[0]) > 0) ? "opacity(0%)" : "opacity(100%)"'
width: 280px
- component: f7-block
config:
style:
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path stroke="red" stroke-width="2" id="house_power" d="m140,5l60,0" opacity="undefined" stroke-linecap="undefined" stroke-linejoin="undefined" fill="none"/><circle r="5" fill="red"> <animateMotion dur="5s" repeatCount="indefinite" path="m140,5l60,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: -280px
top: 170px
transform: translate(-50%, -50%)
filter: '= (Number.parseInt(items[props.powerGrid].state.split(" ")[0]) > 0) ? "opacity(100%)" : "opacity(0%)"'
width: 280px
- component: f7-block
config:
style:
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path stroke="green" stroke-width="2" id="house_power_solar" d="m140,5l60,0" opacity="undefined" stroke-linecap="undefined" stroke-linejoin="undefined" fill="none"/><circle r="5" fill="green"> <animateMotion dur="5s" repeatCount="indefinite" path="m140,5l60,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: -280px
top: 170px
transform: translate(-50%, -50%)
filter: '= (Number.parseInt(items[props.powerGrid].state.split(" ")[0]) > 0) ? "opacity(0%)" : "opacity(100%)"'
width: 280px
- component: f7-block
config:
style:
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path stroke="green" stroke-width="2" id="solar" d="m140,45l0,60" opacity="undefined" stroke-linecap="undefined" stroke-linejoin="undefined" fill="none"/><circle r="5" fill="green"><animateMotion dur="5s" repeatCount="indefinite" path="m140,45l0,60" /> </circle> </svg>')
border-style: solid
border-width: 0px
height: 150px
left: 0px
margin-left: auto
margin-right: auto
margin-top: auto
position: absolute
right: -280px
top: 140px
transform: translate(-50%, -50%)
filter: '= (Number.parseInt(items[props.solarGen].state.split(" ")[0]) < 0) ? "opacity(100%)" : "opacity(0%)"'
width: 280px
- component: f7-block
config:
style:
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path stroke="green" stroke-width="2" id="solar" d="m140,45l0,60" opacity="undefined" stroke-linecap="undefined" stroke-linejoin="undefined" fill="none"/> </svg>')
border-style: solid
border-width: 0px
height: 150px
left: 0px
margin-left: auto
margin-right: auto
margin-top: auto
position: absolute
right: -280px
top: 140px
transform: translate(-50%, -50%)
filter: '= (Number.parseInt(items[props.solarGen].state.split(" ")[0]) < 0) ? "opacity(100%)" : "opacity(0%)"'
width: 280px
- component: f7-block
config:
style:
border-color: green
border-radius: 50%
border-style: solid
border-width: 2px
height: 80px
left: 0px
margin-left: auto
margin-right: auto
margin-top: auto
position: absolute
right: -80px
top: 70px
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: -30px
top: 50px
transform: translate(-50%, -50%)
width: 30px
- component: f7-block
config:
style:
border-color: black
border-radius: 50%
border-style: solid
border-width: 2px
height: 80px
left: 0px
margin-left: auto
margin-right: auto
margin-top: auto
position: absolute
right: -280px
top: 170px
transform: translate(-50%, -50%)
width: 80px
- component: f7-block
config:
style:
border-color: '= (Number.parseFloat(items[props.powerGrid].state.split(" ")[0]) > 0) ? "red" : "green"'
border-radius: 50%
border-style: solid
border-width: 2px
height: 80px
left: -120px
margin-left: auto
margin-right: auto
margin-top: auto
position: absolute
right: 0
top: 170px
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: -200px
margin-left: auto
margin-right: auto
margin-top: auto
position: absolute
right: 0
top: 140px
width: 20px
- component: f7-icon
config:
f7: house
size: 24
style:
color: black
left: 0px
margin-left: auto
margin-right: auto
margin-top: auto
position: absolute
right: -240px
top: 160px
height: 40px
width: 40px
transform: translate(-50%, -50%)
No, I did not put much more effort to it to get it right. As you saw the alignment is a bitch with this thing.
I think if I would build it again, I would make build from less individual images and stuff pretty much all (except maybe the moving bubbles ) in a single svg.
Are there any plans for an Energy Visualisation implemented in Openhab similar to Home Assistant.
I know that Openhab is a framework, but there are a lot of hassles to get the same. Yes it is somehow possible with some restriction, but only if you have a deep insight how Openhab works. An out-of-the-box solution would be really good.