Custom UI: Weather state card


#246

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

Thanks !


#247

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:
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html

Ok i add one by one and works perfect.


#248

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:
image

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…?


#249

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


#250

OK, no worries.

My entities page shows it as a bearing angle

from another weather provider:
image

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


#251

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'
  ];

#252

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


#253

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


#254

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?


#255

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?


#256

@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


#257

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?


#258

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


#259

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

03

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


#260

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

homeassistant:
  customize:
    input_text.weather:
      custom_ui_state_card: custom-weather-card
      config:
        weather: weather.yweather

#261

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


#262

ok, that didnt work :pensive:


#263

Yes exactly

It’s strange. Check Openweathermap’s state please


#264

Where i can check the state?
You mean this:


#265

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…