A minimalistic weather card for Home Assistant Lovelace UI, inspired by Google Material Design.

This card is available in HACS (Home Assistant Community Store)

1. Download and copy simple-weather-card-bundle.js from the latest release into your config/www directory.

2. Add a reference to simple-weather-card-bundle.js inside your ui-lovelace.yaml or through the raw config editor interface.

   resources:
     - url: /local/simple-weather-card-bundle.js?v=0.4.0
       type: module

1. Move into your config/www directory

2. Download simple-weather-card-bundle.js

   $ wget https://github.com/kalkih/simple-weather-card/releases/download/v0.4.0/simple-weather-card-bundle.js

3. Add a reference to simple-weather-card-bundle.js inside your ui-lovelace.yaml or through the raw config editor gui.

   resources:
     - url: /local/simple-weather-card-bundle.js?v=0.4.0
       type: module

1. Make sure you've the custom_updater component installed and working.

2. Add a new reference under card_urls in your custom_updater configuration in configuration.yaml.

   custom_updater:
     card_urls:
       - https://raw.githubusercontent.com/kalkih/simple-weather-card/master/tracker.json

1. Find your simple-weather-card-bundle.js file in config/www or wherever you ended up storing it.

2. Replace the local file with the one found in the latest release.

3. Add the new version number to the end of the card reference url in your ui-lovelace.yaml. This will prevent the browser from loading the old version from cache.

   resources:
     - url: /local/simple-weather-card-bundle.js?v=0.4.0
       type: module

See Backdrop example for example usage.

See Custom example for example usage. Possible entries are: temp, high, low, state, precipitation, humidity and wind_speed.

custom:
  - temp: sensor.home_temp
  - high: sensor.home_high_temp
  - low: sensor.home_low_temp

- type: custom:simple-weather-card
  entity: weather.smhi
  name: in current location

- type: custom:simple-weather-card
  entity: weather.smhi
  name: " "
  backdrop: true

- type: custom:simple-weather-card
  entity: weather.smhi
  name: at home
  backdrop:
    day: "var(--primary-color)"
    night: "#40445a"

- type: custom:simple-weather-card
  entity: weather.smhi
  name: Home
  custom:
    - temp: sensor.home_temp
    - high: sensor.home_high_temp
    - low: sensor.home_low_temp

Make sure you have javascript_version: latest set in your configuration.yaml under frontend:.

Make sure you got the latest version of simple-weather-card-bundle.js.

If you have issues after updating the card, try clearing the browser cache manually.

If you are getting "Custom element doesn't exist: simple-weather-card", or are running an older browser try replacing type: module with type: js in the resource reference in ui-lovelace.yaml or in the raw config editor.

This project is under the MIT license.