Sun Weather Card – weather card with sunrise/sunset arc, bars or graph forecast!

Share your Projects! Dashboards & Frontend
1

Hi everyone,

I’d like to share a custom Lovelace card I’ve been working on: Sun Weather Card.

It started because I wanted a weather card that also showed the sun’s position between sunrise and sunset.

What it does:

  • Current conditions header – time, date, animated weather icon, current temperature, today’s high/low and location
  • Sunrise/sunset arc – the sun (or the moon at night) moves along a dotted arc between sunrise and sunset
  • Two forecast layouts – classic iOS-style temperature bars, or a smooth line graph with max/min curves
  • Daily or hourly – both work with either layout
  • Configurable details – pick which attributes to show below the arc (humidity, pressure, wind, precipitation, UV, sunrise/sunset and more). Each one only appears if your weather integration actually provides it
  • Modular – time, date and the sun arc can each be turned on or off, so you can build anything from a full dashboard card to a minimal forecast-only view
  • Original animated SVG icons – sun, moon, clouds, rain, snow, fog, wind, lightning. No external assets
  • Full UI editor – configure everything without touching YAML
  • Light/dark theme support, English/Italian/system language, tap/hold/double-tap actions

daily-bars
daily-bars300×452 87.2 KB
hourly-bars
hourly-bars300×452 80.8 KB

daily-graph
daily-graph300×452 85.4 KB
hourly-graph
hourly-graph300×452 80.2 KB

Light and dark themes:

theme-dark
theme-dark300×451 27.9 KB
theme-light
theme-light300×452 87.1 KB

Minimal config:

yaml

type: custom:sun-weather-card
entity: weather.your_weather_entity

Everything else is optional and has sensible defaults.

Installation:

Available via HACS as a custom repository:
https://github.com/korova-sq/sun-weather-card

(HACS → Frontend → ⋮ → Custom repositories → add the URL, category “Dashboard”)

Full documentation, all config options and examples are in the README.

This is the first release — feedback, bug reports and feature requests are very welcome.

Thanks!

6 Likes
2

Thank you for the beautiful weather card!
Is it possible to have the background transparent or with a background picture?

1 Like
3

Thank you! :folded_hands: Yes, both are possible — a transparent background and a custom background image. I’ll try to add them in the next version and I’ll let you know here when it’s ready.

1 Like
4

Small update — Sun Weather Card v1.1.0 is out :tada:

What’s new:

  • Transparent background, so the card can blend into your dashboard
  • Background image support, with a light/dark overlay slider to keep the text readable on any picture
  • The configuration editor now follows your Home Assistant language (English/Italian)
  • A subtle fade at the edges of the forecast graph

Thanks @NavNav for the feedback on the first release

Repo: GitHub - korova-sq/sun-weather-card: A Home Assistant weather card with an animated header, a sunrise/sunset arc, and daily/hourly forecasts as iOS-style bars or a line graph. Fully configurable from the UI. · GitHub

1 Like
5

Update — v1.2.0 is out :germany:

The card now speaks German, thanks to a pull request.
Weather conditions, sunrise/sunset labels and the whole configuration
editor are translated, and with language: system (the default) a
Home Assistant instance set to German picks it up automatically.

Also in the 1.1.x line since my last post: transparent background,
background image with a light/dark overlay slider, and a fix for
glass themes that use card-mod (the card is now properly transparent
with Frosted Glass).

Contributions for other languages are very welcome — the pattern is
simple, one block per language.

6

Love this card. Unfortunately the animation isnt as smooth as i want it too.
Is it possible to disable the animation?
Thanks in advance

1 Like
7

Thanks, glad you like it!
That’s a good idea — the moving weather icons can feel less smooth on some devices.
There’s no toggle yet, but I’ll add an option to disable the animations in the next version.
I’ll let you know here when it’s ready.

1 Like
8

Update — v1.3.0 :tada:

  • Option to disable the icon animations,
    as requested by lucianoj above :+1:
  • Long weather conditions now auto-fit on one line instead of being
    cut off

Repo: GitHub - korova-sq/sun-weather-card: A Home Assistant weather card with an animated header, a sunrise/sunset arc, and daily/hourly forecasts as iOS-style bars or a line graph. Fully configurable from the UI. · GitHub

9

Hi, I’ve just released a new version where you can enable/disable the animated icons directly from the editor.
:slightly_smiling_face: Thanks for the suggestion!

1 Like
10

Thanks, works great

1 Like
11

@korova-sq Excellent card, thanks for your hard work! To make it perfect (for me) it would be great if you could also configure sun entity attributes under details section.

1 Like
12

Thanks! I’m already working on custom sensors for the details section.
I’ll see if I can make it work with attributes like sun’s too :+1:

2 Likes
13

Update — v1.4.0 is out

What’s new

  • :netherlands: Added Dutch translation

  • :compass: Fixed wind direction names and translations

  • :wind_face: Wind directions are now correctly displayed

14

Very nice card. Could you please add the French language option?

fr: {
    'clear-night': 'Dégagé',
    cloudy: 'Nuageux',
    fog: 'Brouillard',
    hail: 'Grêle',
    lightning: 'Orage',
    'lightning-rainy': 'Orage avec pluie',
    partlycloudy: 'Partiellement nuageux',
    pouring: 'Pluies fortes',
    rainy: 'Pluvieux',
    snowy: 'Neige',
    'snowy-rainy': 'Neige fondante',
    sunny: 'Ensoleillé',
    windy: 'Venteux',
    'windy-variant': 'Venteux',
    exceptional: 'Exceptionnel',
  },

    fr: {
    entities: 'Entités',
    weather_entity: 'Entité météorologique',
    sun_entity: 'Entité solaire (arc du lever/coucher du soleil)',
    appearance: 'Apparence',
    location: 'Nom du lieu (vide = automatique)',
    language: 'Langue',
    lang_system: 'Système', lang_it: 'Italiano', lang_en: 'English', lang_de: 'Deutsch', lang_nl: 'Nederlands' , lang_fr: 'Français',
    time_format: 'Format de l'heure',
    tf_24: '24 heures', tf_12: '12 heures',
    show_time: 'Afficher l''heure',
    show_date: 'Afficher la date',
    show_arc: 'Afficher l''arc solaire',
    animated_icons: 'Icônes animées',
    transparent: 'Fond transparent',
    background_image: 'Image de fond (URL ou chemin /local/…)',
    overlay: 'Superposition : plus clair ⟵ aucun ⟶ plus foncé',
    ov_lighter: 'plus clair', ov_zero: '0', ov_darker: 'Plus foncé',
    forecast: 'Prévision',
    forecast_type: 'Type de prévision',
    ft_daily: 'Quotidienne', ft_hourly: 'Horaire',
    daily_layout: 'Planification quotidienne',
    dl_bars: 'Bars', dl_graph: 'Graphique (lignes)',
    days_to_load: 'Jours à utiliser',
    hours_to_load: 'Heures à utiliser',
    visible_rows: 'Lignes visibles (vides = toutes)',
    show_rain: 'Afficher la pluie quotidienne (mm)',
    show_toggle: 'Basculement quotidien/horaire dans la carte',
    details: 'Détails',
    details_hint: 'Ajoutez des attributs ci-dessous. Faites glisser les puces pour les réorganiser. Appuyez sur ✕ pour supprimer.',
    details_empty: 'Aucun détail pour le moment. Ajoutez les attributs ci-dessous.',
    all_added: '— tout ajouté —',
    interaction: 'Interaction',
    tap_behavior: 'Comportement du clic',
    hold_behavior: 'Comportement du maintien',
    double_tap_behavior: 'Comportement du double-clic',
    nav_path: 'Chemin de navigation',
    url_label: 'URL',
    action_srv: 'Action (domain.service)',
    act_more_info: 'Informations sur l''entité', act_navigate: 'Naviguer', act_url: 'URL',
    act_perform: 'Effectuer l''action', act_toggle: 'Basculer', act_none: 'Ne rien faire',
    det_humidity: 'Humidité', det_pressure: 'Pression', det_wind_speed: 'Vitesse du vent',
    det_wind_bearing: 'Direction du vent', det_precipitation: 'Précipitation (mm)',
    det_precipitation_probability: 'Probabilité de précipitation', det_sunrise: 'Lever du soleil',
    det_sunset: 'Coucher du soleil', det_visibility: 'Visibilité',
    det_apparent_temperature: 'Température ressentie', det_cloud_coverage: 'Couverture nuageuse',
    det_uv_index: 'index UV', det_dew_point: 'Point de rosée',
  },

     : loc.startsWith('fr')
      ? ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE',
       'S', 'SSO', 'SO', 'OSO', 'O', 'ONO', 'NO', 'NNO']
1 Like
15

Thanks a lot, and thanks for the translations! :raising_hands: French will be included in the next release, along with some new features.
I’ll let you know when it’s out :france:

1 Like