Question, would it be possible to get this to base it’s info on YR weather instead? In Norway we use the Yr.no weather service which is usually a bit more accurate for us. If so, how do you go about changing from yahoo to that?
views:
- icon: mdi:weather-cloudy
id: weather
title: Weather
garage_door_tilt_sensor_alarm_level: Weather
cards:
- 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.
1 Like
@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?
What I had to do to fix this issue was create 2 versions of the icons and call one folder “small” and change the forecast reference in the .js file to the smaller folder. Seems like if it’s using the same icon for the forecast and the larger current conditions it renders the small size first then stretches it for the larger one making it ugly
3 Likes
Happens to me as well, I get the following error in the console
Been following the guide and am probably missing something here…
Update: after changing to yweather, I get the following stack
I have probably experienced the same problem. Changing the boolean value of dom.webcomponents.shadowdom.enabled and dom.webcomponents.customelements.enabled to false in about:config fixed the problem for me.
Note: Some of your UI objects may show up incorrectly, for example the custom column width of a Glance card.
Not sure what I’m doing wrong but I get the "Custom element doesn’t exist error when I enable this card. I think someone further up in the chain commented that this was indicates that the “weather-card.js” script is not being executed.
However I have placed this file in the www/custom-ui folder and have the icons in the www/icons/weather-icons/animated as specified in the instructions.
I’m running Home Assistant in a Docker container on my Mac server. Is this a problem and if so what other container(s) or services need to be running in order for the script to execute properly.
Thanks in advance…
Make sure that you have added these files in the ui-lovelace.yaml and HA has the required permissions.
@ Arsaboo: You say “make sure that you have added these files…”. Are you implying that both the weather-card.js and the icons folder require to be reference in the ui-lovelace.yaml file? Currently I have:
resources:
- url: /local/custom_ui/weather-card.js
type: js
at the top of this file.
With regard to permissions it would seem that the Docker container that is running HA has read/write permissions to the HA config folder as it is able to write the Home-assistant.log file successfully.
Any additional ideas?
smart! this probably solves it on regular Hassio too!
great.
btw did you actually crop the icons too, or simply have them doubled in 2 folders
I just put them in 2 different folders