Custom animated weather card for Lovelace

Share your Projects! Dashboards & Frontend
131

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…

132

Make sure that you have added these files in the ui-lovelace.yaml and HA has the required permissions.

133

@ 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?

134

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

135

I just put them in 2 different folders

136

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 :

35 42

bingo:
12

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
137

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?

138

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

?

139

@arsaboo same error for me. Line 73 though:

    const currentCondition = entity.state;
140

Most likely that means that the underlying state is not defined. Check in the states table if that is the case.

141

and me? mine works except on pi screen using chromium

142

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…

143

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 :sweat_smile:

144

Anyone? Please.

145

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

146

Change the js code and change the reference from

hass.config.core.unit_system

to

hass.config.unit_system
3 Likes
147

I have the same error

148

I tried the change you suggested, but I still get the same error. Do you make this change in two places? Here is a copy of that small section of the js code…I tried changing both and just the first reference and I get the same error in the logs???

          const lengthUnit = hass.config.unit_system;
      switch (measure) {
        case 'air_pressure':
          return lengthUnit === 'km' ? 'hPa' : 'inHg';
        case 'length':
          return lengthUnit;
        case 'precipitation':
          return lengthUnit === 'km' ? 'mm' : 'in';
        default:
          return hass.config.unit_system[measure] || '';
149

Frustrated AH here. Why do I get no response or help but anytime someone else posts an issue they get a response? I heard the community is helpful, but I’m not so sure about that.

150

Mostly because ppl have no idea how to resolve your issue :frowning: