Widget to display wind speed and direction or some other “directional” data. Basic usage:
- component: widget:compass_card
config:
title: Wind
direction: gOutdoor_WeatherStation_WindDirection
value: gOutdoor_WeatherStation_WindSpeed
Screenshots
Changelog
Version 0.1
- initial release
Resources
uid: compass_card
tags: []
props:
parameters:
- label: title
name: title
required: false
type: TEXT
- context: item
description: Direction in deg
label: Direction
name: direction
required: true
type: TEXT
- context: item
description: Value
label: Value
name: value
required: false
type: TEXT
- default: "180"
label: Rotate arrow deg
name: rotateArrow
required: false
type: INTEGER
advanced: true
- default: if:mdi:arrow-compass
label: Arrow image
name: arrowImage
required: false
type: TEXT
advanced: true
- default: red
label: Arrow color
name: arrowColor
required: false
type: TEXT
advanced: true
- default: 44px
label: Arrow height
name: arrowHeight
required: false
type: TEXT
advanced: true
- default: 4px
label: Circle width
name: circleWidth
required: false
type: TEXT
advanced: true
- default: "#34e5eb"
label: Circle color
name: circleColor
required: false
type: TEXT
advanced: true
- default: "true"
label: Show direction text
name: showDirectionText
required: false
type: BOOLEAN
advanced: true
- label: Background image url
name: backgroundImageUrl
required: false
type: TEXT
advanced: true
- default: 40%
label: Background image width
name: backgroundImageWidth
required: false
type: TEXT
advanced: true
parameterGroups: []
timestamp: Jan 21, 2023, 7:45:58 AM
component: f7-card
config:
title: =props.title
slots:
default:
- component: f7-card-content
config: {}
slots:
default:
- component: div
config:
style:
margin: 14px auto
border-radius: 50%
border-style: solid
border-width: =props.circleWidth
border-color: =props.circleColor
aspect-ratio: 1/1
width: 60%
slots:
default:
- component: oh-link
config:
action: analyzer
actionAnalyzerItems:
- =props.value
style:
border-radius: 50%
aspect-ratio: 1/1
position: absolute
width: 60%
- component: oh-image
config:
style:
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
url: =props.backgroundImageUrl
visible: =props.backgroundImageUrl
width: =props.backgroundImageWidth
- component: Label
config:
style:
font-size: 28px
left: 50%
position: absolute
top: 36%
transform: translate(-50%, -50%)
text: =["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW", "N"][Math.round((Number.parseFloat(@props.direction) % 360) / 22.5)]
visible: =props.showDirectionText
- component: Label
config:
style:
color: var(--f7-list-item-after-text-color)
font-size: 18px
font-weight: var(--f7-list-item-after-font-weight)
left: 50%
line-height: var(--f7-list-item-after-line-height)
position: absolute
top: 55%
transform: translate(-50%, -50%)
text: =@props.value
visible: =@props.value != "-"
- component: Label
config:
style:
color: var(--f7-list-item-after-text-color)
font-size: 16px
font-weight: var(--f7-list-item-after-font-weight)
left: 50%
line-height: var(--f7-list-item-after-line-height)
position: absolute
top: 64%
transform: translate(-50%, 50%)
text: =@props.direction
visible: =props.showDirectionText
- component: div
config:
style:
height: 100%
transform: ="rotate(" + Number.parseFloat(@props.direction) + "deg)"
slots:
default:
- component: oh-icon
config:
color: =props.arrowColor
height: =props.arrowHeight
icon: =props.arrowImage
style:
transform: ="translate(0, -50%) rotate(" + Number.parseInt(props.rotateArrow) +"deg)"
width: 100%