sun-card icon indicating copy to clipboard operation
sun-card copied to clipboard

verified publisher icon mishaaq
→

Metadata

Lovelace card for sun component - Home Assistant

trafficstars

Sun Card

Home Assistant Lovelace card to present current sun elevation. Requires sensors providing UTC time and sun elevation at least to work properly. It provides visual information about current sun elevation throughout the day, time of sunrise/sunset/noon, daylight duration and time to sunset. Available data depends on used Sun component: pre-existing one from Home Assistant (Basic), extended available here (Extended) or leverage Sun2 extension available here. Additionally it can depict current moon phase using sensor.moon from moon platform.

GitHub Release License MIT Community Forum hacs_badge

Capabilities

Used Sun component Current sun elevation Sunrise Sunset Noon Daylight duration Time to sunset
Basic :sunny: Only future Only future :new_moon: :new_moon: :sunny:
Extended :sunny: :sunny: :sunny: :new_moon: :sunny: :sunny:
Sun2 :sunny: :sunny: :sunny: :sunny: :sunny: :sunny:

You have to have mentioned monitored_conditions enabled in component:

  • for Extended sun component: elevation, max_elevation, sunrise, sunset
  • for Sun2 component: sunrise, sunset, solar_noon, max_elevation

The card depicts current moon phase if you have defined moon_phase entry in card configuration.

From version 4.x, the card accepts entities from "sensor" domain for given capabilities. See "Options" for detailed instructions.

Options

Card options:

Name Type Requirement Default value Description
type string Required custom:sun-card Type of card, non-modifiable
name string Optional Language specific Card name visible in header, no header when empty value
meridiem boolean Optional Language specific Clock format: 12h or 24h
animation boolean Optional true Turn on/off sunbeam animation
entities Object Optional - Allows defining entities providing required data

Entities options:

Name Default entity Entity state type Description of entity state value
time sensor.utc_time string in format hh:mm current UTC time
elevation sun.sun number current sun elevation
max_elevation - number maximum elevation today
sunrise - time with timezone today's sunrise time
sunset - time with timezone today's sunset time
noon - time with timezone today's noon time
moon_phase - string moon phase (refer to moon sensor for possible values)

Themes

You can simply change default style of the card specifying CSS variables in your theme:

Variable CSS Attribute Purpose
--sc-background background Background of the viewport
--sc-background-auxilary background Additional background of the viewport; with regular background let you define backgrounds for day and night
--sc-background-filter filter Allows adjustment of the backgrounds
--sc-sun-color stroke Sun fulfillment color
--sc-sunbeam-color stroke Sunbeam stroke color
--sc-sun-night-color stroke Sun stroke color when being below horizon
--sc-sun-size stroke-width Sun size in pixels, default to 60px
--sc-event-line-color stroke Sunrise, noon and sunset timestamp markers color
--sc-horizon-color stroke Horizon line color
--sc-moon-color fill Moon fill color
--sc-elevation none CSS variable of number in range -1..1 that equals how high the Sun is currently related to it's maximum position

Tip: define different backgrounds for day and night period:

You may define --sc-background for day period and --sc-background-auxilary for night period. To display them exclusively you may leverage alpha compound and calculate its value using current --sc-elevation value, ie. in theme file:

--sc-background: rgba(255, 0, 0, calc(10000 * var(--sc-elevation))) (alpha compound capped to 1 for elevation > 0)

--sc-background-auxilary: rgba(0, 0, 255, calc(-10000 * var(--sc-elevation))) (alpha compound capped to 1 for elevation < 0)

Installation

HACS (recommended)

  1. Make sure the HACS component is installed and working.
  2. Add this github repository https://github.com/mishaaq/sun-card as custom plugin repository in HACS settings.
  3. Install the plugin Sun card and update lovelace configuration accordingly.

Installation and tracking with custom_updater (deprecated)

  1. Make sure the custom_updater component is installed and working.
  2. Configure Lovelace to load the card.
resources:
  - url: /customcards/github/mishaaq/sun-card.js?track=true
    type: module
  1. Run the service custom_updater.check_all or click the "CHECK" button if you use the tracker-card.
  2. Refresh the website.

Manual Installation (not recommended)

  1. Download the sun-card
  2. Place the file in your config/www folder
  3. Include the card code in your ui-lovelace-card.yaml
title: Home
resources:
  - url: /local/sun-card.js
    type: module
  1. Write configuration for the card in your ui-lovelace.yaml

Examples

type: 'custom:sun-card'
name: Sun
meridiem: false
entities:
  max_elevation: sun.sun
  sunrise: sensor.sunrise
  sunset: sensor.sunset
  noon: sensor.solar_noon
  moon_phase: sensor.moon

← Metadata

50
Stars
10
Forks
Watchers

Owner

verified publisher icon mishaaq

Metadata

Lovelace card for sun component - Home Assistant

Back