-
Notifications
You must be signed in to change notification settings - Fork 21
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SEGARC value indicator #175
Comments
Thank you for creating your first issue for the Swiss Army Knife custom card! |
After experimenting with the circle slider a bit I achieved the effect I was looking for. The only question I have left is if it’s possible to disable the circle slider’s response to touch. I have tried setting the drag and touch actions to none but I can still drag the thumb around the circle, it just doesn’t do anything. Refreshing the page resets the value that is displayed. |
The enhancement is on my list. Thanks!
That is a nice card, and creative thinking to create a solution 👍
That should be a bug. I will check that one. If you don't have actions defined, it should not have any interaction. You could fix this yourself though by setting a CSS value on the slider: Let me know if that at least helps your issue. |
Based on your suggestion and after some experimenting I found that setting the |
Hello jwaz73, Would you mind sharing your code for this card? so others can get inspiration out of this. Thanks in advance. |
@ArtMel1998 Absolutely! The yaml file for the template to create the standalone 'compass' gauge is attached to this reply (as a .txt file). Additionally, I'm working on a card that overlays the circslider on a segarc to create a combo gauge. The segarc is the wind speed and the circslider is the wind direction. Here is the working yaml I have so far...
Here is the template I use for the TopBar for the cards in the example above:
Happy New Year! -James |
Hello James,
Have a blessed 2024. Thank you for sharing your code with me.
I will immediately make a card with it. :)
Kind regards,
Art.
…On Mon, Jan 1, 2024 at 7:43 AM James Wood ***@***.***> wrote:
@ArtMel1998 <https://github.com/ArtMel1998> Absolutely! The yaml file for
the template to create the standalone 'compass' gauge is attached to this
reply (as a .txt file).
twc-toolset-compas.txt
<https://github.com/AmoebeLabs/swiss-army-knife-card/files/13803709/twc-toolset-compas.txt>
Additionally, I'm working on a card that overlays the circslider on a
segarc to create a combo gauge. The segarc is the wind speed and the
circslider is the wind direction.
image.png (view on web)
<https://github.com/AmoebeLabs/swiss-army-knife-card/assets/35283565/22819eba-f2b3-4093-a181-aca04d7ecb80>
Here is the working yaml I have so far...
# --- Wind Card
- type: custom:swiss-army-knife-card
aspectratio: 2/1.5
disable_card: false
dev:
debug: false
entities:
# --- 0 Wind Speed
- entity: sensor.wind_speed
decimals: 1
icon: mdi:weather-windy
area: Wind Speed
# --- 1 Wind Direction
- entity: sensor.wind_dir
icon: mdi:compass-outline
area: Wind Direction
# --- 2 Average Gust
- entity: sensor.wind_gust
decimals: 1
icon: mdi:weather-windy
area: Avg Gust
# --- Max Gust
- entity: sensor.max_gust
decimals: 1
icon: mdi:weather-dust
area: Max Gust
layout:
toolsets:
# --- Card TopBar
- toolset: topbar
template:
name: ts-topbar
variables:
- var-cx: 100
- var-cy: 10
- var-text: "Wind Speed & Direction"
- var-text-cx: -40
- var-rectex-width: 200
- var-rectex-height: 20
# --- Wind Speed & Direction Guage Set
- toolset: wind_speed_direction
position:
cx: 100
cy: 75
tools:
# --- Wind Speed Guage
- type: segarc
position:
cx: 50
cy: 50
start_angle: -175
end_angle: 175
width: 6
radius: 45
entity_index: 0
scale:
min: 0
max: 100
offset: 2
show:
scale: true
style: colorstops
segments:
colorstops:
template:
name: cs-wind
styles:
background:
fill: var(--theme-sys-elevation-surface-neutral7)
opacity: 1
filter: url(#is-1)
# --- Wind Direction Guage
- type: circslider
position:
cx: 50
cy: 50
start_angle: 0
end_angle: 360
radius: 45
thumb:
width: 5
height: 15
radius: 2
entity_index: 1
show:
uom: none
scale:
min: 0
max: 360
step: 1
styles:
circslider:
stroke: none
pointer-events: none
active:
stroke: none
pointer-events: none
track:
stroke: none
pointer-events: none
thumb:
fill: var(--theme-sys-color-primary)
fill-opacity: 0.7
pointer-events: none
capture:
fill: var(--theme-sys-color-primary)
fill-opacity: 0.0
pointer-events: none
# --- Wind Speed (Numbers)
- type: state
position:
cx: 50
cy: 50
entity_index: 0
show:
uom: bottom
styles:
state:
font-size: 20em
font-weight: 700
text-anchor: middle
fill: var(--primary-text-color)
uom:
font-weight: 700
fill: var(--primary-text-color)
# --- Wind Direction (Cardinal)
- type: state
position:
cx: 50
cy: 30
entity_index: 1
derived_entity:
state: |
[[[
const DIRECTION = ["North", "NNE", "NE", "ENE", "East", "ESE", "SE", "SSE", "South", "SSW", "SW", "WSW", "West", "WNW", "NW", "NNW", ];
const dir = Math.floor((state / 22.5) + .5);
return DIRECTION[(dir % 16)];
]]]
show:
uom: none
styles:
state:
font-size: 10em
font-weight: 700
text-anchor: middle
fill: var(--primary-text-color)
# --- Average Gust
- type: area
position:
cx: -22
cy: 45
entity_index: 2
styles:
area:
font-size: 8em
font-weight: 700
text-anchor: middle
fill: var(--primary-text-color)
- type: state
position:
cx: -22
cy: 55
entity_index: 2
show:
uom: none
styles:
state:
font-size: 10em
font-weight: 700
text-anchor: middle
fill: var(--primary-text-color)
# --- Max Gust
- type: area
position:
cx: 122
cy: 45
entity_index: 3
styles:
area:
font-size: 8em
font-weight: 700
text-anchor: middle
fill: var(--primary-text-color)
- type: state
position:
cx: 122
cy: 55
entity_index: 3
show:
uom: none
styles:
state:
font-size: 10em
font-weight: 700
text-anchor: middle
fill: var(--primary-text-color)
Here is the template I use for the TopBar for the cards in the example
above:
ts-topbar:
template:
type: toolset
defaults:
- var-cx: 50
- var-cy: 50
- var-text: "Change Me"
- var-text-cx: 50
- var-font-size: 10em
- var-rectex-width: 100
- var-rectex-height: 100
toolset:
toolset: topbar
position:
cx: '[[var-cx]]'
cy: '[[var-cy]]'
tools:
- type: rectex
id: 0
position:
cx: 50
cy: 50
width: '[[var-rectex-width]]'
height: '[[var-rectex-height]]'
radius:
all: 0
styles:
rectex:
fill: var(--theme-sys-palette-secondary97)
- type: text
id: 1
position:
cx: '[[var-text-cx]]'
cy: 50
text: '[[var-text]]'
styles:
text:
font-size: '[[var-font-size]]'
font-weight: 700
text-anchor: start
fill: var(--theme-sys-palette-secondary70)
Happy New Year!
-James
—
Reply to this email directly, view it on GitHub
<#175 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AY6IKWCV52PUZWOM3O6NOFLYMJLHTAVCNFSM6AAAAAATIEMMZ2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZTGE4DOMRVHE>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Hello James,
So sorry to bother you but there is something I don't understand. Most I do
but I was expecting that the needle should turn with te wind direction over
the circslider and there would be some text which tells the wind direction.
I took out all code (for now) that is irrelivant (i think :)). The needle
stucks on North and there is no text with the wind direction. Maybe you can
help and check my code please?
Kind regards,
Arthur
- type: horizontal-stack
cards:
# Windrichting
- type: custom:swiss-army-knife-card
entities:
- entity: sensor.wind_direction
# Index ID = 0
icon: mdi:compass-outline
area: direction
aspectratio: 1/1
disable_card: false
layout:
styles:
card:
toolsets:
filter: url(#nm-1)
toolsets:
# Wind Direction
- toolset: wind_direction
position:
cx: 50
cy: 50
tools:
- type: segarc
position:
cx: 50
cy: 50
start_angle: 0
end_angle: 360
width: 3
radius: 30
entity_index: 0
scale:
min: 0
max: 120
offset: 2
show:
scale: true
style: colorstops
segments:
colorstops:
gap: 0
colors:
0: '#C2C2C0'
1: '#27CD3E'
40: '#FFC300'
75: '#F49E29'
100: '#CA1021'
styles:
background:
fill: var(--theme-sys-elevation-surface-neutral7)
opacity: 1
filter: url(#is-1)
# Slider should change with direction
- type: circslider
position:
cx: 50
cy: 50
start_angle: 0
end_angle: 360
radius: 33
thumb:
width: 1.5
height: 8
radius: 1
entity_index: 0
show:
uom: none
scale:
min: 0
max: 360
step: 1
styles:
circslider:
stroke: none
pointer-events: none
active:
stroke: none
pointer-events: none
track:
stroke: none
pointer-events: none
thumb:
#fill: var(--theme-sys-color-primary)
fill: grey
fill-opacity: 1
pointer-events: none
capture:
#fill: var(--theme-sys-color-primary)
fill: yellow
fill-opacity: 0
pointer-events: none
# --- Wind Direction (Cardinal)
- type: state
position:
cx: 50
cy: 50
entity_index: 0
derived_entity:
state: |
[[[
const DIRECTION = ["North", "NNE", "NE", "ENE",
"East", "ESE", "SE", "SSE", "South", "SSW", "SW", "WSW", "West", "WNW",
"NW", "NNW", ];
const dir = Math.floor((state / 22.5) + .5);
return DIRECTION[(dir % 16)];
]]]
show:
uom: none
styles:
state:
font-size: 10em
font-weight: 700
text-anchor: middle
#fill: var(--primary-text-color)
fill: '#FFFFFF'
…On Mon, Jan 1, 2024 at 7:43 AM James Wood ***@***.***> wrote:
@ArtMel1998 <https://github.com/ArtMel1998> Absolutely! The yaml file for
the template to create the standalone 'compass' gauge is attached to this
reply (as a .txt file).
twc-toolset-compas.txt
<https://github.com/AmoebeLabs/swiss-army-knife-card/files/13803709/twc-toolset-compas.txt>
Additionally, I'm working on a card that overlays the circslider on a
segarc to create a combo gauge. The segarc is the wind speed and the
circslider is the wind direction.
image.png (view on web)
<https://github.com/AmoebeLabs/swiss-army-knife-card/assets/35283565/22819eba-f2b3-4093-a181-aca04d7ecb80>
Here is the working yaml I have so far...
# --- Wind Card
- type: custom:swiss-army-knife-card
aspectratio: 2/1.5
disable_card: false
dev:
debug: false
entities:
# --- 0 Wind Speed
- entity: sensor.wind_speed
decimals: 1
icon: mdi:weather-windy
area: Wind Speed
# --- 1 Wind Direction
- entity: sensor.wind_dir
icon: mdi:compass-outline
area: Wind Direction
# --- 2 Average Gust
- entity: sensor.wind_gust
decimals: 1
icon: mdi:weather-windy
area: Avg Gust
# --- Max Gust
- entity: sensor.max_gust
decimals: 1
icon: mdi:weather-dust
area: Max Gust
layout:
toolsets:
# --- Card TopBar
- toolset: topbar
template:
name: ts-topbar
variables:
- var-cx: 100
- var-cy: 10
- var-text: "Wind Speed & Direction"
- var-text-cx: -40
- var-rectex-width: 200
- var-rectex-height: 20
# --- Wind Speed & Direction Guage Set
- toolset: wind_speed_direction
position:
cx: 100
cy: 75
tools:
# --- Wind Speed Guage
- type: segarc
position:
cx: 50
cy: 50
start_angle: -175
end_angle: 175
width: 6
radius: 45
entity_index: 0
scale:
min: 0
max: 100
offset: 2
show:
scale: true
style: colorstops
segments:
colorstops:
template:
name: cs-wind
styles:
background:
fill: var(--theme-sys-elevation-surface-neutral7)
opacity: 1
filter: url(#is-1)
# --- Wind Direction Guage
- type: circslider
position:
cx: 50
cy: 50
start_angle: 0
end_angle: 360
radius: 45
thumb:
width: 5
height: 15
radius: 2
entity_index: 1
show:
uom: none
scale:
min: 0
max: 360
step: 1
styles:
circslider:
stroke: none
pointer-events: none
active:
stroke: none
pointer-events: none
track:
stroke: none
pointer-events: none
thumb:
fill: var(--theme-sys-color-primary)
fill-opacity: 0.7
pointer-events: none
capture:
fill: var(--theme-sys-color-primary)
fill-opacity: 0.0
pointer-events: none
# --- Wind Speed (Numbers)
- type: state
position:
cx: 50
cy: 50
entity_index: 0
show:
uom: bottom
styles:
state:
font-size: 20em
font-weight: 700
text-anchor: middle
fill: var(--primary-text-color)
uom:
font-weight: 700
fill: var(--primary-text-color)
# --- Wind Direction (Cardinal)
- type: state
position:
cx: 50
cy: 30
entity_index: 1
derived_entity:
state: |
[[[
const DIRECTION = ["North", "NNE", "NE", "ENE", "East", "ESE", "SE", "SSE", "South", "SSW", "SW", "WSW", "West", "WNW", "NW", "NNW", ];
const dir = Math.floor((state / 22.5) + .5);
return DIRECTION[(dir % 16)];
]]]
show:
uom: none
styles:
state:
font-size: 10em
font-weight: 700
text-anchor: middle
fill: var(--primary-text-color)
# --- Average Gust
- type: area
position:
cx: -22
cy: 45
entity_index: 2
styles:
area:
font-size: 8em
font-weight: 700
text-anchor: middle
fill: var(--primary-text-color)
- type: state
position:
cx: -22
cy: 55
entity_index: 2
show:
uom: none
styles:
state:
font-size: 10em
font-weight: 700
text-anchor: middle
fill: var(--primary-text-color)
# --- Max Gust
- type: area
position:
cx: 122
cy: 45
entity_index: 3
styles:
area:
font-size: 8em
font-weight: 700
text-anchor: middle
fill: var(--primary-text-color)
- type: state
position:
cx: 122
cy: 55
entity_index: 3
show:
uom: none
styles:
state:
font-size: 10em
font-weight: 700
text-anchor: middle
fill: var(--primary-text-color)
Here is the template I use for the TopBar for the cards in the example
above:
ts-topbar:
template:
type: toolset
defaults:
- var-cx: 50
- var-cy: 50
- var-text: "Change Me"
- var-text-cx: 50
- var-font-size: 10em
- var-rectex-width: 100
- var-rectex-height: 100
toolset:
toolset: topbar
position:
cx: '[[var-cx]]'
cy: '[[var-cy]]'
tools:
- type: rectex
id: 0
position:
cx: 50
cy: 50
width: '[[var-rectex-width]]'
height: '[[var-rectex-height]]'
radius:
all: 0
styles:
rectex:
fill: var(--theme-sys-palette-secondary97)
- type: text
id: 1
position:
cx: '[[var-text-cx]]'
cy: 50
text: '[[var-text]]'
styles:
text:
font-size: '[[var-font-size]]'
font-weight: 700
text-anchor: start
fill: var(--theme-sys-palette-secondary70)
Happy New Year!
-James
—
Reply to this email directly, view it on GitHub
<#175 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AY6IKWCV52PUZWOM3O6NOFLYMJLHTAVCNFSM6AAAAAATIEMMZ2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZTGE4DOMRVHE>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Hey, Arthur! No problem at all, just be patient. I don't always have a lot of time to respond but I don't mind helping out. To begin, I just want to confirm you have set the entity to be an entity that exists in your HA instance. The example I provided is just generic text I used to keep the actual names of entities from my instance private. Make sure you have replaced For the segarc tool, your configuration could be problematic. A wind direction sensor will return a state between 0 and 360 but the scale in your config is set from 0 to 120. This means that more than 50% of the values reported by the sensor could be out of the scale. In the example I provided, the segarc was used to display wind speed, not direction. For wind speed, 0 to 120 would be a valid range. The configurations for the circslider and state tools look fine at first glance. Double-check your formatting (spacing/indention, etc.) to make sure it is correct. If your sensor is correct and you are still having issues, I would locate the sensor on the states tab in the developer tools. This will show you real-time states from your active sensors and you can make sure the state being reported is what you expect. I hope this helps! -James |
Hello James,
No problem when it takes some time. The sensor names are correct (Dutch
buitenradar)
Below is the full code of the card. Everything is correct now as far as I
can see. I am not quit satisfied with the background image (N-O-Z-W) , not
clean/sharp enough. The only thing I want is that the needle points to the
right direction. (like in the custom: compass-card) For this card it sticks
on North. f.y.i. the card is made with the position of our house in mind.
In a later stadium I would like to add the position of the sun.
[image: afbeelding.png]
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
# Windrichting en snelheid
- type: custom:swiss-army-knife-card
aspectratio: 1/1
disable_card: false
entities:
- entity: sensor.wind_speed
# Index ID = 0
decimals: 1
icon: mdi:windsock
area: 'Windsnelheid'
- entity: sensor.wind_direction
# Index ID = 1
area: 'Windrichting'
layout:
styles:
card:
toolsets:
filter: url(#nm-1)
toolsets:
# Titlebalk
- toolset: titlebar
position:
cx: 50
cy: 50
tools:
- type: rectex
id: 0
position:
cx: 0
cy: 0
width: 200
height: 20
radius:
all: 0
styles:
rectex:
fill: var(--primary-background-color)
- type: text
id: 1
position:
cx: 5
cy: 5
text: 'Windrichting/snelheid'
styles:
text:
font-size: 7em
font-weight: 400
text-anchor: start
fill: var(--primary-text-color)
- type: icon
id: 2
position:
cx: 95
cy: 5
align: center
icon_size: 10
entity_index: 0
styles:
icon:
fill: var(--primary-text-color)
opacity: 0.7
# Circle
- toolset: backgroud-circle
position:
cx: 50
cy: 50
tools:
- type: 'circle'
id: 0
position:
cx: 50
cy: 55
radius: 44
styles:
circle:
opacity: 1
fill: var(--primary-background-color)
- toolset: background-image
position:
cx: 50
cy: 55
tools:
- type: 'usersvg'
id: 2
position:
cx: 50
cy: 50
height: 92
width: 92
style: 'images'
images:
# Dark theme background image
#- default:
/local/images/backgrounds/compass_edit_200px_dark-theme.png
# Light theme background image
- default:
/local/images/backgrounds/compass_edit_200px_light-theme.png
# Wind Speed & Direction Guage Set
- toolset: wind_speed
position:
cx: 50
cy: 50
tools:
# Windsnelheid (gauge)
- type: segarc
position:
cx: 50
cy: 55
start_angle: -135
end_angle: 225
width: 4
radius: 28
entity_index: 0
scale:
min: 0
max: 120
offset: 2
show:
scale: true
style: colorstops
segments:
colorstops:
gap: 0
colors:
0: '#C2C2C0'
1: '#27CD3E'
40: '#FFC300'
75: '#F49E29'
100: '#CA1021'
styles:
foreground:
fill: var(--theme-gradient-color-01)
opacity: 1
background:
fill: var(--cs-theme-default-darken-15)
filter: url(#is-1)
opacity: 0.2
# Windrichting Gauge
- type: circslider
position:
cx: 50
cy: 55
start_angle: -135
end_angle: 225
radius: 28
thumb:
width: 1.5
height: 9
radius: 1
entity_index: 1
show:
uom: none
scale:
min: 0
max: 360
step: 1
styles:
circslider:
stroke: none
pointer-events: none
active:
stroke: none
pointer-events: none
track:
stroke: none
pointer-events: none
thumb:
fill: '#0000AE'
fill-opacity: 0.9
pointer-events: none
capture:
fill: '#FFC300'
fill-opacity: 0
pointer-events: none
# Windsnelheid in KM/H
- type: state
position:
cx: 50
cy: 60
entity_index: 0
show:
uom: bottom
styles:
state:
font-size: 10em
font-weight: 400
text-anchor: middle
fill: var(--primary-text-color)
uom:
font-weight: 500
fill: var(--primary-text-color)
# Windrichting (Cardinal)
- type: state
position:
cx: 50
cy: 55
entity_index: 1
derived_entity:
state: |
[[[
const DIRECTION = ["N", "NNO", "NO", "ONO", "O",
"OZO", "ZO", "ZZO", "Z", "ZZW", "ZW", "WZW", "W", "WNW", "NW", "NNW", ];
const dir = Math.floor((state / 22.5) + .5);
return DIRECTION[(dir % 16)];
]]]
show:
uom: none
styles:
state:
font-size: 10em
font-weight: 400
text-anchor: middle
fill: var(--primary-text-color)
# Windrichting in tekst
- type: state
position:
cx: 50
cy: 45
entity_index: 1
styles:
state:
font-size: 10em
font-weight: 400
text-anchor: middle
fill: var(--primary-text-color)
…On Wed, Jan 3, 2024 at 7:44 PM James Wood ***@***.***> wrote:
Hey, Arthur! No problem at all, just be patient. I don't always have a lot
of time to respond but I don't mind helping out.
To begin, I just want to confirm you have set the entity to be an entity
that exists in your HA instance. The example I provided is just generic
text I used to keep the actual names of entities from my instance private.
Make sure you have replaced
- entity: sensor.wind_direction
with an actual sensor that exists in your HA instance. (I have an Ambient
Weather station connected to my HA instance via local API.)
For the segarc tool, your configuration could be problematic. A wind
direction sensor will return a state between 0 and 360 but the scale in
your config is set from 0 to 120. This means that more than 50% of the
values reported by the sensor could be out of the scale. In the example I
provided, the segarc was used to display wind speed, not direction. For
wind speed, 0 to 120 would be a valid range.
The configurations for the circslider and state tools look fine at first
glance. Double-check your formatting (spacing/indention, etc.) to make sure
it is correct.
If your sensor is correct and you are still having issues, I would locate
the sensor on the states tab in the developer tools. This will show you
real-time states from your active sensors and you can make sure the state
being reported is what you expect.
I hope this helps!
-James
—
Reply to this email directly, view it on GitHub
<#175 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AY6IKWGANYB5MZRED3VTE63YMWRKLAVCNFSM6AAAAAATIEMMZ2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZVHAYDQOBQHA>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Hello James,
I got it working, thanks for you assistance. Below the code and the result.
Had to add a extra entity that gives the wind direction in degrees.
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
# Windrichting en snelheid
- type: custom:swiss-army-knife-card
entities:
- entity: sensor.wind_speed
# Index ID = 0
decimals: 1
#icon: mdi:windsock
icon: mdi:selection-ellipse-arrow-inside
area: 'Windsnelheid'
- entity: sensor.wind_direction
# Index ID = 1
area: 'Windrichting'
- entity: sensor.openweathermap_wind_bearing
# Index ID = 2
area: 'Windrichting'
decimals: 1
unit: '°'
aspectratio: 1/1
disable_card: false
layout:
styles:
card:
toolsets:
# Titlebalk
- toolset: titlebar
position:
cx: 50
cy: 50
tools:
- type: text
id: 1
position:
cx: 5
cy: 5
text: 'Windrichting/snelheid'
styles:
text:
font-size: 6em
font-weight: 400
text-anchor: start
fill: var(--primary-text-color)
- type: icon
id: 2
position:
cx: 95
cy: 5
align: center
icon_size: 6
entity_index: 0
styles:
icon:
fill: var(--primary-text-color)
opacity: 0.9
# Background_outer-circle
- toolset: backgroud_outer-circle
position:
cx: 50
cy: 50
tools:
- type: 'circle'
id: 0
position:
cx: 50
cy: 55
radius: 38.5
styles:
circle:
opacity: 0.7
fill: '#C3C3C3'
filter: url(#nm-1)
# Background_inner-circle
- toolset: backgroud_inner-circle
position:
cx: 50
cy: 50
tools:
- type: 'circle'
id: 0
position:
cx: 50
cy: 55
radius: 29
styles:
circle:
opacity: 1
fill: var(--primary-background-color)
# Background-image
- toolset: background-image
position:
cx: 50
cy: 55
tools:
- type: 'usersvg'
id: 2
position:
cx: 50
cy: 50
height: 78
width: 78
style: 'images'
images:
- default:
/local/images/backgrounds/compass_north_225.svg
# WindSnelheid
- toolset: wind_speed_direction
position:
cx: 50
cy: 50
tools:
# Windsnelheid (gauge)
- type: segarc
position:
cx: 50
cy: 55
start_angle: -135
end_angle: 225
width: 2
radius: 28.15
entity_index: 0
scale:
min: 0
max: 120
offset: 1.5
show:
scale: true
style: colorstops
segments:
colorstops:
gap: 0
colors:
0: '#C2C2C0'
1: '#27CD3E'
40: '#FFC300'
75: '#F49E29'
100: '#CA1021'
styles:
foreground:
fill: var(--theme-gradient-color-01)
opacity: 1
background:
fill: var(--cs-theme-default-darken-15)
filter: url(#is-1)
opacity: 0.2
# Windsnelheid KM/H (in cirkel)
- type: state
position:
cx: 50
cy: 60
entity_index: 0
show:
uom: bottom
styles:
state:
font-size: 9em
font-weight: 400
text-anchor: middle
fill: var(--primary-text-color)
uom:
font-weight: 500
fill: var(--primary-text-color)
# Windrichting tekst (in cirkel)
- type: state
position:
cx: 50
cy: 45
entity_index: 1
styles:
state:
font-size: 9em
font-weight: 400
text-anchor: middle
fill: var(--primary-text-color)
- type: circslider
position:
cx: 50.01
cy: 50.01
start_angle: -141
end_angle: 219
radius: 30
thumb:
width: 1.25
height: 9
radius: 0.5
# Extra option for tumb - don't no why I need this
but it is working for now.
label:
placement: 'position'
cx: 80
cy: 95
entity_index: 2
show:
uom: none
scale:
min: 1
max: 360
step: 0.1
styles:
circslider:
stroke: none
active:
stroke: none
track:
stroke: none
thumb:
fill: '#8C8C8C'
fill-opacity: 0.9
stroke: "#CA04FB"
stroke-width: 0.75
pointer-events: none
capture:
fill: '#FFC300'
fill-opacity: 0
uom:
font-weight: 400
On Fri, Jan 5, 2024 at 2:10 PM Arthur en Imelda van Egmond <
***@***.***> wrote:
… Hello James,
No problem when it takes some time. The sensor names are correct (Dutch
buitenradar)
Below is the full code of the card. Everything is correct now as far as I
can see. I am not quit satisfied with the background image (N-O-Z-W) , not
clean/sharp enough. The only thing I want is that the needle points to the
right direction. (like in the custom: compass-card) For this card it sticks
on North. f.y.i. the card is made with the position of our house in mind.
In a later stadium I would like to add the position of the sun.
[image: afbeelding.png]
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
# Windrichting en snelheid
- type: custom:swiss-army-knife-card
aspectratio: 1/1
disable_card: false
entities:
- entity: sensor.wind_speed
# Index ID = 0
decimals: 1
icon: mdi:windsock
area: 'Windsnelheid'
- entity: sensor.wind_direction
# Index ID = 1
area: 'Windrichting'
layout:
styles:
card:
toolsets:
filter: url(#nm-1)
toolsets:
# Titlebalk
- toolset: titlebar
position:
cx: 50
cy: 50
tools:
- type: rectex
id: 0
position:
cx: 0
cy: 0
width: 200
height: 20
radius:
all: 0
styles:
rectex:
fill: var(--primary-background-color)
- type: text
id: 1
position:
cx: 5
cy: 5
text: 'Windrichting/snelheid'
styles:
text:
font-size: 7em
font-weight: 400
text-anchor: start
fill: var(--primary-text-color)
- type: icon
id: 2
position:
cx: 95
cy: 5
align: center
icon_size: 10
entity_index: 0
styles:
icon:
fill: var(--primary-text-color)
opacity: 0.7
# Circle
- toolset: backgroud-circle
position:
cx: 50
cy: 50
tools:
- type: 'circle'
id: 0
position:
cx: 50
cy: 55
radius: 44
styles:
circle:
opacity: 1
fill: var(--primary-background-color)
- toolset: background-image
position:
cx: 50
cy: 55
tools:
- type: 'usersvg'
id: 2
position:
cx: 50
cy: 50
height: 92
width: 92
style: 'images'
images:
# Dark theme background image
#- default:
/local/images/backgrounds/compass_edit_200px_dark-theme.png
# Light theme background image
- default:
/local/images/backgrounds/compass_edit_200px_light-theme.png
# Wind Speed & Direction Guage Set
- toolset: wind_speed
position:
cx: 50
cy: 50
tools:
# Windsnelheid (gauge)
- type: segarc
position:
cx: 50
cy: 55
start_angle: -135
end_angle: 225
width: 4
radius: 28
entity_index: 0
scale:
min: 0
max: 120
offset: 2
show:
scale: true
style: colorstops
segments:
colorstops:
gap: 0
colors:
0: '#C2C2C0'
1: '#27CD3E'
40: '#FFC300'
75: '#F49E29'
100: '#CA1021'
styles:
foreground:
fill: var(--theme-gradient-color-01)
opacity: 1
background:
fill: var(--cs-theme-default-darken-15)
filter: url(#is-1)
opacity: 0.2
# Windrichting Gauge
- type: circslider
position:
cx: 50
cy: 55
start_angle: -135
end_angle: 225
radius: 28
thumb:
width: 1.5
height: 9
radius: 1
entity_index: 1
show:
uom: none
scale:
min: 0
max: 360
step: 1
styles:
circslider:
stroke: none
pointer-events: none
active:
stroke: none
pointer-events: none
track:
stroke: none
pointer-events: none
thumb:
fill: '#0000AE'
fill-opacity: 0.9
pointer-events: none
capture:
fill: '#FFC300'
fill-opacity: 0
pointer-events: none
# Windsnelheid in KM/H
- type: state
position:
cx: 50
cy: 60
entity_index: 0
show:
uom: bottom
styles:
state:
font-size: 10em
font-weight: 400
text-anchor: middle
fill: var(--primary-text-color)
uom:
font-weight: 500
fill: var(--primary-text-color)
# Windrichting (Cardinal)
- type: state
position:
cx: 50
cy: 55
entity_index: 1
derived_entity:
state: |
[[[
const DIRECTION = ["N", "NNO", "NO", "ONO", "O",
"OZO", "ZO", "ZZO", "Z", "ZZW", "ZW", "WZW", "W", "WNW", "NW", "NNW", ];
const dir = Math.floor((state / 22.5) + .5);
return DIRECTION[(dir % 16)];
]]]
show:
uom: none
styles:
state:
font-size: 10em
font-weight: 400
text-anchor: middle
fill: var(--primary-text-color)
# Windrichting in tekst
- type: state
position:
cx: 50
cy: 45
entity_index: 1
styles:
state:
font-size: 10em
font-weight: 400
text-anchor: middle
fill: var(--primary-text-color)
On Wed, Jan 3, 2024 at 7:44 PM James Wood ***@***.***>
wrote:
> Hey, Arthur! No problem at all, just be patient. I don't always have a
> lot of time to respond but I don't mind helping out.
>
> To begin, I just want to confirm you have set the entity to be an entity
> that exists in your HA instance. The example I provided is just generic
> text I used to keep the actual names of entities from my instance private.
> Make sure you have replaced
> - entity: sensor.wind_direction
> with an actual sensor that exists in your HA instance. (I have an Ambient
> Weather station connected to my HA instance via local API.)
>
> For the segarc tool, your configuration could be problematic. A wind
> direction sensor will return a state between 0 and 360 but the scale in
> your config is set from 0 to 120. This means that more than 50% of the
> values reported by the sensor could be out of the scale. In the example I
> provided, the segarc was used to display wind speed, not direction. For
> wind speed, 0 to 120 would be a valid range.
>
> The configurations for the circslider and state tools look fine at first
> glance. Double-check your formatting (spacing/indention, etc.) to make sure
> it is correct.
>
> If your sensor is correct and you are still having issues, I would locate
> the sensor on the states tab in the developer tools. This will show you
> real-time states from your active sensors and you can make sure the state
> being reported is what you expect.
>
> I hope this helps!
>
> -James
>
> —
> Reply to this email directly, view it on GitHub
> <#175 (comment)>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AY6IKWGANYB5MZRED3VTE63YMWRKLAVCNFSM6AAAAAATIEMMZ2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZVHAYDQOBQHA>
> .
> You are receiving this because you were mentioned.Message ID:
> ***@***.***>
>
|
That's great, Art! Good Job! |
The Problem To Be Solved
I have spent the last couple days looking for how to do this and haven't been successful. I'm looking for a way to have the SEGARC tool indicate the current value only and not fill the arc from the min value to the current value.
Additional background:
An example of this use case would be a wind direction indicator. Have the SEGARC tool indicate just the current value that would correspond to the current wind heading. For a sensor value of 45 the indicator would just position itself at the 45 degree position on the arc.
Related Issues (if any)
(Optional): Suggested Solution
One solution could be to only fill the portion of the SEGARC corresponding to the actual sensor value + and - 2. For example, a sensor value of 45 would cause the arc to fill from 43 to 47.
Another solution could be to position a filled circle/polygon along the SEGARC centered on the sensor value.
Here is a picture of what I'm thinking of. This is from the LCD display that came with my weather station.
(Optional): Alternative Solutions
The text was updated successfully, but these errors were encountered: