Lovelace: Simple Weather Card

kalkih · September 26, 2019, 2:42pm

Okay, I lied… it does actually work for me with the sensor.dark_sky_overnight_low_temperature_0d sensor, I just had a typo in my config: sensor.sensor.dark_sky_overnight_low_temperature_0d.

That makes me believe this is either caused by caching or that your latest card update failed.

Please try Ctrl - Shift - R / Cmd - Shift - R if you’re in Chrome to hard reload the HA page, or try re-downloading the card from Release v0.5.0 · kalkih/simple-weather-card · GitHub.

But to be honest, with that nice looking setup I’m not even sure why’d want to use this card lol, add a bit extra top and bottom padding to the header and that weather setup is

WhistleMaster · September 26, 2019, 2:42pm

@tomoqv Great setup indeed ! Could you share your yaml config ? Thanks !

tomoqv · September 26, 2019, 2:46pm

Sure!

  - type: custom:banner-card
    background: "var(--background-blue)"
    heading: "⛅ Väder"
    style: |
      ha-card .heading {
        font-size: 2em;
        margin-top: 5px;
        margin-bottom: 5px;
      }
    row_size: 4
    entities:
    - entity: sensor.dark_sky_temperature
      name: Nuvarande
    - entity: sensor.dark_sky_summary
      name: Nuvarande
      map_state: # There are more states I need to add here
        "Lätt molnighet": mdi:weather-partly-cloudy
        "Soligt": mdi:weather-sunny
        "Molnigt": mdi:weather-cloudy
    - entity: sensor.dark_sky_daytime_high_temperature_0d
      name: Högsta
    - entity: sensor.dark_sky_overnight_low_temperature_0d
      name: Lägsta
    - sensor.vindstyrka
    - sensor.vindbyar
    - sensor.vindriktning
    - entity: sensor.dark_sky_precip_probability
      name: "Regnrisk"

Padding is a matter of taste (and space on the screen). It is still work in progress for me.

tomoqv · September 26, 2019, 3:06pm

I actually seemed to have an older version although I thought I updated it yesterday. With the download above though, I get “custom element doesn’t exist”. Do I need to change the version number in ui-lovelace.yaml from what I had before the update?

  - url: /customcards/lovelace/simple-weather-card.bundle.js?v=0.5.0
    type: module

kalkih · September 26, 2019, 4:25pm

Check the resource reference /customcards/lovelace/simple-weather-card.bundle.js?v=0.5.0 should probably be /customcards/lovelace/simple-weather-card-bundle.js?v=0.5.0, unless you manually renamed the file after downloading.

The version number does not have an impact, it’s just a good way to make sure you don’t load the previous version of the card from cache, changing the url makes the browser fetch the file again.

tomoqv · September 26, 2019, 7:19pm

yup, that did the trick! Apparantly the name of the bundle changed since last time I downloaded it. High/low works now with custom!

Thyraz · September 27, 2019, 9:03am

@kalkih thank you very much for this nice card.

One question, which font do you usein home assistant in your screenshots in the first post.
Looks quite nice.

kalkih · September 27, 2019, 11:08am

Thanks!

Pretty sure it was Google Sans.

mkono87 · November 6, 2019, 3:24am

This looks great. Could you tell me how you made those awesome custom badges?

BradAU · January 20, 2020, 6:33am

Hi @kalkih
Thanks for the fantastic card and your continued work on it.

With the current version I’ve been able to extract data from the Australian BOM feed to populate most of the card parameters and have it almost exactly as I want, with 1 minor issue.

Is there a way I can have ‘humidity’ shown instead of the high/low temperature on the right side?

If I add ‘humidity’ as secondary-info it replaces the ‘precipitation’ but I would like to keep 'precipitation’on the bottom and have ‘humidity’ shown on the top line.

Thanks Brad

cjsimmons · January 20, 2020, 9:50pm

Yes, I’d like to have this ability. I’m using my own weather station, so I don’t have the min/max temps, so having humidity and precipitation would be great.

Would be even better if we could have precipitation and precipitation rate on the same line.

kalkih · January 22, 2020, 11:01pm

@BradAU & @cjsimmons.

Hello, thanks for your feedback.
You can now customize both rows of information in the latest release. Each row does also support several weather attributes. See docs for more info.

Quick example:

- type: custom:simple-weather-card
  entity: weather.smhi_home
  primary_info:
    - wind_bearing
    - humidity
  secondary_info:
    - precipitation

BradAU · January 22, 2020, 11:58pm

Hi @kalkih

Thanks for the update, that allows me to do exactly what I wanted to achieve with this card.

I’m having 1 issue since the update, I have a custom ‘state’ sensor set for the text under the current temp, it was working on v0.6.0 but since the update I get [object Object] there instead.

If I remove the custom ‘state’ it works fine, do you know why this is?

Thanks again.

kalkih · January 23, 2020, 1:09am

Okay, might be a bug that slipped through, sorry!
Could you please send me the state attributes for that sensor, you can find them at http://[HA-IP]:[HA-PORT]/dev-state.

Thanks!

cjsimmons · January 23, 2020, 1:39am

This is awesome!!

I’m having one issue though, and can’t work it out. If I use my own weather station, I cannot get anything to populate the primary_info area. secondary_info works fine.

If I change to using darksky, the primary area shows the future forecast temp (I think), and not what I want it to show.

I have removed all the files for this, refreshed chrome, and tried on the HA app. I have reinstalled it a few times too. Any ideas?

BradAU · January 23, 2020, 1:47am

This is all the dev-state in for the sensor, it basically just give the current state as a short text.

sensor.bom_current_text Hot friendly_name: bom_current_text

kalkih · January 23, 2020, 1:49am

@BradAU I found the issue, fixed with a new minor release v0.7.1.

Sounds like you’re not loading the latest version of the code.
If you’re using HACS please check this issue as it’s relevant for this card as well.

BradAU · January 23, 2020, 1:57am

Amazing! Thanks very much.

Upgraded to 0.7.1 and now working perfectly.

cjsimmons · January 23, 2020, 3:02am

It’s working now. Just needed to update to 0.7.1 which wasn’t there before. The code to load it is correct too.

Mariusthvdb · January 23, 2020, 10:58pm

Hi @kalkih
playing with the newly added options, which are a fine addition to the beautiful card, let me ask if you would be willing to add ‘hold_action’ to the card.

use case: I now have a tap action navigation_path set, to bring me to my weather tab. I would love to have a more-info on the entity too though… using hold_action on all my button cards for that, I would love to set hold_action: more_info on the simple-weather-card, and have the same user interaction all through the interface, and reveal this:

secondly: Id like to add the precipitation, but my weather component (Buienradar) only provides that in the nested attributes of forecast. It would be really cool if we could set that in the config, so the card could find these attributes too somehow. Could you see if that would be possible?

it does show this though, and I cant figure out based on the info above, how the card shows what it does?

based on this config:

primary_info:
  - extrema
  - precipitation
  - precipitation_probability
secondary_info:
  - wind_speed
  - wind_bearing
  - humidity

here’s the screen of Buienradar:

thanks for considering if you would!

btw, can’t we use pressure and visibility in the attributes? As they are available, why not let us use these?