Custom animated weather card for Lovelace

Share your Projects! Dashboards & Frontend
497

Work perfectly
thank you so much

498

Same here, not working properly on my iPhone, but this issue does not appear on my ipad airā€¦

499

Hi just wondering is there an easy way to show both current weather and todays forecast?

Thanks

500

I have been using the Overview dashboard with the standard cards, but now I want to add this custom card. I placed the js and icons in the folders www/custom-lovelace/weather-card and added this to configuration.yaml:

lovelace:
  resources:
  - url: /local/custom-lovelace/weather-card/weather-card.js
    type: module

After restarting, I went to Overview, edit, and selected manual. Here is what I entered there and the result:

custom card
custom card964Ɨ307 18.4 KB

But there is a file /config/www/custom-lovelace/weather-card/weather-card.js Why canā€™t HA find and use it? Thanks for any help.

501

Clear the cache browser

502

I like this card and Iā€™ve been using it for quite a whileā€¦ but I too miss a few features from the Dark Sky card (red boxes):

Dark Sky Card

503

did you find a solution to use tap_action?

504

My Raspberry PIā€™s CPU thanks you!

505

Hey all, I am trying to output the hourly forecast, but it shows same time for different dates:
image

Here is my config:

type: custom:weather-card
entity: weather.patriarha
forecast: true
hourly_forecast: true
details: false
current: false
number_of_forecasts: 8
506

Maybe its the data itselfā€¦not sure. A way to check:
Go to UI->DevTools->Services and enter:

service: weather.get_forecasts
data:
  type: hourly
target:
  entity_id: weather.patriarha

For your hourly forecast items you should see something like ā€œdatetimeā€ in each item but the hours should be incrementing:
datetime: "2024-03-12T14:00:00-04:00"
datetime: "2024-03-12T15:00:00-04:00"

507

Thanks for the tip. It is showing sequential hours correctly:

weather.patriarha:
  forecast:
    - condition: cloudy
      datetime: "2024-03-12T20:00:00+00:00"
      temperature: 6.3
      ...
    - condition: cloudy
      datetime: "2024-03-12T21:00:00+00:00"
      temperature: 5.1
      ...
    - condition: cloudy
      datetime: "2024-03-12T22:00:00+00:00"
      temperature: 5.2
      ...
508

Maybe try the following ā€¦change the hourly_forecast to forecast_type

current: false
details: false
forecast: true
forecast_type: hourly
number_of_forecasts: 8
509

TL;DR I switched to the locally hosted version of the card and it all works now!

Your suggestion gave me an idea to look at the code. I realized that my version of the card is different than the one in GitHub. I was using the CDN served file which was a very old version of the card.

So, thank you so much for helping me resolve the issue @wmaker

510

Iā€™ve been using this card for a long long time. After last HA update (to 2024.4.0) non of my configured weather sources does not work witd daily forecast.

My config:

automation:
 - id: get_home_weather_forecast
   mode: restart
   alias: get_home_weather_forecast
   trigger:
       - platform: time_pattern
         hours: /1
   action:
   - service: weather.get_forecasts
     target:
       entity_id:
       - weather.metno
     data:
       type: daily

Response:

weather.metno:
  forecast:
    - condition: rainy
      datetime: "2024-04-04T10:00:00+00:00"
      wind_bearing: 223
      temperature: 16.9
      templow: 11.2
      wind_speed: 17.3
      precipitation: 3.9
      humidity: 54
    - condition: cloudy
      datetime: "2024-04-05T10:00:00+00:00"
      wind_bearing: 221
      temperature: 18.5
      templow: 7
      wind_speed: 18
      precipitation: 0
      humidity: 65
    - condition: cloudy
     ....

Lovelace config, I remove card_mod part only:

- type: 'custom:weather-card'
  entity: weather.metno
  details: false
  forecast: true
  hourly_forecast: false
  number_of_forecasts: '5'

Result on the dashboard: :slightly_frowning_face:
image

Any hint what I am doing wrong? Pls

511

I think this is due to the fact the forecast has been removed from the attributes and you need to get it with the get_forecasts service. Also some cards I use are not working with forecasts anymore. Think we have to wait for the developer of the card to update this.

FYI, this change has been announced some time ago but seems like not every developer has integrated this. Also see the weather info in breaking changes of the release notes.

512

Question is, how to implement get_forecasts response to the card.
From my point of view, all custom weather cards does not work with forecast anymore (after last HA update.
Default weather-forecast card is one and only working but not able to apply card-mod
Waiting is probably the only option

Edited:Solved by the developer