Attributes do not have units of measurement in home assistant, so no unit is shown. you can however add units to your yaml yourself.
Like this
- sensor: sun.sun
attribute: azimuth
units: °
indicator:
type: circle
Kudo’s to @tom_l for the theme
You’ll need card-mod
The theme and the class added to the cards
And the background files
I noticed an interesting issue with the UI editor and the compass card.
I have the compass card in a horizontal stack in a vertical stack, like so:
When editing, if the focus moves from row 2, column 1 (compass card) to row 2 column 2 (UV index) it copies the compass card config over to column 2. This only happens with the visual editor open. If using the code view it does not occur.
Card config:
cards:
- cards:
- class: top-level-graph
color_thresholds:
- color: '#e45e65'
value: 30
- color: '#e0b400'
value: 20
- color: '#0da035'
value: 10
- color: '#039BE5'
value: -50
color_thresholds_transition: hard
entities:
- entity: sensor.bom_hobart_wind_speed_kt
group: false
hour24: true
line_width: 6
points_per_hour: 2
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
- class: top-level-graph
color_thresholds:
- color: '#e45e65'
value: 30
- color: '#e0b400'
value: 20
- color: '#0da035'
value: 10
- color: '#039BE5'
value: -50
color_thresholds_transition: hard
entities:
- entity: sensor.bom_hobart_wind_gust_kt
group: false
hour24: true
line_width: 6
points_per_hour: 2
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
type: horizontal-stack
- cards:
- class: top-level-graph
type: 'custom:compass-card'
indicator_sensors:
- sensor: sensor.bom_hobart_wind_direction
indicator:
dynamic_style:
sensor: sensor.bom_hobart_wind_speed_kt
bands:
- from_value: 0
color: '#039BE5'
- from_value: 10
color: '#0da035'
- from_value: 20
color: '#e0b400'
- from_value: 30
color: '#e45e65'
value_sensors:
- sensor: sensor.bom_hobart_wind_speed_kt
compass:
north:
show: true
header:
title:
value: Wind Direction
style: 'ha-card { height: 100%; }'
- class: top-level-graph
color_thresholds:
- color: '#ae5ee4'
value: 10.5
- color: '#e45e65'
value: 7.5
- color: '#e0b400'
value: 5.5
- color: '#0da035'
value: 2.5
- color: '#039BE5'
value: 0
color_thresholds_transition: hard
entities:
- entity: sensor.uv_index
group: false
hour24: true
hours_to_show: 24
line_width: 6
points_per_hour: 6
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
type: horizontal-stack
- cards:
- aggregate_func: max
class: top-level-graph
color_thresholds:
- color: '#e45e65'
value: 10
- color: '#e0b400'
value: 5
- color: '#0da035'
value: 2.5
- color: '#039BE5'
value: 0
color_thresholds_transition: hard
entities:
- sensor.bom_hobart_rain_today
group_by: date
hour24: true
hours_to_show: 168
name: Weekly Rainfall
show:
extrema: true
fill: fade
graph: bar
labels: false
smoothing: false
type: 'custom:mini-graph-card'
type: horizontal-stack
type: vertical-stack
Good find and a really strange one!
I’ll look into it, thanks for letting me know.
Hi Tom, I tried to reproduce this, (compass-card 1.0.0, home assistant 0.119.0.dev20201213, Frontend version: 20201212.0 - latest) and unfortunately do not get the same effect as you describe.
The cards all stay correct.
Could you verify with all latest versions this is still happening?
I just updated to 1.0 and the issue is no longer present.
Just started using this and it’s great.
One suggestion would be to add an option to place the unit of measure text below the value. And then add options to set the font size for each.
Glad you like it!
I’ll have a look if I can find a way to make those changes possible with configuration.
Would you be so kind to open a feature request on github, as I keep track there of these sorts of things.
Currently you should be able to do that with card-mod.
All ui objects should have unique classes to style them separately, with some css magic al your dreams can already come true.
However looking at your screenshot, you already found out about that.
Just found something that mabe needs a review.
I use bright theme for day and dark theme for night in HA. When theme changes, the font for the entity doesn’t reload, thus becomes barely unreadable. This requires manual reloading HA frontend, but would be nice is it could be triggered when the theme changes.
This needs a review for sure.
Thanks for bringing this to my attention. I’ll have a look on how to fix this, might take some time thou as the end of the year is a pretty busy one, and I think I’m going to need help to get this fixed.
hi there!
This is my first post as a newby with HA.
I really like the compass you created and installed it (manually).
the wind speed is working, but the direction keeps pointing north while the other card using the same direction entity is showing west. Can someone point me in the right direction?
I read in this threat that it could ben HACS related? do I need to install more files then just the compass-card.js?
I fixed it! At first I used the UI config, but when I did the config in the yaml, it worked!
next stop: getting from m/s to km/u
Welcome to the community!
Thanks!
I see in your second post you fixed it by using the yaml editor. Good thinking to try that, however I’ll check if something broke in my gui editor when using the last couple of versions of Home Assistant anyways. Thanks for getting this under my attention.
Pun intended?
No, as far as I’m aware this has nothing to do with HACS.
Just the compass-card.js file
Additional question, was the README clear enough on getting the card installed by hand?
You’ll need a template sensor to change units and assign that to the card to show km/h.
Edit: somehow managed to forget to reply to @fransverbiest
did it! thanks a lot.
Found the bug you stumbled upon.
Default entity for the indicator is sun.sun with attribute azimuth. When you select another entity from the list, the card does not clear the attribute. And the newly selected entity probably does not have an azimuth and thats why the indicator shows the default N.
Will fix this in an upcoming version.
Hey @tomvanswam, hi there.
Friendly reminder, Is there any progress and update about the font color on theme change?
Unfortunately not yet.
I’m not sure what causes this, as I’m not able to reproduce this.
Could you open an issue on the github page? Please add your config of the card, info on what themes you use?
This also helps me keeping this on my radar when I have a spare hour.
done with
Just stumbled upon this gem. Really liking this card, thank you!
