Custom animated weather card for Lovelace

Try a different browser. If you’re using Fully Kiosk browser you’ll need to set a different user-agent (not sure why this made it work). Maybe try a reboot of your Hass machine?

I rebooted Hass, doesn’t work in Edge, IE, Firefox, or Chrome on my PC or my laptop or my phone. Same problem everywhere.

If I go to hasslocation/local/custom-ui/weather-card.js in a browser I can see the JS file so I’m certain my directory structure is setup correctly as well.

This is the only info in my 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
garage_door_tilt_sensor_alarm_level: Weather

Hey guys, maybe I’m missing something (certainly wouldn’t be the first time) but what it he purpose of the above line? I have commented it out, and it doesn’t seem to make a difference, but I assume it was put there for a reason originally

Are you running hass.io?

Yes I’m running in Hass.io but apparently the guy earlier was using hass.io as well.

just to be sure: you have setup yweather itself? https://www.home-assistant.io/components/weather.yweather/

The “custom element doesn’t exist” error is when the code below doesn’t load the card

resources:
  - url: /local/custom_ui/weather-card.js
    type: js

Just make sure homeassistant user has access to the files.

It looks like you might have saved the components in the wrong directory - the components should not be saved in the /local directory; they need to saved in your /config directory. So if you’re using the Configurator add-on, the path would be /config/www/custom_ui

I have added FAQ section here https://github.com/ciotlosm/custom-lovelace#faq for my components. Maybe it helps people troubleshoot different types of errors.

Hi all,

also getting the same error with: “Custom element doesn’t exist: weather-card”.

It’s placed in: config/www/custom_ui - have I misunderstood anything?

Code in yaml refers to:

resources:

  • url: /local/custom_ui/weather-card.js
    type: js

Any tips? I think there might be something about the paths that I’ve misunderstood…

What browser are you using? Did you read the FAQ in the post above?

I’m using Chrome. I’ve checked the FAQ and I’ve now made sure they are in the right places. Have refreshed and restarted HA, but without luck…

Did you change the permissions? Run ls -la to check the owner of those files. It should be homeassistant user.

1 Like

Hi again, I’ve checked and owner seems to be “root”. Does that have an impact? I tried doing “chown” if that is the right approach, but can’t find any user for neither hassio or homeassistant…

@tottow open Developer tools and post the error there

Hi, can you be so kind, as I´m not familiar with this kind of modification, and send me some short instruction, how to do it? It will be great and enough for me to show modification for one day and also one wind direction, so I can modify other days/wind directions. Thank you for your help and support…

Yes, that is a problem. The owner should be homeassistant (assuming that is the user running HA). Use chown to change owner.

I don’t want to resurrect an old thread, and will certainly open a new one if need be, but how could I make this work with dark sky?

You can use toLocaleDateString. Change the line to:

              <span class="dayname">${(new Date(daily.datetime).toLocaleDateString("sv-se", {weekday: 'short'})).toString().split(' ')[0]}</span>

Change the locale to your own, (“sv-se”) is for Sweden.

After you change the javascript file you need to really empty the cache and do a hard reboot of the site or the javascript won’t reload. It’s really annoying.

For the wind directions, just rename the values in the same file on rows 54-70.

2 Likes