Custom UI: Weather state card


Cool it’s working ! Thanks a lot, how does i configure it to be with my town ?

Thanks !


Very good job :slight_smile:
But how i can implement it when i want also have implement other custom_ui like name state-card-custom-ui.html ?

And in frontend i have put this:
- /local/custom_ui/state-card-custom-ui.html
- /local/custom_ui/state-card-custom-ui-es5.html

Ok i add one by one and works perfect.


Hi @Yevgeniy , awesome work!

I have copied your code across as a package and it works except for the rain side of things. I know its forecast for rain on Wednesday but I get this:

my icons dont look as good as yours either :thinking:

finally, the wind direction is showing ‘ONO’ when it should be ‘ENE’…not sure whats going on there…?


The icons display will vary depending on the operating system on which the browser is installed. I tested this card on Android, Windows and Linux. Everywhere the icons looked different. This is because these icons are not images, but a text font. I tried to find a solution to integrate the images into the graph, but in this version of Charts.js for the labeling of axes it is allowed to use only text.
Check how the wind direction is shown in the standard weather card. It should be same


OK, no worries.

My entities page shows it as a bearing angle

from another weather provider:

I didnt have yweather setup before using this custom ui so dont have it as a standard card


Oh, I’m sorry. ONO is the old name of ENE. It’s the same direction.
Just replace var_DEGREE_TO_TEXT with this:

  var _DEGREE_TO_TEXT = [
    'N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE',
    'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW', 'N'


How to have those graphs? I updated your card but i get always the same card, with no graphs…


After changing and saving the html file need to force refresh page by ctrl+F5


Perfect! thank you. Any idea why my precipitation info isn’t showing up?

EDIT: it seems to not show any precipitation data in the entities page… so maybe for some reason there is no data available for my location via yahoo weather?


Ok, got it, but now why i don’t have anymore the hour by hour card when clicking over the card how it was previously?


@sparkydave At the moment, the Yahoo component does not provide information about precipitation. I use Openweathermap to display it, but this is only for hourly forecasts. In the next versions HA I will add precipitations info for daily Openweathermap forecasts. You can try other components. Yahoo weather is just an example.
@maurizio53 ok. I will add it in next update


was that not daily precipitation bar graphs in your screen shot? was that info coming from another weather provider? I use other providers that give rain info so perhaps I can use that data?


In the screenshot I used Openweathermap custom component. You can use any weather component


I changed weather provider from yahoo to openweathermap and now i get this card:


Is the output correct? Why i don’t get anymore precipitations graph like when using yahoo?


So would I just change the last line of this (below) to use what ever component I want and the rest sorts itself out?

      custom_ui_state_card: custom-weather-card
        weather: weather.yweather


Could it be possible to add automatically the name of the locality?
And finally, why i don’t get anymore animated icons?


ok, that didnt work :pensive:


Yes exactly

It’s strange. Check Openweathermap’s state please


Where i can check the state?
You mean this:


I tried to use the BOM component (Australia) but it turns out that if I use the basic component it only gives me: temperature, humidity, pressure and wind_speed. I have to use the sensor part of that component to get the other data, which I already have set up however the entities come out differnent so it seems that your card wont pick those up…