What I had to do to fix this issue was create 2 versions of the icons and call one folder “small” and change the forecast reference in the .js file to the smaller folder. Seems like if it’s using the same icon for the forecast and the larger current conditions it renders the small size first then stretches it for the larger one making it ugly
3 Likes
Happens to me as well, I get the following error in the console
Been following the guide and am probably missing something here…
Update: after changing to yweather, I get the following stack
I have probably experienced the same problem. Changing the boolean value of dom.webcomponents.shadowdom.enabled and dom.webcomponents.customelements.enabled to false in about:config fixed the problem for me.
Note: Some of your UI objects may show up incorrectly, for example the custom column width of a Glance card.
Not sure what I’m doing wrong but I get the "Custom element doesn’t exist error when I enable this card. I think someone further up in the chain commented that this was indicates that the “weather-card.js” script is not being executed.
However I have placed this file in the www/custom-ui folder and have the icons in the www/icons/weather-icons/animated as specified in the instructions.
I’m running Home Assistant in a Docker container on my Mac server. Is this a problem and if so what other container(s) or services need to be running in order for the script to execute properly.
Thanks in advance…
Make sure that you have added these files in the ui-lovelace.yaml and HA has the required permissions.
@ Arsaboo: You say “make sure that you have added these files…”. Are you implying that both the weather-card.js and the icons folder require to be reference in the ui-lovelace.yaml file? Currently I have:
resources:
- url: /local/custom_ui/weather-card.js
type: js
at the top of this file.
With regard to permissions it would seem that the Docker container that is running HA has read/write permissions to the HA config folder as it is able to write the Home-assistant.log file successfully.
Any additional ideas?
smart! this probably solves it on regular Hassio too!
great.
btw did you actually crop the icons too, or simply have them doubled in 2 folders
I just put them in 2 different folders
thanks i will test. Any idea whether the static icons are still used by the card? Or elsewhere for that matter?
btw, the blurring only happens when the smaller icons are in the window too. Scrolling these out of the window, immediately sharpens the card icon. I think @Jer78 discovered that a while ago :
bingo:
copied all files to animated/forecast and edited the line:
<br> <i class="icon" style="background: none, url(/local/weather/animated/forecast/[[item.condIcon]].svg) no-repeat; background-size: contain;"></i>
thanks for this long wanted solution! did you post this in the thread for the regular card too?
1 Like
I am having this sort of error:
2018-08-28 20:13:00 ERROR (MainThread) [frontend.js.latest.201808200] https://xxxxxxxxx.duckdns.org/local/custom_ui/weather-card.js:74:37 Uncaught TypeError: Cannot read property 'state' of undefined
What’s the meaning and how to solve?
Wonder why this is giving me errors in chromium browser via pi screen? It works when I access from chrome on my laptop and phone.
I cleared cache but still get error n.setConfig is not a function
?
Most likely that means that the underlying state is not defined. Check in the states table if that is the case.
and me? mine works except on pi screen using chromium
Where would it be defined? I just followed the instructions in the first post. Do they assume I have something else defined somewhere? Are there other steps I need to do to make it work?
At the moment I have:
title: Home
resources:
- url: /local/custom-lovelace/sonarr-upcoming-card/sonarr-upcoming-card.js
type: js
# - url: /local/custom_ui/weather-card.js
# type: js
views:
Then down on the tab I have:
# - title: Animated Weather
# icon: mdi:weather-cloudy
# id: weather
# garage_door_tilt_sensor_alarm_level: Weather
# cards:
# - type: "custom:weather-card"
# entity_weather: weather.yweather
# entity_sun: sun.sun
All commented out for now as they aren’t working.
I also copied the css and js to /www/custom_ui/ and the icons to /www/icons/weather_icons (unzipped)
Am I missing something else???
EDIT: Found the Darksky Version and it’s working…
Getting the same error here:
URLOFMYHASS.IO/static/custom-elements-es5-adapter.js:13:615 Uncaught TypeError: Class constructor WeatherCard cannot be invoked without ‘new’
how is it supposed to be fixed?
EDIT: ok, I totally don’t know how but it seems to work now. I haven’t done anything 
Anyone? Please.
Just installed this yesterday and it works great…however today I updated to 77.2 and I get the following error in my logs:
MYIP:8123/local/custom_ui/dark-sky-weather-card.js?v=4:17:43 Uncaught TypeError: Cannot read property ‘unit_system’ of undefined
Any suggestions?
Thanks
Change the js code and change the reference from
hass.config.core.unit_system
to
hass.config.unit_system
3 Likes
I have the same error