Custom UI: Weather state card

I love the card by @gerard33, it looks very nice on my wall mounted tablet.

What I’m missing though is a forecast for the current day.
For instance when waking up in the morning, being able to see what the min and max temp is going to be today.
Is there any way to edit the card so that the forecast for the current day is added (and perhaps the last of the 5 forecast days be removed so the size stays the same)?

Thanks in advance!

Hello, thank you for sharing your project with the HomeAssistant community.
I have a question, I have Hassbian installed and the directory where it contains the * .yaml files is: (/home/homeassistant/.homeassistant) however there is no directory (www), and even I creating the directory and putting the necessary files inside, it seems that the Hassbian does not find.
Should I create the directory and set the location like this: (/home/homeassistant/.homeassistant/ www / weather_icons / animated /)? because even then the files are not found.

Friend, was not it easier to copy the same icons to the directories, and rename them to “lightning”?
I did so and it worked perfectly! :oculos de sol:

Thank you for sharing your work with the community.
I need help to solve my problem, I have two weather cards being displayed in my home. I have modified almost everything and nothing to solve.
If anyone can help me, I thank you!


  # Name of the location where Home Assistant is running
  name: Lar doce lar!
  # Location required to calculate the time the sun rises and sets
  latitude: -XX.417859
  longitude: -XX.337051
  # Impacts weather/sunrise data (altitude above sea level in meters)
  elevation: 330
  # metric for Metric, imperial for Imperial
  unit_system: metric
  # Pick yours from here:
  time_zone: America/Sao_Paulo
  # Customization file
  customize: !include customize.yaml

# Show links to resources in log and frontend
# introduction:

# Enables the frontend
    - /local/custom_ui/custom-weather-card.html
    - /local/custom_ui/custom-weather-card.html

# Enables configuration UI

  # Secrets are defined in the file secrets.yaml
#  base_url:
#  ssl_certificate: /ssl/fullchain.pem
#  ssl_key: /ssl/privkey.pem
  api_password: [email protected]
  ip_ban_enabled: true
  login_attempts_threshold: 5

  # Uncomment this if you are using SSL/TLS, running in Docker container, etc.
  # base_url:

# Checks for available updates
# Note: This component will send some information about your system to
# the developers to assist with development of Home Assistant.
# For more information, please see:
  # Optional, allows Home Assistant developers to focus on popular components.
  include_used_components: true

# Discover some devices automatically

# Allows you to issue voice commands from the frontend in enabled browsers

# Enables support for tracking state changes over time

# View all events in a logbook

# Example configuration.yaml entry
  - platform: generic
    username: admin
    password: mkmt.vix.

# Enables a map showing the location of tracked devices

# Track the sun
# sun:

# Weather prediction
  - platform: yweather
    woeid: "26800926"


  name: Weather

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

Thank you all!

How do I set the path of the www folder?

This is what I see. But I do not know if it does not find the html file.
How can I know what the problem is?
Thank you very much.

The www/ folder is in your configuration directory as explained here.

the website /local/www/custom_ui/ssss.html I also put it there?

/local/ is /config/www/ - you’d create custom_ui/ in /config/www/ and then put ssss.html in there

Sorry. i not have this folder
I have installed home assistant on ubuntu 18.
If I do not have this folder, where do I have to create it?


Then find your configuration folder.


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;”>


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.

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

I can not figure out what is wrong

In config.yaml

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

# Enables configuration UI

  - platform: yweather
    woeid: 128***90

In customize.yaml
  custom_ui_state_card: custom-weather-card
    weather: weather.yweather
    sun: sun.sun

In groups.yaml

    name: weer

if i click on the card this shows.

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?

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?