Lovelace: Simple Weather Card

Share your Projects! Dashboards & Frontend
1

Simple Weather Card

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

Preview
Preview1024×523 36.2 KB

Instructions

Please visit the GitHub repository for installation and usage instructions.

Let me know if you have any questions, issues or suggestions!

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

how do you setup the weather entity ?
I’m using Darksky

Ta
LeeB

3

Here is the documentation for the dark sky weather platform.

5

This is pretty neat!! It’s exactly what I’m looking for, but doesn’t work with my weather.bom platform. :frowning: I’ve setup darksky, and their values today are wrong.

Would it be possible to use our own sensors? I’d like to use my personal weather station for the current temp, max/min and rain, and may as well for condition. Is this possible, or something that can be done down the track?

6

That’s weird, I thought all weather platforms would expose the same attributes, at least the basic ones.
I’ve honestly only tested this with the SMHI weather component.

Not possible right now, but could be implemented.

7

I guess not. :frowning: This is what is exposed for my local weather station via the BOM platform

{
  "humidity": 57,
  "wind_bearing": 45,
  "custom_ui_state_card": "state-card-custom-ui",
  "wind_speed": 26,
  "temperature": 27.7,
  "attribution": "Data provided by the Australian Bureau of Meteorology",
  "friendly_name": "BOM Albion Park",
  "pressure": 1023.2
}

This is good news. Hopefully, sooner rather than later.

8

hmmm


59

what could I be doing wrong


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

Do we need to download the icons? Or are they in the module.

9

Icons are bundled in, LitElement and lit-html is not.

You’re missing the css from the looks of it, are you running an older version of HA?

10

Looks great and gives useful information. Very well done! :+1:

11

Suppose yes, ha 84.3 here, which is about a month or 2 ‘old’?

12

Thank you!

Okay, that’s probably the reason, I decided to not bundle in LitElement and lit-html this time, like I do with my other (more serious) cards. So this card relies on an up to date HA setup.
lit-html and LitElement have been developed a lot during the last few months, lit-html is now released as v1.0.0, so major & breaking changes should be rarer from here on I guess.

13

Heya, the release is a .bundle.js (not sure if that makes a difference) but the file is much more condensed - and cant get it to work. with module or js.
Is it not required to copy the icons etc also?

Thanks
Error is unknown card type

14

That’s why I opted to go with a bundle, it includes all assets, including icons.
It’s also minified to take up as small space as possible, that’s why it looks funny.

What does your resource section look like, and the card configuration?

It’s important to put custom in front of the card name.

- type: custom:simple-weather-card
  entity: weather.example
15

Since I won’t update just yet that leaves me without this little card then ? Seems a bit overkill to update because of this small but very nice card alone.
Maybe you would reconsider including Lit?

16

Yep, looks exactly the same (although added backdrop and name) - will remove for testing.
Interesting I wasn’t aware of the bundle format.

EDIT: shouldnt copy code at 2am - didnt add the extra folder in my local/ folder.
Works like a charm! thanks for sharing!

1 Like
17

If you wanted to add another instance with a different location, i’m assuming you can add another dark_sky component and api key, and call that new weather.dark_sky_2 with a new custom:simple-weather-card ?

18

Absolutely.

19

Any chance to show Humidity on the card? This would be immensely useful for those of us in hotter regions.

Also this may go against the idea of a “simple” weather card, but any chance in the future to change the size of this card to that of the default lovelace weather card? I really dig this style and customization but miss the additional information the default card has.

20

Yes, I think I’ll add an config option for the additional information displayed (precipitation right now), similar to the secondary_info option for entity-rows.

Might add the forecast to the bottom of the card (optional of course) in the future.

1 Like
21

Added the option secondary_info now, takes precipitation, humidity or wind_speed

# Show humidity
- type: custom:simple-weather-card
  entity: weather.example
  secondary_info: humidity

New release here: v0.2.0

3 Likes