Custom UI: Weather state card

Share your Projects! Dashboards & Frontend
266

Yes. Click to it and scroll to the top of the page. You should see info like this:

Summary 
  "temperature": 20.5,
  "humidity": 54,
  "pressure": 969.29,
  "wind_bearing": 293,
  "wind_speed": 4.31,
  "attribution": "Data provided by OpenWeatherMap",
  "forecast": [
    {
      "datetime": 1529755200000,
      "temperature": 19.6,
      "precipitation": null,
      "condition": "cloudy"
    },
    {
      "datetime": 1529766000000,
      "temperature": 18.5,
      "precipitation": null,
      "condition": "cloudy"
    },
    {
      "datetime": 1529776800000,
      "temperature": 16.8,
      "precipitation": null,
      "condition": "cloudy"
    },
    {
      "datetime": 1529787600000,
      "temperature": 16.4,
      "precipitation": null,
      "condition": "cloudy"
    },
    {
      "datetime": 1529798400000,
      "temperature": 15.3,
      "precipitation": null,
      "condition": "cloudy"
    },
    {
      "datetime": 1529809200000,
      "temperature": 19.1,
      "precipitation": 0.015,
      "condition": "rainy"
    },
    {
      "datetime": 1529820000000,
      "temperature": 19.1,
      "precipitation": 0.49,
      "condition": "rainy"
    },
    {
      "datetime": 1529830800000,
      "temperature": 18.3,
      "precipitation": 0.515,
      "condition": "rainy"
    },
    {
      "datetime": 1529841600000,
      "temperature": 19.1,
      "precipitation": 0.9,
      "condition": "rainy"
    },
    {
      "datetime": 1529852400000,
      "temperature": 16.5,
      "precipitation": 1.87,
      "condition": "rainy"
    },
    {
      "datetime": 1529863200000,
      "temperature": 14.7,
      "precipitation": null,
      "condition": "partlycloudy"
    },
    {
      "datetime": 1529982000000,
      "temperature": 14.3,
      "precipitation": 0.07,
      "condition": "rainy"
    }
  ],
  "friendly_name": "OpenWeatherMap"

If “precipitation” is null, you will not see it on chart

267

Ok, thanks…

268

Have you tried using this component?

269

Thats the one I tried which only gives the 4 attributes, the sensor version of that component provides a lot more, but is it possible to use those with your custom ui card? i see the issue there being that they are all separate entities rather than a bunch of attributes for the one entity

270

Yes. the sensor values can be added to the card. But you do not get the forecast, since the sensor only shows the current value

271

Is it possible to use multiple components to gather that data? I have now also tried OpenWeatherMap but it too fails to give precipitation, and also doesnt give me the minimum temp graph

image
image554×503 20.3 KB

interestingly also, the data for OWM shows sun for the week whereas using BOM or Yahoo I get cloud. (FYI- cloud is expected)

272

ok. I know DarkSky allows for a forecast but again, they are separate entities. How would I need to alter the config to use them? (thats so much for your help by the way)

homeassistant:
  customize:
    input_text.weather:
      custom_ui_state_card: custom-weather-card
      config:
        weather: sensor.perth_weather_temperature
        weather.sensor.perth_weather_blahblah?

not sure if the above is on the right track…

273

This is hourly OWM forecast. Each step here equal 3 hours. If you want daily OWM forecast you should configure it like this

weather:
  - platform: openweathermap
    api_key: !secret openweathermap_api_key
    mode: daily

Send me entity_id of sensors which you want to add to the card

274

I have been playing around with various weather providers and given that Dark Sky gives a 7 day forecast, I think the data from it would be best for this custom UI however using the basic config of weather: weather.dark_sky doesn’t work properly as you can see below.
image

These are the entities that it gives from the full sensor type config:

 sensor.perth_weather_apparent_temperature

 sensor.perth_weather_cloud_coverage

 sensor.perth_weather_cloud_coverage_1

 sensor.perth_weather_cloud_coverage_2

 sensor.perth_weather_cloud_coverage_3

 sensor.perth_weather_cloud_coverage_4

 sensor.perth_weather_cloud_coverage_5

 sensor.perth_weather_cloud_coverage_6

 sensor.perth_weather_cloud_coverage_7

 sensor.perth_weather_daily_max_precip_intensity

 sensor.perth_weather_daily_max_precip_intensity_1

 sensor.perth_weather_daily_max_precip_intensity_2

 sensor.perth_weather_daily_max_precip_intensity_3

 sensor.perth_weather_daily_max_precip_intensity_4

 sensor.perth_weather_daily_max_precip_intensity_5

 sensor.perth_weather_daily_max_precip_intensity_6

 sensor.perth_weather_daily_max_precip_intensity_7

 sensor.perth_weather_daily_summary

sensor.perth_weather_daytime_high_apparent_temperature

sensor.perth_weather_daytime_high_apparent_temperature_1

sensor.perth_weather_daytime_high_apparent_temperature_2

sensor.perth_weather_daytime_high_apparent_temperature_3

sensor.perth_weather_daytime_high_apparent_temperature_4

sensor.perth_weather_daytime_high_apparent_temperature_5

sensor.perth_weather_daytime_high_apparent_temperature_6

sensor.perth_weather_daytime_high_apparent_temperature_7

 sensor.perth_weather_daytime_high_temperature

 sensor.perth_weather_daytime_high_temperature_1

 sensor.perth_weather_daytime_high_temperature_2

 sensor.perth_weather_daytime_high_temperature_3

 sensor.perth_weather_daytime_high_temperature_4

 sensor.perth_weather_daytime_high_temperature_5

 sensor.perth_weather_daytime_high_temperature_6

 sensor.perth_weather_daytime_high_temperature_7

 sensor.perth_weather_hourly_summary

 sensor.perth_weather_humidity

 sensor.perth_weather_humidity_1

 sensor.perth_weather_humidity_2

 sensor.perth_weather_humidity_3

 sensor.perth_weather_humidity_4

 sensor.perth_weather_humidity_5

 sensor.perth_weather_humidity_6

 sensor.perth_weather_humidity_7

sensor.perth_weather_overnight_low_apparent_temperature

sensor.perth_weather_overnight_low_apparent_temperature_1

sensor.perth_weather_overnight_low_apparent_temperature_2

sensor.perth_weather_overnight_low_apparent_temperature_3

sensor.perth_weather_overnight_low_apparent_temperature_4

sensor.perth_weather_overnight_low_apparent_temperature_5

sensor.perth_weather_overnight_low_apparent_temperature_6

sensor.perth_weather_overnight_low_apparent_temperature_7

 sensor.perth_weather_overnight_low_temperature

 sensor.perth_weather_overnight_low_temperature_1

 sensor.perth_weather_overnight_low_temperature_2

 sensor.perth_weather_overnight_low_temperature_3

 sensor.perth_weather_overnight_low_temperature_4

 sensor.perth_weather_overnight_low_temperature_5

 sensor.perth_weather_overnight_low_temperature_6

 sensor.perth_weather_overnight_low_temperature_7

 sensor.perth_weather_precip

 sensor.perth_weather_precip_1

 sensor.perth_weather_precip_2

 sensor.perth_weather_precip_3

 sensor.perth_weather_precip_4

 sensor.perth_weather_precip_5

 sensor.perth_weather_precip_6

 sensor.perth_weather_precip_7

 sensor.perth_weather_precip_probability

 sensor.perth_weather_precip_probability_1

 sensor.perth_weather_precip_probability_2

 sensor.perth_weather_precip_probability_3

 sensor.perth_weather_precip_probability_4

 sensor.perth_weather_precip_probability_5

 sensor.perth_weather_precip_probability_6

 sensor.perth_weather_precip_probability_7

 sensor.perth_weather_pressure

 sensor.perth_weather_pressure_1

 sensor.perth_weather_pressure_2

 sensor.perth_weather_pressure_3

 sensor.perth_weather_pressure_4

 sensor.perth_weather_pressure_5

 sensor.perth_weather_pressure_6

 sensor.perth_weather_pressure_7

 sensor.perth_weather_summary

 sensor.perth_weather_temperature

 sensor.perth_weather_uv_index

 sensor.perth_weather_uv_index_1

 sensor.perth_weather_uv_index_2

 sensor.perth_weather_uv_index_3

 sensor.perth_weather_uv_index_4

 sensor.perth_weather_uv_index_5

 sensor.perth_weather_uv_index_6

 sensor.perth_weather_uv_index_7

 sensor.perth_weather_wind_bearing

 sensor.perth_weather_wind_bearing_1

 sensor.perth_weather_wind_bearing_2

 sensor.perth_weather_wind_bearing_3

 sensor.perth_weather_wind_bearing_4

 sensor.perth_weather_wind_bearing_5

 sensor.perth_weather_wind_bearing_6

 sensor.perth_weather_wind_bearing_7

 sensor.perth_weather_wind_speed

 sensor.perth_weather_wind_speed_1

 sensor.perth_weather_wind_speed_2

 sensor.perth_weather_wind_speed_3

 sensor.perth_weather_wind_speed_4

 sensor.perth_weather_wind_speed_5

 sensor.perth_weather_wind_speed_6

 sensor.perth_weather_wind_speed_7
275

@Yevgeniy Hi!

I’m switching to the new ui lovelace. Is it possible to integrate this card into lovelace as well? Thanks!

1 Like
276

I don’t get anymore the graphs for rain as you can see in this screenshot:

30

278

Did not want to hijack this thread for Lovelace, so created a new thread for custom animated weather card for Lovelace.

279

How do you do one on the top and other on the bottom ?

Is it possible to have two ?

281

How can I add this group

weather:
  name: Weather
  entities:
    - input_text.weather

to my ‘tabs’

Weather:
  name: Погода
  view: yes
  icon: mdi:weather-partlycloudy
  entities:
    - group.weather

this doesn’t show new card.
Thanks,

282

Call it something else you can’t use uppercase W in Weather :stuck_out_tongue: so…

my_weather:
  name: My Weather
  entities:
    - input_text.weather

weather:
  name: Погода
  view: yes
  icon: mdi:weather-partlycloudy
  entities:
    - group.my_weather

Should do what you want.

283

This doesn’t help :frowning:

default_view:
  view: true 
  icon: mdi:home
  entities:
    - group.bathroom
    - group.livingroom
    - group.kitchen
    - group.bedroom
    - group.my_weather

no animated weather though

284

Works for me, but I don’t get any animated weather either.

285

Maurizio53, can you share the code of your weather state card?
Thanks

286

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!

287

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.