I have this widget for monitoring dual Inverters.
Inverter1:
this inverter supplies power to the house and charges the batteries when there is needed power (not fulfilled by the second inverter)
Inverter2:
This inverter supplies what ever power that is needed to the house (based on what it can). This inverter has no connected batteries.
For reference (Top Level corner is an icon that shows Current to / from the batteries) and is a separate icon not related to the main Widget and only overlaid but I use for a quick reference if I am still charging the batteries during the course of the day.
Note: I have created the Version_ tag which I have the version number against my objects so enables me to see which version is in production.
Screenshots
Changelog
Version 1.1 First Release
Resources
uid: has_solar_consumption
tags:
- has
- version_1.1
props:
parameters:
- context: string
default: The Name
description: The name
label: Name
name: name
required: true
type: TEXT
groupName: Key
- context: item
description: The Main Inverter
label: The Primary Inverter
name: inverter1
required: true
type: TEXT
groupName: Key
- context: item
description: The Secondary Inverter
label: The Secondary Inverter
name: inverter2
required: false
type: TEXT
groupName: Key
- context: string
default: ""
description: The Unit for the Above Fields
label: The Unit
name: myUnit
required: false
type: TEXT
groupName: Key
- context: number
description: The min value Inverter 1
label: Min
name: i1_min
required: false
type: TEXT
groupName: Key
- context: number
description: The max value Inverter 1
label: Max
name: i1_max
required: false
type: TEXT
groupName: Key
- context: number
description: The min value Inverter 2
label: Min
name: i2_min
required: false
type: TEXT
groupName: Key
- context: number
description: The max value Inverter 2
label: Max
name: i2_max
required: false
type: TEXT
groupName: Key
- context: string
default: rgb(52, 235, 94,100%)
description: Bottom 10% Color
label: Bottom 10% Color
name: i1_1Color
required: true
type: TEXT
groupName: inverter1Colors
- context: string
default: rgb(52, 235, 94,100%)
description: Bottom 40% Color
label: Bottom 40% Color
name: i1_2Color
required: true
type: TEXT
groupName: inverter1Colors
- context: string
default: rgb(252, 200, 13,100%)
description: Top 40% Color
label: Top 40% Color
name: i1_3Color
required: true
type: TEXT
groupName: inverter1Colors
- context: string
default: rgb(252, 52, 13,100%)
description: Top 10% Color
label: Top 10 Color
name: i1_4Color
required: true
type: TEXT
groupName: inverter1Colors
- context: string
default: rgb(52, 235, 94,100%)
description: Bottom 10% Color
label: Bottom 10% Color
name: i2_1Color
required: true
type: TEXT
groupName: inverter2Colors
- context: string
default: rgb(52, 235, 94,100%)
description: Bottom 40% Color
label: Bottom 40% Color
name: i2_2Color
required: true
type: TEXT
groupName: inverter2Colors
- context: string
default: rgb(52, 235, 94,100%)
description: Top 40% Color
label: Top 40% Color
name: i2_3Color
required: true
type: TEXT
groupName: inverter2Colors
- context: string
default: rgb(252, 52, 13,100%)
description: Top 10% Color
label: Top 10 Color
name: i2_4Color
required: true
type: TEXT
groupName: inverter2Colors
- context: number
default: "10"
description: The no of Splits
label: The No of Splits
name: splitNo1
required: true
type: TEXT
groupName: Sizes
- context: number
default: "5"
description: The no of Splits
label: The No of Splits
name: splitNo2
required: true
type: TEXT
groupName: Sizes
- context: number
description: The height of widget
label: Height
name: height
required: false
type: TEXT
groupName: Sizes
- context: string
default: "#0c17eb"
description: The Color of the Needle
label: Needle Color
name: needleColor
required: true
groupName: Colors
- context: number
default: "14"
description: Font size for the Text
label: Font Size
name: myFontSize
required: false
type: TEXT
groupName: Fonts
- default: rgb(250,39,7,0.70)
description: Background Color Consume
label: The color of the Background
name: anchorBackgroundConsume
required: false
type: TEXT
groupName: Colors
- default: rgb(111,179,8,0.70)
description: Background Color Charge
label: The color of the Background
name: anchorBackgroundCharge
required: false
type: TEXT
groupName: Colors
- default: "120"
description: Background Size
label: The Size of the Background
name: anchorBackgroundSize
required: false
groupName: Background
- default: "false"
description: Show the Chart Background
label: true/false
name: anchorBackgroundShow
required: false
groupName: Background
- context: string
default: black
description: axisColor
label: The Axis Color
name: axisColor
required: false
type: TEXT
groupName: inverter1Colors
parameterGroups:
- name: Key
context: Key
label: Key
description: The most Important Items
- name: Colors
context: Colors
label: Colors
description: Change the Colors
- name: inverter1Colors
context: Colors
label: Colors
description: Change the Colors for Inverter 1
- name: inverter2Colors
context: Colors
label: Colors
description: Change the Colors for Inverter 2
- name: Fonts
context: Fonts
label: Fonts
description: Change Fonts
- name: Sizes
context: Sizes
label: Sizes
description: Change Sizes of graph
- name: Background
context: Background
label: Background
description: Control the Background
timestamp: Jan 13, 2025, 8:45:22 PM
component: oh-chart
config:
height: =props.height
slots:
series:
- component: oh-data-series
config:
anchor:
show: false
size: =props.anchorBackgroundSize
axisLabel:
color: =props.axisColor
distance: -10
show: true
axisLine:
lineStyle:
color:
- - 0.1
- =props.i1_1Color
- - 0.5
- =props.i1_2Color
- - 0.9
- =props.i1_3Color
- - 1
- =props.i1_4Color
width: 5
show: true
axisTick:
distance: -45
lineStyle:
color: "#999"
width: 2
show: false
splitNumber: 5
center:
- 50%
- 60%
data:
- value: =#[props.inverter1]
detail:
borderRadius: 8
color: inherit
lineHeight: 40
offsetCenter:
- 0
- -15%
show: false
valueAnimation: true
width: 60%
endAngle: -20
itemStyle:
color: '= (#[props.inverter1]/props.i1max < 0.9 ? "rgb(52, 235, 94,60%)" :
"green" )'
show: false
max: =props.i1_max || 100
min: =props.i1_min || 0
pointer:
icon: path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999
2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929
C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078
C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014
L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423
2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314
2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028
2089.24407,615.30999 2090.36389,615.30999 Z
itemStyle:
color: =props.needleColor
length: 115%
offsetCenter:
- 0
- 15%
show: false
progress:
show: false
width: 40
radius: 92%
splitLine:
distance: -38
length: 14
lineStyle:
color: "#999"
width: 3
show: false
splitNumber: =props.splitNo1
startAngle: 200
title:
offsetCenter:
- - null
- -50%
show: false
type: gauge
- component: oh-data-series
config:
axisLabel:
show: false
axisLine:
lineStyle:
width: 10
show: false
axisTick:
distance: -45
lineStyle:
color: "#999"
width: 2
show: false
splitNumber: 5
center:
- 50%
- 60%
data:
- value: =#[props.inverter1]
detail:
borderRadius: 8
color: =props.axisColor
formatter: = @[props.inverter1] + props.myUnit
lineHeight: 40
offsetCenter:
- 0
- -9%
valueAnimation: true
width: 60%
endAngle: -20
itemStyle:
color: "=(#[props.inverter1]/props.i1_max < 0.1)? props.i1_1Color
:(#[props.inverter1]/props.i1_max < 0.5)?
props.i1_1Color:(#[props.inverter1]/props.i1_max < 0.9)?
props.i1_3Color : props.i1_4Color"
max: =props.i1_max || 100
min: =props.i1_min || 0
pointer:
icon: path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999
2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929
C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078
C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014
L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423
2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314
2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028
2089.24407,615.30999 2090.36389,615.30999 Z
itemStyle:
color: =props.needleColor
length: 115%
offsetCenter:
- 0
- 15%
show: false
progress:
show: true
width: 20
radius: 95%
splitLine:
distance: -38
length: 14
lineStyle:
color: "#999"
width: 3
show: false
splitNumber: =props.splitNo1
startAngle: 200
title:
offsetCenter:
- - null
- -50%
type: gauge
- component: oh-data-series
config:
axisLabel:
color: =props.axisColor
distance: 50
show: true
axisLine:
lineStyle:
color:
- - 0.1
- =props.i2_1Color
- - 0.5
- =props.i2_2Color
- - 0.9
- =props.i2_3Color
- - 1
- =props.i2_4Color
width: 5
show: true
axisTick:
distance: -45
lineStyle:
color: "#999"
width: 2
show: false
splitNumber: 5
center:
- 50%
- 60%
data:
- value: =#[props.inverter2]
detail:
borderRadius: 8
color: inherit
lineHeight: 40
offsetCenter:
- 0
- -15%
show: false
valueAnimation: true
width: 60%
endAngle: -20
itemStyle:
show: false
max: =props.i2_max || 100
min: =props.i2_min || 0
pointer:
icon: path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999
2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929
C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078
C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014
L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423
2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314
2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028
2089.24407,615.30999 2090.36389,615.30999 Z
itemStyle:
color: =props.needleColor
length: 115%
offsetCenter:
- 0
- 15%
show: false
progress:
show: false
width: 40
radiusx: 88%
splitLine:
distance: -38
length: 14
lineStyle:
color: "#999"
width: 3
show: false
splitNumber: =props.splitNo2
startAngle: 200
title:
offsetCenter:
- - null
- -50%
show: false
type: gauge
- component: oh-data-series
config:
axisLabel:
show: false
axisLine:
lineStyle:
width: 10
show: false
axisTick:
distance: -45
lineStyle:
color: "#999"
width: 2
show: false
splitNumber: 5
center:
- 50%
- 60%
data:
- value: =#[props.inverter2]
detail:
borderRadius: 8
color: =props.axisColor
formatter: = @[props.inverter2] + props.myUnit
lineHeight: 20
offsetCenter:
- 0
- 19%
valueAnimation: true
width: 60%
endAngle: -20
itemStyle:
color: "=(#[props.inverter2]/props.i2_max < 0.1)? props.i2_1Color
:(#[props.inverter2]/props.i2_max < 0.5)?
props.i2_1Color:(#[props.inverter2]/props.i2_max < 0.9)?
props.i2_3Color : props.i2_4Color"
max: =props.i2_max || 100
min: =props.i2_min || 0
pointer:
icon: path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999
2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929
C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078
C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014
L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423
2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314
2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028
2089.24407,615.30999 2090.36389,615.30999 Z
itemStyle:
color: =props.needleColor
length: 115%
offsetCenter:
- 0
- 15%
show: false
progress:
show: true
width: 15
radius: 78%
splitLine:
distance: -38
length: 14
lineStyle:
color: "#999"
width: 3
show: false
splitNumber: =props.splitNo2
startAngle: 200
title:
offsetCenter:
- - null
- -50%
type: gauge