Custom animated weather card for Lovelace

I have read the whole thread, but cannot get this to work.

I have a weather sensor with the entity_id weather.home that’s geting it’s data from met.no . The sensor works fine.

I have also added the resources in ui-lovelace.yaml.

This config:

- type: custom:weather-card
        entity_weather: weather.home
        entity_sun: sun.sun
        name: Home

trows the following error: Please define a weather entity

Skärmklipp

is the name for the entity right in that way? please show the sensor in the development view.

does the incorrect indentation frustrate it?
try:

- type: custom:weather-card
  entity_weather: weather.home
  entity_sun: sun.sun
  name: Home

of course this only helps if Whippie’s question is answered with a yes :wink:

I have also trouble with adding the custom weather card. And I find different options about almost everything.

  1. I’ve added the resource to ui-lovelace, but HA told me to add it to configuration.yaml.
  2. The resource, is it module or js
  3. I still get the error of “Error: Custom element not found: weather-card”

configuration.yaml

lovelace:
#  mode: yaml
  resources:
    - url: /local/community/weather-card/weather-card.js
      type: module

lovelace ui

type: "custom:weather-card"
entity: weather.home
name: Home

I tried it with and without “”. I disabled the lovelace yaml to avoid issues with spaces and to get feedback, but I can’t get rid of the error :frowning:

I¨d love to answer your suggestion with a “yes” , @Mariusthvdb but that did not solve the problem.

Hey, I’ve been using this plugin since a week and it looks really nice! :slight_smile:
However on my IPad the resolution seems to be far smaller than on my other devices (the ipad is the only ios device). I attached an screenshot of the card.

It’s hard to understand what you mean when you attach just the card since there is nothing to compare it to. We cannot tell what it looks like on the iphone vs. ipad nor how the other cards look in comparison to the cards around it.

Maybe try taking a screenshot of the whole screen on both devices?

Hey @moto2000 ,

attached you find a screenshot from my desktop and the ipad.

desktop:

I have to create two posts because of a limitation by this forum:

ipad:

I hope you can see that the Weather Icons are a bit fuzzy on the ipad.

From what I can tell, I think that’s just the difference in resolution between the ipad and your computer monitor’s resolution. If you reduced the resolution of your computer screen, the weather will probably look a little fuzzier as well.

As @Chompas mentioned earlier, this absolutly beautiful plugin consumes a lot of cpu.

For me, on an i5-8600k @3.60Ghz around 20%.

I guess it is based on the animated svgs. When i simply throw them of the DOM the cpu is great again:


As i have like zero knowledge about animating svgs i can just leave this information here, and sadly disable the plugin :frowning:

@MaxW what you can do is to disable animations. That solved it for me and still looks nice.

Might drop me a hint were this is configurable?

@MaxW Yes. I forgot to add it.

In your lovelace weather Card add a line

animation: false
1 Like

Trying to add my own sensor for current temp but nothing happens when I add it. Is there anything else that I need to do?

Image 2020-09-08 at 21.18

1 Like

For folks running into issues, I had to dig into the code to figure some stuff out, hope this will help others who run into problems:

  • If there’s an error: weather entity expected, that is because the first post example config is wrong. It should be entity:weather.x not weather_entity:weather.x
  • If the card is blank, that is because sensor.moon is needed. Somehow my HA does not have that be default? (maybe newer HA remove moon as the default?) Include this in your configuration.yaml
sensor:
  - platform: moon

https://github.com/bramkragten/weather-card/ has clearer config details than the first post.

1 Like

Hi Thatkookooguy, I like the theme that you are using in your screenshot. Which one is it?

@HVader2000 Thanks! It’s called hass kibibit theme. you can find it on the HACS marketplace or here on GitHub.

I’m just about to release a new version with some variants. probably in the next week.

Leaving this bread crumb here to hopefully save someone else a lot of discovery. I also had crazy CPU usage on the browser host running Firefox 80.0. The suggestion below is not supported in the custom card from the OP at the top of this thread:

There are two ways to get static icons:

cd {ha config dir}
mkdir -p www/icons/static_weather
wget https://github.com/bramkragten/weather-card/archive/v1.5.0.tar.gz
tar zxf v1.5.0.tar.gz
cp weather-card-1.5.0/icons/static/* www/icons/static_weather
rm v1.5.0.tar.gz
rm -rf weather-card-1.5.0

Now change the “icon location” config option to: /local/icons/static_weather/

As a side note if you leave the “icon location” config option blank it doesn’t use the locally installed animated icons, rather the card will cause your browser to load them from a CDN at: https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/icons/

This is a common technique to track users and it will track all your browser clients. If you still want animated icons but don’t want to load them from the CDN you can change the “icon location” to: /local/community/weather-card/icons/

That path assumes you used HACS to install the card; if not then you probably know the path where you manually installed the card and icon files; just prepend /local/.

Still Blurred icon.
Safari on a Mac.