bramkragten / weather-card Goto Github PK
View Code? Open in Web Editor NEWWeather Card with animated icons for Home Assistant Lovelace
License: MIT License
Weather Card with animated icons for Home Assistant Lovelace
License: MIT License
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..
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
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 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.
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.
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
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 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 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?
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
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!
When casting (see Google Cast) the card fails to load, with a red box instead.
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"
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 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.
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.
Similar to the other darksky weather card here:
https://github.com/iammexx/home-assistant-config/tree/master/ui/darksky
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!
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
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
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,
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.
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.
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
Even if the mode: daily is set
Hi, after last hassio release, the error in the title appear in lovelace interface.
I installed this custom card via HACS
I tested:
Currently showing in HH:MM:SS
format. It would be cleaner to just show HH:MM
.
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
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.
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.
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?
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.
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
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
Since HA 0.100.x no local icons (icons:" / local / custom-lovelace / weather-card / icons / ") have been shown in this weather card.
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:
Resolve by changing the url to
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!
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
first of all, the card looks GREAT...
Would it be possible to have a setting saying:
Days: 4
to only have 4 days forecast ??
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
Is there any chance that this amazing card can be made to work with iOS10 (older iPad)?
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.