Custom animated weather card for Lovelace

I received strange error for weather-card:

image

anybody else?

Thanks for your awesome fork, I find it really useful that one can choose what conditions to monitor. Would it be possible to add the perception under each day? Like the fork ha-weather-card-extended has done bild

@Maximus97

Unfortunately, I have atm no time for smart home. Nevertheless, I’ll provide a little instruction for you to fork the card.

In the dist folder, you’ll find the weather-card.js file - this is what you have to edit. First, pass the additional two variables to the card config in your lvoelace yaml. You’ll recognize the pattern, that the sensors are called XY_2h XY_4h etc. We do not pass all the single sensors, instead we’ll want to add the _2h etc later in the card and pass only the common part of the sensor name(s), i.e see temperature.:

image

Next, you’ll need to append the new sensor to the internal state object of the card which starts at line 101. Put it into the forecast and today object based on the pattern for temperature.

Finally, you want to display the new values. In line 285 and 310 the forcast and today values are rendered. Here, you can add it based on the pattern in row 298 to 300. If you need additional css classes, append them in row 385.

hi, did you get this resolved ? i am getting same error and running latest version 0.107.7 thanks

I’m trying to squeeze a small, 4-day forecast into a horizontal stack (that’s all the space left I have in my wall control panel). Can anybody tell me how to modify the code to eliminate the vertical bars? Also, I’m getting 4 days by just hiding the overflowing 5th day through card-mod. Is there a way to just reduce the size of the whole card proportionally when added to a horizontal-stack?

Screen Shot 2020-04-01 at 8.00.21 AM

Not the best news, API will last till the end of 2021 but no new API signups:

Now that really sucks!

Agree 1000% this screws many people over not just HA but home weather stations too. Apple sucks!!!

1 Like

I just updated hassio to .109 and lost my lovelace.yaml configuration. I copied my raw ui-lovelace.yaml file onto the clipboard then went to the raw lovelace editor and pasted over the generated file and got everything back excepted the custom animated weather card. In my configuration section I have a resource that points to the .js file (/local/custom_ui/dark-sky-weather-card.js?v=7.1). In the raw lovelace editor I have (type: ‘custom:dark-sky-weather-card’) defined. Nothing shows up under my Weather heading.

Any help would be appreciated.

Animated icons stopped working on IOS 13.4 and Safari 13.1. Also a seperate topic on this on https://community.home-assistant.io/t/animated-weather-icons-on-iphone-stopped-animating/185647. Also an opened issue on github: https://github.com/bramkragten/weather-card/issues/33

Also, i don’t know why i wrote on all these three places about this issue. Guess i am so frustrated on Apple and could do nothing about it :angry:

yes, but note it is a system wide issue, not only in this animated weather card.
And it only started when HA updated to 108.x (not sure of the version) when no update to iOS or Safari was made…

1 Like

Hahaha… I was just posting to @tom_l about thinking it’s HA not iOS as well…

But I am using HA 108.8 and currently on IOS 13.3 it works perfectly fine, but not on 13.4. Also, it works on firefox and chrome, but not on Safari 13.1. Though i am only speaking for animated weather card, because i am not using any other animated card…

It doesn’t work in chrome for me. (Latest iOS beta)

It probably is because chrome IOS is still using Safari Webkit on IOS and so is Firefox IOS. If Safari works than chrome IOS will work too automatically. And we should stop communicating same thing on both topics :rofl: Let’s continue on this one…

that’s not a good idea, since it isn’t an animated weather card issue, but a HA generic issue.

Updated from 108.9 to 109.0 and my current temp is now near the top of the card instead of in line with the icon and name as it’s been previous to updating. Anyone else have this issue or is it just me?

Screen Shot 2020-04-30 at 09.36.54

2 Likes

Mine is a few pixels higher now and doesn’t line up with the bottom of the text next to the icon…

image

1 Like

Yeah I noticed this in the beta of 0.109. I modified my css entries in the card to correct it and you will need to do that for this card as well. I will post my changes in the BOM card thread in a while with my changes.

Just tried 0.109.1 on my wife’s iPhone, 12.4.5 and the icons are working so it seems it is a iOS issue.

1 Like

@keithh666 if anyone wants to fix the missing gap for this version (without css knowledge) until the developer fixes it, I just added an empty markdown at the top of it to get the desired gap again:

cards:
  - content: ' '
    type: markdown
  - entity: weather.home
    name: Home
    type: 'custom:weather-card'
type: 'custom:vertical-stack-in-card'

1 Like