Based on this forum discussion I have created the configurable energy animated widget.
Required ITEMS are:
-
Consumption From Grid
-
Home Consumption
Other ITEMS are not mandatory and widget will display/hide the section accordingly.
Title it’s not mandatory, if missing the title section will not be displayed.
Changelog
Version 0.1
- initial release
Resources
uid: OH3_Livio_Energy_Summary
tags: []
props:
parameters:
- description: Title
label: Title
name: title
required: false
type: TEXT
- context: item
description: Consumption From Grid
label: Consumption From Grid Item
name: itemConsumptionFromGrid
required: true
type: TEXT
- context: item
description: Production to Grid
label: Production to Grid Item
name: itemProductionToGrid
required: false
type: TEXT
- context: item
description: Item Solar Production
label: Solar Production Item
name: itemSolar
required: false
type: TEXT
- context: item
description: Home Consumption
label: Home Consumption Item
name: itemHomeConsumption
required: true
type: TEXT
- context: item
description: Gas Consumption Item
label: Item Gas Consumption
name: itemGas
required: false
type: TEXT
- context: item
description: Non Fossil Value Item
label: Non Fossile Item
name: itemNonFossil
required: false
type: TEXT
- description: Icon Dimension in px, insert only the numeric value (default 100px, stay within 80px and 120px for best results)
label: Icon Dimension
name: iconDimension
required: false
- description: Border Radius, enter a numeric value from 0 to 100 (significant changes are visible from value between 40 and 70)
label: Border Radius
name: borderRadius
required: false
parameterGroups: []
timestamp: Jun 4, 2022, 12:54:59 PM
component: f7-card
config:
title: = props.title
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: "=(props.itemNonFossil) ? 'Non-Fossil' : ''"
- component: f7-block
config:
style:
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
border: 2px solid darkgreen
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
display: flex
justify-content: center
align-items: center
flex-direction: column
visible: "=(props.itemNonFossil) ? true : false"
slots:
default:
- component: oh-icon
config:
icon: "=(props.itemNonFossil) ? 'if:mdi:leaf' : ''"
height: 20px
color: darkgreen
- component: Label
config:
text: = items[props.itemNonFossil].displayState
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
visible: "=(props.itemNonFossil) ? true : false"
- component: f7-block
config:
style:
margin-top: "=(props.itemNonFossil) ? '0px' : (props.itemSolar) ? '150px' : (props.itemGas) ? '150px' : '0px'"
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
border: 2px solid teal
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
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: = items[props.itemProductionToGrid].displayState
iconF7: "=(props.itemProductionToGrid) ? 'arrow_left' : ''"
iconSize: 12px
iconColor: purple
style:
font-size: 12px
white-space: nowrap
visible: = props.itemProductionToGrid
- component: oh-link
config:
text: = items[props.itemConsumptionFromGrid].displayState
iconF7: "=(props.itemConsumptionFromGrid) ? '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: "=(props.itemSolar) ? 'Solar' : ''"
- component: f7-block
config:
style:
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
border: 2px solid orange
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
display: flex
justify-content: center
align-items: center
flex-direction: column
visible: "=(props.itemSolar) ? true : false"
slots:
default:
- component: oh-icon
config:
icon: if:mdi:solar-power
height: 20px
color: orange
- component: Label
config:
text: =items[props.itemSolar].displayState
style:
font-size: 12px
- component: f7-block
config:
style:
margin: 0
padding: 0
width: 100%
display: flex
height: "=((props.itemNonFossil) && (props.itemSolar) && (props.itemGas)) ? '145px' : ((props.itemNonFossil) && (props.itemSolar)) ? '145px' : ((props.itemNonFossil) && (props.itemGas)) ? '320px' : ((props.itemSolar) && (props.itemGas)) ? '145px' : (props.itemNonFossil) ? '320px' : (props.itemGas) ? '320px' : '145px'"
justify-content: center
slots:
default:
- component: f7-row
config:
tag: svg
xmlns: http://www.w3.org/2000/svg
viewBox: "=((props.itemNonFossil) || (props.itemSolar) || (props.itemGas))? '0 0 100 100' : '0 8 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
visible: "=(props.itemSolar) ? true : false"
- 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
visible: "=(props.itemSolar) ? true : false"
- 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,55 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: "=(props.itemGas) ? 'Gas' : ''"
- component: f7-block
config:
style:
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
border: 2px solid darkred
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
display: flex
justify-content: center
align-items: center
flex-direction: column
visible: "=(props.itemGas) ? true : false"
slots:
default:
- component: oh-icon
config:
icon: if:mdi:gas
height: 20px
color: darkred
- component: Label
config:
text: = items[props.itemGas].displayState
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
visible: "=(props.itemGas) ? true : false"
- component: f7-block
config:
style:
margin-top: "=((props.itemNonFossil) && (props.itemGas)) ? '0px' : ((props.itemSolar) && (props.itemGas)) ? '0px' : ((props.itemSolar) || (props.itemNonFossil)) ? '150px' : '0px'"
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
border: 2px solid gray
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
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: = items[props.itemHomeConsumption].displayState
style:
font-size: 12px
white-space: nowrap
- component: Label
config:
text: Home
following complete code
uid: OH3_Livio_Energy_Summary
tags: []
props:
parameters:
- description: Title
label: Title
name: title
required: false
type: TEXT
- context: item
description: Consumption From Grid
label: Consumption From Grid Item
name: itemConsumptionFromGrid
required: true
type: TEXT
- context: item
description: Production to Grid
label: Production to Grid Item
name: itemProductionToGrid
required: false
type: TEXT
- context: item
description: Item Solar Production
label: Solar Production Item
name: itemSolar
required: false
type: TEXT
- context: item
description: Home Consumption
label: Home Consumption Item
name: itemHomeConsumption
required: true
type: TEXT
- context: item
description: Gas Consumption Item
label: Item Gas Consumption
name: itemGas
required: false
type: TEXT
- context: item
description: Non Fossil Value Item
label: Non Fossile Item
name: itemNonFossil
required: false
type: TEXT
- description: Icon Dimension in px, insert only the numeric value (default 100px, stay within 80px and 120px for best results)
label: Icon Dimension
name: iconDimension
required: false
- description: Border Radius, enter a numeric value from 0 to 100 (significant changes are visible from value between 40 and 70)
label: Border Radius
name: borderRadius
required: false
parameterGroups: []
timestamp: Jun 4, 2022, 12:54:59 PM
component: f7-card
config:
title: = props.title
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: "=(props.itemNonFossil) ? 'Non-Fossil' : ''"
- component: f7-block
config:
style:
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
border: 2px solid darkgreen
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
display: flex
justify-content: center
align-items: center
flex-direction: column
visible: "=(props.itemNonFossil) ? true : false"
slots:
default:
- component: oh-icon
config:
icon: "=(props.itemNonFossil) ? 'if:mdi:leaf' : ''"
height: 20px
color: darkgreen
- component: Label
config:
text: = items[props.itemNonFossil].displayState
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
visible: "=(props.itemNonFossil) ? true : false"
- component: f7-block
config:
style:
margin-top: "=(props.itemNonFossil) ? '0px' : (props.itemSolar) ? '150px' : (props.itemGas) ? '150px' : '0px'"
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
border: 2px solid teal
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
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: = items[props.itemProductionToGrid].displayState
iconF7: "=(props.itemProductionToGrid) ? 'arrow_left' : ''"
iconSize: 12px
iconColor: purple
style:
font-size: 12px
white-space: nowrap
visible: = props.itemProductionToGrid
- component: oh-link
config:
text: = items[props.itemConsumptionFromGrid].displayState
iconF7: "=(props.itemConsumptionFromGrid) ? '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: "=(props.itemSolar) ? 'Solar' : ''"
- component: f7-block
config:
style:
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
border: 2px solid orange
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
display: flex
justify-content: center
align-items: center
flex-direction: column
visible: "=(props.itemSolar) ? true : false"
slots:
default:
- component: oh-icon
config:
icon: if:mdi:solar-power
height: 20px
color: orange
- component: Label
config:
text: =items[props.itemSolar].displayState
style:
font-size: 12px
- component: f7-block
config:
style:
margin: 0
padding: 0
width: 100%
display: flex
height: "=((props.itemNonFossil) && (props.itemSolar) && (props.itemGas)) ? '145px' : ((props.itemNonFossil) && (props.itemSolar)) ? '145px' : ((props.itemNonFossil) && (props.itemGas)) ? '320px' : ((props.itemSolar) && (props.itemGas)) ? '145px' : (props.itemNonFossil) ? '320px' : (props.itemGas) ? '320px' : '145px'"
justify-content: center
slots:
default:
- component: f7-row
config:
tag: svg
xmlns: http://www.w3.org/2000/svg
viewBox: "=((props.itemNonFossil) || (props.itemSolar) || (props.itemGas))? '0 0 100 100' : '0 8 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
visible: "=(props.itemSolar) ? true : false"
- 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
visible: "=(props.itemSolar) ? true : false"
- 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,55 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: "=(props.itemGas) ? 'Gas' : ''"
- component: f7-block
config:
style:
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
border: 2px solid darkred
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
display: flex
justify-content: center
align-items: center
flex-direction: column
visible: "=(props.itemGas) ? true : false"
slots:
default:
- component: oh-icon
config:
icon: if:mdi:gas
height: 20px
color: darkred
- component: Label
config:
text: = items[props.itemGas].displayState
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
visible: "=(props.itemGas) ? true : false"
- component: f7-block
config:
style:
margin-top: "=((props.itemNonFossil) && (props.itemGas)) ? '0px' : ((props.itemSolar) && (props.itemGas)) ? '0px' : ((props.itemSolar) || (props.itemNonFossil)) ? '150px' : '0px'"
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
border: 2px solid gray
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
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: = items[props.itemHomeConsumption].displayState
style:
font-size: 12px
white-space: nowrap
- component: Label
config:
text: Home
Please let me know if you find some bugs or if you would suggest some improvements
