A Home Assistant Dashboard Card available through the Home Assistant Community Store and inspired by Google Weather.
Lovelace Horizon Card is a fork of the original home-assistant-sun-card project by @AitorDB to continue the great work and distribute the responsibility of supporting and advancing the project among a team of people.
Consider joining us!
The Horizon Card tracks the position of the Sun over the horizon and shows the times of various Sun events, as well as the current azimuth and elevation, in a visually appealing and easy-to-read format.
Please ensure you have the Sun integration enabled in your Home Assistant setup.
-
Make sure the HACS component is installed and working.
-
Add the project repository
https://github.com/rejuvenate/lovelace-horizon-cardas a custom repository to HACS, see: https://hacs.xyz/docs/faq/custom_repositories
Addition to the HACS default repository is pending and shouldn't take longer than a couple of days (see: hacs/default#1808). This step won't be necessary afterwards. -
Search for
lovelace-horizon-cardin HACS and install it under the "Lovelace" category.
Show detailed instructions
Installation via HACS is recommended, but a manual setup is supported.
-
Download the latest lovelace-horizon-card.js file.
-
If necessary, create a
wwwfolder in your configuration folder (whereconfiguration.yamlis found). -
Copy the downloaded file into your
wwwfolder. -
Add the resources, depending on whether you manage your Lovelace resources via the UI or YAML:
-
UI: Go to
and click Add resource (or navigate to Settings -> Dashboards -> Resources -> Add Resource) and enter:
URL:
/local/lovelace-horizon-card.jsType: JavaScript Module
-
YAML: Add the configuration to your
ui-lovelace.yaml:resources: - url: /local/lovelace-horizon-card.js type: module
-
-
Restart Home Assistant.
- Access your dashboard, enter edit mode, and click on Add card. You should be able to find Custom: Horizon Card in the list.
- In the UI editor, customize the card by modifying its configuration as detailed in the Config section below.
Note: If Custom: Horizon Card doesn't appear, clear the cache and reload the page.
- Add a new card with
type: custom:horizon-cardto your cards list and include any additional configuration from the Config section below.
Note: If you encounter an error like Custom element doesn't exist, clear the cache and reload the page.
| Name | Accepted values | Description | Default |
|---|---|---|---|
| component | string |
Changes which sun component to use | Home Assistant sun.sun |
| darkMode | boolean |
Changes card colors to dark or light | Home Assistant dark mode state |
| fields | See below | Fine-tuned control over visible fields | |
| language | See below | Changes card language | Home Assistant language or english if not supported |
| use12hourClock | boolean |
Use 12/24 hour clock | Uses locale of configured language to decide |
| title | string |
Card title | Doesn't display a title by default |
Supported settings inside the fields setting:
| Name | Accepted values | Description | Default |
|---|---|---|---|
| sunrise | boolean |
Show sunrise | true |
| sunset | boolean |
Show sunset | true |
| dawn | boolean |
Show dawn | true |
| noon | boolean |
Show noon | true |
| dusk | boolean |
Show dusk | true |
| azimuth | boolean |
Show azimuth | false |
| elevation | boolean |
Show elevation | false |
Supported options for the language setting:
bgBulgariancaCatalancsCzechdaDanishdeGermanenEnglishesSpanishetEstonianfiFinnishfrFrenchheHebrewhuHungarianisIcelandicjaJapaneseitItalianltLithuaniannbNorwegian (Bokmål)nlDutchnnNorwegian (Nynorsk)plPolishpt-BRPortuguese (Brazil)roRomanianruRussianskSlovakslSloveniansvSwedishtrTurkishukUkrainianzh-HansChinese, simplifiedzh-HantChinese, traditional
- Home Assistant reports the time of the next occurring Sun event. For example, if you look at the card during the day, the time for sunrise will reflect tomorrow's sunrise and not the one that occurred on the same day.