Custom UI: Weather state card


Updated the card for Lovelace:


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:


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


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.


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


Darksky Sensor in configuration.yaml:

  - platform: darksky
    api_key: !secret darksky_key
      minutes: 12
    - 0
    - 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
        - sensor.dark_sky_hourly_summary
        - sensor.dark_sky_daily_summary


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/"


I tried adding this to my configuration file:

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

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


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



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


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


Is anyone able to help with this please?


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.


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


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

javascript_version: latest

Same issue with that commented out


Can’t you use Chrome?


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