A gauge that combines wind direction, speed and gust speed into one widget, with a “classic” style.
Screenshots
Changelog
Version 0.1
- initial release
Resources
uid: wind_gauge
tags:
- wind
- gauge
- direction
- speed
props:
parameters:
- description: The gauge title
label: Title
name: title
required: false
type: TEXT
- context: item
description: The source wind direction in degrees
label: Direction Item
name: directionItem
required: false
type: TEXT
- default: "#e64a19"
description: The wind direction needle color
label: Direction Needle Color
name: directionNeedleColor
required: false
advanced: true
type: TEXT
- description: The wind direction name in the tooltip
label: Direction Name
name: directionName
required: false
type: TEXT
- default: "true"
description: Whether to show the LCD
label: Show LCD
name: showLCD
required: false
type: BOOLEAN
- context: item
description: The wind speed in m/s
label: Wind Speed
name: windSpeed
required: false
type: TEXT
- default: "#066a19"
description: The wind speed needle color
label: Speed Needle Color
name: speedNeedleColor
required: false
advanced: true
type: TEXT
- description: The wind speed name in the tooltip
label: Speed Name
name: speedName
required: false
type: TEXT
- context: item
description: The wind gust speed in m/s
label: Gust Speed
name: gustSpeed
required: false
type: TEXT
- default: "#ff4a19"
description: The wind gust speed needle color
label: Gust Needle Color
name: gustNeedleColor
required: false
advanced: true
type: TEXT
- description: The wind gust speed name in the tooltip
label: Gust Name
name: gustName
required: false
type: TEXT
- default: "40"
description: The maximum wind speed to show
label: Max Speed
name: maxSpeed
required: false
type: DECIMAL
- default: "13"
description: The wind direction font size
label: Direction Font Size
name: directionFontSize
required: false
advanced: true
type: INTEGER
min: 6
max: 50
- default: "12"
description: The wind speed font size
label: Speed Font Size
name: speedFontSize
required: false
advanced: true
type: INTEGER
min: 6
max: 50
- default: "#ddd"
description: The gauge frame color
label: Frame Color
name: frameColor
required: false
type: TEXT
- description: The widget height (in px, %, etc.)
label: Height
name: height
required: false
advanced: true
type: TEXT
parameterGroups: []
timestamp: Dec 12, 2024, 9:38:29 PM
component: oh-chart
config:
height: =props.height
slots:
series:
- component: oh-data-series
config:
tooltip:
formatter: "=props.directionName ? p=>props.directionName+':
<b>'+p.value.toFixed(1)+'°</b>' : NULL"
valueFormatter: =v=>v.toFixed(1)+'°'
startAngle: 90
endAngle: -270
min: = 0
max: = 360
anchor:
itemStyle:
color: "#444"
show: true
size: 20
axisLabel:
distance: 12
fontSize: =props.directionFontSize
formatter: =v=>(v===360)?'':v.toFixed(0)+''
radius: 66%
splitLine:
distance: -10
length: 15
splitNumber: 12
axisLine:
show: false
axisTick:
distance: -10
splitNumber: 6
length: 10
data:
- name: =props.title
value: =Number.parseFloat(items[props.directionItem].state)
itemStyle:
color: =props.directionNeedleColor
detail:
show: =props.showLCD
backgroundColor: rgb(137,150,96)
borderColor: "#000"
borderWidth: 1
color: "#000"
fontFamily: Courier New
fontWeight: 600
offsetCenter:
- 0
- 35%
padding:
- 0
- 2
- 0
- 3
valueAnimation: true
width: 50%
fontSize: 1.4em
formatter: =v=>v.toFixed(0)+'°'
pointer:
icon: path://m 2090.3691,735.29358 v 0 c -1.1198,0 -2.0399,-0.8841
-2.0847,-2.003 l -9.052,-27.674 6.8228,-4.1237 c 0,0 0.4027,-62.9973
-10e-5,-69.1273 -0.4647,-7.07141 -6.1978,-17.0556 -6.1978,-17.0556 l
10.5093,5.5183 10.5095,-5.5183 c 0,0 -5.1712,11.0944 -6.198,17.0556
-0.8201,4.7613 10e-5,69.1275 10e-5,69.1275 l 6.8228,4.12379
-9.052,27.6739 c -0.045,1.1189 -0.9649,2.003 -2.0847,2.003 z
itemStyle:
shadowBlur: 2
shadowColor: "#000a"
shadowOffsetX: 2
shadowOffsetY: 2
keepAspect: false
length: 140%
width: 15%
offsetCenter:
- 0
- 70%
title:
offsetCenter:
- 0
- -35%
type: gauge
- component: oh-data-series
config:
min: 0
max: =props.maxSpeed
radius: 88%
splitNumber: 10
anchor:
show: false
axisLabel:
show: true
distance: -13
fontSize: =props.speedFontSize
axisLine:
distance: -50
lineStyle:
color:
- - 0.03
- "#6271b833"
- - 0.08
- "#4a939b33"
- - 0.2
- "#52a44633"
- - 0.3
- "#a27e4933"
- - 0.45
- "#8e405f33"
- - 0.55
- "#5f66a044"
- - 0.68
- "#5b88a155"
- - 0.8
- "#8b48a166"
- - 0.9
- "#db489177"
- - 1
- "#ff3e4677"
width: 15
splitLine:
distance: -15
length: 12
axisTick:
show: true
distance: -15
length: 10
data:
- value: =Number.parseFloat(items[props.windSpeed].state)
itemStyle:
color: "=props.windSpeed ? props.speedNeedleColor : '#0000'"
tooltip:
formatter: "=props.speedName ? p=>props.speedName+': <b>'+p.value.toFixed(1)+'
'+items[props.windSpeed].state.split(' ')[1]+'</b>' : NULL"
valueFormatter: =v=>v.toFixed(1)+' '+items[props.windSpeed].state.split(" ")[1]
- value: =Number.parseFloat(items[props.gustSpeed].state)
itemStyle:
color: "=props.gustSpeed ? props.gustNeedleColor : '#0000'"
tooltip:
formatter: "=props.gustName ? p=>props.gustName+': <b>'+p.value.toFixed(1)+'
'+items[props.gustSpeed].state.split(' ')[1]+'</b>' : NULL"
valueFormatter: =v=>v.toFixed(1)+' '+items[props.gustSpeed].state.split(" ")[1]
detail:
show: false
pointer:
icon: path://m 2090.3649,683.53 v 0 c 1.1198,0 2.0399,0.8841 2.0847,2.003 0,0
3.7674,21.9508 9.052,31.5197 3.4895,6.3185 14.4324,16.1431
14.4324,16.1431 0,0 -17.0158,2.098 -25.5666,2.098 -8.5511,0
-25.5674,-2.0981 -25.5674,-2.0981 0,0 10.9434,-9.8247
14.433,-16.1433 5.2847,-9.5689 9.052,-31.5196 9.052,-31.5196
0.045,-1.1189 0.9649,-2.003 2.0847,-2.003 z
itemStyle:
shadowBlur: 2
shadowColor: "#000a"
shadowOffsetX: 2
shadowOffsetY: 2
keepAspect: true
length: 100%
width: 13%
offsetCenter:
- 0
- -40%
title:
show: false
type: gauge
- component: oh-data-series
config:
endAngle: -270
anchor:
itemStyle:
color: =props.directionNeedleColor
shadowBlur: 0
show: true
showAbove: true
size: 16
axisLabel:
show: false
axisLine:
show: true
lineStyle:
color:
- - 1
- =props.frameColor
shadowBlur: 10
shadowColor: "#0008"
width: 8
axisTick:
show: false
detail:
show: false
pointer:
show: false
radius: 75%
splitLine:
show: false
title:
show: false
type: gauge
tooltip:
- component: oh-chart-tooltip
config:
show: true