Custom animated weather card for Lovelace

Bieniu · October 7, 2018, 9:24am

How did you get the translation of the names of the days of the week?

EDIT:
I changed line 98 in js file to:

<span class="dayname">${new Intl.DateTimeFormat('pl-PL', {weekday: 'short'}).format(new Date(daily.date)).split('.')[0].toUpperCase()}</span>

and now names of the days are in polish.

beniaminrychter · October 8, 2018, 10:45am

It’s incorrect. I’ve pasted this line and console was all red
This works:

<span class="dayname">${(new Intl.DateTimeFormat('pl-PL', {weekday: 'short'})).format(new Date(daily.datetime)).split('.')[0].toUpperCase()}</span>

Bieniu · October 8, 2018, 11:24am

Of course, you’re right.

poebae · October 10, 2018, 7:36am

How do you get the written forecast at the bottom of the panel? Is it a darksky thing?

devianpctek · October 10, 2018, 12:54pm

Sorry, I didn’t get notifications (I’ll have to check the settings for this) glad you figured out by the way

devianpctek · October 10, 2018, 12:55pm

I’m not sure if it’s a darksky thing, I added language on my yaml, not sure if that did it, I’ll take a look later today at my files and let you know

Yoinkz · October 23, 2018, 12:08pm

arsaboo:

UPDATE (7/3): Thanks to @ciotlosm for all his inputs to get the card fixed. We now have a significantly better version of the custom animated card that provides the same output, but is less “hacky”. To configure the card:

Place the weather-card.js and weather-card.css files in www\custom_ui\ .

Save, the amcharts icon under www\icons\weather_icons\animated

Add the following to your ui-lovelace.yaml .
resources:
  - url: /local/custom_ui/weather-card.js
    type: js

title: Home Assistant
views:
  - icon: mdi:weather-cloudy
    id: weather
    title: Weather
    garage_door_tilt_sensor_alarm_level: Weather
    cards:
      - type: "custom:weather-card"
        entity_weather: weather.yweather
        entity_sun: sun.sun

So I tried following this and everything seems be implemented correctly, but it just doesn’t work.
I get this error in the log and the ui lovelace just pops up with a blank screen.

Error:

http://hassio:8123/local/custom_ui/weather-card.js:73:37 Uncaught TypeError: Cannot read property 'state' of undefined

Any ideas?

EDIT: Fixed!!!
I didn’t set up the yweather platform. When I did, it worked!

cjsimmons · October 24, 2018, 4:21am

I’ve just added this to my setup. Works and looks great. I just have 2 issues.

The minimum/low temp is all listed as undefined.
There is no forecast at the bottom.

Are these related to darksky not having these values?

Also, is it possible to change the hourly forecast to daily along the bottom?

sapnho · October 26, 2018, 8:06am

Thank you very much, it (almost) works. Where do I actually specify the location for the weather data? I have my latitude and longitude in the configurations.yaml but it is not giving me the weather for my location.

fairchildbrad · October 26, 2018, 11:59am

Follow the instructions to set up yweather, specifically you need a WOEID:

https://www.home-assistant.io/components/sensor.yweather/

Argo · October 26, 2018, 6:17pm

Hi! Still no solution on blurring?

sapnho · October 27, 2018, 9:00am

Same issue with blurring here. Only in Safari though, it works fine in Chrome and Firefox.

Argo · October 27, 2018, 9:07am

I am using native app

sapnho · October 27, 2018, 9:17am

True, in native app on iOS as well.

woody4165 · October 27, 2018, 3:29pm

Hi

I’m getting errors upgrading to 0.81.0 Hassio on the weather-card an also with themostat-card and some others, not with swipe card for example.

Anyone else?
Any suggestion?

Thanks

Dominic · October 28, 2018, 12:44am

is it in a vertical stack?

woody4165 · October 28, 2018, 1:41am

Yes, it is.
And it was also before, working properly.

DavidFW1960 · October 28, 2018, 1:43am

there is a bug with stacks in 0.81. Hotfix 0.81.1 soon

Dominic · October 28, 2018, 7:52am

@woody4165 what @DavidFW1960 said bug with stacks getting fixed soon - next up[dater I would think

qrioniclabs · October 29, 2018, 10:05am

Hi! Great custom card, thank you!

Is there any way to add a title to the card?