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?
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
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
You just couldn’t resist a challenge! Great work!
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 
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!
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
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 
) it would be improved by others who can edit wiki entries?
Many thanks to @ysc. Created my first animated widget!
dear
Grat job, I want to start from your code to add the possibility to select items from standard UI
just for information, NON FOSSIL value is related to???
how it’s calculated (or should be calculated?)
How do you read GAS value? there is a special hardware (like shelly em or other for energy ) or do you read the value from your supllier site/api?
This is completely up to you. If you have smart meters at home, you can read them, or try DIY projects for meter readings. There are many to find in google.
I for myself read my gas meter with a proximity sensor and a tasmota baseded nodeMCU and my smart electricity meter with a SML reader connected to the same nodeMCU.
dear All
here you can find the first version of configurable widget.
Let me know if you find some bugs or if you have suggestion for improve it
This is a very nice work, thank you.
I do have a humble question, would it be possible (for someone) to add battery charging and usage to the widget…basically it needs to be connected to Solar and Home for charging from solar and supplying home…
I really tried myself but am really not sufficient enough in YAML design…
Thanks.
Did anybody already managed to rebuild the complete Home Assistant Energy Dashboard with all the charts and graphs.
I think there should be a standard template/page in openHAB to easily create this kind of page, as actually everybody could use it.
Who says that ? I e.g could not use it like I assume many others
There is no need to make it a standard page/widget, but feel free to create the complete setup and publish it to the marketplace, so anybody who wants it, can use it. It might become a nice project like the main_widget project.
But like always, somebody has to make a start.
