This is a widget for solar panel monitoring. The code came from someone else and I have modified it to change colours when on solar or grid power. Thanks to whoever wrote the orginal code. I can’t find where I got it from.
I have added in the props section the Fronius binding names in case anyone using the fronius binding want to know which items to use. I am sure this will work with all other solar installations.
Screenshot of when power is coming from the grid.
Changelog
- initial release
uid: solar-power-widget
tags: []
props:
parameters:
- context: item
description: GRID Power Item
label: GRID Power Item FroniusSymoInverter_GridPower
name: gridPower
required: true
type: TEXT
- context: item
description: SOLAR Power Item
label: SOLAR Power Item FroniusSymoInverter_CurrentSolarYield
name: solarPower
required: true
type: TEXT
- context: item
description: VOLTAGE Item
label: VOLTAGE Item FroniusSmartMeter_ACVoltagePhase1
name: voltageItem
required: true
type: TEXT
- context: item
description: CONSUMPTION Item
label: CONSUMPTION Item FroniusSymoInverter_LoadPower
name: consumption
required: true
type: TEXT
parameterGroups: []
timestamp: Oct 21, 2022, 11:20:06 AM
component: f7-card
config:
class:
- padding-bottom
style:
--f7-popover-width: 760px
slots:
default:
- component: f7-row
config:
class:
- margin-top
style:
top: 0px
width: 100%
height: 100%
slots:
default:
- component: f7-col
config:
width: 20
class:
- display-flex
- flex-direction-column
- align-content-space-around
slots:
default:
- component: oh-gauge
config:
type: semicircle
item: =props.gridPower
borderColor: =Number.parseFloat(items[props.gridPower].state) >= 0 ? 'red' :'green'
min: -5000
max: 5000
valueTextColor: =Number.parseFloat(items[props.gridPower].state) >= 0 ? 'red' :'green'
valueFontSize: 25
borderBgColor: gray
labelText: GRID
borderWidth: 20
class:
- margin-top
- margin-bottom
- component: oh-gauge
config:
type: semicircle
item: =props.solarPower
borderColor: =Number.parseFloat(items[props.solarPower].state) != 0 ? 'green' :'blue'
min: -5000
max: 5000
valueTextColor: =Number.parseFloat(items[props.solarPower].state) != 0 ? 'green' :'blue'
valueFontSize: 25
borderBgColor: gray
labelText: SOLAR
borderWidth: 25
class:
- margin-top
- margin-bottom
- component: oh-gauge
config:
type: semicircle
item: =props.consumption
borderColor: =(Number.parseFloat(items[props.solarPower].state) + Number.parseFloat(items[props.consumption].state)) >= Number.parseFloat(items[props.gridPower].state) ? 'green' :'red'
min: -5000
max: 5000
valueTextColor: =(Number.parseFloat(items[props.solarPower].state) + Number.parseFloat(items[props.consumption].state)) >= Number.parseFloat(items[props.gridPower].state) ? 'green' :'red'
valueFontSize: 25
borderBgColor: gray
labelText: CONSUMPTION
borderWidth: 25
class:
- margin-top
- margin-bottom
- component: f7-col
config:
width: 20
slots:
default:
- component: oh-icon
config:
color: =Number.parseFloat(items[props.gridPower].state) <= 0 ? 'yellow':'red'
icon: =Number.parseFloat(items[props.gridPower].state) <= 0 ? 'f7:sun_max_fill':'if:mdi-transmission-tower-import'
width: 20
style:
position: absolute
- component: Label
config:
text: =(items[props.voltageItem].state)
style:
font-size: 20px
font-weight: 500
line-height: 65px
text-align: left
white-space: nowrap
- component: Label
config:
text: =Number.parseFloat(items[props.gridPower].state) <= 0 ? 'Currently on Solar':'Currently on Grid'
style:
color: =Number.parseFloat(items[props.gridPower].state) <= 0 ? 'Green':'Red'
font-size: 13px
font-weight: 400
line-height: 1px
text-align: left
white-space: nowrap
- component: f7-col
config:
width: 80
slots:
default:
- component: oh-chart
config:
chartType: ""
period: 12h
label: Power
slots:
grid:
- component: oh-chart-grid
config:
containLabel: false
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
name: W
series:
- component: oh-time-series
config:
name: Grid
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
color: blue
item: =props.gridPower
- component: oh-time-series
config:
name: Solar
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
color: green
item: =props.solarPower
tooltip:
- component: oh-chart-tooltip
config:
confine: true
smartFormatter: true
legend:
- component: oh-chart-legend
config:
bottom: 3
type: scroll
dataZoom:
- component: oh-chart-datazoom
config:
type: inside