Skip to content
Minimalistic weather card for Home Assistant
Branch: master
Clone or download
kalkih Renamed bundle filename
rename bundle filename
Latest commit ce8a26d Jun 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
icons Add secondary info option Mar 4, 2019
src Only render high/low when available (#4) Mar 6, 2019
.gitignore No thanks... .DS_Store Feb 27, 2019
LICENSE Initial commit 👏🏼 Feb 27, 2019
README.md Update version Mar 12, 2019
package.json Update version Mar 12, 2019
tracker.json Update version Mar 12, 2019
webpack.config.js rename bundle filename Jun 22, 2019

README.md

Simple Weather Card

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

Preview

Install

Simple install

  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.3.0
        type: module

CLI install

  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.3.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.3.0
        type: module

(Optional) Add to custom updater

  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

Updating

  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.3.0
        type: module

Using the card

Options

Card options

Name Type Default Since Description
type string required v0.1.0 custom:simple-weather-card
entity string required v0.1.0 The entity_id from an entity within the weather domain.
name string optional v0.1.0 Set a custom name.
secondary_info string precipitation v0.2.0 Secondary info displayed, precipitation, humidity, wind_speed.
backdrop boolean/object false v0.1.0 Colored background, takes true/false or a backdrop object.

Backdrop object options

See Backdrop example for example usage.

Name Type Default Description
fade boolean false Faded background.
day string '#45aaf2' Background color (Day).
night string '#a55eea' Background color (Night).
text string 'var(--text-dark-color)' Text color.

Example usage

Standard card

Standard card example

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

Backdrop example

Backdrop example

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

Custom backdrop example

Custom backdrop example

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

Problems?

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.

License

This project is under the MIT license.

You can’t perform that action at this time.