Custom Dark Sky Animated Weather Card

marksev1 · February 2, 2019, 7:03pm

I belive so:
msev@orangepipc:~/.homeassistant/config/www/custom-ui$ ls -lrt
total 28
-rw-r–r-- 1 msev msev 25970 Feb 2 17:23 dark-sky-weather-card.js
msev@orangepipc:~/.homeassistant/config/www/custom-ui$ pwd
/home/msev/.homeassistant/config/www/custom-ui

msev@orangepipc:~/.homeassistant/config/www/custom-ui$ more dark-sky-weather-card.js
// #####
// ##### Get the LitElement and HTML classes from an already defined HA Lovelace class
// #####
var LitElement = LitElement || Object.getPrototypeOf(customElements.get(“hui-error-entity-row”));
var html = LitElement.prototype.html;

and so on …

Unable to find icon for domain weather (rainy) 09ec5360c92942c51c70.chunk.js:1032

Nalaganje za modul z virom “http://192.168.88.100:8123/local/bignumber-card.js?v=1” ni uspelo. 192.168.88.100:8123:1:1

uncaught exception: /local/bignumber-card.js?v=1

Videti je, da ta stran uporablja učinek postavitve povezanega z drsenjem. To morda ne bo pravilno delovalo z asinhronim pomikanjem; za dodatne podrobnosti in pridružitev razpravi o povezanih orodjih in značilnostih glejte https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects! 1

Unable to find icon for domain weather (rainy)

09ec5360c92942c51c70.chunk.js:1032

Nalaganje za modul z virom “http://192.168.88.100:8123/local/custom_ui/dark-sky-weather-card.js?v=8.3” ni uspelo. default_view:1:1

uncaught exception: /local/bignumber-card.js?v=1

uncaught exception: /local/custom_ui/dark-sky-weather-card.js?v=8.3

Unable to find icon for domain weather (rainy) 09ec5360c92942c51c70.chunk.js:1032

uncaught exception: /local/bignumber-card.js?v=1

uncaught exception: /local/custom_ui/dark-sky-weather-card.js?v=8.3

Also no other custom card works,…dunno what i’m doing wrong…

fernandex00 · February 3, 2019, 12:16am

Hi, I got it working, my issue is that the tracker card can’t see darky sky animated weather, how can I configure this?

mkerley · February 3, 2019, 1:31am

Did you copy in the animated icons into the www/icons folder? Perhaps that’s the first error (step 2 for the original animated weather card was save the amcharts icons under www\icons\weather_icons\animated)

Also, have you given permissions to execute the js files (chmod 755)? that could be why none of your custom cards are working.

marksev1 · February 3, 2019, 7:38am

Nope haven’t give permission (maybe its that, gonna try it), and yes I did copy the icons in the correct folders :).

msev@orangepipc:~/.homeassistant/config/www/icons/weather_icons/animated$ di
total 356
-rw-r–r-- 1 msev msev 1332 Feb 2 17:45 weather_sunset.svg
-rw-r–r-- 1 msev msev 760 Feb 2 17:45 weather_sagittarius.svg
etc

Nope still doesn’t work…any other ideas…

Failed to load resource: the server responded with a status of 404 (Not Found)
:8123/local/custom_ui/dark-sky-weather-card.js?v=8.3:1 Failed to load resource: the server responded with a status of 404 (Not Found)
09ec5360c92942c51c70.chunk.js:1032 Unable to find icon for domain weather (partlycloudy)
domainIcon @ 09ec5360c92942c51c70.chunk.js:1032
8ee9235853b66c6b78f9.chunk.js:5609 Uncaught (in promise) /local/bignumber-card.js?v=1
8ee9235853b66c6b78f9.chunk.js:5609 Uncaught (in promise) /local/custom_ui/dark-sky-weather-card.js?v=8.3

Could it be related to SSL not working properly?

mkerley · February 3, 2019, 2:14pm

I’d try distilling it down to just the weather card (at least it’s what I had to do to simplify things). It will make sure there’s no other conflicts or problems which are masking this card failing. If you’re like me, you feel like you’ve tried this all 100 times and it never has worked before, but there was apparently something I was missing each time, so it can’t hurt to try.

Save your current config somewhere else and put only the below in as your lovelace raw config through the built in editor (copied from user finity above, but removed the optional entities):

resources:
  - url: /local/custom_ui/dark-sky-weather-card.js?v=8.3
    type: module
title: Home Assistant
views:
  - icon: 'mdi:weather-cloudy'
    cards:
      - type: 'custom:dark-sky-weather-card'
        entity_current_conditions: sensor.dark_sky_icon
        entity_temperature: sensor.dark_sky_temperature
        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_icon_1: sensor.dark_sky_icon_1
        entity_forecast_icon_2: sensor.dark_sky_icon_2
        entity_forecast_icon_3: sensor.dark_sky_icon_3
        entity_forecast_icon_4: sensor.dark_sky_icon_4
        entity_forecast_icon_5: sensor.dark_sky_icon_5
        entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_0
        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_summary_1: sensor.dark_sky_summary_1
        entity_summary_2: sensor.dark_sky_summary_2
        entity_summary_3: sensor.dark_sky_summary_3
        entity_summary_4: sensor.dark_sky_summary_4
        entity_summary_5: sensor.dark_sky_summary_5

Then try redownloading the latest raw file as your dark-sky-weather-card.js here: here. Place it in www/config_ui/

Just to separate the sensors and clarify things a bit, put this into your config.yaml:

sensor: !include sensors.yaml

Then create a sensors.yaml which contains only this:

  - platform: darksky
    api_key: [redacted]
    forecast:
      - 0
      - 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: 10

You’ve already verified permissions are set and you have the animated icons in place. This should be a pretty basic setup. As far as I can recall, it should all be set up and showing only the weather card once you do all these things. If it works, then you can start to add the rest of your config back in.

marksev1 · February 3, 2019, 4:10pm

Thanks for trying to help, did it exactly and it doesn’t work, same error as before . I’m a bit sad because there are really tons of cool custom cards that I want to use in the UI…

I even tried clearing browser cache…doesn’t help…

m.p.frankland · February 3, 2019, 4:43pm

New version available 0.9.1
available here

Major Changes:

# 0.9.1

* Card now updates all values on hass state changes
* style getter is now a function as per suggestion from @thomasloven. This may help with using card modder with this card.

marksev1 · February 3, 2019, 8:13pm

I’m a retard…when you guys were saying config i thought that a folder should be named that…but now that i put in .homeassistant a folder www now everything works

Anwen · February 3, 2019, 9:35pm

Really, really pleased that it updates in real time, no browser refresh required! Thanks so much for all your hard work on this card!

finity · February 4, 2019, 1:41am

Did I miss it somewhere in this thread or is there a way to add this card to the custom resource tracker?

DavidFW1960 · February 4, 2019, 1:46am

# Custom Component Updater
custom_updater:
  show_installable: false
  hide_sensor: false
  track:
    - components
    - cards
    - python_scripts
  component_urls:
  card_urls:
    - https://raw.githubusercontent.com/iammexx/home-assistant-config/master/ui/darksky/version.json

finity · February 4, 2019, 1:49am

Awesome! Thanks!

sparkydave · February 4, 2019, 3:32am

I still can’t get this card to show up. I’ve added it without card-modder because that was causing an error, but now I get no error in the log but no card in the GUI either. Running latest vesion of the card, card-tools and card-modder on Hassio, HA 0.86.4

Code in lovelace raw mode:

  - title: Weather
    icon: 'mdi:weather-partlycloudy'
    background: center / cover no-repeat url("/local/images/elizabeth_quay_perth.jpg") fixed
    cards:
      - type: 'custom:dark-sky-weather-card'
        entity_sun: sun.sun
        entity_daily_summary: sensor.bom_perth_forecast_detailed_summary_0
        entity_current_conditions: sensor.dark_sky_icon
        entity_humidity: sensor.bom_perth_relative_humidity
        entity_pressure: sensor.bom_perth_pressure_mb
        entity_pop: sensor.bom_perth_forecast_chance_of_rain_0
        entity_temperature: sensor.bom_perth_feels_like_c
        entity_apparent_temp: sensor.dark_sky_apparent_temperature
        entity_daytime_high: sensor.bom_perth_forecast_max_temp_c_0
        entity_visibility: sensor.dark_sky_visibility
        entity_wind_bearing: sensor.bom_perth_wind_direction
        entity_wind_speed: sensor.bom_perth_wind_speed_kmh
        entity_forecast_high_temp_1: sensor.bom_perth_forecast_max_temp_c_1
        entity_forecast_high_temp_2: sensor.bom_perth_forecast_max_temp_c_2
        entity_forecast_high_temp_3: sensor.bom_perth_forecast_max_temp_c_3
        entity_forecast_high_temp_4: sensor.bom_perth_forecast_max_temp_c_4
        entity_forecast_high_temp_5: sensor.bom_perth_forecast_max_temp_c_5
        entity_forecast_low_temp_1: sensor.bom_perth_forecast_min_temp_c_1
        entity_forecast_low_temp_2: sensor.bom_perth_forecast_min_temp_c_2
        entity_forecast_low_temp_3: sensor.bom_perth_forecast_min_temp_c_3
        entity_forecast_low_temp_4: sensor.bom_perth_forecast_min_temp_c_4
        entity_forecast_low_temp_5: sensor.bom_perth_forecast_min_temp_c_5
        entity_forecast_icon_1: sensor.dark_sky_icon_1
        entity_forecast_icon_2: sensor.dark_sky_icon_2
        entity_forecast_icon_3: sensor.dark_sky_icon_3
        entity_forecast_icon_4: sensor.dark_sky_icon_4
        entity_forecast_icon_5: sensor.dark_sky_icon_5
        entity_pop_1: sensor.bom_perth_forecast_chance_of_rain_1
        entity_pop_2: sensor.bom_perth_forecast_chance_of_rain_2
        entity_pop_3: sensor.bom_perth_forecast_chance_of_rain_3
        entity_pop_4: sensor.bom_perth_forecast_chance_of_rain_4
        entity_pop_5: sensor.bom_perth_forecast_chance_of_rain_5
        entity_summary_1: sensor.bom_perth_forecast_summary_1
        entity_summary_2: sensor.bom_perth_forecast_summary_2
        entity_summary_3: sensor.bom_perth_forecast_summary_3
        entity_summary_4: sensor.bom_perth_forecast_summary_4
        entity_summary_5: sensor.bom_perth_forecast_summary_5
        static_icons: true
        sunset: true
        locale: en
        old_daily_format: false
        tooltips: true
        tooltip_bg_color: 'rgb( 75,155,239)'
        tooltip_border_color: orange
        tooltip_border_width: 1
        tooltip_caret_size: 10
        tooltip_fg_color: '#fff'
        tooltip_left_offset: -5
        tooltip_width: 100

if I bring up the dev console in Chrome I get a bunch of errors that I don’t really know what to do with…

Uncaught (in promise) DOMException
card-tools.js:230 CARD-TOOLS IS INSTALLEDDeviceID: ae7297e9-0806f81f
dark-sky-weather-card.js?v=9.1:294 Uncaught (in promise) TypeError: Cannot read property ‘state’ of undefined
at HTMLElement.get current [as current] (dark-sky-weather-card.js?v=9.1:294)
at HTMLElement.render (dark-sky-weather-card.js?v=9.1:21)
at HTMLElement.update (app-3b4bb4ed.js:377)
at HTMLElement.performUpdate (app-3b4bb4ed.js:344)
at HTMLElement._enqueueUpdate (app-3b4bb4ed.js:344)
21core-094aa379.js:1 WebSocket connection to ‘wss://192.168.0.13:8123/api/websocket’ failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
s @ core-094aa379.js:1

Also, I can’t get this card to show up in the card tracker. I have the exact code entered as per David’s post above. The js file is saved under www\custom_ui

Any ideas?

DavidFW1960 · February 4, 2019, 3:45am

Dave - looks to me it’s that you haven’t configured the sensor properly. The lovelace is fine (probably) but where are your sensors?

One thought… the custom tracker reads the ui-lovelace.yaml file for the version… if you are using storage that won’t be getting updated. I maintain the yaml file but use storage and I cut/paste from yaml to storage file if I do major changes.

m.p.frankland · February 4, 2019, 3:46am

Line 294 is

    var apparent = this.config.entity_apparent_temp ? Math.round(this._hass.states[this.config.entity_apparent_temp].state) : 0;

Which points to the entity_apparent_temp configuration. Basically the card thinks that whatever you are passing in to entity_apparent_temp is undefined.

sparkydave · February 4, 2019, 3:53am

Thanks, I didn’t realise. I’ve updated my old localace.yaml so that should work after my next restart.

Thanks! I had missed swapping the darksky entity for one from my local provider, swapped it out and finally have the card working! Thanks so much for your awesome work on this

m.p.frankland · February 4, 2019, 12:03pm

Updated Version available here

# 0.9.2
  - Corrected issue with forecast day name not updating with hass state changes.

cjsimmons · February 4, 2019, 12:07pm

YAY!!! Welcome to the club finally. Had a few hurdles to get past, but you finally made it!!

Mariusthvdb · February 4, 2019, 2:44pm

great! thank you very much indeed.

skipping the previous update, Ive now got it working with the new Lit …cool.
though I am having a little trouble with the positioning, would you please see why I can’t get the space between the separator and the block below to be smaller? Ive tried all numbers, but is remains the same…

also, I need the positioning of the condition to go below the Icon, and no matter what I do it won’t go…

while I want it to be like:

this is my config:

show_beaufort: true
show_separator: true
tooltips: true
old_daily_format: false
static_icons: false
locale: nl
tooltip_bg_color: 'rgb( 75,155,239)'
tooltip_border_color: orange
tooltip_border_width: 1
tooltip_caret_size: 10
tooltip_fg_color: '#fff'
tooltip_left_offset: -5
tooltip_width: 100

temp_top_margin: 12px
temp_font_weight: 300
temp_font_size: 5em
temp_right_pos: 1em

temp_uom_top_margin: 0px
temp_uom_right_margin: 7px

apparent_top_margin: 75px
apparent_right_pos: 1em
apparent_right_margin: 1em

current_text_top_margin: 75px #1em
current_text_left_pos: 1.3em
current_text_font_size: 1.7em

current_data_top_margin: 6em
 
large_icon_top_margin: -3.5em
large_icon_left_position: 0em

separator_top_margin: 2em

in which I have taken all the exact values I previously had in my classes in the older card.

thanks for any hint you can give me.

silly thing is there’s progress… but now the icons only show up while the card loads, and then they disappear:

using:

temp_top_margin: 12px
temp_font_weight: 300
temp_font_size: 4em
temp_right_pos: 1em

temp_uom_top_margin: 0px
temp_uom_right_margin: 7px

apparent_top_margin: 80px
apparent_right_pos: 1em
apparent_right_margin: 1em

current_text_top_margin: 80px #1em
current_text_left_pos: 1.3em
current_text_font_size: 1.7em

current_data_top_margin: 1em
 
large_icon_top_margin: 12px #-3.5em
large_icon_left_position: 0em

separator_top_margin: 7.4em

UPDATE

well what do you know…
I decided to have the card configured in a dedicated .yaml file, and call that in my view by using this include:

  - type: weather-forecast
    entity: weather.woensdrecht

  - type: weather-forecast
    entity: weather.home_darksky

  - !include /config/lovelace/card_configs/dark_sky_custom_card.yaml

  - type: 'custom:weather-card-chart'
    title: Weather chart
    weather: weather.woensdrecht
    locale: nl

result:

that’s more like it. (although reloading the page now they’re gone again…?!?)

Could it be that having several of these cards in the same view bugs one another? I’ve had similar experience using the mini-graph-card and power-wheel card, that even halted the system and caused spontaneous restarts… see: Lovelace: mini graph card for reference

Milster · February 4, 2019, 9:09pm

On browser refresh my card looks perfect, but on subsequent dynamic updates the min temperature in the day forecasts gains a C for Celsius. This breaks the neatness of the card’s appearance making the readings too wide for each of the 5 columns.