Even though my consumption from grid is 0 W, I see an animation from the grid to home. Is this expected behavior?
I have the same with the other animations as well. Solar Production is 0 W but there is an Animation to the grid and to the home.
I filled in all items (except the non fossile one) and get a realy strange animation… I see some flows but no values.
The three dots are all coming from ‘Solar’, but no sun anymore atm.
All these items are in kW.
I had this problem - my values are formatted as W whole number, and they would not show up unless they had a decimal
For each entry that looks like this, in the widget:
text: = items[props.itemProductionToGrid].displayStat
change it to
text: = items[props.itemProductionToGrid].displayState || items[props.itemProductionToGrid].state
Hopefully this will fix the problem with the animation, if no energy flow is present.
I’ve done a test today. If solar generation is > 0, the circles will “flow” in the right direction. After sunset, there is no circle moving. I hope i’ve also matched the grid to home and solar to grid circles.
uid: OH3_Livio_Energy_Summary
tags:
- Energy
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
# draw circle for solar to home
config:
tag: circle
r: 1
vector-effect: non-scaling-stroke
fill: orange
style:
stroke-width: 4
visible: =items[props.itemSolar].state > 0
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
# draw circle for solar to grid
config:
tag: circle
r: 1
vectorEffect: non-scaling-stroke
strokeWidth: 10
fill: purple
visible: =items[props.itemProductionToGrid].state > 0
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
# draw circle for grid to home
config:
tag: circle
r: 1
vectorEffect: non-scaling-stroke
strokeWidth: 10
fill: teal
visible: =items[props.itemConsumptionFromGrid].state > 0
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```
Hello,
in my environment, the widget is displayed outside the box (see Home-Box).
Any Ideas?
Thanks.
i had the problem with the widget-code that the bubbles were not flowing on my site. So i fixed it and added a little gimmick, that the bubbles are flying faster or slower as how much power is which is in the line. My items are measured in W. If you have your items in kW search for 3 times “1000” in the widget and change this to 1. Here the new code for them which wants to use:
uid: OH3_Livio_Energy_Summary
tags:
- Energy
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: Sep 10, 2023, 6:07:15 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:
--f7-block-font-size: 12px
--f7-theme-color: var(--f7-text-color)
display: flex
justify-content: space-between
margin: 0
padding: 0
slots:
default:
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: Label
config:
text: "=(props.itemNonFossil) ? 'Non-Fossil' : ''"
- component: f7-block
config:
style:
align-items: center
border: 2px solid darkgreen
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
display: flex
flex-direction: column
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
justify-content: center
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
visible: "=(props.itemNonFossil) ? true : false"
slots:
default:
- component: oh-icon
config:
color: darkgreen
height: 20px
icon: "=(props.itemNonFossil) ? 'if:mdi:leaf' : ''"
- component: Label
config:
style:
font-size: 12px
text: = items[props.itemNonFossil].displayState
- component: f7-block
config:
style:
align-items: center
border: 1px solid darkgreen
display: flex
flex-direction: column
height: 30px
justify-content: center
margin: 0
padding: 0
width: 2px
visible: "=(props.itemNonFossil) ? true : false"
- component: f7-block
config:
style:
align-items: center
border: 2px solid teal
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
display: flex
flex-direction: column
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
justify-content: center
margin-top: "=(props.itemNonFossil) ? '0px' : (props.itemSolar) ? '150px' : (props.itemGas) ? '150px' : '0px'"
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
slots:
default:
- component: oh-icon
config:
color: teal
height: 20px
icon: if:mdi:transmission-tower
- component: oh-link
config:
iconColor: purple
iconF7: "=(props.itemProductionToGrid) ? 'arrow_left' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemProductionToGrid].displayState
visible: = props.itemProductionToGrid
- component: oh-link
config:
iconColor: blue
iconF7: "=(props.itemConsumptionFromGrid) ? 'arrow_right' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemConsumptionFromGrid].displayState
- component: Label
config:
text: Grid
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
flex-grow: 1
slots:
default:
- component: Label
config:
text: "=(props.itemSolar) ? 'Solar' : ''"
- component: f7-block
config:
style:
align-items: center
border: 2px solid orange
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
display: flex
flex-direction: column
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
justify-content: center
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
visible: "=(props.itemSolar) ? true : false"
slots:
default:
- component: oh-icon
config:
color: orange
height: 20px
icon: if:mdi:solar-power
- component: Label
config:
style:
font-size: 12px
text: =items[props.itemSolar].displayState
- component: f7-block
config:
style:
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
margin: 0
padding: 0
width: 100%
slots:
default:
- component: f7-row
config:
preserveAspectRatio: xMidYMid slice
style:
height: auto
tag: svg
viewBox: "=((props.itemNonFossil) || (props.itemSolar) || (props.itemGas))? '0 0 100 100' : '0 8 100 100'"
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
d: M53,0 v15 c0,40 10,35 30,35 h20
fill: none
id: path1
stroke: orange
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemSolar) ? true : false"
- component: f7-row
config:
fill: orange
r: 1
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: =Number.parseFloat(items[props.itemSolar].state) > 0
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: =0.2+1000/Number.parseFloat(items[props.itemSolar].state)+0.1
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path1"
- component: f7-row
config:
d: M47,0 v15 c0,40 -10,35 -30,35 h-20
fill: none
id: path2
stroke: purple
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemSolar) ? true : false"
- component: f7-row
config:
fill: purple
r: 1
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: =Number.parseFloat(items[props.itemProductionToGrid].state) > 0
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: =0.2+1000/Number.parseFloat(items[props.itemProductionToGrid].state)+0.1
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path2"
- component: f7-row
config:
d: M0,55 H100
fill: none
id: path3
stroke: teal
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
- component: f7-row
config:
fill: teal
r: 1
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: =Number.parseFloat(items[props.itemConsumptionFromGrid].state) > 0
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: =0.2+1000/Number.parseFloat(items[props.itemConsumptionFromGrid].state)+0.1
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path3"
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: Label
config:
text: "=(props.itemGas) ? 'Gas' : ''"
- component: f7-block
config:
style:
align-items: center
border: 2px solid darkred
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
display: flex
flex-direction: column
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
justify-content: center
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
visible: "=(props.itemGas) ? true : false"
slots:
default:
- component: oh-icon
config:
color: darkred
height: 20px
icon: if:mdi:gas
- component: Label
config:
style:
font-size: 12px
text: = items[props.itemGas].displayState
- component: f7-block
config:
style:
align-items: center
border: 1px solid darkred
display: flex
flex-direction: column
height: 30px
justify-content: center
margin: 0
padding: 0
width: 2px
visible: "=(props.itemGas) ? true : false"
- component: f7-block
config:
style:
align-items: center
border: 2px solid gray
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
display: flex
flex-direction: column
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
justify-content: center
margin-top: "=((props.itemNonFossil) && (props.itemGas)) ? '0px' : ((props.itemSolar) && (props.itemGas)) ? '0px' : ((props.itemSolar) || (props.itemNonFossil)) ? '150px' : '0px'"
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
slots:
default:
- component: oh-icon
config:
color: gray
height: 20px
icon: if:mdi:home
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemHomeConsumption].displayState
- component: Label
config:
text: Home
I extended/changed the widget in order to support my managed equipment. I added:
- Battery
- Water
- Electric Car
All elements are supporing multiple lines, e.g. for SOC, status, …
The name of each Element can be changed. E.g. Car
→ Audi Q5
Electric consumers are visualized using the purple colored arrow and a minus prefix.
Electric generators are visualized using the blue colored arrow.
Small improvements incl the one from above are implemented (state
v.s. displayState
, animation only when energy flows).
All can be configured:
Source
uid: OH3_Livio_Energy_Summary_MikeTheTux
tags: []
props:
parameters:
- description: Widget Title
label: Widget Title
name: title
required: false
type: TEXT
- description: Grid Title
label: Grid Title
name: titleGrid
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
- description: Solar Title
label: Solar Title
name: titleSolar
required: false
type: TEXT
- context: item
description: Item Solar Production (first)
label: Solar Production Item (first)
name: itemSolar
required: false
type: TEXT
- context: item
description: Item Solar Production (second)
label: Solar Production Item (second)
name: itemSolar2
required: false
type: TEXT
- context: item
description: Item Solar Production (third)
label: Solar Production Item (third)
name: itemSolar3
required: false
type: TEXT
- description: Home Title
label: Home Title
name: titleHome
required: false
type: TEXT
- context: item
description: Home Consumption (first)
label: Home Consumption Item (first)
name: itemHomeConsumption
required: true
type: TEXT
- context: item
description: Home Consumption (second)
label: Home Consumption Item (second)
name: itemHomeConsumption2
required: false
type: TEXT
- context: item
description: Home Consumption (third)
label: Home Consumption Item (third)
name: itemHomeConsumption3
required: false
type: TEXT
- description: Battery Title
label: Battery Title
name: titleBattery
required: false
type: TEXT
- context: item
description: Battery Load/Decharge Item (first)
label: Item Battery Load/Decharge (first)
name: itemBattery
required: false
type: TEXT
- context: item
description: Battery Load/Decharge Item (second)
label: Item Battery Load/Decharge (second)
name: itemBattery2
required: false
type: TEXT
- context: item
description: Battery Load/Decharge Item (third)
label: Item Battery Load/Decharge (third)
name: itemBattery3
required: false
type: TEXT
- description: Car Title
label: Car Title
name: titleCar
required: false
type: TEXT
- context: item
description: Car Load Item (first)
label: Item Car Load (first)
name: itemCar
required: false
type: TEXT
- context: item
description: Car Load Item (second)
label: Item Car Load (second)
name: itemCar2
required: false
type: TEXT
- context: item
description: Car Load Item (third)
label: Item Car Load (third)
name: itemCar3
required: false
type: TEXT
- description: Water Title
label: Water Title
name: titleWater
required: false
type: TEXT
- context: item
description: Water Load Item (first)
label: Item Water Load (first)
name: itemWater
required: false
type: TEXT
- context: item
description: Water Load Item (second)
label: Item Water Load (second)
name: itemWater2
required: false
type: TEXT
- context: item
description: Water Load Item (third)
label: Item Water Load (third)
name: itemWater3
required: false
type: TEXT
- description: Non Fossil Title
label: Non Fossil Title
name: titleNonFossil
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: Sep 27, 2023, 2:42:26 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:
--f7-block-font-size: 12px
--f7-theme-color: var(--f7-text-color)
display: flex
justify-content: space-between
margin: 0
padding: 0
slots:
default:
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: Label
config:
text: "=(props.itemNonFossil) ? ((props.titleNonFossil) ? props.titleNonFossil : 'Non-Fossil') : ''"
- component: f7-block
config:
style:
align-items: center
border: 2px solid brown
border-radius: "=props.borderRadius ? Number(props.borderRadius) +'px' : '0px'"
display: flex
flex-direction: column
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
justify-content: center
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
visible: "=(props.itemNonFossil) ? true : false"
slots:
default:
- component: oh-icon
config:
color: red
height: 20px
icon: "=(props.itemNonFossil) ? 'if:mdi:fire' : ''"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemNonFossil].displayState || items[props.itemNonFossil].state
- component: f7-block
config:
style:
align-items: center
border: 1px solid brown
display: flex
flex-direction: column
height: 22px
justify-content: center
margin: 0
padding: 0
width: 1px
visible: "=(props.itemNonFossil) ? true : false"
- component: f7-block
config:
style:
align-items: center
border: 2px solid teal
border-radius: "=props.borderRadius ? Number(props.borderRadius) +'px' : '0px'"
display: flex
flex-direction: column
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
justify-content: center
margin-top: "=(props.itemNonFossil) ? '0px' : (props.itemSolar) ? '150px' : (props.itemCar) ? '150px' : '0px'"
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
slots:
default:
- component: oh-icon
config:
color: teal
height: 20px
icon: if:mdi:transmission-tower
- component: oh-link
config:
iconColor: purple
iconF7: "=(props.itemProductionToGrid) ? 'arrow_left' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: "= ((Number((items[props.itemProductionToGrid].displayState || items[props.itemProductionToGrid].state).split(' ')[0]) > 0) ? '-' : '') + (items[props.itemProductionToGrid].displayState || items[props.itemProductionToGrid].state)"
visible: "=(props.itemProductionToGrid) ? true : false"
- component: oh-link
config:
iconColor: blue
iconF7: "=(props.itemConsumptionFromGrid) ? 'arrow_right' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemConsumptionFromGrid].displayState || items[props.itemConsumptionFromGrid].state
visible: "=(props.itemConsumptionFromGrid) ? true : false"
- component: Label
config:
text: "=(props.titleGrid) ? props.titleGrid : 'Grid'"
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
flex-grow: 1
slots:
default:
- component: Label
config:
text: "=(props.itemSolar) ? ((props.titleSolar) ? props.titleSolar : 'Solar') : ''"
- component: f7-block
config:
style:
align-items: center
border: 2px solid orange
border-radius: "=props.borderRadius ? Number(props.borderRadius) +'px' : '0px'"
display: flex
flex-direction: column
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
justify-content: center
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
visible: "=(props.itemSolar) ? true : false"
slots:
default:
- component: oh-icon
config:
color: orange
height: 20px
icon: if:mdi:solar-power
- component: oh-link
config:
iconColor: blue
iconF7: "=(props.itemProductionToGrid) ? 'arrow_down' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemSolar].displayState || items[props.itemSolar].state
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemSolar2].displayState || items[props.itemSolar2].state
visible: "=(props.itemSolar2) ? true : false"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemSolar3].displayState || items[props.itemSolar3].state
visible: "=(props.itemSolar3) ? true : false"
- component: f7-block
config:
style:
display: flex
height: "=((props.itemNonFossil) && (props.itemSolar) && (props.itemCar)) ? '145px' : ((props.itemNonFossil) && (props.itemSolar)) ? '145px' : ((props.itemNonFossil) && (props.itemCar)) ? '320px' : ((props.itemSolar) && (props.itemCar)) ? '145px' : (props.itemNonFossil) ? '320px' : (props.itemCar) ? '320px' : '145px'"
justify-content: center
margin: 0
padding: 0
width: 100%
slots:
default:
- component: f7-row
config:
preserveAspectRatio: xMidYMid slice
style:
height: auto
tag: svg
viewBox: "=((props.itemNonFossil) || (props.itemSolar) || (props.itemCar)) ? '0 0 100 100' : '0 8 100 100'"
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
d: M53,0 v15 c0,27 10,32 30,32 h20
fill: none
id: path1
stroke: orange
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemSolar) ? true : false"
- component: f7-row
config:
fill: orange
r: 1
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=(props.itemSolar && (Number((items[props.itemSolar].displayState || items[props.itemSolar].state).split(' ')[0]) > 0)) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 5s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path1"
- component: f7-row
config:
d: M47,0 v15 c0,27 -10,32 -30,32 h-20
fill: none
id: path2
stroke: purple
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemSolar) ? true : false"
- component: f7-row
config:
fill: purple
r: 1
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: "=(props.itemSolar && (Number((items[props.itemProductionToGrid].displayState || items[props.itemProductionToGrid].state).split(' ')[0]) > 0)) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 3s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path2"
- component: f7-row
config:
d: M0,50 H100
fill: none
id: path3
stroke: teal
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
- component: f7-row
config:
fill: teal
r: 1
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: "=(Number((items[props.itemProductionFromGrid].displayState || items[props.itemProductionFromGrid].state).split(' ')[0]) = 0) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 3s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path3"
- component: f7-row
config:
d: M50,0 v100
fill: none
id: path4
stroke: green
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemBattery) ? true : false"
- component: f7-row
config:
fill: green
r: 1
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=(props.itemBattery && (Number((items[props.itemBattery].displayState || items[props.itemBattery].state).split(' ')[0]) < 0)) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 5s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path4"
- component: f7-row
config:
d: M53,100 v-15 c0,-27 10,-32 30,-32 h20
fill: none
id: path5
stroke: green
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemBattery) ? true : false"
- component: f7-row
config:
fill: green
r: 1
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=(props.itemBattery && (Number((items[props.itemBattery].displayState || items[props.itemBattery].state).split(' ')[0]) > 0)) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 5s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path5"
- component: f7-block
config:
style:
align-items: center
border: 1px solid green
display: flex
flex-direction: column
height: 30px
justify-content: center
margin: 0
padding: 0
width: 1px
visible: "=(props.itemBattery) ? false : false"
- component: f7-block
config:
style:
align-items: center
border: 2px solid green
border-radius: "=props.borderRadius ? Number(props.borderRadius) +'px' : '0px'"
display: flex
flex-direction: column
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
justify-content: center
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
visible: "=(props.itemBattery) ? true : false"
slots:
default:
- component: oh-icon
config:
color: green
height: 20px
icon: if:mdi:battery-charging
- component: oh-link
config:
iconColor: "=(props.itemBattery) ? ((Number((items[props.itemBattery].displayState || items[props.itemBattery].state).split(' ')[0]) < 0) ? 'purple' : 'blue') : ''"
iconF7: "=(props.itemBattery) ? ((Number((items[props.itemBattery].displayState || items[props.itemBattery].state).split(' ')[0]) < 0) ? 'arrow_down' : 'arrow_up') : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemBattery].displayState || items[props.itemBattery].state
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemBattery2].displayState || items[props.itemBattery2].state
visible: "=(props.itemBattery2) ? true : false"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemBattery3].displayState || items[props.itemBattery3].state
visible: "=(props.itemBattery3) ? true : false"
- component: Label
config:
text: "=(props.itemBattery) ? ((props.titleBattery) ? props.titleBattery : 'Battery') : ''"
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: Label
config:
text: "=(props.itemCar) ? ((props.titleCar) ? props.titleCar : 'Car') : ''"
- component: f7-block
config:
style:
align-items: center
border: 2px solid lightblue
border-radius: "=props.borderRadius ? Number(props.borderRadius) +'px' : '0px'"
display: flex
flex-direction: column
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
justify-content: center
margin-top: 0px
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
visible: "=(props.itemCar) ? true : false"
slots:
default:
- component: oh-icon
config:
color: lightblue
height: 20px
icon: if:mdi:car
- component: oh-link
config:
iconColor: purple
iconF7: "=(props.itemCar) ? 'arrow_up' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: "= ((Number((items[props.itemCar].displayState || items[props.itemCar].state).split(' ')[0]) > 0) ? '-' : '') + (items[props.itemCar].displayState || items[props.itemCar].state)"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemCar2].displayState || items[props.itemCar2].state
visible: "=(props.itemCar2) ? true : false"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemCar3].displayState || items[props.itemCar3].state
visible: "=(props.itemCar3) ? true : false"
- component: f7-block
config:
style:
align-items: center
border: 1px solid lightblue
display: flex
flex-direction: column
height: 22px
justify-content: center
margin: 0
padding: 0
width: 1px
visible: "=(props.itemCar) ? true : false"
- component: f7-block
config:
style:
align-items: center
border: 2px solid gray
border-radius: "=props.borderRadius ? Number(props.borderRadius) +'px' : '0px'"
display: flex
flex-direction: column
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
justify-content: center
margin-top: "=((props.itemNonFossil) && (props.itemBattery)) ? '0px' : ((props.itemSolar) && (props.itemBattery)) ? '0px' : ((props.itemSolar) || (props.itemNonFossil)) ? '150px' : '0px'"
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
slots:
default:
- component: oh-icon
config:
color: gray
height: 20px
icon: if:mdi:home
- component: oh-link
config:
iconColor: purple
iconF7: "=(props.itemHomeConsumption) ? 'arrow_right' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: "= ((Number((items[props.itemHomeConsumption].displayState || items[props.itemHomeConsumption].state).split(' ')[0]) > 0) ? '-' : '') + (items[props.itemHomeConsumption].displayState || items[props.itemHomeConsumption].state)"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemHomeConsumption2].displayState || items[props.itemHomeConsumption2].state
visible: "=(props.itemHomeConsumption2) ? true : false"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemHomeConsumption3].displayState || items[props.itemHomeConsumption3].state
visible: "=(props.itemHomeConsumption3) ? true : false"
- component: Label
config:
text: "=(props.titleHome) ? props.titleHome : 'Home'"
- component: f7-block
config:
style:
align-items: center
border: 1px solid blue
display: flex
flex-direction: column
height: 5px
justify-content: center
margin: 0
padding: 0
width: 1px
visible: "=(props.itemWater) ? true : false"
- component: f7-block
config:
style:
align-items: center
border: 2px solid blue
border-radius: "=props.borderRadius ? Number(props.borderRadius) +'px' : '0px'"
display: flex
flex-direction: column
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
justify-content: center
margin-top: 0px
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
visible: "=(props.itemWater) ? true : false"
slots:
default:
- component: oh-icon
config:
color: blue
height: 20px
icon: if:mdi:water
- component: oh-link
config:
iconColor: purple
iconF7: "=(props.itemWater) ? 'arrow_down' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: "= ((Number((items[props.itemWater].displayState || items[props.itemWater].state).split(' ')[0]) > 0) ? '-' : '') + (items[props.itemWater].displayState || items[props.itemWater].state)"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemWater2].displayState || items[props.itemWater2].state
visible: "=(props.itemWater2) ? true : false"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = items[props.itemWater3].displayState || items[props.itemWater3].state
visible: "=(props.itemWater3) ? true : false"
- component: Label
config:
text: "=(props.itemWater) ? ((props.titleWater) ? props.titleWater : 'Water') : ''"
Have fun!
This is awesome! I thank you all for contributing in making this widget so great.
I am trying to adapt it for my needs and am only missing one little thing.
I would like to make a doughnut chart out of the ‘Home’ consumption circle to display graphically how much is consumed in the center in kwh and how much is being used from PV or from the grid.
Like that:
Unfortunately, my SVG capabilities in OH widgets are limited. Does anyone know how to implement this?
Thank you all!
Good idea.
I did a mock-up that looks the following:
Issues / to be improved:
- Initial house icon is lost
- Arrow in front of the load is lost
- Gauge can only show 2 values (Grid and Solar+Battery) but not 3 (Grid, Solar and Battery separate)
- Issues in the calculation if the items provide the values in different units (
kW
vsW
) - Autoarky applies for the entire load (Home + Water + Car) but is shown at the Home only (minor flaw in visualization)
- Take a pre-calculate autarky-rate from an item instead of the calculation within the widget
- Home supports now only 2 instead of 3 possible lines
Btw, you mix up kW
with kWh
.
Or do you want to show the autarky-rate for the last day (or week, or month) and not the actual moment?
Replace the “Home f7-block” with the following code:
- component: oh-gauge
config:
borderBgColor: teal
borderColor: orange
borderWidth: 2
value: "=Math.abs(Number.parseFloat((@props.itemHomeConsumption))) + Math.abs(Number.parseFloat((@props.itemCar))) + Math.abs(Number.parseFloat((@props.itemWater))) - Math.abs(Number.parseFloat((@props.itemConsumptionFromGrid)))"
valueText: "= '🏠 ' + ((Number.parseFloat((@props.itemHomeConsumption)) > 0) ? '-' : '') + @props.itemHomeConsumption"
labelText: "= '🔆 ' + (100.0 - Math.round(1000.0 * Math.abs(Number.parseFloat((@props.itemConsumptionFromGrid))) / (Math.abs(Number.parseFloat((@props.itemHomeConsumption))) + Math.abs(Number.parseFloat((@props.itemCar))) + Math.abs(Number.parseFloat((@props.itemWater))))) / 10.0).toFixed(1) + ' %'"
max: "=Math.abs(Number.parseFloat((@props.itemHomeConsumption))) + Math.abs(Number.parseFloat((@props.itemCar))) + Math.abs(Number.parseFloat((@props.itemWater)))"
min: 0
type: circle
valueTextColor: white
valueFontSize: 12
labelFontSize: 12
labelTextColor: orange
valueFontWeight: 400
size: 100
Wow, this is simply great!
I believe the autoarky rate is good when shown like that (the actual value). If any and we would like to check historical values we can add an action to the icon and show a popup with the chart I think!
Simply great. Thank you very very much!
I’m thinking of changing the layout into a similar setup like:
Having the Inverter in the center, the Inverter can than show the autartky-rate in total for all the different loads (Home, Car, Water).
Draft:
v3:
Great idea indeed.
Would you mind sharing the code?
Here is the code of my latest version (v3).
uid: OH3_Livio_Energy_Summary_MikeTheTux_3
tags: []
props:
parameters:
- description: Widget Title
label: Widget Title
name: title
required: false
type: TEXT
- description: Grid Title
label: Grid Title
name: titleGrid
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
- description: Solar Title
label: Solar Title
name: titleSolar
required: false
type: TEXT
- context: item
description: Item Solar Production (first)
label: Solar Production Item (first)
name: itemSolar
required: false
type: TEXT
- context: item
description: Item Solar Production (second)
label: Solar Production Item (second)
name: itemSolar2
required: false
type: TEXT
- context: item
description: Item Solar Production (third)
label: Solar Production Item (third)
name: itemSolar3
required: false
type: TEXT
- description: Home Title
label: Home Title
name: titleHome
required: false
type: TEXT
- context: item
description: Home Consumption (first)
label: Home Consumption Item (first)
name: itemHomeConsumption
required: true
type: TEXT
- context: item
description: Home Consumption (second)
label: Home Consumption Item (second)
name: itemHomeConsumption2
required: false
type: TEXT
- context: item
description: Home Consumption (third)
label: Home Consumption Item (third)
name: itemHomeConsumption3
required: false
type: TEXT
- description: Battery Title
label: Battery Title
name: titleBattery
required: false
type: TEXT
- context: item
description: Battery Load/Decharge Item (first)
label: Item Battery Load/Decharge (first)
name: itemBattery
required: false
type: TEXT
- context: item
description: Battery Load/Decharge Item (second)
label: Item Battery Load/Decharge (second)
name: itemBattery2
required: false
type: TEXT
- context: item
description: Battery Load/Decharge Item (third)
label: Item Battery Load/Decharge (third)
name: itemBattery3
required: false
type: TEXT
- description: Car Title
label: Car Title
name: titleCar
required: false
type: TEXT
- context: item
description: Car Load Item (first)
label: Item Car Load (first)
name: itemCar
required: false
type: TEXT
- context: item
description: Car Load Item (second)
label: Item Car Load (second)
name: itemCar2
required: false
type: TEXT
- context: item
description: Car Load Item (third)
label: Item Car Load (third)
name: itemCar3
required: false
type: TEXT
- description: Water Title
label: Water Title
name: titleWater
required: false
type: TEXT
- context: item
description: Water Load Item (first)
label: Item Water Load (first)
name: itemWater
required: false
type: TEXT
- context: item
description: Water Load Item (second)
label: Item Water Load (second)
name: itemWater2
required: false
type: TEXT
- context: item
description: Water Load Item (third)
label: Item Water Load (third)
name: itemWater3
required: false
type: TEXT
- description: Non Fossil Title
label: Non Fossil Title
name: titleNonFossil
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 (default 100px, stay within 80 and 120px for best results)
label: Icon Dimension
name: iconDimension
required: false
- description: Border Radius in px (default 0px, significant changes between 40 and 70px)
label: Border Radius
name: borderRadius
required: false
parameterGroups: []
timestamp: Nov 8, 2023, 9:05:24 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:
--f7-block-font-size: 12px
--f7-theme-color: var(--f7-text-color)
display: flex
justify-content: space-between
margin: 0
padding: 0
slots:
default:
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: Label
config:
text: "=(props.itemNonFossil) ? ((props.titleNonFossil) ? props.titleNonFossil : 'Non-Fossil') : ''"
- component: f7-block
config:
bgColor: black
style:
align-items: center
border: 2px solid brown
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
justify-content: center
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
visible: "=(props.itemNonFossil) ? true : false"
slots:
default:
- component: oh-icon
config:
color: red
height: 20px
icon: "=(props.itemNonFossil) ? 'if:mdi:fire' : ''"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemNonFossil
- component: f7-block
config:
bgColor: black
style:
align-items: center
border: 1px solid brown
display: flex
flex-direction: column
height: 22px
justify-content: center
margin: 0
padding: 0
width: 1px
visible: "=(props.itemNonFossil) ? true : false"
- component: f7-block
config:
bgColor: black
style:
align-items: center
border: 2px solid teal
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
justify-content: center
margin-top: "=(props.itemNonFossil) ? '0px' : (((props.itemSolar) || (props.itemCar)) ? '140px' : '0px')"
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
slots:
default:
- component: oh-icon
config:
color: teal
height: 20px
icon: if:mdi:transmission-tower
- component: oh-link
config:
iconColor: purple
iconF7: "=(props.itemProductionToGrid) ? 'arrow_left' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: "=((Number.parseFloat(@props.itemProductionToGrid) > 0) ? '-' : '') + @props.itemProductionToGrid"
visible: "=(props.itemProductionToGrid) ? true : false"
- component: oh-link
config:
iconColor: blue
iconF7: "=(props.itemConsumptionFromGrid) ? 'arrow_right' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: = @props.itemConsumptionFromGrid
visible: "=(props.itemConsumptionFromGrid) ? true : false"
- component: Label
config:
text: "=(props.titleGrid) ? props.titleGrid : 'Grid'"
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
flex-grow: 1
slots:
default:
- component: Label
config:
text: "=(props.itemSolar) ? ((props.titleSolar) ? props.titleSolar : 'Solar') : ''"
- component: f7-block
config:
bgColor: black
style:
align-items: center
border: 2px solid orange
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
justify-content: center
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
visible: "=(props.itemSolar) ? true : false"
slots:
default:
- component: oh-icon
config:
color: orange
height: 20px
icon: if:mdi:solar-power
- component: oh-link
config:
iconColor: blue
iconF7: "=(props.itemProductionToGrid) ? 'arrow_down' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: = @props.itemSolar
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemSolar2
visible: "=(props.itemSolar2) ? true : false"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemSolar3
visible: "=(props.itemSolar3) ? true : false"
- component: f7-block
config:
style:
display: flex
height: "=(props.itemSolar) ? '145px' : (((props.itemNonFossil) || (props.itemCar)) ? '320px' : '145px')"
justify-content: center
margin: 0
padding: 0
width: 100%
visible: true
slots:
default:
- component: f7-row
config:
preserveAspectRatio: xMidYMid slice
style:
height: auto
tag: svg
viewBox: "=((props.itemNonFossil) || (props.itemSolar) || (props.itemCar)) ? '0 0 100 100' : '0 8 100 100'"
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
d: M53,0 v15 c0,27 10,32 30,32 h20
fill: none
id: path1
stroke: orange
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemSolar) ? true : false"
- component: f7-row
config:
fill: orange
r: 1
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=((props.itemSolar) && (Number.parseFloat(@props.itemSolar) > 0)) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 5s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path1"
- component: f7-row
config:
d: M47,0 v15 c0,27 -10,32 -30,32 h-20
fill: none
id: path2
stroke: purple
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemSolar) ? true : false"
- component: f7-row
config:
fill: purple
r: 1
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: "=((props.itemSolar) && (Number.parseFloat(@props.itemProductionToGrid) > 0)) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 3s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path2"
- component: f7-row
config:
d: M0,50 H100
fill: none
id: path3
stroke: teal
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
- component: f7-row
config:
fill: teal
r: 1
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: "=(Number.parseFloat(@props.itemProductionFromGrid) = 0) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 3s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path3"
- component: f7-row
config:
d: M50,0 v100
fill: none
id: path4
stroke: green
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=((props.itemBattery) && (props.itemSolar)) ? true : false"
- component: f7-row
config:
fill: green
r: 1
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=((props.itemBattery) && (props.itemSolar) && (Number.parseFloat(@props.itemBattery) < 0)) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 5s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path4"
- component: f7-row
config:
d: M53,100 v-15 c0,-27 10,-32 30,-32 h20
fill: none
id: path5
stroke: green
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemBattery) ? true : false"
- component: f7-row
config:
fill: green
r: 1
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=((props.itemBattery) && (Number.parseFloat(@props.itemBattery) > 0)) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 5s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path5"
- component: oh-gauge
config:
bgColor: black
borderBgColor: teal
borderWidth: 2
labelFontSize: 12
valueFontSize: 12
valueFontWeight: 400
size: "=(props.iconDimension) ? (Number.parseInt(props.iconDimension) / 2) : '50'"
style:
z-index: 100
margin-top: -100px
type: circle
labelText: "=(Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) > 0) ? '🔆' : '💸'"
borderColor: "=(Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) > 0) ? 'orange' : 'gray'"
labelTextColor: "=(Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) > 0) ? 'orange' : 'gray'"
valueTextColor: "=(Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) > 0) ? 'orange' : 'gray'"
max: "=(Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) > 0) ? Math.abs(Number.parseFloat(@props.itemHomeConsumption)) + Math.abs(Number.parseFloat(@props.itemCar)) + Math.abs(Number.parseFloat(@props.itemWater)) - ((Number.parseFloat(@props.itemBattery) < 0) ? Number.parseFloat(@props.itemBattery) : 0) : Math.abs(Number.parseFloat(@props.itemSolar)) + ((Number.parseFloat(@props.itemBattery) > 0) ? Number.parseFloat(@props.itemBattery) : 0)"
min: 0
value: "=(Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) > 0) ? Math.abs(Number.parseFloat(@props.itemHomeConsumption)) + Math.abs(Number.parseFloat(@props.itemCar)) + Math.abs(Number.parseFloat(@props.itemWater)) - ((Number.parseFloat(@props.itemBattery) < 0) ? Number.parseFloat(@props.itemBattery) : 0) - Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) : Math.abs(Number.parseFloat(@props.itemSolar)) + ((Number.parseFloat(@props.itemBattery) > 0) ? Number.parseFloat(@props.itemBattery) : 0) - Math.abs(Number.parseFloat(@props.itemProductionToGrid))"
valueText: "=(Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) > 0) ? (100.0 - (100.0 * Math.abs(Number.parseFloat(@props.itemConsumptionFromGrid)) / ( Math.abs(Number.parseFloat(@props.itemHomeConsumption)) + Math.abs(Number.parseFloat(@props.itemCar)) + Math.abs(Number.parseFloat(@props.itemWater)) - ((Number.parseFloat(@props.itemBattery) < 0) ? Number.parseFloat(@props.itemBattery) : 0) ))).toFixed(1) + ' %' : ((100.0 - (100.0 * Math.abs(Number.parseFloat(@props.itemProductionToGrid)) / ( Math.abs(Number.parseFloat(@props.itemSolar)) + ((Number.parseFloat(@props.itemBattery) > 0) ? Number.parseFloat(@props.itemBattery) : 0) ))).toFixed(1) + ' %')"
- component: f7-block
config:
bgColor: black
style:
align-items: center
border: 2px solid green
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
justify-content: center
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
margin-top: 46px
visible: "=(props.itemBattery) ? true : false"
slots:
default:
- component: oh-icon
config:
color: green
height: 20px
icon: if:mdi:battery-charging
- component: oh-link
config:
iconColor: "=(props.itemBattery) ? ((Number.parseFloat(@props.itemBattery) < 0) ? 'purple' : 'blue') : ''"
iconF7: "=(props.itemBattery) ? ((Number.parseFloat(@props.itemBattery) < 0) ? 'arrow_down' : 'arrow_up') : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: = @props.itemBattery
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemBattery2
visible: "=(props.itemBattery2) ? true : false"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemBattery3
visible: "=(props.itemBattery3) ? true : false"
- component: Label
config:
text: "=(props.itemBattery) ? ((props.titleBattery) ? props.titleBattery : 'Battery') : ''"
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: Label
config:
text: "=(props.itemCar) ? ((props.titleCar) ? props.titleCar : 'Car') : ''"
- component: f7-block
config:
bgColor: black
style:
align-items: center
border: 2px solid lightblue
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
justify-content: center
margin-top: 0px
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
visible: "=(props.itemCar) ? true : false"
slots:
default:
- component: oh-icon
config:
color: lightblue
height: 20px
icon: if:mdi:car
- component: oh-link
config:
iconColor: purple
iconF7: "=(props.itemCar) ? 'arrow_up' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: "=((Number.parseFloat(@props.itemCar) > 0) ? '-' : '') + @props.itemCar"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemCar2
visible: "=(props.itemCar2) ? true : false"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemCar3
visible: "=(props.itemCar3) ? true : false"
- component: f7-block
config:
bgColor: black
style:
align-items: center
border: 1px solid lightblue
display: flex
flex-direction: column
height: 22px
justify-content: center
margin: 0
padding: 0
width: 1px
visible: "=(props.itemCar) ? true : false"
- component: f7-block
config:
bgColor: black
style:
align-items: center
border: 2px solid gray
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
justify-content: center
margin-top: "=(props.itemCar) ? '0px' : (((props.itemSolar) || (props.itemNonFossil)) ? '140px' : '0px')"
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
slots:
default:
- component: oh-icon
config:
color: gray
height: 20px
icon: if:mdi:home
- component: oh-link
config:
iconColor: purple
iconF7: "=(props.itemHomeConsumption) ? 'arrow_right' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: "=((Number.parseFloat(@props.itemHomeConsumption) > 0) ? '-' : '') + @props.itemHomeConsumption"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemHomeConsumption2
visible: "=(props.itemHomeConsumption2) ? true : false"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemHomeConsumption3
visible: "=(props.itemHomeConsumption3) ? true : false"
- component: Label
config:
text: "=(props.titleHome) ? props.titleHome : 'Home'"
- component: f7-block
config:
bgColor: black
style:
align-items: center
border: 1px solid blue
display: flex
flex-direction: column
height: 5px
justify-content: center
margin: 0
padding: 0
width: 1px
visible: "=(props.itemWater) ? true : false"
- component: f7-block
config:
bgColor: black
style:
align-items: center
border: 2px solid blue
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
justify-content: center
margin-top: 0px
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
visible: "=(props.itemWater) ? true : false"
slots:
default:
- component: oh-icon
config:
color: blue
height: 20px
icon: if:mdi:water
- component: oh-link
config:
iconColor: purple
iconF7: "=(props.itemWater) ? 'arrow_down' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: "=((Number.parseFloat(@props.itemWater) > 0) ? '-' : '') + @props.itemWater"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemWater2
visible: "=(props.itemWater2) ? true : false"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemWater3
visible: "=(props.itemWater3) ? true : false"
- component: Label
config:
text: "=(props.itemWater) ? ((props.titleWater) ? props.titleWater : 'Water') : ''"
It shows the autarky rate via the symbol or the self-consumption rate via the symbol (dependent on Grid IN or Grid OUT)
You may need to tweak some offsets if you do not use all the elements.
Please provide feedback if you find any issue. Then I update the shared sources.
have fun
Thank you it is working great!
Hi, my very first post in this forum.
A modified version of the above energy summary widget by MikeTheTux_3. The main change is that (most) colors and background colors are now included as widget properties.
A (maybe not complete) list of changes to version OH3_Livio_Energy_Summary_MikeTheTux_3 :
- Introduced individual Colors and Background for every Item and block
- Removed arrow right and “-” from Home Consumption
- Item itemHomeConsumption2 designed to show now “Import kWh” , added arrow right
- Item itemHomeConsumption3 designed to show now “Export kWh” , added arrow left
- Removed “-” from Export to Grid
- Removed “arrow_up” and “-” from Export to Car
- Import line from grid visible if import itemProductionFromGrid is > 0 (was =0)
- Changed Icon for Water to water-thermometer (was water)
- Default color for NonFossile to darkred (was red)
- Icon for Water changed to “Flame” visible when WaterItem > 5
- Moved lines for Solar and Grid a bit down (moving circle was not on the line in my setup)
path1 now M53,0 v15 c0,27 10,36 30,36 h20 (was M53,0 v15 c0,27 10,32 30,32 h20)
path2 now M47,0 v15 c0,27 -10,36 -30,36 h-20 (was M47,0 v15 c0,27 -10,32 -30,32 h-20)
path3 now M0,54 H100 (was M0,50 H100) - Gauge in the middle shows now just an individual Item: itemSelfConsumption and a configurable ItemName. No color changes here any more.
And here the widgets YAML code:
uid: Energy_Summary_eho_v1
tags:
- solar
- energy
- energy summary
props:
parameters:
- description: Widget Title
label: Widget Title
name: title
required: false
type: TEXT
- description: Grid Title
label: Grid Title
name: titleGrid
required: false
type: TEXT
- description: Background Color of Grid Title
label: Grid Title Background Color
name: titleGridBgColor
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
- description: Color of Grid block (default= teal)
label: Color of Grid block
name: ColorGrid
required: false
- description: Background Color of Grid block
label: Background Color Grid
name: backColorGrid
required: false
- description: Solar Title
label: Solar Title
name: titleSolar
required: false
type: TEXT
- description: Solar Title Background Color
label: Solar Title Background Color
name: titleSolarBgColor
required: false
type: TEXT
- context: item
description: Item Solar Production (first)
label: Solar Production Item (first)
name: itemSolar
required: false
type: TEXT
- context: item
description: Item Solar Production (second)
label: Solar Production Item (second)
name: itemSolar2
required: false
type: TEXT
- context: item
description: Item Solar Production (third)
label: Solar Production Item (third)
name: itemSolar3
required: false
type: TEXT
- description: Color of Solar block (default= orange)
label: Color of Solar block
name: ColorSolar
required: false
- description: Background Color Solar of Solar block
label: Background Color Solar
name: backColorSolar
- description: Home Title
label: Home Title
name: titleHome
required: false
type: TEXT
- description: Home Title Background Color
label: Home Title Background Color
name: titleHomeBgColor
required: false
type: TEXT
- context: item
description: Home Consumption (first)
label: Home Consumption Item (first)
name: itemHomeConsumption
required: true
type: TEXT
- context: item
description: Home Consumption (second)
label: Home Consumption Item (second)
name: itemHomeConsumption2
required: false
type: TEXT
- context: item
description: Home Consumption (third)
label: Home Consumption Item (third)
name: itemHomeConsumption3
required: false
type: TEXT
- description: Color of Home block (default= gray)
label: Color of Home block
name: ColorHome
required: false
- description: Background Color of Home block
label: Background Color Home
name: backColorHome
- description: Self Consumption Title
label: Self Consumption Title
name: titleSelfConsumption
required: false
type: TEXT
- description: Self Consumption Title Background Color
label: Self Consumption Title Background Color
name: titleSelfConsBgColor
required: false
type: TEXT
- context: item
description: Home Self Consumption in percent
label: Home Self Consumption in percent
name: itemSelfConsumption
required: true
type: TEXT
- description: Color of Self Consumption block (default= teal)
label: Color of Self Consumption block
name: ColorSelfConsumption
required: false
- description: Background Color Home Self Consumption
label: Background Color Home Self Consumption
name: backColorSelfConsumption
- description: Battery Title
label: Battery Title
name: titleBattery
required: false
type: TEXT
- description: Battery Title Background Color
label: Battery Title Background Color
name: titleBatteryBgColor
required: false
type: TEXT
- context: item
description: Battery Load/Decharge Item (first)
label: Item Battery Load/Decharge (first)
name: itemBattery
required: false
type: TEXT
- context: item
description: Battery Load/Decharge Item (second)
label: Item Battery Load/Decharge (second)
name: itemBattery2
required: false
type: TEXT
- context: item
description: Battery Load/Decharge Item (third)
label: Item Battery Load/Decharge (third)
name: itemBattery3
required: false
type: TEXT
- description: Color of Battery block (default= green)
label: Color of Battery block
name: ColorBattery
required: false
- description: Background Color Battery
label: Background Color Battery
name: backColorBattery
- description: Car Title
label: Car Title
name: titleCar
required: false
type: TEXT
- description: Car Title Background Color
label: Car Title Background Color
name: titleCarBgColor
required: false
type: TEXT
- context: item
description: Car Load Item (first)
label: Item Car Load (first)
name: itemCar
required: false
type: TEXT
- context: item
description: Car Load Item (second)
label: Item Car Load (second)
name: itemCar2
required: false
type: TEXT
- context: item
description: Car Load Item (third)
label: Item Car Load (third)
name: itemCar3
required: false
type: TEXT
- description: Color of Car block (default= lightblue)
label: Color of Car block
name: ColorCar
required: false
- description: Background Color Car
label: Background Color Car
name: backColorCar
- description: Water Title
label: Water Title
name: titleWater
required: false
type: TEXT
- description: Background Color of Water Title
label: Water Title Background Color
name: titleWaterBgColor
required: false
type: TEXT
- context: item
description: Water Load Item (first)
label: Item Water Load (first)
name: itemWater
required: false
type: TEXT
- context: item
description: Water Load Item (second)
label: Item Water Load (second)
name: itemWater2
required: false
type: TEXT
- context: item
description: Water Load Item (third)
label: Item Water Load (third)
name: itemWater3
required: false
type: TEXT
- description: Color of Water block (default= blue)
label: Color of Water block
name: ColorWater
required: false
- description: Background Color Water
label: Background Color Water
name: backColorWater
- description: Non Fossil Title
label: Non Fossil Title
name: titleNonFossil
required: false
type: TEXT
- description: Non Fossil Title Background Color
label: Non Fossil Title Background Color
name: titleNonFossilBgColor
required: false
type: TEXT
- context: item
description: Non Fossil Value Item
label: Non Fossile Item
name: itemNonFossil
required: false
type: TEXT
- description: Color of Non Fossil block (default= darkred)
label: Color Non Fossil
name: ColorNonFossil
- description: Background Color Non Fossil
label: Background Color Non Fossil
name: backColorNonFossil
- description: Icon Dimension in px (default 100px, stay within 80 and 120px for best results)
label: Icon Dimension
name: iconDimension
required: false
- description: Border Radius in px (default 0px, significant changes between 40 and 70px)
label: Border Radius
name: borderRadius
required: false
parameterGroups: []
timestamp: Nov 8, 2023, 9:05:24 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:
--f7-block-font-size: 12px
--f7-theme-color: var(--f7-text-color)
display: flex
justify-content: space-between
margin: 0
padding: 0
slots:
default:
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: Label
config:
text: "=(props.itemNonFossil) ? ((props.titleNonFossil) ? props.titleNonFossil : 'Non-Fossil') : ''"
style:
background: "=(props.titleNonFossilBgColor) ? props.titleNonFossilBgColor : 'transparent'"
- component: f7-block
config:
bgColor: "=(props.backColorNonFossil)"
style:
align-items: center
border: "=(props.ColorNonFossil) ? (props.ColorNonFossil) + ' 2px solid' : 'darkred 2px solid'"
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
justify-content: center
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
visible: "=(props.itemNonFossil) ? true : false"
slots:
default:
- component: oh-icon
config:
color: "=(props.ColorNonFossil) ? (props.ColorNonFossil) : 'darkred"
height: 20px
icon: "=(props.itemNonFossil) ? 'if:mdi:heater' : ''"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemNonFossil
- component: f7-block
config:
bgColor: "=(props.backColorNonFossil)"
style:
align-items: center
border: 1px solid transparent
display: flex
flex-direction: column
height: 22px
justify-content: center
margin: 0
padding: 0
width: 1px
visible: "=(props.itemNonFossil) ? true : false"
- component: f7-block
config:
bgColor: "=(props.backColorGrid)"
style:
align-items: center
border: "=(props.ColorGrid) ? (props.ColorGrid) + ' 2px solid' : 'teal 2px solid'"
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
justify-content: center
margin-top: "=(props.itemNonFossil) ? '0px' : (((props.itemSolar) || (props.itemCar)) ? '140px' : '0px')"
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
slots:
default:
- component: oh-icon
config:
color: "=(props.ColorGrid) ? (props.ColorGrid) : 'teal'"
height: 20px
icon: if:mdi:transmission-tower
- component: oh-link
config:
iconColor: purple
iconF7: "=(props.itemProductionToGrid) ? 'arrow_left' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: =@props.itemProductionToGrid
visible: "=(props.itemProductionToGrid) ? true : false"
- component: oh-link
config:
iconColor: blue
iconF7: "=(props.itemConsumptionFromGrid) ? 'arrow_right' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: = @props.itemConsumptionFromGrid
visible: "=(props.itemConsumptionFromGrid) ? true : false"
- component: Label
config:
text: "=(props.titleGrid) ? props.titleGrid : 'Grid'"
style:
background: "=(props.titleGridBgColor) ? props.titleGridBgColor : 'transparent'"
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
flex-grow: 1
slots:
default:
- component: Label
config:
text: "=(props.itemSolar) ? ((props.titleSolar) ? props.titleSolar : 'Solar') : ''"
style:
background: "=(props.titleSolarBgColor) ? props.titleSolarBgColor : 'transparent'"
- component: f7-block
config:
bgColor: "=(props.backColorSolar)"
style:
align-items: center
border: "=(props.ColorSolar) ? (props.ColorSolar) + ' 2px solid' : 'orange 2px solid'"
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
justify-content: center
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
visible: "=(props.itemSolar) ? true : false"
slots:
default:
- component: oh-icon
config:
color: "=(props.ColorSolar) ? (props.ColorSolar) : 'orange'"
height: 20px
icon: if:mdi:solar-power-variant
- component: oh-link
config:
iconColor: blue
iconF7: "=(props.itemProductionToGrid) ? 'arrow_down' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: = @props.itemSolar
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemSolar2
visible: "=(props.itemSolar2) ? true : false"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemSolar3
visible: "=(props.itemSolar3) ? true : false"
- component: f7-block
config:
style:
display: flex
height: "=(props.itemSolar) ? '145px' : (((props.itemNonFossil) || (props.itemCar)) ? '320px' : '145px')"
justify-content: center
margin: 0
padding: 0
width: 100%
visible: true
slots:
default:
- component: f7-row
config:
preserveAspectRatio: xMidYMid slice
style:
height: auto
tag: svg
viewBox: "=((props.itemNonFossil) || (props.itemSolar) || (props.itemCar)) ? '0 0 100 100' : '0 8 100 100'"
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
d: M53,0 v15 c0,27 10,36 30,36 h20
fill: none
id: path1
stroke: "=(props.ColorSolar) ? (props.ColorSolar) : 'orange'"
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=((props.itemSolar) && (Number.parseFloat(@props.itemSolar) > 0)) ? true : false"
- component: f7-row
config:
fill: "=(props.ColorSolar) ? (props.ColorSolar) : 'orange'"
r: 1
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=((props.itemSolar) && (Number.parseFloat(@props.itemSolar) > 0)) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 5s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path1"
- component: f7-row
config:
d: M47,0 v15 c0,27 -10,36 -30,36 h-20
fill: none
id: path2
stroke: purple
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=((props.itemSolar) && (Number.parseFloat(@props.itemProductionToGrid) > 0)) ? true : false"
- component: f7-row
config:
fill: purple
r: 1
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: "=((props.itemSolar) && (Number.parseFloat(@props.itemProductionToGrid) > 0)) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 3s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path2"
- component: f7-row
config:
d: M0,54 H100
fill: none
id: path3
stroke: "=(props.ColorGrid) ? (props.ColorGrid) : 'teal'"
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=(Number.parseFloat(@props.itemConsumptionFromGrid) > 0) ? true : false"
- component: f7-row
config:
tag: circle
r: 1
vectorEffect: non-scaling-stroke
strokeWidth: 10
fill: "=(props.ColorGrid) ? (props.ColorGrid) : 'teal'"
visible: "=(Number.parseFloat(@props.itemConsumptionFromGrid) > 0) ? true : false"
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-row
config:
d: M50,0 v100
fill: none
id: path4
stroke: "=(props.ColorBattery) ? (props.ColorBattery) : 'green'"
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=((props.itemBattery) && (props.itemSolar)) ? true : false"
- component: f7-row
config:
fill: "=(props.ColorBattery) ? (props.ColorBattery) : 'green'"
r: 1
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=((props.itemBattery) && (props.itemSolar) && (Number.parseFloat(@props.itemBattery) < 0)) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 5s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path4"
- component: f7-row
config:
d: M53,100 v-15 c0,-27 10,-32 30,-32 h20
fill: none
id: path5
stroke: "=(props.ColorBattery) ? (props.ColorBattery) : 'green'"
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemBattery) ? true : false"
- component: f7-row
config:
fill: "=(props.ColorBattery) ? (props.ColorBattery) : 'green'"
r: 1
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=((props.itemBattery) && (Number.parseFloat(@props.itemBattery) > 0)) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 5s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path5"
- component: oh-gauge
config:
bgColor: "=(props.backColorSelfConsumption)"
borderBgColor: "=(props.ColorSelfConsumption) ? (props.ColorSelfConsumption) : 'teal'"
borderWidth: 2
labelFontSize: 12
valueFontSize: 12
valueFontWeight: 400
size: "=(props.iconDimension) ? (Number.parseInt(props.iconDimension) / 1.65) : '50'"
style:
z-index: 100
margin-top: -100px
type: circle
labelText: "=(props.itemSelfConsumption) ? ((props.titleSelfConsumption) ? props.titleSelfConsumption : 'SC') : ''"
borderColor: "=(props.ColorSelfConsumption) ? (props.ColorSelfConsumption) : 'teal'"
labelTextColor: black
value: = @props.itemSelfConsumption
valueText: = @props.itemSelfConsumption
- component: f7-block
config:
bgColor: "=(props.backColorBattery)"
style:
align-items: center
border: "=(props.ColorBattery) ? (props.ColorBattery) + ' 2px solid' : 'green 2px solid'"
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
justify-content: center
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
margin-top: 46px
visible: "=(props.itemBattery) ? true : false"
slots:
default:
- component: oh-icon
config:
color: "=(props.ColorBattery) ? (props.ColorBattery) : 'green'"
height: 20px
icon: if:mdi:battery-charging
- component: oh-link
config:
iconColor: "=(props.itemBattery) ? ((Number.parseFloat(@props.itemBattery) < 0) ? 'purple' : 'blue') : ''"
iconF7: "=(props.itemBattery) ? ((Number.parseFloat(@props.itemBattery) < 0) ? 'arrow_down' : 'arrow_up') : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: = @props.itemBattery
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemBattery2
visible: "=(props.itemBattery2) ? true : false"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemBattery3
visible: "=(props.itemBattery3) ? true : false"
- component: Label
config:
text: "=(props.itemBattery) ? ((props.titleBattery) ? props.titleBattery : 'Battery') : ''"
style:
background: "=(props.titleBatteryBgColor) ? props.titleBatteryBgColor : 'transparent'"
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: Label
config:
text: "=(props.itemCar) ? ((props.titleCar) ? props.titleCar : 'Car') : ''"
style:
background: "=(props.titleCarBgColor) ? props.titleCarBgColor : 'transparent'"
- component: f7-block
config:
bgColor: "=(props.backColorCar)"
style:
align-items: center
border: "=(props.ColorCar) ? (props.ColorCar) + ' 2px solid' : 'lightblue 2px solid'"
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
justify-content: center
margin-top: 0px
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
visible: "=(props.itemCar) ? true : false"
slots:
default:
- component: oh-icon
config:
color: "=(props.ColorCar) ? (props.ColorCar) : 'lightblue'"
height: 20px
icon: if:mdi:car
- component: oh-link
config:
style:
font-size: 12px
white-space: nowrap
text: =@props.itemCar
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemCar2
visible: "=(props.itemCar2) ? true : false"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemCar3
visible: "=(props.itemCar3) ? true : false"
- component: f7-block
config:
bgColor: "=(props.backColorCar)"
style:
align-items: center
border: "=(props.ColorCar) ? (props.ColorCar) + ' 1px solid' : 'lightblue 1px solid'"
display: flex
flex-direction: column
height: 22px
justify-content: center
margin: 0
padding: 0
width: 1px
visible: "=(props.itemCar) ? true : false"
- component: f7-block
config:
bgColor: "=(props.backColorHome)"
style:
align-items: center
border: "=(props.ColorHome) ? (props.ColorHome) + ' 2px solid' : 'gray 2px solid'"
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
justify-content: center
margin-top: "=(props.itemCar) ? '0px' : (((props.itemSolar) || (props.itemNonFossil)) ? '140px' : '0px')"
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
slots:
default:
- component: oh-icon
config:
color: "=(props.ColorHome) ? (props.ColorHome) : 'gray'"
height: 20px
icon: if:mdi:home
- component: oh-link
config:
style:
font-size: 12px
white-space: nowrap
text: =@props.itemHomeConsumption
- component: oh-link
config:
iconColor: blue
iconF7: "=(props.itemHomeConsumption2) ? 'arrow_right' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: =@props.itemHomeConsumption2
visible: "=(props.itemHomeConsumption2) ? true : false"
- component: oh-link
config:
iconColor: purple
iconF7: "=(props.itemHomeConsumption3) ? 'arrow_left' : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: =@props.itemHomeConsumption3
visible: "=(props.itemHomeConsumption3) ? true : false"
- component: Label
config:
text: "=(props.titleHome) ? props.titleHome : 'Home'"
style:
background: "=(props.titleHomeBgColor) ? props.titleHomeBgColor : 'transparent'"
- component: f7-block
config:
bgColor: "=(props.backColorWater)"
style:
align-items: center
border: "=(props.ColorWater) ? (props.ColorWater) + ' 1px solid' : 'blue 1px solid'"
display: flex
flex-direction: column
height: 5px
justify-content: center
margin: 0
padding: 0
width: 1px
visible: "=(props.itemWater) ? true : false"
- component: f7-block
config:
bgColor: "=(props.backColorWater)"
style:
align-items: center
border: "=(props.ColorWater) ? (props.ColorWater) + ' 2px solid' : 'blue 2px solid'"
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) + 'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
justify-content: center
margin-top: 0px
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' : '100px'"
visible: "=(props.itemWater) ? true : false"
slots:
default:
- component: oh-icon
config:
color: "=(props.ColorWater) ? (props.ColorWater) : 'blue'"
height: 20px
icon: if:mdi:water-thermometer
- component: oh-link
config:
iconColor: darkred
iconF7: "=(props.itemWater) ? ((Number.parseFloat(@props.itemWater) > 5) ? 'flame_fill' : '') : ''"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: "=((Number.parseFloat(@props.itemWater) > 0) ? @props.itemWater : '')"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemWater2
visible: "=(props.itemWater2) ? true : false"
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = @props.itemWater3
visible: "=(props.itemWater3) ? true : false"
- component: Label
config:
text: "=(props.itemWater) ? ((props.titleWater) ? props.titleWater : 'Water') : ''"
style:
background: "=(props.titleWaterBgColor) ? props.titleWaterBgColor : 'transparent'"
And some example config (sorry for english/german mixup):
component: widget:Energy_Summary_eho_v1
config:
title: Leistungsverteilung
titleGrid: Netz
itemConsumptionFromGrid: Generic_MQTT_Thing_Smartmeter_power_import
itemProductionToGrid: Generic_MQTT_Thing_Smartmeter_power_export
titleSolar: PV
itemSolar: Fronius_Symo_Inverter_AC_Power
itemSolar2: PV_Gesamt_Tagesproduktion
titleHome: Haus
itemHomeConsumption: Stromverbrauch_aktuell
itemHomeConsumption2: Generic_MQTT_Thing_Smartmeter_import_day
itemHomeConsumption3: Generic_MQTT_Thing_Smartmeter_export_day
borderRadius: "5"
itemCar2: car_charge_current_solar_kwh
itemCar3: GoeCharger_Maximum_Current
iconDimension: "75"
titleBatteryBgColor: green
titleSelfConsumption: EV
itemSelfConsumption: Eigenverbrauch_el_tag_prozent
titleSelfConsBgColor: black
backColorSelfConsumption: white
titleWater: Wa.Wasser
itemWater: WaWaWp_Strom_Stromverbrauch
itemWater2: Generic_MQTT_Thing_WarmwasserTemperatur1
ColorSelfConsumption: black
ColorHome: black
ColorWater: red
itemWater3: WaWaWp_Strom_modus
Hi. This looks great. But how can I change the direction for ex. the battery. When I discharge the battery, the house uses its energy, the arrow point to the opposit and the dot along the line runs the opposit direction. Is there an easy fix in the code to switch it around per unit?
Hi Joakim, I do not have a battery but did some tests anyway. The arrows direction on the house block will not change at all (but I think you where not pointing on this.).
The direction of the arrow and flow animation for battery will change according to “Item Battery Load/Decharge (first)” value. If value is positive then arrow points up and animation flows towards the house - so positive values on itemBattery represent battery discharge. Negative values - no surprise… - are representing charging of Battery and result in arrow pointing down. I did see though that the animation path did not switch visability correctly. Both path remained visible. I will change and post an update on this.