• Stars
    star
    191
  • Rank 202,877 (Top 4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated 9 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Weather condition card (Lovelace) for Home Assistant.

Weather Conditions Card

... is a Lovelace card for Home Assistant.

hacs_badge

License Total alerts Language grade: JavaScript

BuyMeCoffee

Features

  • Display summary weather information
  • Display detailed current weather data
  • Display detailed forecast weather data
  • Display detailed forecast sea weather data
  • Display Ultraviolet Radiation
  • Display Air Quality data
  • Display Pollen data
  • Display Alert
  • Display camera meteogram
  • Display preferred camera

Home Assistant lovelace card Home Assistant lovelace card

Home Assistant lovelace card

β€” Card Configuration β€”

To use the ha-card-weather-conditions card add the following to your lovelace configuration:

resources:
  # if you have installed the card through the HACS integration
  - url: /hacsfiles/ha-card-weather-conditions/ha-card-weather-conditions.js
    type: module
  #
  # Optional:
  # adding the card-mod plugin enable an advanced card look configuration
  - url: /hacsfiles/lovelace-card-mod/card-mod.js
    type: module
  # ...

β€” Card Parameters Summary β€”

Name Type Requirement Default Description
type string Required Card type must be custom:ha-card-weather-conditions
name string Optional Card name shown on summary layer
language string Optional en Can take the values: en/it/nl/es/de/fr/sr-latn/pt/da/no-NO
animation boolean Optional false Can take the values: true/false
camera string Optional It is the camera id
uv object Optional It's the ultraviolet object, see the specific session.
pollen object Optional It's the pollen object, see the specific session.
air_quality object Optional It's the Air Quality object, see the specific session.
alert object Optional It's the Alert object, see the specific session.
weather object Optional It's the Weather object, see the specific session.

β€” Weather Card Parameters β€”

The following parameters and card configurations are used to display the current and forecast weather data. The card has been tested with the sensors provided by climacell, darksky and openweathermap integrations.

Parameters for the object: weather

Name Type Requirement Default Description
icons_model string Optional climacell Icons template you want to use. Valid values are: climacell, darksky, openweathermap, buienradar, defaulthass
current object list Optional It is for the current weather data
forecast object list Optional It is for the forecast weather data

Β» Current Weather Data

Parameters for the object list: current

Name Type Requirement Default Description
sun string Optional It is the sensor id
moon_phase string Optional It is the sensor id
current_conditions string Optional It is the sensor id
humidity string Optional It is the sensor id
pressure string Optional It is the sensor id
temperature string Optional It is the sensor id
feels_like string Optional It is the sensor id
visibility string Optional It is the sensor id
wind_bearing string Optional It is the sensor id
wind_speed string Optional It is the sensor id
precipitation string Optional It is the sensor id
forecast boolean Optional false It can take the values: true or true. If true then the summary layer will also show the daily forecast for temperature and precipitation (day_1).

Display the Summary Layer

Home Assistant lovelace card

Summary Layer, example of card setup
  type: custom:ha-card-weather-conditions
  name: "cc_test"
  language: it
  animation: true
  weather:
    icons_model: climacell
    current:
      sun: sun.sun
      moon_phase: sensor.cc_test_moon_phase
      current_conditions: sensor.cc_test_weather_condition
      temperature: sensor.cc_test_temperature
      feels_like: sensor.cc_test_feels_like

Display the Current Layer

Home Assistant lovelace card Home Assistant lovelace card

Current Layer, example of card setup
  type: custom:ha-card-weather-conditions
  name: "cc_test"
  weather:
    icons_model: climacell
    current:
      sun: sun.sun
      humidity: sensor.cc_test_humidity_percentage
      pressure: sensor.cc_test_barometric_pressure
      visibility: sensor.cc_test_visibility
      wind_bearing: sensor.cc_test_wind_direction
      wind_speed: sensor.cc_test_wind_speed
      precipitation: sensor.cc_test_precipitation
  #
  # Optional:
  # add to display current day forecast weather
      forecast: true
    forecast:
      temperature_high:
        day_1: sensor.cc_test_temperature_max_0d
      temperature_low:
        day_1: sensor.cc_test_temperature_min_0d
      precipitation_probability:
        day_1: sensor.cc_test_precipitation_probability_0d
      precipitation_intensity:
        day_1: sensor.cc_test_precipitation_max_0d

Display the Summary & Current Layer

Home Assistant lovelace card

Summary & Current Layer, example of card setup
  type: custom:ha-card-weather-conditions
  name: "cc_test"
  weather:
    icons_model: climacell
    current:
      sun: sun.sun
      moon_phase: sensor.cc_test_moon_phase
      current_conditions: sensor.cc_test_weather_condition
      temperature: sensor.cc_test_temperature
      feels_like: sensor.cc_test_feels_like
      humidity: sensor.cc_test_humidity_percentage
      pressure: sensor.cc_test_barometric_pressure
      visibility: sensor.cc_test_visibility
      wind_bearing: sensor.cc_test_wind_direction
      wind_speed: sensor.cc_test_wind_speed
      precipitation: sensor.cc_test_precipitation
  #
  # Optional:
  # add to display current day forecast weather
      forecast: true
    forecast:
      temperature_high:
        day_1: sensor.cc_test_temperature_max_0d
      temperature_low:
        day_1: sensor.cc_test_temperature_min_0d
      precipitation_probability:
        day_1: sensor.cc_test_precipitation_probability_0d
      precipitation_intensity:
        day_1: sensor.cc_test_precipitation_max_0d

Β» Forecast Weather Data

Parameters for the object list: forecast

Name Type Requirement Description
meteogram string Optional It is the camera id
icons object list Optional It is the sensor id
temperature_high object list Optional It is the sensor id
temperature_low object list Optional It is the sensor id
precipitation_probability object list Optional It is the sensor id
precipitation_intensity object list Optional It is the sensor id

Parameters for the object list: icons, temperature_high, temperature_low, precipitation_probability, precipitation_intensity

Name Type Requirement Description
day_1 string Optional It is the sensor id. The day_1 sensor is for the current day forecast.
day_2 string Optional It is the sensor id
day_3 string Optional It is the sensor id
day_4 string Optional It is the sensor id
day_5 string Optional It is the sensor id

Display the Forecast Layer

Home Assistant lovelace card

Forecast Layer, example of card setup
  type: custom:ha-card-weather-conditions
  name: "cc_test"
  language: it
  animation: true
  weather:
    icons_model: climacell
    forecast:
      meteogram: camera.cc_test_c2
      icons:
        day_1: sensor.cc_test_weather_condition_0d
        day_2: sensor.cc_test_weather_condition_1d
        day_3: sensor.cc_test_weather_condition_2d
        day_4: sensor.cc_test_weather_condition_3d
        day_5: sensor.cc_test_weather_condition_4d
      temperature_high:
        day_1: sensor.cc_test_temperature_max_0d
        day_2: sensor.cc_test_temperature_max_1d
        day_3: sensor.cc_test_temperature_max_2d
        day_4: sensor.cc_test_temperature_max_3d
        day_5: sensor.cc_test_temperature_max_4d
      temperature_low:
        day_1: sensor.cc_test_temperature_min_0d
        day_2: sensor.cc_test_temperature_min_1d
        day_3: sensor.cc_test_temperature_min_2d
        day_4: sensor.cc_test_temperature_min_3d
        day_5: sensor.cc_test_temperature_min_4d
      precipitation_probability:
        day_1: sensor.cc_test_precipitation_probability_0d
        day_2: sensor.cc_test_precipitation_probability_1d
        day_3: sensor.cc_test_precipitation_probability_2d
        day_4: sensor.cc_test_precipitation_probability_3d
        day_5: sensor.cc_test_precipitation_probability_4d
      precipitation_intensity:
        day_1: sensor.cc_test_precipitation_max_0d
        day_2: sensor.cc_test_precipitation_max_1d
        day_3: sensor.cc_test_precipitation_max_2d
        day_4: sensor.cc_test_precipitation_max_3d
        day_5: sensor.cc_test_precipitation_max_4d
Forecast Layer, advanced examples of card setup

To capitalize the name of the days of the week use style directive:

  type: custom:ha-card-weather-conditions
  style: |
    .dayname {
      text-transform: capitalize;
  }

Β» Sea Forecast Weather Data

Parameters for the object list: sea

Name Type Requirement Description
swell_direction object list Optional It is the camera id
swell_height object list Optional It is the sensor id
swell_period object list Optional It is the sensor id
wind_direction object list Optional It is the sensor id
wind_speed object list Optional It is the sensor id
air_temperature object list Optional It is the sensor id
water_temperature object list Optional It is the sensor id

Parameters for the object list: swell_direction, swell_height, swell_period, wind_direction, wind_speed, air_temperature, water_temperature

Name Type Requirement Description
hour_1 string Optional It is the sensor id
hour_2 string Optional It is the sensor id
hour_3 string Optional It is the sensor id
hour_4 string Optional It is the sensor id
hour_5 string Optional It is the sensor id
hour_6 string Optional It is the sensor id
hour_7 string Optional It is the sensor id

Display the Sea Forecast Layer

Home Assistant lovelace card

Sea Forecast Layer, example of card setup
  type: custom:ha-card-weather-conditions
  name: "cc_test"
  language: it
  sea:
    swell_direction:
      hour_1: sensor.sg_piscinas_swell_direction_0h
      hour_2: sensor.sg_piscinas_swell_direction_0h
      hour_3: sensor.sg_piscinas_swell_direction_0h
      hour_4: sensor.sg_piscinas_swell_direction_0h
      hour_5: sensor.sg_piscinas_swell_direction_0h
      hour_6: sensor.sg_piscinas_swell_direction_0h
      hour_7: sensor.sg_piscinas_swell_direction_0h
    swell_height:
      hour_1: sensor.sg_piscinas_swell_height_0h
      hour_2: sensor.sg_piscinas_swell_height_0h
      hour_3: sensor.sg_piscinas_swell_height_0h
      hour_4: sensor.sg_piscinas_swell_height_0h
      hour_5: sensor.sg_piscinas_swell_height_0h
      hour_6: sensor.sg_piscinas_swell_height_0h
      hour_7: sensor.sg_piscinas_swell_height_0h
    swell_period:
      hour_1: sensor.sg_piscinas_swell_period_0h
      hour_2: sensor.sg_piscinas_swell_period_0h
      hour_3: sensor.sg_piscinas_swell_period_0h
      hour_4: sensor.sg_piscinas_swell_period_0h
      hour_5: sensor.sg_piscinas_swell_period_0h
      hour_6: sensor.sg_piscinas_swell_period_0h
      hour_7: sensor.sg_piscinas_swell_period_0h
    wind_direction:
      hour_1: sensor.sg_piscinas_wind_direction_0h
      hour_2: sensor.sg_piscinas_wind_direction_0h
      hour_3: sensor.sg_piscinas_wind_direction_0h
      hour_4: sensor.sg_piscinas_wind_direction_0h
      hour_5: sensor.sg_piscinas_wind_direction_0h
      hour_6: sensor.sg_piscinas_wind_direction_0h
      hour_7: sensor.sg_piscinas_wind_direction_0h
    wind_speed:
      hour_1: sensor.sg_piscinas_wind_speed_0h
      hour_2: sensor.sg_piscinas_wind_speed_0h
      hour_3: sensor.sg_piscinas_wind_speed_0h
      hour_4: sensor.sg_piscinas_wind_speed_0h
      hour_5: sensor.sg_piscinas_wind_speed_0h
      hour_6: sensor.sg_piscinas_wind_speed_0h
      hour_7: sensor.sg_piscinas_wind_speed_0h
    air_temperature:
      hour_1: sensor.sg_piscinas_air_temperature_0h
      hour_2: sensor.sg_piscinas_air_temperature_0h
      hour_3: sensor.sg_piscinas_air_temperature_0h
      hour_4: sensor.sg_piscinas_air_temperature_0h
      hour_5: sensor.sg_piscinas_air_temperature_0h
      hour_6: sensor.sg_piscinas_air_temperature_0h
      hour_7: sensor.sg_piscinas_air_temperature_0h
    water_temperature:
      hour_1: sensor.sg_piscinas_water_temperature_0h
      hour_2: sensor.sg_piscinas_water_temperature_0h
      hour_3: sensor.sg_piscinas_water_temperature_0h
      hour_4: sensor.sg_piscinas_water_temperature_0h
      hour_5: sensor.sg_piscinas_water_temperature_0h
      hour_6: sensor.sg_piscinas_water_temperature_0h
      hour_7: sensor.sg_piscinas_water_temperature_0h

β€” Ultraviolet Radiation Parameters β€”

The card has been tested with the sensors provided by openuv integrations.

Parameters for the object: uv

Name Type Requirement Description
protection_window string Optional Binary Sensor
ozone_level string Optional Ozone level in du (Dobson Units) from OMI data sensor
uv_index string Optional UV Index sensor
uv_level string Optional UV level sensor
max_uv_index string Optional max UV Index for the day (at solar noon) sensor
set_skin_type_1 string Optional Safe exposure time (mins) till burn for Skin Type 1 sensor
set_skin_type_2 string Optional Safe exposure time (mins) till burn for Skin Type 2 sensor
set_skin_type_3 string Optional Safe exposure time (mins) till burn for Skin Type 3 sensor
set_skin_type_4 string Optional Safe exposure time (mins) till burn for Skin Type 4 sensor
set_skin_type_5 string Optional Safe exposure time (mins) till burn for Skin Type 5 sensor
set_skin_type_6 string Optional Safe exposure time (mins) till burn for Skin Type 6 sensor

Display the Ultraviolet Radiation Layer

Home Assistant lovelace card

Ultraviolet Radiation Layer, example of card setup
  type: custom:ha-card-weather-conditions
  uv:
    protection_window: binary_sensor.protection_window
    ozone_level: sensor.current_ozone_level
    uv_index: sensor.current_uv_index
    uv_level: sensor.current_uv_level
    max_uv_index: sensor.max_uv_index
    set_skin_type_1: sensor.skin_type_1_safe_exposure_time
    set_skin_type_2: sensor.skin_type_2_safe_exposure_time
    set_skin_type_3: sensor.skin_type_3_safe_exposure_time
    set_skin_type_4: sensor.skin_type_4_safe_exposure_time
    set_skin_type_5: sensor.skin_type_5_safe_exposure_time
    set_skin_type_6: sensor.skin_type_6_safe_exposure_time

β€” Pollen Parameters β€”

The card has been tested with the sensors provided by climacell integrations.

Parameters for the object: pollen

Name Type Requirement Description
tree object list Optional Pollen tree
weed object list Optional Pollen weed
grass object list Optional Pollen grass

Parameters for the object list: tree, weed, grass

Name Type Requirement Description
entity string Required It is the sensor id
icon string Optional Icon override for the sensor
min number Required Min sensor value
max number Required Max sensor value
low number Optional Low Pollen value (min < low < high < max)
high number Optional High Pollen value (min < low < high < max)

Display the Pollen Layer

Home Assistant lovelace card

Pollen Layer, example of card setup
  type: custom:ha-card-weather-conditions
  pollen:
    tree:
      entity: sensor.cc_test_pollen_tree
      min: 0
      max: 5
      low: 1
      high: 3
    weed:
      entity: sensor.cc_test_pollen_weed
      min: 0
      max: 5
      low: 1
      high: 3
    grass:
      entity: sensor.cc_test_pollen_grass
      min: 0
      max: 5
      low: 1
      high: 3

β€” Air Quality Parameters β€”

Parameters for the object: air_quality

Name Type Requirement Description
pm25 string Optional It is the sensor id
pm10 string Optional It is the sensor id
o3 string Optional It is the sensor id
no2 string Optional It is the sensor id
co string Optional It is the sensor id
so2 string Optional It is the sensor id
epa_aqi string Optional It is the sensor id
epa_health_concern string Optional It is the sensor id

Display the Air Quality Layer

Home Assistant lovelace card

Air Quality Layer, example of card setup
  type: custom:ha-card-weather-conditions
  air_quality:
    pm25: sensor.cc_test_pm25
    pm10: sensor.cc_test_pm10
    o3: sensor.cc_test_o3
    no2: sensor.cc_test_no2
    co: sensor.cc_test_co
    so2: sensor.cc_test_so2
    epa_aqi: sensor.cc_test_epa_aqi
    epa_health_concern: sensor.cc_test_epa_health_concern

β€” Alert Parameters β€”

Parameters for the object: alert

Name Type Requirement Description
fire_risk object list Optional Fire object
thunderstorms_risk object list Optional thunderstorms
hydraulic_risk object list Optional hydraulic id
hydrogeological_risk object list Optional hydrogeological

Parameters for the object list: fire_risk

Name Type Requirement Description
entity string Required It is the sensor id
icon number Optional Name of the icon to be used instead of the sensor icon
min number Required Min sensor value
max number Required Max sensor value
show_if_ge number Optional Show alert if the value is greater or equals to ...

Parameters for the object list: thunderstorms_risk, hydraulic_risk, hydrogeological_risk

Name Type Requirement Description
entity string Required It is the binary sensor id
icon number Optional Name of the icon to be used instead of the sensor icon
show_if_on number Optional MShow alert if the value is on

Display the Alert Layer

Home Assistant lovelace card

Alert Layer, example of card setup
  type: custom:ha-card-weather-conditions
  name: "cc_test"
  language: it
  alert:
    fire_risk:
      entity: sensor.cc_test_fire_index
      icon: mdi:campfire
      min: 1
      max: 100
      show_if_ge: 15
    thunderstorms_risk:
      entity: binary_sensor.dpc_acquafredda_temporali_oggi
      show_if_on: true
    hydraulic_risk:
      entity: binary_sensor.dpc_acquafredda_idraulico_oggi
    hydrogeological_risk:
      entity: binary_sensor.dpc_acquafredda_idrogeologico_oggi

β€” Other examples β€”

Climacell full card

  type: custom:ha-card-weather-conditions
  name: "cc_test"
  language: it
  animation: true
  camera: camera.cc_test_c1
  pollen:
    tree:
      entity: sensor.cc_test_pollen_tree
      min: 0
      max: 5
      low: 1
      high: 3
    weed:
      entity: sensor.cc_test_pollen_weed
      min: 0
      max: 5
      low: 1
      high: 3
    grass:
      entity: sensor.cc_test_pollen_grass
      min: 0
      max: 5
      low: 1
      high: 3
  air_quality:
    pm25: sensor.cc_test_pm25
    pm10: sensor.cc_test_pm10
    o3: sensor.cc_test_o3
    no2: sensor.cc_test_no2
    co: sensor.cc_test_co
    so2: sensor.cc_test_so2
    epa_aqi: sensor.cc_test_epa_aqi
    epa_health_concern: sensor.cc_test_epa_health_concern
  weather:
    icons_model: climacell
    current:
      sun: sun.sun
      current_conditions: sensor.cc_test_weather_condition
      humidity: sensor.cc_test_humidity_percentage
      pressure: sensor.cc_test_barometric_pressure
      temperature: sensor.cc_test_temperature
      visibility: sensor.cc_test_visibility
      wind_bearing: sensor.cc_test_wind_direction
      wind_speed: sensor.cc_test_wind_speed
      precipitation: sensor.cc_test_precipitation
      forecast: true
    forecast:
      meteogram: camera.cc_test_c2
      icons:
        day_1: sensor.cc_test_weather_condition_0d
        day_2: sensor.cc_test_weather_condition_1d
        day_3: sensor.cc_test_weather_condition_2d
        day_4: sensor.cc_test_weather_condition_3d
        day_5: sensor.cc_test_weather_condition_4d
      temperature_high:
        day_1: sensor.cc_test_temperature_max_0d
        day_2: sensor.cc_test_temperature_max_1d
        day_3: sensor.cc_test_temperature_max_2d
        day_4: sensor.cc_test_temperature_max_3d
        day_5: sensor.cc_test_temperature_max_4d
      temperature_low:
        day_1: sensor.cc_test_temperature_min_0d
        day_2: sensor.cc_test_temperature_min_1d
        day_3: sensor.cc_test_temperature_min_2d
        day_4: sensor.cc_test_temperature_min_3d
        day_5: sensor.cc_test_temperature_min_4d
      precipitation_probability:
        day_1: sensor.cc_test_precipitation_probability_0d
        day_2: sensor.cc_test_precipitation_probability_1d
        day_3: sensor.cc_test_precipitation_probability_2d
        day_4: sensor.cc_test_precipitation_probability_3d
        day_5: sensor.cc_test_precipitation_probability_4d
      precipitation_intensity:
        day_1: sensor.cc_test_precipitation_max_0d
        day_2: sensor.cc_test_precipitation_max_1d
        day_3: sensor.cc_test_precipitation_max_2d
        day_4: sensor.cc_test_precipitation_max_3d
        day_5: sensor.cc_test_precipitation_max_4d