Error:
ERROR (MainThread) [custom_components.weatheralerts.sensor] list index out of range

Frequency: Every 30 seconds

Weather Card: v1.3.2
HA: 0.96.2
Python: 3.7.0

Since upgrading to 0.109.1 the padding around the weather card has gotten small causing the text around the top to almost be cut off:

Not sure if cause is weather card or an external factor, but only appeared since upgrading to Home Assistant 0.109.1

Hello.
This is not really an issue unless this option already exists and this topic is removed.
Is there a possibility to insert a "tap_action: action: none" ??
Thanks

running HA 0.107.5
I recently switches to Lovelace Dashboards. I created a copy of an existing .yaml file and associated with the newly created Dashboard. An now I get the error "Custom element doesn't exist: weather-card."

- type: module url: /community_plugin/weather-card/weather-card.js

This is my .yaml config:

and

- type: custom:weather-card entity: weather.rp39

Perhaps to easy but I don't see it.

What to use for (entity: weather.)yourweatherentity? I've tried everything, various entities from Darksky, the platform name etc. All responding "entity not available: xx"

I like the animations, but they're going a little too fast for me, making it distracting to read the detail within the weather card, and read other cards in the UI.

I see that the default SVG set has animation-duration CSS attributes which could be overriden in a custom CSS. Unfortunately, each icon has its own duration, so you couldn't just set it universally.

In the following snippet I adjusted the animation-duration attribute so the sun animation is slowed down to be pretty subtle.

.am-weather-sun {
  -webkit-animation-name: am-weather-sun;
     -moz-animation-name: am-weather-sun;
      -ms-animation-name: am-weather-sun;
          animation-name: am-weather-sun;
  -webkit-animation-duration: 30s;
     -moz-animation-duration: 30s;
      -ms-animation-duration: 30s;
          animation-duration: 30s;
  -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
      -ms-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
      -ms-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@keyframes am-weather-sun-shiny {
  0% {
    stroke-dasharray: 3px 10px;
    stroke-dashoffset: 0px;
  }

  50% {
    stroke-dasharray: 0.1px 10px;
    stroke-dashoffset: -1px;
  }

  100% {
    stroke-dasharray: 3px 10px;
    stroke-dashoffset: 0px;
  }
}

.am-weather-sun-shiny line {
  -webkit-animation-name: am-weather-sun-shiny;
     -moz-animation-name: am-weather-sun-shiny;
      -ms-animation-name: am-weather-sun-shiny;
          animation-name: am-weather-sun-shiny;
  -webkit-animation-duration: 10s;
     -moz-animation-duration: 10s;
      -ms-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
      -ms-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
      -ms-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

Maybe the card could have a speed attribute with "slow", "normal", and "fast" settings that override the CSS to set the various animation speeds for the icons appropriately?

Hi..
First - thanks for a nice card for lovelace, looks very nice.

I would like to use your weather card in a setup where it takes a little real estate as possible but shows as much info as possible ;-) . The use case, is to have this card display at a tablet next the front door, so when the kids are leaving, they can see the weather now and for the next 3-8 hours for the day... when will it rain... do I need to take a jacked ...

So you card, with OpenWeather as source (hourly forecast), and only shows forecast, gives a nice real estate.
But I'm missing:
-Time for the intervals, it just says the same day....
-how to include 'current' weather as the first column in the forecast ;-)

/Regards Joern

Great card. It works nicely and was easy to setup via the Community, but I was wondering if there was any way to show the precipitation in the delails? In the forecast section it has precipitation info, but there is none in the details. It would be nice if it showed up too when I clicked to get more details too. I'm using 2 dakrsky entities, the top is hourly for the Current and Details and Daily for the forecast below.

I followed the instruction and i see the weather-card on my lovelace screen.
But i dont see the animated pictures. Any idea what i did wrong.
All the intern URL are double checked and are correct.

Hi and thanks for a nice addon :-)
One problem tho: in Firefox browser this card renders almost 100% CPU usage.
HA: 0.106 in venv on RPI
FF: latest 64 bit
PC: rather old [email protected] with 4GB RAM
RPI CPU/RAM usage are normal, so problem with client side.
Also in HA app rather high consumption with this card displayed.
Best, JR

I have a strange behavior. When i set 'current' to 'true' the card becomes invisible in my lovelace view.
Any idea what might be the reason for this?

My HA version: 0.99.2

Card invisible:

type: 'custom:weather-card'
entity: weather.weatherentity
icons: /community_plugin/weather-card/icons/
name: <location>
current: true
details: true
forecast: true

Card works as intended (i guess):

type: 'custom:weather-card'
entity: weather.weatherentity
icons: /community_plugin/weather-card/icons/
name: <location>
current: false
details: true
forecast: true

I'm running some HA Lovelace Dashboards using an Amazon Fire Tablet. I noticed that the tablet that I was using kept flickering, every once and a while.
I noticed on FullyKiosk's website (the app I'm using for a kiosk dashboard) that it states:

Android 4.4 contains an outdated and buggy Chromium web engine. There are some display problems known, eg with SVG fonts. Unfortunately it’s not fixable because the Android Webview can’t be updated in Android 4.4.

I cloned your repository, and uploaded the static icons you provided to a custom ui folder. Then I referenced them in your readme like you suggested. Boom - no more flickering. I think it has something to do with animated SVGs in general.

The SVGs look great, and I really love the layout of the weather card on the tablet. It'd be great if others could turn it off via a setting rather than having to implement the workaround that I had to.

Thanks!

How to change the display of the current temperature to the temperature from my own sensor. I tried to edit the JS-file, but it did not give a positive result

The default weather card shows the condition("Party Cloudy") and it would be lovely if your weather card also showed it.

Since the Dark Sky weather integration supports hourly mode, it would be nice to support that by showing the hour instead of the same day abbreviation for the 5 columns.

I'm using openweathermap for the weather and it hasn't have the visibility attribute used in the component. So I just see "km" and the fog-icon.

Maybe it's possible to check if an attribute is available and only show the icon of the attribute is available.

Since HA 0.100.x no local icons (icons:" / local / custom-lovelace / weather-card / icons / ") have been shown in this weather card.

Hi guys, thanks for the great weather forecast card. Just a question: Is it possible to implement possibility to choose rounded numbers? Thank you in advance.

Self hosted or remote, HA is throwing the following error when the card is loaded:

2019-12-27 17:19:21 ERROR (MainThread) [frontend.js.latest.201910251] https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/weather-card.min.js:7:1228 SyntaxError: expected dot, got '('

I'm running HA version 0.101.3

This is the error I get in my lovelace UI.
"Custom element doesn't exist: weather-card"

This is my ui-lovelace code:

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

cards:
  - type: custom:weather-card
    entity: weather.dark_sky
    icons: "/local/custom-lovelace/weather-card/icons/"
    current: true
    details: false
    forecast: true

The weather-card.js is the latest downloaded the raw version from github.
My config:

#DARKSKY
weather:
  - platform: darksky
    api_key: !secret darksky_api_key
    mode: daily

js file and icon folder are both in www/custom-lovelace/weather-card

Am I doing anything wrong?

Similar to the other darksky weather card here:
https://github.com/iammexx/home-assistant-config/tree/master/ui/darksky

Hi,
How can I change for sunrise and sunset time to be in 24-HR format.
Currently I have AM/PM format.
My HA interface is in Slovenian language. Using DarkSky.

first of all, the card looks GREAT...

Would it be possible to have a setting saying:

Days: 4
to only have 4 days forecast ??

As Dark Sky is pulling their API at the end of 2020, I was wondering if this Card worked with any other weather integrations (particularly any international services)?

I tried some from here but none displayed 7 day forecasts:
https://www.home-assistant.io/integrations/#weather

Hi! Thanks for amazing module!
Is it possible to include couple new features? I would like to have an option to display pressure in mmHg. Also it would be great to have localization option. I can help with ru_RU translation.

When casting (see Google Cast) the card fails to load, with a red box instead.

Even if the mode: daily is set

Has this been removed from HA community/HAKS? Today this stopped working for me. I tried reinstalling which didn't help. Can this still work in HA or is an update required now?

Hi.

A change in how lovelace cards are set up in Home Assistant 0.105 increases performance, but enables cards to accidentally modify their own configuration in the loaded lovelace configuration.

I'm going through the cards in the HACS default repository, and noticed that your card may be susceptible to this. Looking through your code it seems you may modify parts of the config object passed to your card in setConfig.

The result could be that your card does not work well with the GUI editors or that parts of the configuration start showing up multiple times.

At some point in the future, it is likely that the configuration will be frozen before being passed to setConfig. At this point, your card will fail entirely when it tries to modify the configuration object.

There are several ways to fix/protect agains this problem.

The best is to restructure setConfig such that the configuration is never modified.
Other alternatives are to make a copy of the configuration and work on that instead.

setConfig(config) {
  config = { ...config }; // This works for simple configurations not containing arrays or objects
...

import { deepClone } from "deep-clone-simple";
// https://github.com/balloob/deep-clone-simple

setConfig(config) {
  config = deepClone(config); // This is a safe and fast method
...

or

setConfig(config) {
  config = JSON.parse(JSON.stringify(config)); // This uses built-in functions, but may be slower than deepClone
  ...

Please note that I have not tested your card agains Home Assistant 0.105 or later, but just quickly looked through the code. If I'm mistaken in my assessment, I appologize for taking your time.

See thomasloven/hass-config#6 for more info.

Special note, because it's you: It's in the editor. Right before writing the configuration back.

Hi,

I've got buienradar as source for the weather-card and everything is fine except for the visibility info.
I am using the buienradar platform withing HASS and not the sensors version.

I tried using the sensors integration of buienradar but that didn't work.

Regards.

As soon as I upgrade using HACS from version 1.2.1 to version 1.3.0 I get the error: custom:weather-card. I have nothing special in card.

entity: weather.dark_sky icons: /community_plugin/weather-card/icons/ type: 'custom:weather-card'

As soon as I downgrade it works again.

I have a overlapping issue when the raining icon is shown:

It's not caused by the theme, because it's the same with the default theme.

Hi,

I added the config for the resources to HA as advice but the module fails to load

Add the following to resources in your lovelace config:
resources:

• url: /community_plugin/weather-card/weather-card.js
  type: module

Resolve by changing the url to

• url: /hacsfiles/weather-card/weather-card.js

Documentation says that details (humidity, windspeed, etc.) can be be hidden using the
details: false flag.

It appears that none of the flags are working (outside of name:)

Hi there,
this is my video guide/tutorial - https://youtu.be/4cOdgW23KCA
If you think that the video is helpful you can put it somewhere in the README.md
Or I if it's easier for you I can do that and create a Pull request

Either way keep up the good work.
Cheers,
Kiril

Hello,
Very good job!
Please, could you tell how it is possible to manage font size for Title and Temp.
It is huge for me :)
I tried to do modification in code but without results.
Thank you
Andrey

I also had the problem with the card disappearing recently and did a bit of experimentation.
It appears, when I select "show current", the card crashes or is not loaded.

I see the following error in the console:

weather-card.js:169
Uncaught (in promise) TypeError: Cannot read property 'state' of undefined
    at HTMLElement.renderCurrent (weather-card.js:169)
    at HTMLElement.render (weather-card.js:151)
    at HTMLElement.update (app.9108bd0a.js:1)
    at HTMLElement.performUpdate (app.9108bd0a.js:1)
    at HTMLElement._enqueueUpdate (app.9108bd0a.js:1)

When I disable/omit "show current", the card loads, however it does not display it's name.
The error is the same if I use the locally installed (HACS) version or the hosted one.

Tested with Chrome and firefox on Ubuntu 18.04. HA is the latest docker image running on docker.

It might be related to #54 but I'm not sure, so I opened a separate issue.

Currently showing in HH:MM:SS format. It would be cleaner to just show HH:MM.

I have tried tests with Firefox, Chromium, Falkon, Opera, Midori, Epiphany ... and in all browsers the CPU remains between 75% and 90%
Isn't it possible to disable animation or make the code lighter?

Weekdays are broken, it's showing 00:01 instead of MON - TUES - WED - x - x -x -x
changed to 3 others weather enteties, but the same error!

Hi, after last hassio release, the error in the title appear in lovelace interface.
I installed this custom card via HACS
I tested:

• reinstall the custom card, doesn’t work
• uninstall custom card, doesn’t work
• reinstall HACS, doesn’t work
• uninstall HACS, doesn’t work
  Please help

HI. In home assistant your card works very well.
I would like to show the weather on a separate screen (ESP8266 with LSD 3.2") , at the exit from the house.
Project (https://www.youtube.com/watch?v=ImEp7kB_nrs) (https://learn.adafruit.com/wifi-weather-station-with-tft-display/software). I do not like. Bad design. It would be nice to have one style with the HOme assistant.

Love the card, but when I use it on my android phone, the card doens't show well.
The text gets cluttered on top of each other.
I don't use an android app, just use the 'android app shortcut generation', so it uses the ordinary webpage as an app.

Is there any chance that this amazing card can be made to work with iOS10 (older iPad)?

Thanks

I live in Denmark where we use m/s as unit for windspeed
I use Dark Sky and animated weather card. The windspeed is shown in km/h but it is actually m/s. So the number is correct but the value isn't
Don't know if it is a problem in Home Assistant or in this Lovelace card

Dear Developer(s)!

Firstly I would like to thanks a lot for this nice card, as it is almost perfect!

But there is a question or bug report as with Gismeteo weather source, the wind data is missing on the UI.

Could you please help me what I need to do to fix it, or if it is a bug could you please correct it sometime?

Thanks for your efforts a lot!

Hi guys,

I hope everything is ok with you.

I've just installed this card (and I really like it :-) ). However, I'm having some problems showing the weekdays on the card.

Any idea of how can it be solved?

If I need to give any additional information, please let me know.

Thank you

Hello!

Nice addition with the precipitation in the latest release! Would really like an config option to hide that though! Really great card, thanks for the hard work!

When the weather entity is unavailable, the css https://github.com/bramkragten/weather-card/blob/master/dist/weather-card.js#L120 specifies background-color: yellow but no font color, so it uses the default / primary-text-color of the theme.

This is fine on the default theme:

However the same error message is illegible on dark themes because the primary-text-color on those are typically white. Bright yellow and white do not mix:

This was fixed in core a few months ago, see these issues for more info / possible fix:
home-assistant/frontend#2762
home-assistant/frontend#3620