Custom animated weather card for Lovelace


I fixed the same issue by clearing the browser cache. My weather entity is named weather.yweather so the original instructions worked for me.


Maybe the component needs some extra config validation, but you can also help contribute


This is because you should have created a new thread. Many people can help you.

Your orignal issue was buried in this thread responding to no one. I’m guessing you hit the ‘reply’ button at the bottom of the page. Well when you use that button, no one gets a notification that you responded. People have to manually stumble back upon the thread. It’s a flaw in this system. It just so happens that I saw no one was responding to you. Dumb luck really, not because you insulted the code.

So if you ever want help, you need to hit the reply under people’s name so that the user will get a reply. Or you make a new thread:


Thanks for the tip. will keep that in mind


Hi i’ve used your file, in Chrome and Safari works very well but on iOS it’s shows this error


Sorry, I’m not using iPhones. I can help you here.



Thanks! forcing “javascript_version: latest “
Worked on IOS


Question, would it be possible to get this to base it’s info on YR weather instead? In Norway we use the weather service which is usually a bit more accurate for us. If so, how do you go about changing from yahoo to that?

  - icon: mdi:weather-cloudy
    id: weather
    title: Weather
    garage_door_tilt_sensor_alarm_level: Weather
      - type: "custom:weather-card"
        entity_weather: weather.yweather   <--- this one
        entity_sun: sun.sun

Change the entity_weather to your weather API.
I changed mine to weather.darksky doesn’t show up properly due to the data returned, but it’s a start.


Every once in a while i get a low res animated icon. Anyway to correct this?


You will have to map the different entities. Ideally, update the YR weather component to match the Yahoo weather component.


Sorry for my newbie questions in this thread, but could you elaborate on how I could update the YR weather component to match?


You will have to replicate the Yahoo Weather component with YR. Alternately (and this may be much easier), you can use the Darksky lovelace card approach to pass on YR sensors to the card.


This card works great in Chrome, but in firefox the graphics don’t show for me. Anyone else have the same thing?




Did anyone else notice blurry icons in the top left?



@cgtobi yes driving me crazy. I have both the darksky and yahoo animated cards and its random which icons are blurry.


@Maaniac I just double checked the svg icons but they are all fine. So it must be some rendering issue. What browser did you notice it in?


@cgtobi both Chrome and Safari.