Custom UI: Weather state card

Now I can’t view the actual icon.
I change:

span class=“icon bigger” style=“background: none, url(/local/weather_icons/animated/[[nowCond]].svg) no-repeat; background-size: contain;”>

with

span class=“icon bigger” style=“background: none, url(/local/weather_icons/animated/[[weatherObj.forecast[0].condIcon]].svg) no-repeat; background-size: contain;”>

I have been trying to get this to work the whole day, tried everything i can think of.
But i do not get the mdi icons in frot of the humidity/windspeed etc.
weather

I configured it just like mentioned in this post, also used this html

I can not figure out what is wrong

In config.yaml

frontend:
  themes: !include themes.yaml
  javascript_version: latest
  extra_html_url:
  - /local/custom_ui/custom-weather-card.html
  extra_html_url_es5:
  - /local/custom_ui/custom-weather-card.html

# Enables configuration UI
config:

weather:
  - platform: yweather
    woeid: 128***90
  
input_boolean:
  weather:

In customize.yaml

input_boolean.weather:
  custom_ui_state_card: custom-weather-card
  config:
    weather: weather.yweather
    sun: sun.sun

In groups.yaml

  weather:
    name: weer
    entities:
    - input_boolean.weather

if i click on the card this shows.
weather%20klik

Is it normal that it shows the config?

I would love to get this working like it should.
And then take the next step and make it show up in lovelace.

Hi. With dark sky i recive only 3 days.
Does anyone know if I have to pass an extra parameter to receive 7 days?
Thanks

Not working after latest update 0.77.2 anyone else ?

Same here.

The solution is here. You need to find this in custom-weather-card.html:

	getUnit(unit) {
	  return this.hass.config.core.unit_system[unit] || '';
    },

and replace it to this:

	getUnit(unit) {
	  return this.hass.config.unit_system[unit] || '';
    },
1 Like

Thanks @Yevgeniy!

Changed the custom-weather-card.html but still not working any ideas ?

Have you cleared the cache in the browser?

let me try that , thanks !!

HI,

_Unable to find icon for domain weather (fog)

Hope I havent missed this in the thread above, but whenever i click the more info on the custom card, I get this error in the browser inspector:

it is in fact not showing…:wink:

33

is this expected behavior? Should be translated to cloudy in the card, (there’s no fog.svg).

  var _WEATHER_TO_ICON_DAY = {
    'clear-night': 'day',
    'cloudy': 'cloudy',
    'fog': 'cloudy',
    'hail': 'rainy-7',
    'lightning': 'thunder',
    'lightning-rainy': 'thunder',
    'partlycloudy': 'cloudy-day-3',
    'pouring': 'rainy-6',
    'rainy': 'rainy-5',
    'snowy': 'snowy-6',
    'snowy-rainy': 'rainy-7',
    'sunny': 'day',
    'windy': 'cloudy',
    'windy-variant': 'cloudy-day-3',
    'exceptional': '!!',
  };
  
  var _WEATHER_TO_ICON_NIGHT = {
    'clear-night': 'night',
    'cloudy': 'cloudy',
    'fog': 'cloudy',
    'hail': 'rainy-7',
    'lightning': 'thunder',
    'lightning-rainy': 'thunder',
    'partlycloudy': 'cloudy-night-3',
    'pouring': 'rainy-6',
    'rainy': 'rainy-5',
    'snowy': 'snowy-6',
    'snowy-rainy': 'rainy-7',
    'sunny': 'night',
    'windy': 'cloudy',
    'windy-variant': 'cloudy-night-3',
    'exceptional': '!!',
  };

and I do have that. both for static and animated, and for forecast (small icons):

@Yevgeniy
would you have url to try and configure the custom_updater for your card?

Please let me ask you to check my post above this one too, I cant seem to find the solution for it…
thx!

Did you ever figure out how to use other sensor data to override the weather component? I’m trying to do the same thing by using my local weather sensors outside my house to show the most accurate weather reading inside the weather card.

very cool!

Anyone was able to use it with darkSky? or some similar card for darkSky? thanks

1 Like

First of all, amazing work creating this card!
Anyone knows why my mdi icons aren’t showing?

image

Hi all, has anyone found a card that can make graphs like this with DarkSky under Lovelace? The way the usual weather cards show forecasts stinks, I’d much rather have the graphs.

yes there is the very nice card by @m.p.frankland :

35

or use card-modder to do something like this to @arsaboo’s adapted card:

34 (in this case using weather platform Buienradar

EDIT

my bad, I missed the part you wanting graphs in the forecast section, thought the picture with the circles around the icons was yours… sorry.

Is there a card out there already that does graphs for either polymer or Lovelace? If so it would probably be easy to port it.

If you mean just a card that makes a graph, yes, there are some like this one:

However, it only graphs history, it would have to be modded to graph the forecast from DarkSky.