A custom Home Assistant dashboard card that displays an indicator in a circle.
Frontend
compass
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)Configuration->Lovelace Dashboards->Resources
(When there is no resources
tag on the Lovelace Dashboard
page, enable advanced mode in your account settings, and retry this step)/local/compass-card.js
module
type: custom:compass-card
indicator_sensors:
- sensor: sensor.wind_dir
type: custom:compass-card
header:
title:
value: Friend's location
indicator_sensors:
- sensor: sensor.friends_direction
value_sensors:
- sensor: sensor.friends_distance
Issue #41 shows an example how to calculate the distance/direction of your friend.
arrow_inward
type: custom:compass-card
header:
title:
value: Wind
indicator_sensors:
- sensor: sensor.wind_dir
indicator:
type: arrow_inward
value_sensors:
- sensor: sensor.wind_speed
circle
type: custom:compass-card
header:
title:
value: Sun
indicator_sensors:
- sensor: sun.sun
attribute: azimuth
indicator:
type: circle
value_sensors:
- sensor: sun.sun
attribute: elevation
north indicator
and direction offset
Left image yaml:
type: custom:compass-card
header:
title:
value: Sun
indicator_sensors:
- sensor: sun.sun
attribute: azimuth
indicator:
type: circle
value_sensors:
- sensor: sun.sun
attribute: elevation
compass:
north:
show: true
Right image yaml:
type: custom:compass-card
header:
title:
value: Sun
indicator_sensors:
- sensor: sun.sun
attribute: azimuth
indicator:
type: circle
value_sensors:
- sensor: sun.sun
attribute: elevation
compass:
north:
show: true
offset: 15
cardinal indicators
and background
type: custom:compass-card
header:
title:
value: Sun
indicator_sensors:
- sensor: sun.sun
attribute: azimuth
indicator:
type: circle
value_sensors:
- sensor: sun.sun
attribute: elevation
compass:
circle:
background_image: /local/compass-card/home.png
background_opacity: 0.5
north:
show: true
offset: 30
east:
show: true
west:
show: true
south:
show: true
Store the background image in your config/www/
folder (this maps to /local/
)
Name | Type | Requirement | Supported | Config | Description |
---|---|---|---|---|---|
type | string | Required | v0.0.1 | N.a. | |
header | header object | Optional | v1.0.0 | See header object | Card header settings |
compass | compass object | Optional | v1.0.0 | See compass object | Compass settings |
indicator_sensors | Array of indicator sensors object | Required | v1.0.0 | See indicator sensors object | Entities to use as indicator on compass |
value_sensors | Array of value sensors object | Optional | v1.0.0 | See value sensors object | Entities to show under the direction in compass |
language | language | Optional | v1.0.0 | Visual/YAML | Show the abbreviation in the language configured in Home Assistant (default/empty), or configured language |
tap_action | action config object | Optional | v1.0.0 | See action config object | Tap action settings (what happens when you click/touch the card) |
debug | boolean | Optional | v1.0.0 | YAML | Show inflated configration & incorrect configured entities and attributes in browsers developers console |
Name | Type | Requirement | Supported | Config | Description |
---|---|---|---|---|---|
title | title object | Optional | v1.0.0 | See title object | Settings for the title in the header |
icon | icon object | Optional | v1.0.0 | See icon object | Settings for the icon in the header |
Name | Type | Requirement | Supported | Config | Description |
---|---|---|---|---|---|
value | string | Optional | v1.0.0 | YAML | Title to show in the card header |
color | string | Optional | v1.0.0 | YAML | Color of object |
show | boolean | Optional | v1.0.0 | YAML | Show object |
dynamic_style | dynamic style object | Optional | v1.0.0 (WIP) | YAML | Change style on entity values |
Name | Type | Requirement | Supported | Config | Description |
---|---|---|---|---|---|
value | string | Optional | v1.0.0 | YAML | Icon show in the card header |
color | string | Optional | v1.0.0 | YAML | Color of object |
show | boolean | Optional | v1.0.0 | YAML | Show object |
dynamic_style | dynamic style object | Optional | v1.0.0 (WIP) | YAML | Change style on entity values |
Name | Type | Requirement | Supported | Config | Description |
---|---|---|---|---|---|
north | north object | Optional | v1.0.0 | See north object | Settings for the north indicator (default hidden) |
east | properties object | Optional | v1.2.0 | YAML | Settings for the east indicator (default hidden) |
south | properties object | Optional | v1.2.0 | YAML | Settings for the south indicator (default hidden) |
west | properties object | Optional | v1.2.0 | YAML | Settings for the west indicator (default hidden) |
circle | circle object | Optional | v1.0.0 | See circle object | Settings for the compass circle |
Name | Type | Requirement | Supported | Config | Description |
---|---|---|---|---|---|
offset | string | Optional | v1.0.0 | YAML | Value to offset the indicator display with. (E.g. to create a relative north) |
color | string | Optional | v1.0.0 | YAML | Color of object |
show | boolean | Optional | v1.0.0 | YAML | Show object |
dynamic_style | dynamic style object | Optional | v1.0.0 (WIP) | YAML | Change style on entity values |
Name | Type | Requirement | Supported | Config | Description |
---|---|---|---|---|---|
background_image | string | Optional | v1.2.0 | YAML | URL of image to show in the background of the circle (use square image of preferably 126px by 126px). See Home Assistant documentation for info about hosting files. |
background_opacity | number | Optional | v1.2.0 | YAML | Opacity of the background image 1 = 100% visible, 0.5 = 50% half visible, 0 = fully hidden, anything between 0 and 1 will do. |
offset_background | boolean | Optional | v1.2.0 | YAML | If true then image rotates with north offset (default), if false then image does not rotate with north offset |
color | string | Optional | v1.0.0 | YAML | Color of object |
show | boolean | Optional | v1.0.0 | YAML | Show object |
dynamic_style | Array of dynamic style objects | Optional | v1.0.0 | YAML | Change style on entity values |
Name | Type | Requirement | Supported | Config | Description |
---|---|---|---|---|---|
sensor | string | Required | v1.0.0 | First visual, others YAML | Entity to read state from |
attribute | string | Optional | v1.0.0 | YAML | Attribute of sensor to read value from instead of entity state |
units | string | Optional | v1.0.0 | YAML | Units of measurement to display, default for entity, units of measurement of entity, default for attribute '' |
decimals | number | Optional | v1.0.0 | YAML | Decimals to show the value in, default 0 |
indicator | indicator object | Optional | v1.0.0 | See indicator object | Settings for displaying the state as indicator |
state_abbreviation | properties object | Optional | v1.0.0 | YAML | Settings for displaying the state abbreviation |
state_value | properties object | Optional | v1.0.0 | YAML | Settings for displaying the state value |
state_units | properties object | Optional | v1.0.0 | YAML | Settings for displaying the state units |
Name | Type | Requirement | Supported | Config | Description |
---|---|---|---|---|---|
sensor | string | Required | v1.0.0 | First visual, others YAML | Entity to read state from |
attribute | string | Optional | v1.0.0 | YAML | Attribute of sensor to read value from instead of entity state |
units | string | Optional | v1.0.0 | YAML | Units of measurement to display, default for entity, units of measurement of entity, default for attribute '' |
decimals | number | Optional | v1.0.0 | YAML | Decimals to show the value in, default 0 |
state_value | properties object | Optional | v1.0.0 | YAML | Settings for displaying the state value |
state_units | properties object | Optional | v1.0.0 | YAML | Settings for displaying the state units |
Name | Type | Requirement | Supported | Config | Description |
---|---|---|---|---|---|
type | string | Optional | v1.0.0 | First visual, others YAML | One of arrow_outward (default), arrow_inward , circle , the shape of the indicator |
Name | Type | Requirement | Supported | Config | Description |
---|---|---|---|---|---|
color | string | Optional | v1.0.0 | YAML | Color of object |
show | boolean | Optional | v1.0.0 | YAML | Show object |
dynamic_style | Array of dynamic style objects | Optional | v1.0.0 | YAML | Change style on entity values |
Name | Type | Requirement | Supported | Config | Description |
---|---|---|---|---|---|
sensor | string | Optional | v1.0.0 | YAML | Entity to listen to read value from style |
attribute | string | Optional | v1.0.0 | YAML | Attribute of sensor to read value from to change style |
bands | Array of style band objects | Required | v1.0.0 | YAML | Styles to use from a certain value (values below the lowest configured value will display as the parent properties object settings) |
Name | Type | Requirement | Supported | Config | Description |
---|---|---|---|---|---|
from_value | string | Required | v1.0.0 | YAML | Value from which upward this bands settings are used to display the parent object with |
color | string | Optional | v1.0.0 | YAML | Color of object |
show | boolean | Optional | v1.0.0 | YAML | Show object |
For a card that
Use the following configuration
type: 'custom:compass-card'
header:
title:
value: Sun
icon:
color: green # default color (for state is less than the lowest dynamic_style.bands.from_value)
dynamic_style:
sensor: sensor.uvi
bands:
- from_value: 3
color: yellow
- from_value: 6
color: orange
- from_value: 8
color: red
- from_value: 11
color: purple
indicator_sensors:
- sensor: sun.sun
attribute: azimuth
indicator:
type: circle
color: orange
show: false # default visibility (for state is less than the lowest dynamic_style.bands.from_value)
dynamic_style:
sensor: sun.sun
attribute: elevation
bands:
- from_value: 0
show: true
value_sensors:
- sensor: sun.sun
attribute: elevation
decimals: 1
compass:
north:
show: true
color: green # default color (for state is less than the lowest dynamic_style.bands.from_value)
dynamic_style:
sensor: sensor.uvi
bands:
- from_value: 3
color: yellow
- from_value: 6
color: orange
- from_value: 8
color: red
- from_value: 11
color: purple
circle:
color: green # default color (for state is less than the lowest dynamic_style.bands.from_value)
dynamic_style:
sensor: sensor.uvi
bands:
- from_value: 3
color: yellow
- from_value: 6
color: orange
- from_value: 8
color: red
- from_value: 11
color: purple
Name | Type | Requirement | Default | Supported | Config | Description |
---|---|---|---|---|---|---|
action | list item | Optional | more-info |
v0.4.0 | YAML only | Type of action to launch when clicking/touching the card:more-info navigate url call-service |
entity | string | Optional for action more-info |
entity used for compass direction |
v0.4.0 | YAML only | Entity to show the more-info of. When empty the compass direction more-info is shown |
navigation_path | string | Required for action navigate |
v0.4.0 | YAML only | Path to navigate to, has to be on the same host as the card is. E.g. /logbook , /config/dashboard or lovelace/default_view |
|
url | string | Required for action url |
v0.4.0 | YAML only | Url to navigate to, can be any valid webpage | |
new_tab | boolean | Optional for action url and navigate |
true |
v0.4.1 | YAML only | Open url or navigate in new tab/window |
service | string | Required for action call-service |
v0.4.0 | YAML only | Home Assistant service to call, see Developer Tools -> Services what services are available, e.g. light.turn_on |
|
service_data | string, json format | Optional for action call-service |
v0.4.0 | YAML only | Service data to send, see Developer Tools -> Services what data specific services need.Needs to be a string in json format e.g. {"entity_id": "light.kitchen", "rgb_color": [255,100,100]} |
Open the more info of a person entity when clicking/touching the card
type: custom:compass-card
indicator_sensors:
- sensor: sensor.friends_direction
value_sensors:
- sensor: sensor.friends_distance
tap_action:
entity: person.friend
Open the Home Assistant map page when clicking/touching the card
type: custom:compass-card
indicator_sensors:
- sensor: sensor.friends_direction
value_sensors:
- sensor: sensor.friends_distance
tap_action:
action: navigate
navigation_path: /map
Open Google Maps when clicking/touching the card
type: custom:compass-card
indicator_sensors:
- sensor: sensor.friends_direction
value_sensors:
- sensor: sensor.friends_distance
tap_action:
action: url
url: https://www.google.nl/maps
Send notification when clicking/touching the card
type: custom:compass-card
indicator_sensors:
- sensor: sensor.friends_direction
value_sensors:
- sensor: sensor.friends_distance
tap_action:
action: call-service
service: notify.notify
service_data: '{"message": "Hey Im watching you.", "title": "Message from your best friend"}'
The following languages are supported:
Language | Yaml value | Supported | Translated by |
---|---|---|---|
Bulgarian | bg |
v1.4.0 | @Saentist |
Catalan | ca |
v1.6.0 | @joan-mb |
Czech | cz |
v0.4.0 | @woodcat64 |
Danish | da |
v1.3.0 | @DurgNomis-drol |
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 |
Hungarian | hu |
v1.0.0 | @bboti86 |
Icelandic | is |
v1.5.0 | @halliiav |
Italian | it |
v0.3.0 | @matteofranceschini |
Norwegian | no |
v0.3.1 | @hwikene |
Portugese | pt |
v0.3.1 | @andilge |
Polish | pl |
v0.3.2 | @porebas |
Slovenian | sl |
v1.2.0 | @thehijacker |
Russian | ru |
v0.4.0 | @artemyevav |
Spanish | es |
v0.3.1 | @andilge |
se |
|||
Swedish | sv |
v2.0.0 | @Boris65 and @nickrout |
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
indicator_sensors:
- sensor: sensor.friends_direction
value_sensors:
- sensor: sensor.friends_distance
compass:
language: pt
See the issues with the config how-to
label for more configuration examples.
v1.0.0 has breaking changes, meaning the card wil not work as expected after updating.
To upgrade your v0.x.x card, just open the card in the editor, and save it. No changes needed to the card. The configuration will update to the correct version, and your card is v1.0.0 ready.
If the compass-card is inside another card (horizontal/vertical-stack), use the visual editor menu to navigate to the compass-card. It will update to the new config.
See following YAML examples of a full v0.x.x config and its v1.0.0 equivalent _Note: the tapaction object does not change and you can keep the v0.x.x version.
v0.x.x
type: custom:compass-card
name: title
entity: sensor.friends_direction
secondary_entity: sensor.friends_distance
direction_offset: 15
compass:
language: pt
indicator: arrow_outward
show_north: true
v1.0.0 +
type: custom:compass-card
header:
title:
value: title
indicator_sensors:
- sensor: sensor.friends_direction
indicator:
type: arrow_outward
value_sensors:
- sensor: sensor.friends_distance
compass:
north:
show: true
offset: 15
language: pt
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 :beers:, a :coffee: or legos!
Or clone, and create and a PR to help make the card even better.