Compass card

A custom Lovelace card that displays an indicator in a circle for use with Home Assistant.

Installation

HACS (Home Assistant Community Store)

1. Go to HACS page on your Home Assistant instance
2. Select Frontend
3. Press add icon and search for compass
4. Select Compass Card repo and install
5. Force refresh the Home Assistant page (Ctrl + F5)
6. Add compass-card to your page

Manual

1. Download the 'compass-card.js' from the latest release (with right click, save link as)
2. Place the downloaded file on your Home Assistant machine in the config/www folder (when there is no www folder in the folder where your configuration.yaml file is, create it and place the file there)
3. In Home Assistant go to Configuration->Lovelace Dashboards->Resources (When there is no resources tag on the Lovelace Dashboard page, enable advanced mode in your account settings, rand retry this step)
4. Add a new resource
   1. Url = /local/compass-card.js
   2. Resource type = module
5. Force refresh the Home Assistant page (Ctrl + F5)
6. Add compass-card to your page

Using the card

• Add the card with the visual editor

• Or add the card manually with the following configuration:

  type: custom:compass-card
  entity: sensor.wind_dir
  secondary_entity: sensor.wind_speed

Lovelace Examples

Default

type: custom:compass-card
entity: sensor.friends_direction
secondary_entity: sensor.friends_distance

Compass indicator arrow_inward

type: custom:compass-card
entity: sensor.wind_dir
secondary_entity: sensor.wind_speed
compass:
  indicator: arrow_inward

Compass indicator circle

type: custom:compass-card
entity: sun.azimuth
secondary_entity: sun.elevation
compass:
  indicator: circle

Compass north indicator and direction_offset

Left image yaml:

type: custom:compass-card
entity: sun.azimuth
secondary_entity: sun.elevation
compass:
  indicator: circle
  show_north: true

Right image yaml:

type: custom:compass-card
entity: sun.azimuth
secondary_entity: sun.elevation
direction_offset: 15
compass:
  indicator: circle
  show_north: true

Options

Name	Type	Requirement	Default	Supported	Visual Config	Description
type	string	Required	custom:compass-card	v0.0.1
name	string	Optional		v0.0.1	✓	Card header
entity	sensor	Required	none	v0.0.1	✓	Entity that is used to draw the indicator in the compass. Valid entity states are: number - (positive and/or negative, multiples of 360 are removed). string - only Cardinal directions in English (e.g. E of WSW) string - any string with numbers in it will use the numbers as direction for both indicator and display value (e.g. E (90.4) parsed to 90.4) Indicator direction is full range (not only the 16 cardinal directions)
secondary_entity	sensor	Optional	none	v0.0.1	✓	Entity to show under the direction in compass
direction_offset	number	Optional	0	v0.0.1	✓	Value to offset the indicator display with. (E.g. to create a relative north)
compass	compass object	Optional		v0.1.0	→	Compass properties

Compass Object

Name	Type	Requirement	Default	Supported	Visual Config	Description
indicator	list item	Optional	arrow_outward	v0.1.0	✓	Type of indicator to display in compass following indicators are possible: arrow_outward arrow_inward circle
show_north	boolean	Optional	false	v0.2.0	✓	Show an indicator at the northern side of the compass
language	language	Optional		v0.3.0	✓	Show the abbreviation in the language configured in Home Assistant (default/empty), or configured language

Language

The following languages are supported:

Language	Yaml value	Supported	Translated by
Dutch	nl	v0.3.0	@tomvanswam
English	en	v0.3.0	@tomvanswam
French	fr	v0.3.1	@andilge
German	de	v0.3.0	@rainer-geiger
Italian	it	v0.3.0	@matteofranceschini
Norwegian	no	v0.3.1	@hwikene
Portugese	pt	v0.3.1	@andilge
Polish	pl	v0.3.2	@porebas
Spanish	es	v0.3.1	@andilge

Pick the language in the visual editor, or add it to yaml config.

Example for Portugese abbreviations (regardless of Home Assistant language setting):

type: custom:compass-card
entity: sensor.friends_direction
secondary_entity: sensor.friends_distance
compass:
  language: pt

Wish/Todo list

• Additional entities to show on circle
• Background image
• Hide indicator in certain directions (to use the card to display the sun or moon's movement)
• Css options to change look & feel
• Cleanup unused boilerplate code

Contact

You can find me on the Home Assistant Community Site
And occasionally on the HACS and Home Assistant Discord

Thanks to

• @rsnodgrass for wind-compass-card, which gave me the idea to make this
• @iantrich for the boiler-plate card, which got me started
• @xixao for wind speed/direction css
• All the translators

Support

Help me out for a couple of 🍻, a ☕ or legos!
Or clone, and create and a PR to help make the card even better.