A gauge that combines wind direction, speed, gust speed and an optional 3rd wind speed (average, max etc.) into one widget, with a “classic” style. Clicking the widget can optionally open a history chart, at the expense of losing the tooltips.
Screenshots
Changelog
Version 0.2
- Added a second “needle style”
- Added the option to show translatable wind direction abbreviations instead of degrees in the LCD (thanks @crnjan).
- Added a third wind speed option (thanks @crnjan).
- Added the option to show a history chart on widget click at the expense of losing tooltips (thanks @crnjan).
- Made wind speed splits and ticks configurable.
- Added several visual configuration options like dial and print color and shadow adjustments.
- Made LCD font size configurable.
Version 0.1
- Initial release
Resources
uid: wind_gauge
tags:
- direction
- gauge
- speed
- wind
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: "classic"
description: The wind direction needle type
label: Direction Needle Type
name: directionNeedleType
required: false
limitToOptions: true
options:
- label: Classic
value: classic
- label: Modern
value: modern
type: TEXT
- default: "#e64a19"
description: The wind direction needle color
label: Direction Needle Color
name: directionNeedleColor
required: false
type: TEXT
advanced: true
- 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
- default: "abbrev"
description: What to show on the LCD, degrees or name abbreviations (N, NE, ...)
label: LCD Content
name: lcdContent
required: false
limitToOptions: true
options:
- label: Degrees
value: degrees
- label: Direction Abbreviations
value: abbrev
type: TEXT
- default: "N,NNE,NE,ENE,E,ESE,SE,SSE,S,SSW,SW,WSW,W,WNW,NW,NNW,N"
description: LCD Direction name abbreviations mappings, can be used to translate the abbreviations to another language (no spaces).
label: Direction Abbreviations
name: directionAbbreviations
required: false
type: TEXT
- default: "18"
description: The LCD font size
label: LCD Font Size
name: lcdFontSize
required: false
type: INTEGER
min: 6
max: 50
advanced: true
- context: item
description: The wind speed
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
type: TEXT
advanced: true
- description: The wind speed name in the tooltip
label: Speed Name
name: speedName
required: false
type: TEXT
- context: item
description: The wind gust speed
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
type: TEXT
advanced: true
- description: The wind gust speed name in the tooltip
label: Gust Name
name: gustName
required: false
type: TEXT
- context: item
description: The 3rd wind speed, can be an average or a maximum for example
label: 3rd Wind Speed
name: thirdSpeed
required: false
type: TEXT
- default: "#194aff"
description: The 3rd wind speed needle color
label: 3rd Wind Speed Needle Color
name: thirdNeedleColor
required: false
type: TEXT
advanced: true
- description: The 3rd wind speed name in the tooltip
label: 3rd Wind Speed Name
name: thirdName
required: false
type: TEXT
- default: "classic"
description: The wind speed needle type
label: Wind Speed Needle Type
name: speedNeedleType
required: false
limitToOptions: true
options:
- label: Classic
value: classic
- label: Modern
value: modern
type: TEXT
- default: "40"
description: The maximum wind speed to show
label: Max Speed
name: maxSpeed
required: false
type: DECIMAL
- description: The number of wind speed splits
label: Speed Splits
name: speedSplits
required: false
type: INTEGER
min: 1
max: 20
- default: "4"
description: The number of ticks between each wind speed split
label: Speed Ticks
name: speedTicks
required: false
type: INTEGER
min: 1
max: 20
- default: false
description: Whether to show a wind speed chart if clicked. Disables tooltips.
label: Show Speed Chart
name: showChart
required: false
type: BOOLEAN
- default: "13"
description: The wind direction font size
label: Direction Font Size
name: directionFontSize
required: false
type: INTEGER
min: 6
max: 50
advanced: true
- default: "12"
description: The wind speed font size
label: Speed Font Size
name: speedFontSize
required: false
type: INTEGER
min: 6
max: 50
advanced: true
- default: "#ddd"
description: The gauge frame color
label: Frame Color
name: frameColor
required: false
type: TEXT
- default: "#0008"
description: The gauge frame shadow color
label: Frame Shadow Color
name: frameShadowColor
required: false
type: TEXT
advanced: true
- default: "10"
description: The gauge frame shadow blur
label: Frame Shadow Blur
name: frameShadowBlur
required: false
TYPE: INTEGER
min: 0
max: 30
advanced: true
- default: "transparent"
description: The dial color
label: Dial Color
name: dialColor
required: false
type: TEXT
- default: "#464646"
description: The dial print color
label: Dial Print Color
name: dialPrintColor
required: false
type: TEXT
- default: "#464646"
description: The wind speed scale print color
label: Speed Scale Print Color
name: speedPrintColor
required: false
type: TEXT
- description: The widget height (in px, %, etc.)
label: Height
name: height
required: false
type: TEXT
advanced: true
parameterGroups: []
timestamp: Jan 3, 2025, 2:17:37 PM
component: f7-block
config:
class:
- no-margin
slots:
default:
- component: oh-link
config:
action: analyzer
actionAnalyzerItems: =[props.windSpeed, props.gustSpeed, props.thirdSpeed].filter(n=>n)
style:
display: =(props.showChart&&props.showChart!='false')?'block':'none'
position: absolute
height: 100%
width: 100%
- component: oh-chart
config:
height: =props.height
slots:
series:
- component: oh-data-series
config:
emptyCircleStyle:
color: =props.dialColor
radius: 72%
type: pie
- component: oh-data-series
config:
anchor:
itemStyle:
color: "#000d"
show: =props.directionNeedleType == 'classic'
size: 20
axisLabel:
color: =props.dialPrintColor
distance: 12
fontSize: =props.directionFontSize
formatter: =v=>(v===360)?'':v.toFixed(0)+''
axisLine:
show: false
axisTick:
distance: -10
length: 10
lineStyle:
color: =props.dialPrintColor
splitNumber: 6
data:
- itemStyle:
color: =props.directionNeedleColor
name: =props.title
value: =Number.parseFloat(items[props.directionItem].state)
detail:
backgroundColor: rgb(137,150,96)
borderColor: "#000"
borderWidth: 1
color: "#000"
fontFamily: Courier New
fontSize: =props.lcdFontSize
fontWeight: 600
formatter: "=v=>props.lcdContent != 'abbrev' ? v.toFixed(0)+'°' :
Number.isNaN(Number.parseFloat(v)) ? 'N/A' :
(props.directionAbbreviations.split(',')[Math.round((v % 360)
/ 22.5)]).trim()"
offsetCenter:
- 0
- 35%
padding:
- 0
- 2
- 0
- 3
show: =props.showLCD
valueAnimation: true
width: 50%
endAngle: -270
max: = 360
min: = 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%
offsetCenter:
- 0
- 70%
show: =props.directionNeedleType == 'classic'
width: 15%
radius: 66%
splitLine:
distance: -10
length: 15
lineStyle:
color: =props.dialPrintColor
splitNumber: 12
startAngle: 90
title:
color: =props.dialPrintColor
offsetCenter:
- 0
- -35%
tooltip:
formatter: "=props.directionName ? p=>props.directionName+':
<b>'+p.value.toFixed(1)+'°</b>' : NULL"
valueFormatter: =v=>v.toFixed(1)+'°'
type: gauge
- component: oh-data-series
config:
anchor:
show: false
axisLabel:
show: false
axisLine:
show: false
axisTick:
show: false
data:
- itemStyle:
color: =props.directionNeedleColor
name: =props.title
value: =Number.parseFloat(items[props.directionItem].state)
detail:
show: false
endAngle: -270
max: = 360
min: = 0
pointer:
icon: path://M 2088.9071,550.56484 C 2085.4538,550.72804 2080.565,551.3281
2080.565,551.3281 L 2088.9071,565.7789 Z M 2091.9069,550.56484
V 565.77787 L 2100.2491,551.3281 C 2100.2491,551.3281
2095.3603,550.72805 2091.9069,550.56484 Z M 2090.39,794.9075
2080.548,777.859 C 2080.548,777.859 2086.9081,781.359
2090.39,781.359 2093.8719,781.359 2100.232,777.859
2100.232,777.859 Z
itemStyle:
shadowBlur: 1
shadowColor: "#000a"
keepAspect: false
length: 204%
offsetCenter:
- 0
- 100%
show: =props.directionNeedleType == 'modern'
width: 17%
radius: 66%
splitLine:
show: false
splitNumber: 12
startAngle: 90
title:
show: false
tooltip:
formatter: "=props.directionName ? p=>props.directionName+':
<b>'+p.value.toFixed(1)+'°</b>' : NULL"
valueFormatter: =v=>v.toFixed(1)+'°'
type: gauge
- component: oh-data-series
config:
anchor:
show: false
axisLabel:
color: =props.speedPrintColor
distance: -13
fontSize: =props.speedFontSize
show: true
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
axisTick:
distance: -15
length: 10
lineStyle:
color: =props.speedPrintColor
show: true
splitNumber: =props.speedTicks
data:
- 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.windSpeed].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]
value: =Number.parseFloat(items[props.gustSpeed].state)
- itemStyle:
color: "=props.thirdSpeed ? props.thirdNeedleColor : '#0000'"
tooltip:
formatter: "=props.thirdName ? p=>props.thirdName+': <b>'+p.value.toFixed(1)+'
'+items[props.thirdSpeed].state.split(' ')[1]+'</b>' : NULL"
valueFormatter: =v=>v.toFixed(1)+' '+items[props.thirdSpeed].state.split(" ")[1]
value: =Number.parseFloat(items[props.thirdSpeed].state)
detail:
show: false
max: =props.maxSpeed
min: 0
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%
offsetCenter:
- 0
- -40%
show: =props.speedNeedleType=='classic'
width: 13%
radius: 88%
splitLine:
distance: -15
length: 12
lineStyle:
color: =props.speedPrintColor
splitNumber: =props.speedSplits || 10
title:
show: false
type: gauge
- component: oh-data-series
config:
anchor:
show: false
axisLabel:
show: false
axisLine:
show: false
axisTick:
show: false
data:
- 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.windSpeed].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]
value: =Number.parseFloat(items[props.gustSpeed].state)
- itemStyle:
color: "=props.thirdSpeed ? props.thirdNeedleColor : '#0000'"
tooltip:
formatter: "=props.thirdName ? p=>props.thirdName+': <b>'+p.value.toFixed(1)+'
'+items[props.thirdSpeed].state.split(' ')[1]+'</b>' : NULL"
valueFormatter: =v=>v.toFixed(1)+' '+items[props.thirdSpeed].state.split(" ")[1]
value: =Number.parseFloat(items[props.thirdSpeed].state)
detail:
show: false
max: =props.maxSpeed
min: 0
pointer:
icon: path://M 2090.39,693.12896 2114.0108,734.04512 C 2114.0108,734.04512
2098.7466,725.64512 2090.39,725.64512 2082.0334,725.64512
2066.7692,734.04512 2066.7692,734.04512 Z
itemStyle:
shadowBlur: 1
shadowColor: "#000a"
keepAspect: true
length: 100%
offsetCenter:
- 0
- -43%
show: =props.speedNeedleType=='modern'
width: 12%
radius: 88%
splitLine:
show: false
splitNumber: =props.speedSplits || 10
title:
show: false
type: gauge
- component: oh-data-series
config:
anchor:
itemStyle:
color: =props.directionNeedleColor
shadowBlur: 0
show: =props.directionNeedleType == 'classic'
showAbove: true
size: 16
axisLabel:
show: false
axisLine:
lineStyle:
color:
- - 1
- =props.frameColor
shadowBlur: =props.frameShadowBlur
shadowColor: =props.frameShadowColor
width: 8
show: true
axisTick:
show: false
detail:
show: false
endAngle: -270
pointer:
show: false
radius: 75%
splitLine:
show: false
title:
show: false
type: gauge
tooltip:
- component: oh-chart-tooltip
config:
show: true