Hi Richie
You have to change the Yaml in the widtget_gauge.
change the splitNumber in the oh-data-series
- component: oh-data-series
config:
radius: 82%
splitNumber: 10
and the fontSize in the axisLabel
axisLabel:
distance: 18
fontSize: 12
it should render
For the minItem and the maxItem i use a dummy Item for each with the value stored.
Roli
or set range to be i.e. 0 … 50 having something like … Please share your data range and any other details you would like to render within gauge …
Please check Examples - Apache ECharts for ideas …
or kW (assuming the unit) …
Hi,
I think I understand the basics of it now:
Thanks for your help - very much appreciated.
Richie
Hi,
Made some progress, but currently unable to remove the background colour of the gauge:
Thanks,
Richie
Hi,
Although I’d spent ages looking and finding nothing, as soon as I posted above, I found the solution.
Add the following to the oh-chart config:
options:
backgroundColor: transparent
Thanks,
Richie
Do you mind sharing your final widget code?
Hi,
I try to make a clasic clock like the example
and i get
uid: classic_klok
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: Mar 16, 2022, 10:06:39 PM
component: oh-chart
config:
height: 100%
slots:
series:
- component: oh-data-series
config:
name: hour
type: gauge
startAngle: 90
endAngle: -270
min: 0
max: 12
splitNumber: 12
clockwise: true
axisLine:
lineStyle:
width: 15
color:
- - 1
- rgba(0,0,0,0.7)
shadowColor: rgba(0, 0, 0, 0.5)
shadowBlur: 20
show: true
roundCap: false
splitLine:
lineStyle:
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 3
shadowOffsetX: 1
shadowOffsetY: 2
show: true
width: 3
distance: 10
axisLabel:
fontSize: 30
distance: 25
show: true
color: "#464646"
anchor:
show: true
icon: path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z
showAbove: false
offsetCenter:
- 0
- -35%
size: 120
keepAspect: true
itemStyle:
color: "#707177"
borderWidth: 0
borderColor: "#5470c6"
pointer:
icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
width: 12
length: 55%
offsetCenter:
- 0
- 8%
itemStyle:
color: "#C0911F"
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 8
shadowOffsetX: 2
shadowOffsetY: 4
show: true
showAbove: true
keepAspecy: false
detail:
show: false
backgroundColor: rgba(0,0,0,0)
borderWidth: 0
borderColor: "#ccc"
padding:
- 5
- 10
title:
offsetCenter:
- 0
- 30%
data:
value: 2
z: 2
- component: oh-data-series
config:
name: minute
type: gauge
startAngle: 90
endAngle: -270
min: 0
max: 60
clockwise: true
axisLine:
show: false
splitLine:
show: false
axisTick:
show: false
axisLabel:
show: false
pointer:
icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
width: 8
length: 70%
offsetCenter:
- 0
- 8%
itemStyle:
color: "#C0911F"
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 8
shadowOffsetX: 2
shadowOffsetY: 4
anchor:
show: true
size: 20
showAbove: false
itemStyle:
borderWidth: 15
borderColor: "#C0911F"
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 8
shadowOffsetX: 2
shadowOffsetY: 4
detail:
show: false
title:
offsetCenter:
- 0%
- -40%
data:
value: 25
- component: oh-data-series
config:
name: second
type: gauge
startAngle: 90
endAngle: -270
min: 0
max: 60
animationEasingUpdate: bounceOut
clockwise: true
axisLine:
show: false
splitLine:
show: false
axisTick:
show: false
axisLabel:
show: false
pointer:
icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
width: 4
length: 85%
offsetCenter:
- 0
- 8%
itemStyle:
color: "#C0911F"
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 8
shadowOffsetX: 2
shadowOffsetY: 4
anchor:
show: true
size: 15
showAbove: true
itemStyle:
color: "#C0911F"
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 8
shadowOffsetX: 2
shadowOffsetY: 4
detail:
show: false
title:
offsetCenter:
- 0%
- -40%
data:
value: 20
some one any idea why the pointers are not visible and the 0 is shown ?
using : openHAB 3.3.0
Build #2795
Hi Ronny
The 0 is shown because there is something missing in the axisLabel
axisLabel: {
fontSize: 50,
distance: 25,
formatter: function (value) {
if (value === 0) {
return '';
}
return value + '';
}
},
but i could not find the correct syntax .
The Pointers are not shown becaus you miss the name in the data part.
and you had also some alignement bugs.
here the code
uid: test
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: Mar 17, 2022, 10:03:50 PM
component: oh-chart
config:
height: 100%
slots:
series:
- component: oh-data-series
config:
name: hour
type: gauge
startAngle: 90
endAngle: -270
min: 0
max: 12
splitNumber: 12
clockwise: true
axisLine:
lineStyle:
width: 15
color:
- - 1
- rgba(0,0,0,0.7)
shadowColor: rgba(0, 0, 0, 0.5)
shadowBlur: 20
show: true
splitLine:
lineStyle:
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 3
shadowOffsetX: 1
shadowOffsetY: 2
width: 3
distance: 10
show: true
axisLabel:
fontSize: 30
distance: 25
show: true
color: "#464646"
anchor:
show: true
icon: path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z
showAbove: false
offsetCenter:
- 0
- -35%
size: 120
keepAspect: true
itemStyle:
color: "#707177"
borderWidth: 0
borderColor: "#5470c6"
pointer:
icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
itemStyle:
color: "#C0911F"
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 8
shadowOffsetX: 2
shadowOffsetY: 4
width: 12
length: 55%
offsetCenter:
- 0
- 8%
detail:
show: false
backgroundColor: rgba(0,0,0,0)
borderWidth: 0
borderColor: "#ccc"
valueAnimation: true
title:
show: false
offsetCenter:
- 0
- 30%
data:
- name: hour
value: 2
- component: oh-data-series
config:
name: minute
type: gauge
startAngle: 90
endAngle: -270
min: 0
max: 60
clockwise: true
axisLine:
show: false
splitLine:
show: false
axisTick:
show: false
axisLabel:
show: false
pointer:
icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
width: 8
length: 70%
offsetCenter:
- 0
- 8%
itemStyle:
color: "#C0911F"
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 8
shadowOffsetX: 2
shadowOffsetY: 4
anchor:
show: true
size: 20
showAbove: false
itemStyle:
borderWidth: 15
borderColor: "#C0911F"
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 8
shadowOffsetX: 2
shadowOffsetY: 4
detail:
show: false
title:
show: false
offsetCenter:
- 0%
- -40%
data:
- name: minute
value: 25
- component: oh-data-series
config:
name: second
type: gauge
startAngle: 90
endAngle: -270
min: 0
max: 60
animationEasingUpdate: bounceOut
clockwise: true
axisLine:
show: false
splitLine:
show: false
axisTick:
show: false
axisLabel:
show: false
pointer:
icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
width: 4
length: 85%
offsetCenter:
- 0
- 8%
itemStyle:
color: "#C0911F"
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 8
shadowOffsetX: 2
shadowOffsetY: 4
anchor:
show: true
size: 15
showAbove: true
itemStyle:
color: "#C0911F"
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 8
shadowOffsetX: 2
shadowOffsetY: 4
detail:
show: false
title:
show: false
offsetCenter:
- 0%
- -40%
data:
- name: second
value: 20
Hi,
Thanks for the correction.
Only the widget is not displayed when used
I guess the UI doesn’t like the heigt in
component: oh-chart
config:
height: 100%
I corrected that and adjusted the parameters
uid: test
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Mar 18, 2022, 8:11:01 AM
component: oh-chart
config:
options:
backgroundColor: transparent
slots:
series:
- component: oh-data-series
config:
name: hour
type: gauge
startAngle: 90
endAngle: -270
min: 0
max: 12
splitNumber: 12
clockwise: true
axisLine:
lineStyle:
width: 8
color:
- - 1
- rgba(0,0,0,0.7)
shadowColor: rgba(0, 0, 0, 0.5)
shadowBlur: 20
show: true
splitLine:
lineStyle:
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 3
shadowOffsetX: 1
shadowOffsetY: 2
width: 3
distance: 5
show: true
axisLabel:
fontSize: 20
distance: 15
show: true
color: "#464646"
anchor:
show: true
icon: path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z
showAbove: false
offsetCenter:
- 0
- -35%
size: 50
keepAspect: true
itemStyle:
color: "#707177"
borderWidth: 0
borderColor: "#5470c6"
pointer:
icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
itemStyle:
color: "#C0911F"
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 8
shadowOffsetX: 2
shadowOffsetY: 4
width: 6
length: 50%
offsetCenter:
- 0
- 8%
detail:
show: false
backgroundColor: rgba(0,0,0,0)
borderWidth: 0
borderColor: "#ccc"
valueAnimation: true
title:
show: false
offsetCenter:
- 0
- 30%
data:
- name: hour
value: =dayjs().format('hh')
- component: oh-data-series
config:
name: minute
type: gauge
startAngle: 90
endAngle: -270
min: 0
max: 60
clockwise: true
axisLine:
show: false
splitLine:
show: false
axisTick:
show: false
axisLabel:
show: false
pointer:
icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
width: 5
length: 70%
offsetCenter:
- 0
- 8%
itemStyle:
color: "#C0911F"
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 8
shadowOffsetX: 2
shadowOffsetY: 4
anchor:
show: true
size: 7
showAbove: false
itemStyle:
borderWidth: 15
borderColor: "#C0911F"
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 8
shadowOffsetX: 2
shadowOffsetY: 4
detail:
show: false
title:
show: false
offsetCenter:
- 0%
- -40%
data:
- name: minute
value: =dayjs().format('mm')
- component: oh-data-series
config:
name: second
type: gauge
startAngle: 90
endAngle: -270
min: 0
max: 60
animationEasingUpdate: bounceOut
clockwise: true
axisLine:
show: false
splitLine:
show: false
axisTick:
show: false
axisLabel:
show: false
pointer:
icon: path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z
width: 3
length: 85%
offsetCenter:
- 0
- 8%
itemStyle:
color: "#C0911F"
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 8
shadowOffsetX: 2
shadowOffsetY: 4
anchor:
show: true
size: 10
showAbove: true
itemStyle:
color: "#C0911F"
shadowColor: rgba(0, 0, 0, 0.3)
shadowBlur: 8
shadowOffsetX: 2
shadowOffsetY: 4
detail:
show: false
title:
show: false
offsetCenter:
- 0%
- -40%
data:
- name: second
value: =dayjs().format('s')
for the correct time i used dayjs, but i didnt get the automation to work.
For the automation the last part from the echarts example needs to get attached to the widget, but i don’t know how to accomplish this.
setInterval(function () {
var date = new Date();
var second = date.getSeconds();
var minute = date.getMinutes() + second / 60;
var hour = (date.getHours() % 12) + minute / 60;
option.animationDurationUpdate = 300;
myChart.setOption({
series: [
{
name: 'hour',
animation: hour !== 0,
data: [{ value: hour }]
},
{
name: 'minute',
animation: minute !== 0,
data: [{ value: minute }]
},
{
animation: second !== 0,
name: 'second',
data: [{ value: second }]
}
]
});
}, 1000);
AFAIK attaching js code is not (currently) supported, so both
formatter: function (value) {
...
and
setInterval(function () {
...
is a no-go. You might get away with formatter using “string” syntax, like:
formatter: '{value} km/h',
but I guess it does not solve your problem having 0 overlapping 12 …
Maybe you could use script(s) to update item(s) when needed and use that instead of attaching js code within widget (yaml) …
Hello,
i created a new gauge and have a abnormal result.
In the editor it look ok, when using it the gauge dont stop on the max value
Editor :
Widget in use :
uid: sun_moon
tags:
- sun
- moon
props:
parameters:
- context: item
description: Sun Total Radiation
label: Sun Total Radiation
name: total
required: true
type: TEXT
- context: item
description: Sun Direct Radiaton
label: Sun Direct Radiaton
name: direct
required: false
type: TEXT
- context: item
description: Sun Diffuse Radiaton
label: Sun Diffuse Radiaton
name: diffuse
required: false
type: TEXT
- context: item
description: Moon Azimuth
label: Moon Azimuth
name: azimuthmoon
required: false
type: TEXT
- context: item
description: Sun Azimuth
label: Sun Azimuth
name: azimuth
required: false
type: TEXT
- context: number
description: Min Azimuth
label: Min Azimuth range
name: minazimuth
required: false
type: TEXT
- context: number
description: Max Azimuth
label: Max Azimuth range
name: maxazimuth
required: false
type: TEXT
- context: item
description: The min range
label: MinItem
name: minItem
required: false
type: TEXT
- context: item
description: The max range
label: MaxItem
name: maxItem
required: false
type: TEXT
- context: number
description: The min value
label: Min
name: min
required: false
type: TEXT
- context: number
description: The total max value
label: Max total
name: maxtotal
required: false
type: TEXT
- context: number
description: The direct max value
label: Max direct
name: maxdirect
required: false
type: TEXT
- context: number
description: The diffuse max value
label: Max diffuse
name: maxdiffuse
required: false
type: TEXT
- context: string
description: The name
label: Name
name: name
required: false
type: TEXT
- context: number
description: The height of widget
label: Height
name: height
required: false
type: TEXT
- context: number
description: Scale division
label: Splits
name: splits
required: true
type: TEXT
parameterGroups: []
timestamp: May 7, 2022, 10:31:23 AM
component: oh-chart
config:
height: =props.height
slots:
series:
- component: oh-data-series
config:
radius: 70%
type: gauge
startAngle: 0
endAngle: 0
axisLine:
lineStyle:
width: 10
color:
- - 1
- "#fff"
shadowColor: rgba(0, 0, 0, 0.8)
shadowBlur: 15
axisTick:
show: false
splitLine:
show: false
axisLabel:
show: false
pointer:
show: false
title:
show: false
anchor:
show: false
size: 20
itemStyle:
color: "#000"
- component: oh-data-series
config:
radius: 100%
splitNumber: =props.splits || 10
type: gauge
min: =props.min || 0
max: =props.maxdirect || 100
startAngle: 230
endAngle: 75
center:
- 50%
- 70%
data:
- value: =Number.parseFloat(items[props.direct].displayState) || 0
name: direct radiaton
axisLine:
show: false
color: rgba(0, 240, 240, 0.8)
shadowColor: rgba(0, 0, 0, 0.8)
shadowBlur: 15
axisTick:
show: false
distance: -10
length: 10
color: "#0FF"
width: 1
splitLine:
show: false
distance: -10
length: 15
width: 1
color: "#0FF"
axisLabel:
show: false
distance: 18
fontSize: 12
pointer:
show: false
offsetCenter:
- 0
- -95%
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
length: 10%
itemStyle:
color: "#5F5"
title:
offsetCenter:
- 0
- 30%
fontSize: 10
color: "#F0F"
detail:
valueAnimation: true
formatter: ="{value}" + " " + items[props.direct].state.split(" ")[1]
show: true
fontSize: 12
color: "#F0F"
- component: oh-data-series
config:
radius: 100%
splitNumber: =props.splits || 10
type: gauge
min: =props.min || 0
max: =props.maxdiffuse || 100
startAngle: 90
endAngle: 0
center:
- 50%
- 58%
data:
- value: =Number.parseFloat(items[props.diffuse].displayState) || 0
name: diffuse radiaton
offsetCenter:
- 0
- 40%
axisLine:
show: false
axisTick:
show: false
distance: -10
length: 5
splitLine:
show: false
distance: -10
length: 10
axisLabel:
show: false
distance: 12
fontSize: 8
pointer:
show: false
offsetCenter:
- 0
- -95%
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
length: 5%
itemStyle:
color: "#F55"
title:
offsetCenter:
- 0
- 30%
fontSize: 10
color: "#F55"
detail:
valueAnimation: true
formatter: ="{value}" + " " + items[props.diffuse].state.split(" ")[1]
show: true
fontSize: 12
color: "#F5F"
- component: oh-data-series
config:
radius: 100%
splitNumber: =props.splits || 10
type: gauge
min: =props.min || 0
max: =props.maxtotal || 100
startAngle: 180
endAngle: 0
center:
- 50%
- 90%
data:
- value: =Number.parseFloat(items[props.total].displayState) || 0
name: total radiaton
offsetCenter:
- 0
- -50%
axisLine:
lineStyle:
width: 10
color:
- - =(Number.parseFloat(items[props.minItem].state) - props.min)/(props.max - props.min)
- "#58D9F9"
- - =(Number.parseFloat(items[props.maxItem].state) - props.min)/(props.max - props.min)
- "#7CFFB2"
- - 1
- "#FF6E76"
axisTick:
distance: -10
length: 10
splitLine:
distance: -10
length: 20
axisLabel:
distance: 18
fontSize: 12
detail:
valueAnimation: true
formatter: ="{value}" + " " + items[props.total].state.split(" ")[1]
fontSize: 12
color: "#04F"
offsetCenter:
- 0
- -50%
title:
offsetCenter:
- 0
- -60%
fontSize: 10
color: "#04F"
pointer:
offsetCenter:
- 0
- -130
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
length: 15%
itemStyle:
color: "#00F"
anchor:
show: false
size: 14
itemStyle:
borderColor: "#fff"
borderWidth: 1
- component: oh-data-series
config:
radius: 200%
splitNumber: =props.splits || 10
type: gauge
min: =props.minazimuth || 60
max: =props.maxazimuth || 300
startAngle: 180
endAngle: 0
center:
- 50%
- 103%
data:
- value: =Number.parseFloat(items[props.azimuth].displayState) || 195
name: Azimuth
axisLine:
show: false
lineStyle:
width: 10
color:
- - =(Number.parseFloat(items[props.minItem].state) - props.min)/(props.max - props.min)
- "#58D9F9"
- - =(Number.parseFloat(items[props.maxItem].state) - props.min)/(props.max - props.min)
- "#7CFFB2"
- - 1
- "#FF6E76"
axisTick:
show: false
distance: -10
length: 10
splitLine:
show: false
distance: -10
length: 20
axisLabel:
distance: 15
fontSize: 10
detail:
valueAnimation: true
formatter: ="{value}" +"°"
fontSize: 12
color: "#F0F"
offsetCenter:
- 0
- -83%
title:
offsetCenter:
- 0
- -78%
fontSize: 10
color: "#F0F"
pointer:
width: 25%
height: 25%
offsetCenter:
- 0
- -95%
icon: path://M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z
length: 10%
itemStyle:
color: "#DBB511"
anchor:
show: false
size: 14
itemStyle:
borderColor: "#DB8508"
borderWidth: 1
- component: oh-data-series
config:
radius: 200%
splitNumber: =props.splits || 10
type: gauge
min: =props.minazimuth || 60
max: =props.maxazimuth || 300
startAngle: 180
endAngle: 0
center:
- 50%
- 103%
data:
- value: =Number.parseFloat(items[props.azimuthmoon].displayState) || 125
name: Azimuth
axisLine:
show: false
lineStyle:
width: 10
color:
- - =(Number.parseFloat(items[props.minItem].state) - props.min)/(props.max - props.min)
- "#58D9F9"
- - =(Number.parseFloat(items[props.maxItem].state) - props.min)/(props.max - props.min)
- "#7CFFB2"
- - 1
- "#FF6E76"
axisTick:
show: false
distance: -10
length: 10
splitLine:
show: false
distance: -10
length: 20
axisLabel:
distance: 15
fontSize: 10
detail:
valueAnimation: true
formatter: ="{value}" +"°"
fontSize: 12
color: "#F0F"
offsetCenter:
- 0
- -72%
title:
offsetCenter:
- 0
- -78%
fontSize: 10
color: "#F0F"
pointer:
width: 25%
height: 25%
offsetCenter:
- 0
- -95%
icon: path://M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z
length: 10%
itemStyle:
color: "#282"
anchor:
show: false
size: 14
itemStyle:
borderColor: "#fff"
borderWidth: 1
any idea how to fix this
Thanks for the support
Hm, I used this at the very beginning and then moved to a different look … did a quick check but cannot find it anymore, maybe in some backup … currently I use
that gives me a bit more info as the one you shared. Please find yaml below. Part above oh-chart allows you to tap on the gauge, there are two areas, top and bottom (each occupying 50% of height) so if I tap on i.e. upper part I get a chart with heat fluid (in/out) info …
and tapping bottom part gives me cold fluid in/out chart … please feel free to omit that part if you don’t need it … or customise it to suit you needs …
- component: f7-block
config:
class:
- no-margin
slots:
default:
- component: oh-link
config:
action: analyzer
actionAnalyzerItems:
- gBasement_BoilerRoom_HP_HeatFluid_In
- gBasement_BoilerRoom_HP_HeatFluid_Out
style:
height: 50%
position: absolute
width: 100%
- component: oh-link
config:
action: analyzer
actionAnalyzerItems:
- gBasement_BoilerRoom_HP_ColdFluid_Out
- gBasement_BoilerRoom_HP_ColdFluid_In
style:
bottom: 0
height: 50%
position: absolute
width: 100%
- component: oh-chart
config:
height: 250px
slots:
series:
- component: oh-data-series
config:
axisLine:
lineStyle:
width: 10
roundCap: true
axisTick:
show: false
data:
- detail:
offsetCenter:
- -32%
- -25%
name: HEAT FLUID
title:
offsetCenter:
- 0%
- -50%
value: =Number.parseFloat(items.gBasement_BoilerRoom_HP_HeatFluid_In.state)
- detail:
offsetCenter:
- 32%
- -25%
value: =Number.parseFloat(items.gBasement_BoilerRoom_HP_HeatFluid_Out.state)
detail:
borderColor: auto
borderRadius: 20
borderWidth: 1
color: auto
fontSize: 14
formatter: "{value} °C"
height: 14
width: 40
endAngle: 10
max: 60
min: 10
pointer:
show: false
progress:
clip: false
itemStyle:
borderColor: "#464646"
borderWidth: 1
overlap: true
roundCap: true
show: true
radius: 90%
splitLine:
distance: 0
length: 4
splitNumber: 5
startAngle: 170
title:
fontSize: 14
type: gauge
- component: oh-data-series
config:
axisLine:
lineStyle:
width: 10
roundCap: true
axisTick:
show: false
data:
- detail:
offsetCenter:
- -32%
- 25%
name: COLD FLUID
title:
offsetCenter:
- 0%
- 50%
value: =Number.parseFloat(items.gBasement_BoilerRoom_HP_ColdFluid_Out.state)
- detail:
offsetCenter:
- 32%
- 25%
value: =Number.parseFloat(items.gBasement_BoilerRoom_HP_ColdFluid_In.state)
detail:
borderColor: auto
borderRadius: 20
borderWidth: 1
color: auto
fontSize: 14
formatter: "{value} °C"
height: 14
width: 40
endAngle: 190
max: 40
min: -10
pointer:
show: false
progress:
clip: false
itemStyle:
borderColor: "#464646"
borderWidth: 1
overlap: true
roundCap: true
show: true
radius: 90%
splitLine:
distance: 0
length: 4
splitNumber: 5
startAngle: 350
title:
fontSize: 14
type: gauge
if you are still after the one you shared I can check if I still have that yaml is some backup …
Got this widget partially working. I want to have a temp and humidity sensor reading. Temp looks okay but the humidity has some funky numbers going on. Not quite sure where to tweak things to get some somewhat reasonable numbers appearing.
I’d also like to change the background to a color or possibly an image if that’s possible. Font color would be nice too.
Added: for humidity I’d be quite happy with just the percentage in integers, I don’t tenths of a percent showing. Changed Number.parseFloat to Number.parseInt and I’m getting the sensor reading values as an integer but the numbers around the dial are sill funky for humidity.
- component: widget:widget_gauge
config:
height: 200px
item: paincave_temp_humidity_45_Sensor_temperature
minItem: 20
maxItem: 110
max: 120
min: 0
name: Temp
background: orange
- component: widget:widget_gauge
config:
height: 200px
item: paincave_temp_humidity_45_Sensor_relative_humidity
minItem: 0
maxItem: 100
max: 100
min: 0
name: RH
I’ve managed to get the humidity to display nicely now. Added a property for the pointer color to be changed just cause I wanted blue on humidity and red for temp. But I still get this “undefined” string showing up and I can’t figure out where it’s coming from. The temp gauge shows “°F” in that spot. So I think it’s a value that should be “%” but the sensor isn’t actually sending that. Where can I set or change it?
EDIT: Just found out that the temp item returns the unit string “°F” but the humdity string does not return any unit, just the raw floating point number, such as “44.33”.
Looks like this is the line I need to tweak but I’m not sure exactly how in this case. I think I’m gonna make a copy of the widget that will automatically add the static string I need. Unless there’s some better option here.
formatter: ="{value}" + "\n" + items[props.item].state.split(" ")[1]
I have this gauge widget now on the overview page. How do I associate a “click-action” to the widget, so that when it is clicked it opens the trend page of the item it is currently showing as momentary value?
Please can you share the page code? is in the page or in the habpanel?