Hi,
I’m trying to find some nice looking gauges to use for my home power monitor widget, but I’m struggling to find anything.
All I’ve found so far is [Main UI] echarts gauge and pie POC which has some nice looking gauges at the start, but they don’t work for me (I get a blank widget 
)
I love these:
However, The code that goes with it just gives a blank widget (either copying directly - using my values for the items - or modifying).
Created widget (copied from page):
uid: test_gauge
tags: []
props:
parameters:
- context: item
description: The value to show
label: Item
name: item
required: true
type: TEXT
- context: item
description: The min value in range
label: MinItem
name: minItem
required: true
type: TEXT
- context: item
description: The max value in range
label: MaxItem
name: maxItem
required: true
type: TEXT
- context: number
description: Min value
label: Min
name: min
required: false
type: TEXT
- context: number
description: Max value
label: Max
name: max
required: false
type: TEXT
- context: string
description: The name to display
label: Name
name: name
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 20, 2021, 9:16:11 PM
component: f7-block
config:
class:
- no-padding
slots:
default:
- component: oh-chart
slots:
series:
- component: oh-serie
config:
type: gauge
radius: 95x%
axisLine:
lineStyle:
color:
- - 1
- "#fefefe"
width: 12
shadowBlur: 5
startAngle: -90
endAngle: -89.9999
axisLabel:
formatter: " "
splitNumber: -1
detail:
formatter: " "
- component: oh-serie
config:
type: gauge
min: =props.min || 0
max: =props.max || 100
data:
- value: =items[props.item].state.split(" ")[0]
name: =props.name
splitNumber: 6
radius: 85%
pointer:
length: 84%
title:
color: "#000"
fontSize: 16
axisLine:
lineStyle:
color:
- - =(items[props.minItem].state.split(" ")[0] - props.min - 0.01)/(props.max - props.min)
- "#1e90ff"
- - =(items[props.maxItem].state.split(" ")[0] - props.min - 0.01)/(props.max - props.min)
- lime
- - 1
- "#ff4500"
width: 18
splitLine:
length: 18
lineStyle:
color: "#000"
axisTick:
length: 10
lineStyle:
color: "#000"
axisLabel:
distance: 8
fontSize: 18
color: "#000"
detail:
backgroundColor: rgb(137,150,96)
borderWidth: 1
borderColor: "#000"
fontSize: 18
fontFace: Bold
color: "#000"
fontFamily: Courier New
Called widget from a test widget:
uid: testinggauge
tags: []
props:
parameters:
- description: A text prop
label: Prop 1
name: prop1
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 20, 2021, 9:21:16 PM
component: f7-card
config: {}
slots:
default:
- component: widget:test_gauge
config:
item: 30
minItem: 5
maxItem: 55
min: 0
max: 70
name: Test
Preview in both widgets are blank - as is the widget when I place it on a page.
I’m guessing I’ve missed something out - like importing some external library perhaps?
Does anyone have any “nice” gauges out there that work in OH3 UI widgets?
Thanks,
Richie
