Custom Dark Sky Animated Weather Card

Share your Projects! Dashboards & Frontend
81

I don’t use trusted networks anywhere and the card is working fine for me. I’m on 0.78.0b3 now but I have not had any issue with 0.77.3 when I was on it.

Edit: oops… I’m on the darksky version of this…

82

Will you share your code? Did you changed anything in the js file?

83

You can see all my config here.

84

The darksky card uses the same API call to access the config value for which units to use.

Mine worked fine on 0.77.1 (which was a fresh install after falling behind by ~9 months). It stopped working immediately on upgrade to 0.77.3 and works again now that localhost is a trusted network.

I asked on the dev channel and was told that there was a breaking change to the config object in 0.77.3 but it was not broadcast as the object remains undocumented. Reading through the diffs, it looks like auth is now required to make API calls though trusted networks have been exempted.

Would you have disabled auth? or have some kind of default auth mechanism in place that the card is using?

FWIW I may be wrong in my reading of the diffs, I don’t know the codebase at all and it could be mere chance that it began working on the restart after adding trusted networks…

85

I have not disabled auth and I have 2FA on as well. I don’t have trusted networks or legacy api setup at all.

http:
  # Uncomment this to add a password (recommended!)
  # api_password: !secret http_password
  # ssl_certificate: /ssl/fullchain.pem
  # ssl_key: /ssl/privkey.pem
  # trusted_networks:
  #   - !secret trusted_network
  ip_ban_enabled: True
  login_attempts_threshold: 5
  # Uncomment this if you are using SSL/TLS, running in Docker container, etc.
  # base_url: https://my-duck-dns-domain.duckdns.org:8123
86

It’s a bit weird here…

Having not worked for me I started again from scratch with it and it worked first time.
For a few hours.
After a restart I lost the hassio menu (which happens frequently) so I refreshed the page in Chrome and as usual the hassio menu returned, but the darksky card doesn’t work anymore. The whole view that the card is on is blank.

Any ideas anyone? Something to do with the js version maybe?

87

Could be - that tripped me up… need to increment the version if you have changed the card

88

But I haven’t changed the card, I deleted everything to do with the custom card and started again, incidentally, using your (@DavidFW1960) GitHub. it worked first time after much trying and failing before that.

Then at some point I had to F5 the HA frontend to get my hassio menu back and then (only) the darksky custom card stopped working, made the whole view display a blank page and writes this error (see below)every time I try to show that page.

Is this js version requirement documented anywhere? I am a little confused by it all as I don’t know anything about javascript. It seems slightly odd to me that we have to manually instruct Lovelace about a new version with arbitrary version numbers. But as I said, my understanding in this area is very thin.

Possible stupid questions alert:

  • Am I right in thinking javascript is loaded at runtime?
  • Am I right in thinking the ?v=x.x in the resources: section tells Lovelace which version of the .js file it last used?
  • How does HA know what version a .js file is In the first place?
  • Do HA restarts have any bearing on version numbering?

There are a lot more questions but on reflection this might require a separate thread if there are no docs describing it all.

Log Details (ERROR)

Tue Sep 11 2018 14:12:29 GMT+0100 (British Summer Time)

http://192.168.1.25:8123/local/custom_ui/weather-card.js:17:50 Uncaught TypeError: Cannot read property 'length' of undefined
89

Must admit it’s a mystery to me as well. I’m sure it’s most probably in the dev docs but as Lovelace is experimental at the moment it’s hard to get any docs for it. I just know I wasn’t initially using a version and then when the card was changed for 0.77 I think… it stopped working and then I found out about the version needing to be incremented.

It doesn’t make any sense to me either.

90

I reverted back to 0.77.1 and it works now.

91

hhhmmm… I’m on 0.76.1

92

I’m a little stuck with this. I copied all from DavidFW1960’s github as I had no success with this original post. I’m constantly getting a red box with the ui-lovelace.yaml relating to the Dark Sky Weather. At the top it states this:

n.setConfig is not a function

As I say, I’ve copied from the above github (which seemingly works) so I can’t understand what is wrong.

Running: 0.77.3 Hassio

A bit of a newbie so plain explanations/suggestions appreciated.

93

Yeah it works for me. Did you click on RAW and then right click to save from my github… ??

94

I’m pretty new to this sort of stuff. TBH, I don’t recall clicking on RAW and then right-click saving. Is it an obvious procedure to do?

95

Very easy. You can actually just click RAW, then use Ctrl+A to select all, then Ctrl+C to copy, and paste it into a file. That’s how I do it using the Cloud 9 HassIO add-on because its so easy. but however you choose to save it is cool.

96

Yeah it’s totally unintuitive saving stuff from github until you’ve done it. But if you don’t save the raw file it won’t work.

97

Thanks, I’ll give it a go now and see if I can do it. Report back soon!

98

Ok, All of the RAW copy and pasting was easy enough. Still no joy - keep getting this red box with my yaml from the ui-lovelace.yaml (relating to dark sky) and an error message (presumably) saying:

n.setConfig is not a function

Any ideas?

99

Hi,

I get the following errors.

https://xxx.xxx.x.xxx:8123/local/custom_ui/dark-sky-weather-card.js?v=5:17:42 TypeError: undefined is not an object (evaluating ‘hass.config.core.unit_system’)
15:07 components/system_log/init.py (ERROR)
:0:0 SyntaxError: Can’t create duplicate variable: ‘DarkSkyWeatherCard’
15:06 components/system_log/init.py (ERROR)

What can I have done wrong.

I have copied the .js from above and the .css from the original page and changed it as suggested above.

I have created the folders in www (custom_ui and icons/weather_icons/animated).

I have the following in configuration.yaml:

weather:
  - platform: darksky
    api_key: !secret darksky_api
    name: Vädret hemma

and in sensor.yaml:

  - platform: darksky
    api_key: !secret darksky_api
    forecast:
      - 1
      - 2
      - 3
      - 4
      - 5
    monitored_conditions:
      - icon
      - summary
      - nearest_storm_distance
      - nearest_storm_bearing
      - humidity
      - temperature
      - temperature_high
      - temperature_low
      - apparent_temperature
      - apparent_temperature_high
      - apparent_temperature_low
      - wind_speed
      - wind_bearing
      - precip_type
      - precip_probability
      - precip_accumulation
      - precip_intensity
      - precip_intensity_max
      - uv_index
      - daily_summary
      - pressure
      - visibility
    update_interval:
      minutes: 5

and in ui-lovelace.yaml

resources:
  - url: /local/custom_ui/dark-sky-weather-card.js?v=5
    type: js

and

  - type: custom:dark-sky-weather-card
    entity_sun: sun.sun
    entity_daily_summary: sensor.dark_sky_daily_summary
    entity_current_conditions: sensor.dark_sky_icon  
    entity_humidity: sensor.dark_sky_humidity
    entity_pressure: sensor.dark_sky_pressure
    entity_temperature: sensor.dark_sky_temperature
    entity_visibility: sensor.dark_sky_visibility
    entity_wind_bearing: sensor.dark_sky_wind_bearing
    entity_wind_speed: sensor.dark_sky_wind_speed
    entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1
    entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2
    entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3
    entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4
    entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5
    entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature
    entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1
    entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2
    entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3
    entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4
    entity_forecast_icon_1: sensor.dark_sky_icon_1

Any help very welcome!!

100

Removing dark sky from configurator.yaml and only including it in sensor.yaml eliminated the of duplicate variable. Still nothing appears in Safari or iPad.

I have the card within a vertical-stack card. The card before is shown, the custom card is not shown and the card after is not shown.