islock / lovelace-horizon-card

Sun Card successor: Visualize the position of the Sun over the horizon.

Lovelace Horizon Card

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!

Introduction

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.

Installation

Please ensure you have the Sun integration enabled in your Home Assistant setup.

HACS

1. Make sure the HACS component is installed and working.

2. Add the project repository https://github.com/rejuvenate/lovelace-horizon-card as a custom repository to HACS, see: https://hacs.xyz/docs/faq/custom_repositories

   
   Addition to the HACS default repository is pending (see: hacs/default#1958). This step won't be necessary afterwards.

3. Search for lovelace-horizon-card in HACS and install it under the "Lovelace" category.

Manual Installation

Show detailed instructions

Installation via HACS is recommended, but a manual setup is supported.

1. Download the latest lovelace-horizon-card.js file.

2. If necessary, create a www folder in your configuration folder (where configuration.yaml is found).

3. Copy the downloaded file into your www folder.

4. Add the resources, depending on whether you manage your Lovelace resources via the UI or YAML:

   1. UI: Go to and click Add resource (or navigate to Settings -> Dashboards -> Resources -> Add Resource) and enter:

      URL: /local/lovelace-horizon-card.js

      Type: JavaScript Module

   2. YAML: Add the configuration to your ui-lovelace.yaml:

      resources:
        - url: /local/lovelace-horizon-card.js
          type: module

5. Restart Home Assistant.

Setup

Using UI

1. Access your dashboard, enter edit mode, and click on Add card. You should be able to find Custom: Horizon Card in the list.
2. 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.

Using YAML

1. Add a new card with type: custom:horizon-card to 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.

Configuration

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

Visibility Fields

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

Languages

Supported options for the language setting:

• bg Bulgarian
• ca Catalan
• cs Czech
• da Danish
• de German
• en English
• es Spanish
• et Estonian
• fi Finnish
• fr French
• he Hebrew
• hr Croatian
• hu Hungarian
• is Icelandic
• ja Japanese
• ko Korean
• it Italian
• lt Lithuanian
• ms Malay
• nb Norwegian (Bokmål)
• nl Dutch
• nn Norwegian (Nynorsk)
• pl Polish
• pt-BR Portuguese (Brazil)
• ro Romanian
• ru Russian
• sk Slovak
• sl Slovenian
• sv Swedish
• tr Turkish
• uk Ukrainian
• zh-Hans Chinese, simplified
• zh-Hant Chinese, traditional

Known Issues

• 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.