Compass card

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

Installation

Download the 'compass-card.js' from the latest release (with right click, save link as)
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)
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)
Add a new resource
1. Url = /local/compass-card.js
2. Resource type = module
Force refresh the Home Assistant page (Ctrl + F5)
Add compass-card to your page

Or add the card manually with the following configuration:

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

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

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

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

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

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

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	list item	Optional		v0.3.0	✓	Show the abbreviation in the language configured in Home Assistant (default/empty), or configured language

Additional entities to show on circle
Custom styled indicator (per entity)
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
Localisation of direction abbreviation
Cleanup unused boilerplate code

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

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