Awesome

Compass card

A custom Home Assistant dashboard card that displays an indicator in a circle.

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 (<kbd>Ctrl</kbd> + <kbd>F5</kbd>)
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, and 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 (<kbd>Ctrl</kbd> + <kbd>F5</kbd>)
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 (minimal) configuration:

type: custom:compass-card
indicator_sensors:
  - sensor: sensor.wind_dir

Lovelace Examples

Default

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.

Compass indicator 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

Compass indicator 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

Compass 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

Compass 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/)

Options

Header object

Title object

Icon object

Compass object

North object

Circle object

Indicator Sensors object

Value Sensors object

Indicator object

Properties object

Dynamic Style object

Style band object

Dynamic Style & Style band example

For a card that

• Displays indicator for the suns azimuth
• Changes color of the icon, compass and north indicator depending on the current UV Index
• Hide sun indicator when elevation is below horizon

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

Action Config object

Action config examples

More Info

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

Navigate

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

Url

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

Call Service

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"}'

Language

The following languages are supported:

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

More YAML examples

See the issues with the config how-to label for more configuration examples.

Upgrade from version v0.x.x to v1.0.0 +

v1.0.0 has breaking changes, meaning the card wil not work as expected after updating.

Semi-automatic update procedure

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.

Manual update procedure

See following YAML examples of a full v0.x.x config and its v1.0.0 equivalent Note: the tap_action 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

Wish/Todo list

• Background image (#12)
• Resizing compass on smaller cards (#44)

Contact

You can find me on the Home Assistant Community Site<br /> And occasionally on the HACS and Home Assistant Discord

Thanks to

• @rsnodgrass for the idea to make this
• @iantrich for the boiler-plate card, which got me started
• All the translators

Support

Help me out for a couple of :beers:, a :coffee: or legos!<br /> Or clone, and create and a PR to help make the card even better.