Custom animated weather card for Lovelace

You might want to check dev tools in your browser, network tab, and filter by “weather-card.js”.

This will allow you to understand if the file is being loaded correctly, if not, you might want to ensure that the weather-card.js file is in www/custom-ui/weather-card/ folders path inside your config folder.

Thank you SeLLeRoNe, can you help me with your first suggestion. Dev tools I understand, but where do I find a ‘network tab’? Thanks!

Something like this:

oh, I lied :frowning: I thought I understood what you meant with Dev Tools, but I don’t recognize that screen either. I thought you were referring to this section
image

ok, I think I found it

ok, are you using lovelace in YAML mode?

Hi,
I have the same issue as hdaalder. For me, it seems to be limited to Firefox, as both Safari and the IOS Home Assistant app display the card.

I’m having the same problem as Romquenin. Running HA 0.90.1

I have HA displaying on a wall mounted tablet. Found that the weather card does not update unless I change to a different tab and then come back to the weather card. Is there a way to have it update at intervals?

yes, thanks for another response, but I tossed this custom card out. Too time consuming to get it to work

Fair enough, just one thing I can say from that is that the card is not loaded, so or you didnt add it in the list of cards or you added with the wrong path.

But because it is not in the network tab, it is more likely is not being loaded at all.

Great card, however, hourly mode does not show hours. Any way to fix it?

This fixed an issue in Firefox where this card would not load - thank you :grinning:

I have multiple cards al in the same folder and all load fine except this one. It’s obviously something at my end otherwise there would have been more complaints.

Fair enough, but from your example of configuration a few weeks back you wrote the config as per some where in www and some in www/custom_ui and some in www/custom-ui/

You wrote this:

resources:
  - url: /local/mini-media-player-bundle.js
    type: module
  - url: /local/custom_ui/card-modder.js
    type: module
  - url: /local/custom-ui/weather-card/weather-card.js
    type: module

So all those 3 cards results in different path, now… isn’t that possible that the weather card is in custom_ui and not custom-ui?

Anyone else having an issue with the weather-card phasing in and out of working condition. At times I log in and i see:

Please define a weather entity
{
  "entity_sun": "sun.sun",
  "entity_weather": "weather.dark_sky",
  "type": "custom:weather-card"
}

As a test I checked using template editor:

{{ states.weather.dark_sky }}

results in

<template state weather.dark_sky=partlycloudy; temperature=70, humidity=45, ozone=298.43, pressure=1002.79, wind_bearing=252, wind_speed=9.91, visibility=9.65, attribution=Powered by Dark Sky, forecast=[{'datetime': '2019-04-11T00:00:00', 'temperature': 71, 'templow': 45, 'precipitation': None, 'wind_speed': 4.79, 'wind_bearing': 263, 'condition': 'partlycloudy'}, {'datetime': '2019-04-12T00:00:00', 'temperature': 77, 'templow': 57, 'precipitation': None, 'wind_speed': 8.26, 'wind_bearing': 82, 'condition': 'partlycloudy'}, {'datetime': '2019-04-13T00:00:00', 'temperature': 66, 'templow': 45, 'precipitation': 1.6, 'wind_speed': 8.36, 'wind_bearing': 64, 'condition': 'rainy'}, {'datetime': '2019-04-14T00:00:00', 'temperature': 62, 'templow': 45, 'precipitation': None, 'wind_speed': 15.81, 'wind_bearing': 316, 'condition': 'windy'}, {'datetime': '2019-04-15T00:00:00', 'temperature': 76, 'templow': 57, 'precipitation': None, 'wind_speed': 11.92, 'wind_bearing': 178, 'condition': 'partlycloudy'}, {'datetime': '2019-04-16T00:00:00', 'temperature': 76, 'templow': 68, 'precipitation': None, 'wind_speed': 17.11, 'wind_bearing': 183, 'condition': 'partlycloudy'}, {'datetime': '2019-04-17T00:00:00', 'temperature': 85, 'templow': 53, 'precipitation': 0.2, 'wind_speed': 14.77, 'wind_bearing': 210, 'condition': 'windy'}, {'datetime': '2019-04-18T00:00:00', 'temperature': 69, 'templow': 48, 'precipitation': None, 'wind_speed': 15.56, 'wind_bearing': 319, 'condition': 'windy'}], friendly_name=Dark Sky @ 2019-04-11T09:06:41.288126-05:00>

So Im not sure why I keep getting the issue.

Mh, I get your point. But as I said, it is working with any browser but firefox, so I guess the path in the home assistant configuration is correct.

I’ve seen an issue with the way daily low and high forecasted temperatures are captured. If I’m not mistaken, the implementation of the weather card assumes the low temperature will occur overnight, and the high temperature will occur during daylight. The following screen snippet from the Dark Sky website shows this is not always the case. For the same 24 hours, the Lovelace card shows a low of 56 °F and a high of 58 °F, vs. 47 °F and 70°F. I don’t know how the overnight and daylight time periods are defined by Dark Sky.

1 Like

I am in the process of building a wall display, I just noticed this too. It does not update on its own like other cards.

Same issue here, works fine with everything but Firefox. Only issue here is that i like Firefox…

Does anybody know why this is Firefox specific?