Example 1: AirVisual and Weather forecast¶

A single card displaying data from Airvisual, the current weather and a 5 day weather forecast.

Topcard showing AirVisual data with some weather data:

Bottom card showing weather and weather forecast:

Visualization¶

AirVisual¶

The AirVisual card shows two blocks:

1. The left part shows the AirVisual data with 24 hours of history

   • The AQI 'face', an external SVG
   • The AQI value with interpretation (good, etc.)
   • The AQI main pollutant.
   • 24 hour history of the AQI value

2. The right part shows weather data.

   • The weathertype is displayed using an external animated SVG
   • And below that, the outside temperature, humidity, pressure and wind speed.

Weather forecast¶

This visualization is divided into three major blocks:

1. The top part shows the weathertype, temperature, humidity and AQI value.

   • The weathertype is displayed using an external animated SVG
   • Next are three segmented arc tools with dedicated colorstops and the state value and icon inside. The AQI icon is state dependent.

2. The second / middle block shows pressure, wind and wind direction and sunset and sunrise

3. The last block shows the 5 day weather forecast.

   • The localized short day name using a bit of javascript in the YAML configuration
   • The expected weather type using (again) external animated SVG's
   • The maximum expected temperature
   • The minimum expected temperature
   • The expected precipitation

Interactions¶

• All tools support by default the "more-info" dialog once clicked.

Used Home Assistant Integrations¶

• Met.no Weather integration
• Airvisual integration

In total approx 50 entities are used to build this visualization.

How to make it work in your own installation¶

Card¶

Required Home Assistant Integrations
The visualization is build on the Met.no and Airvisual entities, so you need these integrations:

• Met.no Weather integration:
• Airvisual integration:

Required Home Assistant Entity Changes
The Airvisual entities should be the same for any installation, so no changes required on that part.

The Met.no integration creates the weather.changeme entity. Adapt the changeme part to your own installation!

View and Card Configuration¶

Lovelace view¶

File assets¶

To display the weather type, you need the external animated SVG's which are located in the /local/images/weather folder

  images:
    - clear-night-night: /local/images/weather/clear-night.svg
    - cloudy-day: /local/images/weather/cloudy-day.svg
    - cloudy-night: /local/images/weather/cloudy-night.svg
    - fog-day: /local/images/weather/fog-day.svg
    - fog-night: /local/images/weather/fog-night.svg
    - hail-day: /local/images/weather/hail-day.svg
    - hail-night: /local/images/weather/hail-night.svg
    - lightning-day: /local/images/weather/lightning.svg
    - lightning-night: /local/images/weather/lightning.svg
    - partlycloudy-day: /local/images/weather/partlycloudy-day.svg
    - partlycloudy-night: /local/images/weather/partlycloudy-night.svg
    - pouring-day: /local/images/weather/pouring.svg
    - pouring-night: /local/images/weather/pouring-night.svg
    - rainy-day: /local/images/weather/rainy-day.svg
    - rainy-night: /local/images/weather/rainy-night.svg
    - snowy-day: /local/images/weather/snowy-day.svg
    - snowy-night: /local/images/weather/snowy-night.svg
    - snowy-rainy-day: /local/images/weather/snowy-rainy-day.svg
    - snowy-rainy-night: /local/images/weather/snowy-rainy-night.svg
    - sunny-day: /local/images/weather/sunny-day.svg
    - sunny-night: /local/images/weather/clear-night.svg
    - snowy-rainy-day: /local/images/weather/snowy-rainy-day.svg
    - snowy-rainy-night: /local/images/weather/snowy-rainy-night.svg
    - windy-day: /local/images/weather/windy-day.svg
    - windy-night: /local/images/weather/windy-night.svg
    - windy-variant-day: /local/images/weather/windy-variant.svg
    - windy-variant-night: /local/images/weather/windy-variant.svg
  animations:
    - state: '[[[ return (state); ]]]'
      image: >
        [[[
          if (states["sun.sun"].state == 'below_horizon') return (state + '-night');
          return (state + '-day');
        ]]]

Remarks¶

• This view shows the dutch translation for "Partly Cloudy → Gedeeltelijk bewolkt" and the wind direction "WSW → WZW".

  Support for translations is possible using a YAML configuration.