Hi,

I've read through the documentation and have the card working. However, I can't figure out if the following are possible:

1. Change the colors of the arrow
2. Change the thickness of the circle (make it a bit more bold)
3. Make the compass larger (multiplier for the default size)

Thanks!

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
1.2.0

Last working release (if known):

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:

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'

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.

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.

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

Is it possible to adjust the height of this card?
Currently it lengthens my other cards alongside and drops down to far.

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:

• I updated to the latest version available
• I cleared the cache of my browser

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:

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.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

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:

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 )

What about the possibility to have a second compass ring for the 2nd sensor?

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.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

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:

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.

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.

• N value <=11
• NNE 11 < value <=33
• NE 33 < value <=56
• ENE 56 < value <=78
• E 78 < value <=101
• ESE 101 < value <=123
• SE 123 < value <=146
• SSE 146 < value <=168
• S 168 < value <=191
• SSW 191 < value <=213
• SW 213 < value <=236
• WSW 236 < value <=258
• W 258 < value <=281
• WNW 281 < value <=303
• NW 303 < value <=326
• NNW 326 < value <=348
• N 348 < value

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 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.

If you want to help out and add support for more languages to compass-card you can!

For the non git savvy:

• Download the latest english translation file
• Rename it and use the 2 letter language code for your language for the new filename
• Translate all the values (the part on each line after the semicolumn (:)
• Post a reply in this issue, and attach the updated file
• Wait till include it in the source and release it

For the git savvy

• Fork this repository
• Checkout the dev branch
• Copy the src/localize/languages/en.json
• Paste and rename it in the same folder
  • Use the 2 letter language code for your language for the new filename
• Translate all the values (the part on each line after the semicolumn (:)
• Commit the changes
• Create a pull request to the dev branch of this repository
• Wait till I merge and release it

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.

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.

Checklist:

• [x ] I updated to the latest version available
• [ x] I cleared the cache of my browser

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:

Hi,

I've read through the documentation and have the card working. However, I can't figure out if the following are possible:

1. Change the colors of the arrow
2. Change the thickness of the circle (make it a bit more bold)
3. Make the compass larger (multiplier for the default size)

Thanks!

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

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.

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.

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)

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.

Is your feature request related to a problem? Please describe.
No exactly a problem, but an enhancement.

Describe the solution you'd like
Change the aspect (grey, wireframe, hide, ...) of the sun after the sunset.

Additional context
Like the below integration, after the sunset, the sun is hidden.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

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!

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.

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

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):

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.

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.

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

lovelace card.txt

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:

https://tysonpower.de/blog/esp8266-weather-station

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 cleared the cache of my browser

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:

Would be nice to be able to not show direction abbreviation.Maybe by choosing no language? Or add "none"?

If windspeed is 0 invalid is shown

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:

• I updated to the latest version available
• I cleared the cache of my browser

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:

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.

1. When state is hidden the abbreviation should also be hidden for that sensor.
2. The abbreviation value does not get the same color as the state value for a sensor. When more than one sensor this gets confusing.

->

  - 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

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.

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.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

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

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 %}

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

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:

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

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

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.

Nice card!

Please make the card take attributes as values.
This way the user don’t need to create additional template sensors for using the card.