Custom UI: Weather state card

Share your Projects! Dashboards & Frontend
328

Updated the card for Lovelace:

329

I’m loving the lovelace card, thanks @Bram_Kragten . But on my iPhone XS, it shows the animated weather images in very blurry / low res quality (both in the official iOS app and the Safari web browser). I am using the hosted method, not local/manual.

Is this intentional, or a bug?

Here’s a pic:

1125×1261 134 KB

330

I get this sometimes too. I put it down to there not being any @2x images for the retina display.

331

this has been there for ages on these cards. has to do with the rendering of the page on the device. And is probably gone the you slide the card up. Comes and goes.

332

How did you create the card with the text of the current and upcoming weather?

333

Darksky Sensor in configuration.yaml:

  - platform: darksky
    api_key: !secret darksky_key
    update_interval:
      minutes: 12
    forecast:
    - 0
    monitored_conditions:
    - temperature_high
    - temperature_low
    - apparent_temperature_high
    - apparent_temperature_low
    - summary
    - icon
    - nearest_storm_distance
    - precip_type
    - precip_intensity
    - precip_probability
    - temperature
    - apparent_temperature
    - dew_point
    - wind_speed
    - wind_bearing
    - wind_gust
    - cloud_cover
    - humidity
    - pressure
    - visibility
    - ozone
    - minutely_summary
    - hourly_summary
    - daily_summary

And an entities card in lovelace:

      - type: entities
        show_header_toggle: false
        entities:
        - sensor.dark_sky_hourly_summary
        - sensor.dark_sky_daily_summary
334

I’m getting an error…

2019-02-08 18:13:40 ERROR (MainThread) [frontend.js.es5.201901211] http://hassbian.local:8123/lovelace/0:0:0 Uncaught

My ui-lovelace.yaml

  - url: /local/weather-card.js
    type: module
      - type: custom:weather-card
        entity: weather.dark_sky
        icons: "/local/icons/weather_icons/animated/"
335

I tried adding this to my configuration file:

# DarkSky Weather
weather:
  - platform: darksky
    api_key: !secret darksky_key
    mode: daily
    monitored_conditions:
    - hourly_summary
    - daily_summary

But I don’t get any sensor with the added monitored_conditions:

336

that’s because you’re using the weather platform, not the sensor:

1 Like
337

Right!

Will see if I can manage to change it and still get my weather card as it is right now :blush:

338

You can use both the weather platform and the sensor at the same time. I actually have 2 weather platforms and a sensor defined.

339

Is anyone able to help with this please?

340

It is a vector, so no pixels or 2x images needed :wink:. The pixels are something Apple does, I dont think we can solve that.

341

You are using es5, what device is this? Try setting the frontend to latest.

342

It’s Samsung internet browser, frontend is set to latest:

javascript_version: latest

Same issue with that commented out

343

Can’t you use Chrome?

344

same problem in chrome too :confused:
also the same in Edge

346

Made an account to say great job! :slight_smile:

347

Thanks, but that’s too much honor :blush: . I just made some small adjustments to this card.

In the meanwhile the weather card has improved very much. You can have a look at the current card I am using over here -> https://github.com/iammexx/home-assistant-config/tree/master/ui/darksky.

348

Is there an option to integrate rain predictions per hour? There are multiple sites that over an overview of the rain in the upcoming hours e.g. weeronline.nl
My best guess would be to scrape the page. But my coding skills are limited…