Compass Card - Points you in the right direction 🧭

Darn. Thanks for the quick reply.

I’m having trouble finding card background images. Curious if your using anything similar or can point me in a direction for this?

Google image search?

It’s off topic here, better if you start a new topic in the Configuration / Frontend category asking for suggestions.

1 Like

Hello,

I’m looking to put the state of a sensor in the header. Is that possible?
This should show when happened the last update. I can put it in whatever corner but I’m not able to do it.

header:
  title:
    value: '{{ states(''sensor.aktivo_last_measure'') }}'
  icon:
    show: false

IMG-20220513-WA0015

Only if you use this:

1 Like

No that is not possible by default.

However the post of @tom_l will help out to make it the way you’d like.

Thanks @tom_l, for the exellent suggestion, I did not know of this project.

Guys, thank you for the help. I’m just beginning in this kind of work and after many test, I found a tricky way to do it! :laughing:
I put the sensor normally, activated the header just with a black dot and moved the result with the style command to the top!

type: custom:compass-card
style: |
  .sensor-0 {
    line-height: 12px;
  }    
  .sensor-0 .measurement {
    font-size: 12px !important; 
  } 
  .sensor-0 .value {
    font-size: 18px !important; 
  } 
  .sensor-2 .value {
    font-size: 13px !important; 
    position: absolute;
    top: -105px;
    left: -62px;
  } 
indicator_sensors:
  - sensor: sensor.aktivo_wind_direction
    indicator:
      type: arrow_inward
value_sensors:
  - sensor: sensor.aktivo_wind_gust
    state_value:
      color: red
  - sensor: sensor.aktivo_wind_speed
  - sensor: sensor.aktivo_last_measure
compass:
  east:
    show: true
  west:
    show: true
  south:
    show: true
  north:
    show: true
    color: red
header:
  title:
    value: .
    color: black
  icon:
    show: false

I didn’t find how to use the templatable lovelace card :man_shrugging:Capture d’écran 2022-05-13 à 19.03.24

Well thought of solution!
But I guess you do need card-mod for that, or is the style key a Home Assistant native function?

Great card!
I tried to adjust the offset based on a sensor value, but it seems to not accept it. Am I doing something wrong, or is it simply not possible to have a “dynamic” offset?

1 Like

The dynamic offset is in the workings, however due to unforseen personal circumstances it will take some time for me to address this feature.

Hi. I have a wind sensor from swedish Sjöfartsverket ViVa HACS integration. It presents the wind direction in swedish abbreviations like “NV”, not “NW”. How can I get correct wind direction in Compass card?
Thanks!

Unfortunately the written wind direction needs to be in English at the moment for the card to work properly.

You can open a feature request issue at the GitHub page for me to try to add it in a future release.

I see, thanks. I for sure can do that.

you can probably create a sensor template to match each non english abbreviations with the english ones

I’ve installed Compass in my Home Assistant dashboard, but for some reason setting the language to Dutch doesn’t work:

To my understanding ‘E’ should be ‘O’ for ‘oost’ in Dutch, but still the ‘E’ for ‘east’ is showing. Am I doing something wrong? This is my configuration:

type: custom:compass-card
indicator_sensors:
  - sensor: sensor.windrichting_graden
    indicator:
      type: arrow_inward
value_sensors:
  - sensor: sensor.windsnelheid
compass:
  language: nl

I thnik language goes directly under type and not indented under compass.
so like this:

type: custom:compass-card
indicator_sensors:
  - sensor: sensor.windrichting_graden
    indicator:
      type: arrow_inward
value_sensors:
  - sensor: sensor.windsnelheid
language: nl
1 Like

Yes, that works!

Thanks!

I would love to replicate this dashboard. Specifically, the small cards that show min/max/current/history
What cards are used? With what sensors? and what config?

Much appreciated

It’s just these in vertical and horizontal stacks (grid card did not exist when I made it but that would work too):

type: custom:mini-graph-card
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.hobart_wind_speed_knot
group: false
hour24: true
line_width: 4
points_per_hour: 6
show:
  extrema: true
  fill: fade
  icon: true
  labels: false
  name: true
  state: true

Is it possible to somehow add the moon as the 2nd circle to show it’s position and phase? The default moon integration doesn’t contain the azimuth data so I’m guessing I’d have to set up a separate sensor for it.

A second circle is certainly possible. However you’ll need a sensor for that as you said, and I’m not aware of one.

Configure the card something like this for 2 circles.

type: custom:compass-card
header:
  title:
    value: Sun
indicator_sensors:
  - sensor: sun.sun
    attribute: azimuth
    indicator:
      type: circle
  - sensor: sensor.moon_azimuth
    indicator:
      type: circle
value_sensors:
  - sensor: sun.sun
    attribute: elevation