Skip to content

Example 6: Weather on SVG background

AmoebeLabs Swiss Army Knife Custom Card Example 6 - Weather on SVG background:

Visualization

There is also a variant with '-m3' in the filename. This one uses a Material 3 theme for its colors

Let's do something different and use the weather for a nice view 😄

This view is made with the aid of Affinity Designer. The 'balls' background is created with this tool and exported as an SVG file.
On top of those circles the weather and Airvisual data is displayed.

Interactions

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

Used Home Assistant Integrations

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:

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!

Other weather integrations won't work, as they create different states and attributes

View and Card Configuration

  • Background as external SVG, loaded with the usersvg tool
  • Upper left the title
  • The weather (temperature, humidity, pressure) in three circles.
  • The weather type as a state dependent external, animated SVG
  • Airvisual data showing the state dependent icon and the AQI value.

Lovelace view

file location included from
view-sake6.yml /lovelace/views sak-examples-dashboard.yaml

File assets

This view uses the following external file assets:

  • The background is a separate SVG file located in /local/images/backgrounds/balls-background-1.svg
  • To display the weather type, you need the external animated SVG's which are located in the /local/images/weather folder

Decluttering templates

None used.

SAK templates

None used.

Remarks

None.

Back to top