Compass card
A custom Home Assistant dashboard card that displays an indicator in a circle.
[![GitHub Release][releases-shield]][releases-link] [![GitHub Release Date][release-date-shield]][releases-link] [![GitHub Releases][latest-download-shield]][traffic-link] [![GitHub Releases][total-download-shield]][traffic-link]
[![HACS Badge][hacs-shield]][hacs-link] [![HomeAssistant][home-assistant-shield]][home-assistant-link] [![License][license-shield]][license-link]
![Project Maintenance][maintenance-shield] [![GitHub Activity][activity-shield]][activity-link] [![Open bugs][bugs-shield]][bugs-link] [![Open enhancements][enhancements-shield]][enhancement-link]
[![Community Forum][forum-shield]][forum-link] [![Buy Me A Coffee][coffee-shield]][coffee-link]
Example
Installation
HACS (Home Assistant Community Store)
- Go to HACS page on your Home Assistant instance
- Select
Frontend - Press add icon and search for
compass - Select Compass Card repo and install
- Force refresh the Home Assistant page (Ctrl + R)
- Add compass-card to your page
Manual
- 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/wwwfolder (when there is nowwwfolder in the folder where yourconfiguration.yamlfile is, create it and place the file there) - In Home Assistant go to
Configuration->Lovelace Dashboards->Resources(When there is noresourcestag on theLovelace Dashboardpage, enable advanced mode in your account settings, and retry this step) - Add a new resource
/local/compass-card.js
1. Resource type = module
- Force refresh the Home Assistant page (Ctrl + F5)
- Add compass-card to your page
Using the card
- Add the card with the visual editor
- Or add the card manually and configure it with YAML
Wish/Todo list
Contact
You can find me on the Home Assistant Community Site
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
- @vingerha for creating the dynamic background image, mdi icon support and much more
- All the translators
Support
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.
[releases-shield]: https://img.shields.io/github/release/tomvanswam/compass-card.svg?style=flat-square [releases-link]: https://github.com/tomvanswam/compass-card/releases/latest [release-date-shield]: https://img.shields.io/github/release-date/tomvanswam/compass-card?style=flat-square [latest-download-shield]: https://img.shields.io/github/downloads/tomvanswam/compass-card/latest/total?style=flat-square&label=downloads%20latest%20release [total-download-shield]: https://img.shields.io/github/downloads/tomvanswam/compass-card/total?style=flat-square&label=total%20views [traffic-link]: https://github.com/tomvanswam/compass-card/graphs/traffic [hacs-shield]: https://img.shields.io/badge/HACS-Default-orange.svg?style=flat-square [hacs-link]: https://github.com/hacs/integration [home-assistant-shield]: https://img.shields.io/badge/Home%20Assistant-visual%20editor/yaml-green?style=flat-square [home-assistant-link]: https://www.home-assistant.io/ [license-shield]: https://img.shields.io/github/license/custom-cards/boilerplate-card.svg?style=flat-square [license-link]: LICENSE.md [activity-shield]: https://img.shields.io/github/commit-activity/y/tomvanswam/compass-card.svg?style=flat-square [activity-link]: https://github.com/tomvanswam/compass-card/commits/master [bugs-shield]: https://img.shields.io/github/issues/tomvanswam/compass-card/bug?color=red&style=flat-square&label=bugs [bugs-link]: https://github.com/tomvanswam/compass-card/labels/bug [enhancements-shield]: https://img.shields.io/github/issues/tomvanswam/compass-card/enhancement?color=blue&style=flat-square&label=enhancements [enhancement-link]: https://github.com/tomvanswam/compass-card/labels/enhancement [maintenance-shield]: https://img.shields.io/maintenance/yes/2026.svg?style=flat-square [forum-shield]: https://img.shields.io/badge/community-forum-brightgreen.svg?style=flat-square [forum-link]: https://community.home-assistant.io/t/compass-card-points-you-in-the-right-direction/217909 [coffee-shield]: https://img.shields.io/badge/donate-buymeacoffe-sienna?style=flat-square [coffee-link]: https://www.buymeacoffee.com/tomvanswam