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%)