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 thedur="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
