tomvanswam / compass-card Goto Github PK
View Code? Open in Web Editor NEWA Lovelace card that shows a directional indicator on a compass for Home Assistant
License: MIT License
A Lovelace card that shows a directional indicator on a compass for Home Assistant
License: MIT License
Checklist:
Release with the issue:
all
Last working release (if known):
i think all
Browser and Operating System:
Safari, iOS App on both iOS and macOS
Description of problem:
When I click on the compass it draws a grey box (screenshot attached) around it but unlike every other card, this does not support tap action nor hold action . Is this wanted behavior?
I wanted to add a radar graph showing the most common wind directions of the day when clicking on it, but i was not able to do it.
OT: I just noticed that your card is the only "custom" I have that shows up in the Lovelace GUI to add new cards: what a cool feature!! I love it!
Javascript errors shown in the web inspector (if applicable):
Additional information:
Is your feature request related to a problem? Please describe.
I would like to know, how I can create the sensor "sensor.friends_direction", that you mention in the example.
type: custom:compass-card
entity: sensor.friends_direction
secondary_entity: sensor.friends_distance
Describe the solution you'd like
Please provide an example of the sensor or template you use for this?
Describe alternatives you've considered
I've been trying already for days to get this work, and it drives me bonkers :-)
Additional context
NONE
Checklist:
Release with the issue:
1.2.0
Browser and Operating System:
Chrome/Win10
Description of problem:
E, S and W indicators visible by default
They should be hidden by default
Javascript errors shown in the web inspector (if applicable):
Additional information:
Checklist:
Release with the issue:
Last working release (if known):
Browser and Operating System:
Firefox and Home Assistant 2021.12.9
Description of problem:
Is it possible to change the color of the ENE writing?
this is my code:
type: custom:compass-card
indicator_sensors:
- sensor: sensor.meteo
attribute: wind_direction
indicator:
color: rgba(255,255,255,0.8)
value_sensors:
- sensor: sensor.meteo
attribute: wind_speed
compass:
language: it
circle:
color: rgba(255, 255, 255, 0.8)
north:
show: true
color: rgba(255, 255, 255, 0.8)
east:
show: true
color: rgba(255, 255, 255, 0.8)
west:
show: true
color: rgba(255, 255, 255, 0.8)
south:
show: true
color: rgba(255, 255, 255, 0.8)
Javascript errors shown in the web inspector (if applicable):
Additional information:
Is your feature request related to a problem? Please describe.
I am collecting wind speed from custom made wind station. I calculate wind direction inside the collection algorithm. It is displayed in HA with compass card but no translation language is working. I suspect bad value format.
Describe the solution you'd like
I wish to display wind direction in my language (Slovenian).
Describe alternatives you've considered
Well I need to know in what format must the wind direction entity be. Currently I store string value (W, S, E, N, SW, ...). Maybe it must be numeric (degrees)?.
Additional context
Here is the code that will calculate wind direction:
if(dirpin > 2.60 && dirpin < 2.70 ){
wd = "E";
}
if(dirpin > 1.60 && dirpin < 1.70 ){
wd = "SE";
}
if(dirpin > 0.30 && dirpin < 0.40 ){
wd = "N";
}
if(dirpin > 0.60 && dirpin < 0.70 ){
wd = "SW";
}
if(dirpin > 0.96 && dirpin < 1.06 ){
wd = "W";
}
if(dirpin > 2.10 && dirpin < 2.20 ){
wd = "NW";
}
if(dirpin > 3.15 && dirpin < 3.25 ){
wd = "N";
}
if(dirpin > 2.95 && dirpin < 3.05 ){
wd = "NE";
}
Assembled my weather station by this guide:
Hi i really like this compass. However i would love to see some history to get a better understanding of whats going on.
My idea here would be that the wind direction will be chopped into e.g. 10° parts and for each measurement that falls into that 10° part that area at the circle will get darker for example. Or i could imagine some kind of bar getting bigger at that position as well. Like drawing a line from the center to the outer circle that represents the distribution of that segment in the monitored timeframe.
Hi,
Thanks for your great job! I love your card.
Is it possible somehow to resize the circle/square to fit the same size of the card like the neighbor cards?
Thanks,
Szilard
Hi there,
I’m using the compass card for lightnings, add-on blitzortung.org and it works flawlessly. I have one little problem though, when there is no lightning activity (95% of the time) the add-on brings back “unknown” in the azimuth entity and compass card falls back to default azimuth 0°, north. Please find cause and effect in the picture attached. I've also attached my lovelace card if it's necessary to reproduce the case.
Since “unknown” is not an integer or float value, the band filter doesn’t show any effect. As a result many times I have zero lightning in north which is a bit annoying., but not really a problem => low prio enhancement.
I'd like if there was either a filter for "unknown" or a transformation into a negative number like -361 (one more degree than a full circle).
All the best, Andi
Hi there,
Thx for this card, I like it a lot!
Something is still not ok with the direction abbreviations. With v0.0.4 and 13°, I get abbreviation N where it should be NNE. See attachment
with further details.
Originally posted by @andilge in #8 (comment)
Using the card for the sun and moon. When hiding the sun object and state the abbreviation is still displayed (SW). This becomes confusing when the sun goes down since the moon object and state is still up and displaying.
- type: custom:compass-card
header:
title:
value: Sun and Moon
indicator_sensors:
- sensor: sun.sun
attribute: azimuth
indicator:
type: circle
color: orange
show: false
dynamic_style:
sensor: sun.sun
attribute: elevation
bands:
- from_value: 0
show: true
- sensor: sensor.moon_api
attribute: moon_azimuth
indicator:
type: circle
color: black
show: false
dynamic_style:
sensor: sensor.moon_api
attribute: moon_altitude
bands:
- from_value: 0
show: true
value_sensors:
- sensor: sun.sun
attribute: azimuth
units: °
state_value:
show: false
dynamic_style:
sensor: sun.sun
attribute: elevation
bands:
- from_value: 0
show: true
color: orange
- sensor: sensor.moon_api
attribute: moon_azimuth
units: °
state_value:
show: false
dynamic_style:
sensor: sensor.moon_api
attribute: moon_altitude
bands:
- from_value: 0
show: true
color: gray
compass:
circle:
color: '#4169E1'
background_opacity: null
north:
show: true
color: red
east:
show: true
west:
show: true
south:
show: true
Card is developed for HA 2022.2 and lower, and thus using the since HA 2022.3 deprecated paper style.
Card needs to be updated to Material Web Components style to make the pull down menu's working again.
See this related article in HA 2022.3 release notes
If you want to help out and add support for more languages to compass-card you can!
For the non git savvy:
:
)For the git savvy
src/localize/languages/en.json
:
)Currently supported
In the README.md is listed which languages are already supported.
Future development
When new translation values are added in the future, I might reach out to you and ask your help again, to help translating the new words.
Would be nice to be able to not show direction abbreviation.Maybe by choosing no language? Or add "none"?
Please consider to make the indictor object selectable using an icon or the sensors icon attribute.
This way the indicator can change with the sensors state like the suns or the moons state. And some parameter saying to hold the icon level or not, so the icon is not standing on its head when going around the compass.
What is the best way to send the language json files?
Hi Tom,
Nice to see you're making steps forward into multi language support. I can contribute Portuguese, please find it here
pt.json.txt
I can help out with French and Spanish as well. Ok if I follow up on this message attaching the files?
All the best, Andi
Checklist:
I updated to the latest version available
I just installed the card a few weeks ago.
I cleared the cache of my browser
done, even tried another browser.
Release with the issue:
Last working release (if known):
Browser and Operating System:
Chrome and Opera, Windows 10
Rather than retyping everything, please look at:
https://community.home-assistant.io/t/bug-editing-custom-compass-card/440836
Description of problem:
Javascript errors shown in the web inspector (if applicable):
Additional information:
https://community.home-assistant.io/t/bug-editing-custom-compass-card/440836
First off I want to say that this card is amazing!
But I have a suggestion for improvement: Is it possible to introduce a translation of the "directional letters" in the configuration? I'm from Germany and in German for example "east" means "Osten". So it would be great if I could change the letters NESW according to my language.
Maybe something like this:
- compass:
indicator: arrow_inward
show_north: true
direction_offset: 180
entity: sensor.wind_bearing
secondary_entity: sensor.wind_speed
name: Wind
translate:
north: N
east: O
south: S
west: W
type: 'custom:compass-card'
Is it possible to move the sensor value outside of the circle? When an image is embedded in the circle it can be hard to see the value. Changing the opacity helps a lot but I have found opacity needs to be adjusted widely for some themes.
This card is for me a very elegant solution to displaying wind speed and direction. I love it.
Checklist:
Release with the issue:
latest
Last working release (if known):
?
Browser and Operating System:
I was able to reproduce this in Windows 10 with Browser Chrome, Opera and Firefox and on Ubuntu 20 with Browser Chromium, Opera and Firefox
Description of problem:
I use Google Light and Dark Theme installed with HACS frm https://github.com/liri/lovelace-themes) and use an automation to set it on sunrise, sunset or home assitant atart according to sun above or below horizon. It appears that in all other cards the font color changes when the theme changes (service frontend.set_theme) but it won't change in the compass card. Reloading the page with F5 then corrects it and all sohws up nicely again.
Please find attached more dtails about the theme switcher, a lovelace card I use and 2 scrren shots on how it appears on my end.
automation theme switcher.yaml.txt
my lovelace card.yaml.txt
Hi,
I've read through the documentation and have the card working. However, I can't figure out if the following are possible:
Thanks!
Hi,
I've read through the documentation and have the card working. However, I can't figure out if the following are possible:
Thanks!
Thrilled that someone built a working compass!! I started to build a similar compass card a few weeks back, but didn't have time to dig into why it wasn't displaying properly.
A few suggestions:
I feel like the wind speed is the most important data—and actionable by the user—as opposed to the wind direction. I'd suggest allowing user specification of the larger data point in the ring, and have the direction smaller and somewhere else (after all the direction is already on the arrow on the ring).
Visually, I'd suggest adding a small N to the top of the ring to indicate North. Small detail, but ties this all together.
Here is a similar compass from Ambient Weather. I like that this can cleanly display optional data like maximum gust wind speed for the day.
Wind abbreviations
Today wind direction is using English "NW, SE" abbreviations. For some data sources, like Swedish Sjöfartsverket ViVa (https://github.com/patrickribbing/sjofartsverket_viva-component), wind direction is expressed in Swedish "NV, SO". It would be good to include this feature in general localization.
It would be nice to be able to template values like "value_sensors" and "bands: - from_value" and "show" etc..
If "bands: - from_value" only takes numbers a template could deliver a number from a binary sensor or other text states.
from_value: >
{% if is_state('device_tracker.paulus', 'home') %}
1
{% endif %}
HA Version 2021.1.5
Browser and Operating System:
All browsers on my debian/ubuntu installs
Description of problem:
Points north in any browser. Entering the same sensor for "secondary entity" shows the correct azimuth.
Sorry i can't seem to be able to attach screenshot.
Hi. I use compass-card and I like it. Great thnx for it development.
I use tap_action
to show more-info
of my wind speed sensor. It is very convenient.
I would also like to see more-info
of my wind direction sensor. It require once more action,
and can be implemented through double_tap_action
or, alternatively, through separate tap_action
for indicator sensor value.
Also, it would be nice for computer browsers, change mouse cursor style to hand
if tap_action
defined.
This will indicate that the card is tapable.
Thnx in advance )
Is your feature request related to a problem? Please describe.
No it is not related to a problem.
Describe the solution you'd like
It would be nice if the pointer colour was set by wind speed. e.g. Define set points and colours like so:
color_thresholds:
- color: '#e45e65'
value: 30
- color: '#e0b400'
value: 20
- color: '#0da035'
value: 10
- color: '#039BE5'
value: 0
Describe alternatives you've considered
Honestly, it's just a "nice to have". Would not be fussed it if was beyond scope or put way down the bottom of the to-do list.
Additional context
Great card! Thanks.
Hi Tom, I hope you started out well in 2022.
I wanted to set up a a wind compass using typical colors for the beaufort scale.
It appears color only accept strings, no hex codes, I wasn't able to set up the 12 colors as I wanted.
Is this me doing something wrong or could you please add support for hex colors? Here my unsuccessful lovalece yaml:
type: custom:compass-card
header:
title:
value: Wind
icon:
color: '#d4d4d4'
dynamic_style:
sensor: sensor.weatherbit_beaufort
bands:
- from_value: 1
color: '#cdfffe'
- from_value: 2
color: '#99ffcd'
- from_value: 3
color: '#99ff99'
- from_value: 4
color: '#98ff66'
- from_value: 5
color: '#9afe00'
- from_value: 6
color: '#ccff00'
- from_value: 7
color: '#ffff01'
- from_value: 8
color: '#ffcc00'
- from_value: 9
color: '#fe9900'
- from_value: 10'
color: '#ff6600'
- from_value: 11
color: '#ff3300'
- from_value: 12
color: '#fe0000'
Hi,
First thanks for a very usefull card. I have an issue with it when the wind direction is close to North, e.g. 351°. When the direction is in this region the wind direction abbrivation disapare rather than displaying North as it should do by the intension of the code. Direction 351° should give an index of 16 which should show N.
static getCompassAbbreviation(degrees: number, language: string | undefined): string {
const index = Math.round(CompassCard.positiveDegrees(degrees) / 22.5);
let string = 'N';
if (index > 15) {
string = COMPASS_ABBREVIATIONS[0];
}
I am not sure whats wrong, but it would be good if it could be fixed.
I am running v1.0 of the card and the fault was also present on the previous versions.
The degrees shown are ok but the wind direction (text) isn't. There is an offset needed of about 11!
The following table should be used if whole degrees are being used.
Is it possible to adjust the height of this card?
Currently it lengthens my other cards alongside and drops down to far.
Hello.
I would like to have a possibility to display detailed info(or do something else) by directly clicking on sensor values.
It would be very convenient when multiple sensors are displayed inside the circle.
Is your feature request related to a problem? Please describe.
I didn't manage to display the direction in degrees instead of something like SW.
All example images in https://github.com/tomvanswam/compass-card show the direction as SW, there's no example which shows the direction as degrees.
Describe the solution you'd like
I'd like to have an option to display the direction in degrees.
I didn't find any option to do so.
Checklist:
Release with the issue:
Last working release (if known):
Browser and Operating System:
Description of problem:
Compass is excceeding the borders of the card when placed inside horizontal stack
Javascript errors shown in the web inspector (if applicable):
Additional information:
Is your feature request related to a problem? Please describe.
No exactly a problem, but an enhancement.
Describe the solution you'd like
Rotate only the background image.
Describe alternatives you've considered
Rotate negatively the compass (but it gets a strange orientation).
Additional context
To get a similar maps orientation and a better comprehension of the solar/wind orientation related to the background image.
Is your feature request related to a problem? Please describe.
Used as a compass for a car, boat, or any moving vehicle.
Describe the solution you'd like
I would like to have a arrow pointing up, instead of the north, a north rotating, and if possible a second arrow pointing to the wind
Describe alternatives you've considered
I have tried to mess with the offset option, but couldn't make it work. Offset only allows values, not sensors, and I am neither sure if this would fix it.
Additional context
I have a wind direction sensor, a boat course, and a boat speed sensor, three sensors.
I would like to have it behave (Not look) like the two following:
Or if possible like this (arrow up, wind arrow, north rotating):
Checklist:
Release with the issue:
Last working release (if known):
0.2.0
Browser and Operating System:
Google Chrome - Linux
Ephipany - Linux
Description of problem:
When editing the card within the graphical interface, it loads all entities, while sensors should be enough. This brings browsers to an almost halt.
Javascript errors shown in the web inspector (if applicable):
Additional information:
I use the compass-card for wind direction.
When there is no wind, it is not useful to show a direction. So in the case the wind is zero I would like to supress the direction arrow, direction abbreviation and value indication. In short, I would like to display the (empty) circle only.
Is that possible?
Checklist:
Release with the issue:
2.1
Last working release (if known):
0.0.5
Browser and Operating System:
safari macOs and iOS app
Description of problem:
The title does not follow the theme anymore (please see the "Vento" title WRT the "raffiche" title), I guess after version 0.1.0 included (but I'm not sure, haven't checked). I have all the titles in gray, only this one has changed.
Has something changed?
I have updated the theme "google light theme" to the latest version in the meantime, but this is the only card that has issues.
Screenshot of actual situation
Screenshot from my "netatmo issue" on 0.0.5
Javascript errors shown in the web inspector (if applicable):
Additional information:
Checklist:
Release with the issue:
v1.3.0
Last working release (if known):
Browser and Operating System:
Chrome + HA OS
Description of problem:
https://github.com/tomvanswam/compass-card/blob/master/src/localize/languages/ru.json#L41
"ESE": "ВСВ"
- Correct value: "ESE": "ВЮВ"
due South - Юг.
Javascript errors shown in the web inspector (if applicable):
Additional information:
Checklist:
Release with the issue:
v1.0.0-dev
Last working release (if known):
?
Browser and Operating System:
?
Description of problem:
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
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.
Javascript errors shown in the web inspector (if applicable):
Additional information:
See forum post
Checklist:
Release with the issue:
not relevant
Last working release (if known):
Browser and Operating System:
safari,chrome, homeassistant app, MacOs
Description of problem:
I have a Netatmo wind sensor, but the default HA integration provides the information with both text and degrees, for example like W (240°)
, as shown in picture.
I think that there's a problem for the compass-card to parse this kind of information as, I assume, it expects just one of the two information and not both.
As you can see, it does not crash or anything, but obviously the arrow does not point in the correct direction!
For reference, this is the code that generates this card:cards:
- detail: 2
entity: sensor.netatmo_jori_palace_anemogio_gust_strength
graph: line
name: Raffiche
type: sensor
- direction_offset: 0
entity: sensor.netatmo_jori_palace_anemogio_angle
name: Vento
type: 'custom:compass-card'
secondary_entity: sensor.netatmo_jori_palace_anemogio_wind_strength
type: horizontal-stack
I'm not fluent in javascript nor python, but i think that the problem could just be that the code just checks if the value given is NaN and does not search for a number in the string, to be parsed.
Javascript errors shown in the web inspector (if applicable):
Additional information:
If needed, I can do some testing.
Is your feature request related to a problem? Please describe.
Localization mechanism is very latin, it doesn't work for languages with another word order.
Line 106 in 1bcfdc3
Describe the solution you'd like
Labels should not be constructed using the set of words, they should be defined as a phrase.
Describe alternatives you've considered
Leave as it is and use only English.
Is your feature request related to a problem? Please describe.
The new tap_action "url" opens the URL in the same tab/window.
Describe the solution you'd like
It would be great to add possibility to open URL in a new tab/window, keeping HA still open in th original tab/window.
Describe alternatives you've considered
Use of the medium mouse button to open URL in a new tab could be the best option, but it does not work in HA.
I am using the card on my Lovelace dashboard and am very pleased with it and its current customizations. There are two things that would enhance my layout if you ever have time to consider it.
First, I would like to be able to control the size of the indicator icon somewhat. In my case where it is a wind direction indicator, it would be a bit better if it were larger. Second, I would like to be able to move the direction text (e.g., "SE 135") below the wind speed text.
Here is my Lovelace code:
type: custom:compass-card
header:
title:
value: Wind
indicator_sensors:
- sensor: sensor.openweathermap_wind_bearing
indicator:
type: arrow_inward
state_value:
show: true
state_units:
show: true
value_sensors:
- sensor: sensor.wind_speed_mph
compass:
north:
show: true
Note that I did a value template to convert the openweathermap_wind_speed from m/s to the "uncouth" MPH.
Checklist:
Release with the issue:
Last working release (if known):
Browser and Operating System:
Description of problem:
Comapss size is excceeding the borders when placed inside horizontal stack.
Javascript errors shown in the web inspector (if applicable):
Additional information:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.