clock-weather-card icon indicating copy to clipboard operation
clock-weather-card copied to clipboard

Published 20 hours ago • verified publisher icon pkissling
→

Metadata

A Home Assistant Card indicating today's date/time, along with an iOS inspired weather forecast for the next days with animated icons

Clock Weather Card

HACS Total downloads Downloads of latest version (latest by SemVer) Current version

A Home Assistant Dashboard Card available through the Home Assistant Community Store showing the current date, time and a weather forecast.

Clock Weather Card [^1]

Credits go to basmilius for the awesome weather icons.

Migrating from v1 to v2

  • Configuration property forecast_days was renamed to forecast_rows to indicate that this attribute does not only work for daily, but also for hourly forecasts.
  • date-fns has been replaced by luxon for date/time formatting. If you configure date_pattern, make sure to migrate your pattern to comply with luxon. Additionally, the weekday is now not hardcoded anymore.
  • Configuration property use_browser_time is now by default false, so by default the card will show the time of the current HA time zone.

FAQ

  • Why don't I see the current day in my weather forecast?
  • What does the card actually display?

Why don't I see the current day in my weather forecast?

Your weather provider may not provide today's weather as part of their weather forecast. You may consider switching to a different weather provider. OpenWeatherMap is one of the weather integrations providing today's weather.

What does the card actually display?

image

The bars represent the temperature range for a given day. In the above image, the 9° on Thursday represents the low across all of the forecast days and the 21° represents the highs (i.e. all bars are from 9° to 21°). The colored portion of the bar represents the range of temperatures that are forecast for that day (so 12° to 21° on Monday). The circle represents the current temperature (16° or roughly midway between 12° and 21° in your case).

Thanks to @deprecatedcoder for this text from #143

The basic idea of the forecast bars is to be able to understand the weather trend for the upcoming days in a single glance.

Installation

Manual Installation

  1. Download the clock-weather-card.

  2. Place the file in your Home Assistant's config/www folder.

  3. Add the configuration to your ui-lovelace.yaml.

    resources:
  - url: /local/clock-weather-card.js
    type: module

  4. Add configuration for the card in your ui-lovelace.yaml.

Installation and tracking with hacs

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

  2. Search for clock-weather-card in HACS and install it.

  3. Depening on whether you manage your Lovelace resources via YAML (3i) or UI (3ii), you have to add the corresponding resources.

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

      resources:
  - url: /hacsfiles/clock-weather-card/clock-weather-card.js
    type: module

    2. UI: Add Lovelace resource My Home Assistant. (Alternatively go to Settings -> Dashboards -> Resources -> Add Resource)

      URL: /hacsfiles/clock-weather-card/clock-weather-card.js
Type: JavaScript Module

  4. Restart Home Assistant.

  5. Add configuration for the card in your ui-lovelace.yaml or via the UI.

Configuration

Minimal configuration

type: custom:clock-weather-card
entity: weather.home

Full configuration

type: custom:clock-weather-card
entity: weather.home
title: Home
sun_entity: sun.sun
temperature_sensor: sensor.outdoor_temp
humidity_sensor: sensor.outdoor_humidity
weather_icon_type: line
animated_icon: true
forecast_rows: 5
locale: en-GB
time_pattern: HH:mm
time_format: 24
date_pattern: ccc, d.MM.yy
hide_today_section: false
hide_forecast_section: false
show_humidity: false
hide_clock: false
hide_date: false
hourly_forecast: false
use_browser_time: false
time_zone: null
show_decimal: false
apparent_sensor: sensor.real_feel_temperature
aqi_sensor: sensor.air_quality_index

Options

Name Type Requirement Description Default
type string Required custom:clock-weather-card
entity string Required ID of the weather entity
title string Optional Title of the card ''
sun_entity boolean Optional ID of the sun entity. Used to determine whether to show a day or night icon. If sun integration is not enabled, day icon will be shown sun.sun
temperature_sensor string Optional ID of the temperature sensor entity. Used to show the current temperature based on a sensor value instead of the weather forecast ''
humidity_sensor string Optional ID of the humidity sensor entity. Used to show the current humidity based on a sensor value, if show_humidity is set to true ''
weather_icon_type line | fill Optional Appearance of the large weather icon line
animated_icon boolean Optional Whether the large weather icon should be animated true
forecast_rows number Optional The amount of weather forecast rows to show. Depending on hourly_forecast each row either corresponds to a day or an hour 5
locale string[^2] Optional Language to use for language specific text and date/time formatting. If not provided, falls back to the locale set in HA or, if not set in HA, to en-GB en-GB
time_format 24 | 12 Optional Format used to display the time. If not provided, falls back to the default time format of the configured locale. This option is ignored if time_pattern is set. 24
time_pattern string Optional Pattern to use for time formatting. See luxon for valid tokens. If not provided, falls back to time_format option. null
date_pattern string Optional Pattern to use for date formatting. If not provided, falls back to a localized default date formatting. See luxon for valid tokens D
show_humidity boolean Optional Shows the humidity in the today section. Reads the value from humidity_sensor, if provided, otherwise from the humidity attribute of the configured weather entity false
hide_today_section boolean Optional Hides the cards today section (upper section), containing the large weather icon, clock and current date false
hide_forecast_section boolean Optional Hides the cards forecast section (lower section),containing the weather forecast false
hide_clock boolean Optional Hides the clock from the today section and prominently displays the current temperature instead false
hide_date boolean Optional Hides the date from the today section false
hourly_forecast boolean Optional Displays an hourly forecast instead of daily false
use_browser_time boolean Optional Uses the time from your browser to indicate the current time. If not provided, uses the time_zone configured in HA false
time_zone string Optional Uses the given time zone to indicate the current date and time. If not provided, uses the time zone configured in HA null
show_decimal boolean Optional Displays main temperature without rounding false
apparent_sensor string Optional ID of the apparent temperature sensor entity. It is used to show the apparent temperature based on a sensor and will only show it if value is provided. ''
aqi_sensor string Optional ID of the Air Quality Index sensor entity. It is used to show the AQI based on a sensor and will only show it if value is provided. ''

Footnotes

[^1]: Theme used: lovelace-ios-themes. [^2]: Supported languages: bg, ca, cs da, de, el,en, es, et, fi, fr, he, hu, id, is, it, ko, lt, nb, nl, pl, pt, pt-BR, ro, ru, sk, sl, sr, sr-Latn, sv, th, tr, uk, ur, vi, zh-CN, zh-TW

← Metadata

287
Stars
65
Forks
Watchers

Owner

verified publisher icon pkissling

Metadata

A Home Assistant Card indicating today's date/time, along with an iOS inspired weather forecast for the next days with animated icons

Back