A generic numerical gauge with an optional LCD, in a “classic” style.
Most colors can be changed and up to 9 color bands can be defined.
Screenshots
Changelog
Version 0.1
- initial release
Resources
uid: colorbands_gauge
tags:
- gauge
- colorbands
props:
parameters:
- context: item
description: The Item
label: Item
name: item
required: true
type: TEXT
groupName: gaugeConfig
- default: 0
description: The minimum value to show
label: Min Value
name: min
required: false
type: TEXT
groupName: gaugeConfig
- default: 100
description: The maximum value to show
label: Max Value
name: max
required: false
type: TEXT
groupName: gaugeConfig
- description: The title text
label: Title
name: title
required: false
type: TEXT
groupName: appearance
- default: 18
description: The size of the title font
label: Title Font Size
name: titleFontSize
required: false
type: INTEGER
advanced: true
groupName: appearance
- name: precision
label: Precision
description: The number of digits after the decimal separator
default: 0
required: false
type: INTEGER
min: 0
max: 4
groupName: appearance
- default: true
description: Whether to print the unit on the dial
label: Show Unit
name: showUnit
required: false
type: BOOLEAN
groupName: appearance
- default: 5
description: The number of splits
label: Splits
name: splits
required: false
type: INTEGER
min: 1
max: 20
groupName: appearance
- default: 3
description: The number of ticks between each split
label: Ticks
name: ticks
required: false
type: INTEGER
min: 1
max: 20
groupName: appearance
- default: "#e64a19"
description: The needle color
label: Needle Color
name: needleColor
required: false
type: TEXT
groupName: appearance
- default: "#ddd"
description: The gauge frame color
label: Frame Color
name: frameColor
required: false
type: TEXT
groupName: appearance
- default: transparent
description: The dial color
label: Dial Color
name: dialColor
required: false
type: TEXT
groupName: appearance
- default: "#464646"
description: The dial print color
label: Print Color
name: printColor
required: false
type: TEXT
groupName: appearance
- default: transparent
description: The shadow color, e.g. "black" or "#0008"
label: Shadow Color
name: shadowColor
required: false
type: TEXT
advanced: true
groupName: appearance
- default: 10
description: The blur value for the dial shadow (no effect if the dial is transparent)
label: Shadow Blur
name: shadowBlur
required: false
type: INTEGER
advanced: true
groupName: appearance
- default: 3
description: The offset value for the dial shadow (no effect if the dial is
transparent)
label: Shadow Offset
name: shadowOffset
required: false
type: INTEGER
advanced: true
groupName: appearance
- default: 15
description: The axis font size
label: AxisFontSize
name: axisFontSize
required: false
type: INTEGER
min: 6
max: 50
advanced: true
groupName: appearance
- default: false
label: Enable LCD
name: enableLCD
required: false
type: BOOLEAN
groupName: lcd
- default: 0
description: The number of digits after the decimal separator
label: LCD Precision
name: lcdPrecision
required: false
type: INTEGER
min: 0
max: 4
groupName: lcd
- description: The height of widget
label: Height
name: height
required: false
type: TEXT
groupName: appearance
- default: 0.08
description: The decimal value between 0 and 1 that determines when the color
band ends
label: Color Band 1 End
name: colorBand1End
required: false
type: DECIMAL
groupName: bands
- default: "#039be688"
description: The color value for the band
label: Color Band 1 Color
name: colorBand1Color
required: false
type: TEXT
groupName: bands
- default: 0.6
description: The decimal value between 0 and 1 that determines when the color
band ends
label: Color Band 2 End
name: colorBand2End
required: false
type: DECIMAL
groupName: bands
- default: "#43a04788"
description: The color value for the band
label: Color Band 2 Color
name: colorBand2Color
required: false
type: TEXT
groupName: bands
- default: 0.8
description: The decimal value between 0 and 1 that determines when the color
band ends
label: Color Band 3 End
name: colorBand3End
required: false
type: DECIMAL
groupName: bands
- default: "#ffa60088"
description: The color value for the band
label: Color Band 3 Color
name: colorBand3Color
required: false
type: TEXT
groupName: bands
- default: 1
description: The decimal value between 0 and 1 that determines when the color
band ends
label: Color Band 4 End
name: colorBand4End
required: false
type: DECIMAL
groupName: bands
- default: "#db443788"
description: The color value for the band
label: Color Band 4 Color
name: colorBand4Color
required: false
type: TEXT
groupName: bands
- default: 1
description: The decimal value between 0 and 1 that determines when the color
band ends
label: Color Band 5 End
name: colorBand5End
required: false
type: DECIMAL
groupName: bands
- default: "#db443788"
description: The color value for the band
label: Color Band 5 Color
name: colorBand5Color
required: false
type: TEXT
groupName: bands
- default: 1
description: The decimal value between 0 and 1 that determines when the color
band ends
label: Color Band 6 End
name: colorBand6End
required: false
type: DECIMAL
groupName: bands
- default: "#db443788"
description: The color value for the band
label: Color Band 6 Color
name: colorBand6Color
required: false
type: TEXT
groupName: bands
- default: 1
description: The decimal value between 0 and 1 that determines when the color
band ends
label: Color Band 7 End
name: colorBand7End
required: false
type: DECIMAL
groupName: bands
- default: "#db443788"
description: The color value for the band
label: Color Band 7 Color
name: colorBand7Color
required: false
type: TEXT
groupName: bands
- default: 1
description: The decimal value between 0 and 1 that determines when the color
band ends
label: Color Band 8 End
name: colorBand8End
required: false
type: DECIMAL
groupName: bands
- default: "#db443788"
description: The color value for the band
label: Color Band 8 Color
name: colorBand8Color
required: false
type: TEXT
groupName: bands
- default: 1
description: The decimal value between 0 and 1 that determines when the color
band ends
label: Color Band 9 End
name: colorBand9End
required: false
type: DECIMAL
groupName: bands
- default: "#db443788"
description: The color value for the band
label: Color Band 9 Color
name: colorBand9Color
required: false
type: TEXT
groupName: bands
parameterGroups:
- name: gaugeConfig
label: Gauge Configuration
- name: appearance
label: Appearance
- name: lcd
label: LCD
- name: bands
label: Color bands
timestamp: Dec 30, 2024, 4:27:38 AM
component: oh-chart
config:
height: =props.height
slots:
series:
- component: oh-data-series
config:
emptyCircleStyle:
color: =props.dialColor
shadowBlur: =props.shadowBlur
shadowColor: =props.shadowColor
shadowOffsetX: =props.shadowOffset
shadowOffsetY: =props.shadowOffset
radius: 85%
type: pie
- component: oh-data-series
config:
anchor:
itemStyle:
color: "#000"
show: true
size: 20
offsetCenter:
- 0
- 35.5%
axisLabel:
show: false
axisLine:
lineStyle:
color:
- - 1
- =props.frameColor
shadowBlur: 6
shadowColor: "#0008"
width: 6
axisTick:
show: false
detail:
show: false
endAngle: -270
pointer:
show: false
radius: 85%
splitLine:
show: false
startAngle: 90
data:
- name: =items[props.item].state.split(' ')[1]
title:
show: =props.showUnit && items[props.item].state.split(' ').length > 1
offsetCenter:
- 0
- -23%
color: =props.printColor
fontWeight: 600
type: gauge
- component: oh-data-series
config:
startAngle: 135
endAngle: 45
clockwise: true
center:
- 50%
- 65%
radius: 90%
anchor:
itemStyle:
color: =props.needleColor
shadowBlur: 0
show: true
showAbove: true
size: 16
axisLabel:
distance: 20
fontSize: =props.axisFontSize
color: =props.printColor
formatter: =v=>v.toFixed(props.precision)
axisLine:
lineStyle:
color:
- - =props.colorBand1End
- =props.colorBand1Color
- - =props.colorBand2End
- =props.colorBand2Color
- - =props.colorBand3End
- =props.colorBand3Color
- - =props.colorBand4End
- =props.colorBand4Color
- - =props.colorBand5End
- =props.colorBand5Color
- - =props.colorBand6End
- =props.colorBand6Color
- - =props.colorBand7End
- =props.colorBand7Color
- - =props.colorBand8End
- =props.colorBand8Color
- - =props.colorBand9End
- =props.colorBand9Color
width: 15
splitLine:
distance: -15
length: 20
lineStyle:
color: =props.printColor
width: 2
axisTick:
distance: -15
length: 15
splitNumber: =props.ticks
lineStyle:
color: =props.printColor
data:
- name: =props.title
value: =Number.parseFloat(items[props.item].state)
itemStyle:
color: =props.needleColor
detail:
show: =props.enableLCD?true:false
backgroundColor: rgb(137,150,96)
borderColor: "#000"
borderWidth: 1
color: "#000"
fontFamily: Courier New
fontSize: 1em
fontWeight: 600
formatter: "=v=>v.toFixed(props.lcdPrecision)+(items[props.item].state.split('
').length > 1 ? ' '+items[props.item].state.split(' ')[1] : '')"
offsetCenter:
- 0
- 25%
padding:
- 0
- 2
- 0
- 2
valueAnimation: true
width: 50%
max: =Number.parseFloat(props.max)
min: =Number.parseFloat(props.min)
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
shadowBlur: 2
shadowColor: "#000a"
shadowOffsetX: 2
shadowOffsetY: 2
keepAspect: false
length: 105%
offsetCenter:
- 0
- 10%
splitNumber: =props.splits
title:
offsetCenter:
- 0
- -30%
color: =props.printColor
fontSize: =props.titleFontSize
tooltip:
formatter: "=props.title ? p=>props.title+':
<b>'+p.value.toFixed(props.precision)+(items[props.item].state.spli\
t(' ').length > 1 ? ' '+items[props.item].state.split(' ')[1] :
'')+'</b>' : NULL"
valueFormatter: "=v=>v.toFixed(props.precision)+(items[props.item].state.split('
').length > 1 ? ' '+items[props.item].state.split(' ')[1] : '')"
type: gauge
tooltip:
- component: oh-chart-tooltip
config:
show: true
