Custom Dark Sky Animated Weather Card

Share your Projects! Dashboards & Frontend
1014

EDIT: never mind, classic PEBCAC. I’d blindly edited some of the lines in the actual .js file to add ‘d’ to the end of the lines. Undid that and the card is working agian.

Can anyone interpret this message I’m getting in the Chrome console?

   Uncaught (in promise) TypeError: Cannot read property 'state' of undefined
        at dark-sky-weather-card.js?v=0.10.2:63
        at Array.map (<anonymous>)
        at HTMLElement.render (dark-sky-weather-card.js?v=0.10.2:55)
        at HTMLElement.update (app-652a7f4d.js:2)
        at HTMLElement.performUpdate (app-652a7f4d.js:2)
        at HTMLElement._enqueueUpdate (app-652a7f4d.js:2)

Running HA 0.91.0, added the ‘d’ to the end of the relevant lines, applied the code change suggested by @m.p.frankland and have at the top of my lovelace config:

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

Darksky config:

- platform: darksky
  api_key: !secret darksky_key
  language: it
  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
  scan_interval:
    minutes: 5
1 Like
1015

Hi all,
I am a Home Assistant noob.
I have been adding cards and also editing configs, getting integrations done and i also code a little with arduino.
However i cannot understand the directions to get this card to work.
I am running the latest 0.91.2 Hassio on Ubuntu 18.10 and docker.
All updated packages on ubuntu with no repository updates when starting Ubuntu.
I understand the files and structure of the:

<config-dir>/www/custom_ui/dark-sky-weather-card.js
<config-dir>/www/icons/weather_icons/animated/
<config-dir>/www/icons/weather_icons/static/

and all files are in the correct place including:
copy and paste of the dark-sky-weather-card.js file and all the icons downloaded in to the right folders.

I have a sensor.yaml file and have put the sensors in here and the entities are showing up and registering data when in the entity developer tool.

What i am not understanding is the rest.

Like i said i am very new to this and my brain is now fired after 6 days of about 12 to 14 hours straight of setting up my smart home.

I am using Lovelace-ui in storage mode and raw config editor.
I have tabs with the custom ui interface.

However i am lost at where to put the stuff from step 3 onwards.
" 3. Add the card definition: There are required / optional and flag entries."

I have tried to put them into the raw editor under a card.
But restart and red card.

  - badges: []
    card:
      entity_current_conditions: sensor.dark_sky_icon
      entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1d
      entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2d
      entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3d
      entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4d
      entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5d
      entity_forecast_icon_1: sensor.dark_sky_icon_1d
      entity_forecast_icon_2: sensor.dark_sky_icon_2d
      entity_forecast_icon_3: sensor.dark_sky_icon_3d
      entity_forecast_icon_4: sensor.dark_sky_icon_4d
      entity_forecast_icon_5: sensor.dark_sky_icon_5d
      entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_0d
      entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1d
      entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2d
      entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3d
      entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4d
      entity_summary_1: sensor.dark_sky_summary_1d
      entity_summary_2: sensor.dark_sky_summary_2d
      entity_summary_3: sensor.dark_sky_summary_3d
      entity_summary_4: sensor.dark_sky_summary_4d
      entity_summary_5: sensor.dark_sky_summary_5d
      entity_temperature: sensor.dark_sky_temperature
      type: 'custom:dark-sky-weather-card'
    cards:
      - entity: camera.weather_radar_brisbane
        type: picture-entity
    icon: 'mdi:weather-partlycloudy'
    title: Weather

This is also at the top:

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

I am sorry to ask for basic help however can someone please help me with the steps.
I don’t understand where all of the stuff at step 3 goes, opens to, to make, click on, put or anything at all.

1016

you need to define a card “type:” under your “cards:” section. That’s the same way all cards work in lovelace.

Mine looks like this:

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
    ## optional ##
    entity_sun: sun.sun
    entity_visibility: sensor.dark_sky_visibility
    entity_daytime_high: sensor.dark_sky_daytime_high_temperature_0
    entity_wind_bearing: sensor.dark_sky_wind_bearing
    entity_wind_speed: sensor.dark_sky_wind_speed
    entity_humidity: sensor.dark_sky_humidity
    entity_pressure: sensor.dark_sky_pressure
    entity_apparent_temp: sensor.dark_sky_apparent_temperature
    #entity_daily_summary: sensor.dark_sky_daily_summary
    entity_pop: sensor.dark_sky_precip_probability
    entity_pop_intensity: sensor.dark_sky_precip_intensity
    entity_pop_1: sensor.dark_sky_precip_probability_1
    entity_pop_2: sensor.dark_sky_precip_probability_2
    entity_pop_3: sensor.dark_sky_precip_probability_3
    entity_pop_4: sensor.dark_sky_precip_probability_4
    entity_pop_5: sensor.dark_sky_precip_probability_5
    entity_current_text: sensor.dark_sky_current_text
    show_separator: True

Realize that I haven’t uupdated to v91 yet so those are all of the old entities. My understandinbg is you have to add _d or _h to the end of some entities with the latest version. look in your states page for the correct entity_ids

1 Like
1017

Thank you for your reply.

As above i have done this as I have attached the code to show that.
I have also set it up for lovelace and 0.91 as above with the d on the end.
Adding cards in the new “storage” lovelace is to go to custom ui on the 3 dots in the right hand corner at the top of HA and the the plus icon down the right bottom.
This is how i have had to add cards so far.
This is not working with this custom card.
Please can anyone help with instructions for the latest HA and the lovelace i am using with specific instructions or guides.
Like - when you need to do “x” or “y” put it in xxxxx.yaml or raw data at x.
As the instructions and every post i read is for old style configs or “add settings” but no specific locations. Add cards. But unfortunately I am lost on where.

1018

Look more carefully at the very beginning of the code you posted, and compare it to @finity’s code. You have:

- badges: [ ]
  card:
    entity_current_conditions: sensor.dark_sky_icon

and @finity has:

cards:
   - type: 'custom:dark-sky-weather-card'
     entity_current_conditions: sensor.dark_sky_icon
1020

Aha…
Thankyou all for your help.
I have now figured out what was going on.
It seems HA 0.91.2 moves things around and automatically renames sensors and entities with the “d”.
Put the card setup under cards and leave the type to the bottom.
If you have other cards in the raw editor put the code under that card and make sure the spacing is right.

cards:
  - entity: camera.weather_radar_brisbane
    type: picture-entity
  - entity_current_conditions: sensor.dark_sky_icon
    entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1d
    entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2d
    entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3d
    entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4d
    entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5d
    entity_forecast_icon_1: sensor.dark_sky_icon_1d
    entity_forecast_icon_2: sensor.dark_sky_icon_2d
    entity_forecast_icon_3: sensor.dark_sky_icon_3d
    entity_forecast_icon_4: sensor.dark_sky_icon_4d
    entity_forecast_icon_5: sensor.dark_sky_icon_5d
    entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_0d
    entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1d
    entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2d
    entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3d
    entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4d
    entity_summary_1: sensor.dark_sky_summary_1d
    entity_summary_2: sensor.dark_sky_summary_2d
    entity_summary_3: sensor.dark_sky_summary_3d
    entity_summary_4: sensor.dark_sky_summary_4d
    entity_summary_5: sensor.dark_sky_summary_5d
    entity_temperature: sensor.dark_sky_temperature
    type: 'custom:dark-sky-weather-card'
icon: 'mdi:weather-partlycloudy'
title: Weather
1021

Glad you figured it out.

I use YAML mode, so I’m not familiar with exaclty how the raw editor works. (The lines of code stay where I put them :smile: )

1022

I’m trying to use this but i get this error

Error

Cattura

I have this on the config.yaml

Drarksky yaml

darksky
darksky795×988 112 KB

I tryied also with <> but I get the same issue. What I have to put in the api key?
I’m on hass.io v0.91.2

1023

Compare your config with the example from the docs.

1024

Hi,
i’m having trouble configuring the card, in the panel i get a completely blank page

image

image
image1018×620 16.7 KB

this is my ui-lovelace.yaml 
resources:
  - url: /local/custom_ui/dark-sky-weather-card.js?v=7.1
    type: module


views:
  - title: Home
    icon: mdi:home
    id: home
    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_1d
        entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2d
        entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3d
        entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4d
        entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5d
        entity_forecast_icon_1: sensor.dark_sky_icon_1d
        entity_forecast_icon_2: sensor.dark_sky_icon_2d
        entity_forecast_icon_3: sensor.dark_sky_icon_3d
        entity_forecast_icon_4: sensor.dark_sky_icon_4d
        entity_forecast_icon_5: sensor.dark_sky_icon_5d
        entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_0d
        entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1d
        entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2d
        entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3d
        entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4d
        entity_summary_1: sensor.dark_sky_summary_1d
        entity_summary_2: sensor.dark_sky_summary_2d
        entity_summary_3: sensor.dark_sky_summary_3d
        entity_summary_4: sensor.dark_sky_summary_4d
        entity_summary_5: sensor.dark_sky_summary_5d
        entity_sun: sun.sun
        entity_visibility: sensor.dark_sky_visibility
        entity_daytime_high: sensor.dark_sky_daytime_high_temperature_0d
        entity_wind_bearing: sensor.dark_sky_wind_bearing
        entity_wind_speed: sensor.dark_sky_wind_speed
        entity_humidity: sensor.dark_sky_humidity
        entity_pressure: sensor.dark_sky_pressure
        entity_apparent_temp: sensor.dark_sky_apparent_temperature
        entity_daily_summary: sensor.dark_sky_daily_summary
        entity_pop: sensor.dark_sky_precip_probability
        entity_pop_intensity: sensor.dark_sky_precip_intensity
        entity_pop_1: sensor.dark_sky_precip_probability_1d
        entity_pop_2: sensor.dark_sky_precip_probability_2d
        entity_pop_3: sensor.dark_sky_precip_probability_3d
        entity_pop_4: sensor.dark_sky_precip_probability_4d
        entity_pop_5: sensor.dark_sky_precip_probability_5d
        entity_current_text: sensor.dark_sky_current_text
        alt_daytime_high: sensor.dark_sky_alt_daytime_high 
        alt_wind: sensor.dark_sky_alt_wind
        alt_visibility: sensor.dark_sky_alt_visibility
        alt_pop: sensor.dark_sky_alt_pop
        alt_pressure: sensor.dark_sky_alt_pressure
        alt_humidity: sensor.dark_sky_alt_humidity
        locale: it
        static_icons: false
        tooltip_bg_color: 'rgb( 75,155,239)'
        tooltip_border_color: orange
        tooltip_border_width: 3
        tooltip_caret_size: 10
        tooltip_fg_color: '#fff'
        tooltip_left_offset: -12
        tooltip_width: 100
        tooltips: true
        old_daily_format: false
        time_format: 24
        show_beaufort: true

my dark-sky-weather-card.js is taked here:

https://github.com/iammexx/home-assistant-config/blob/master/ui/darksky/dark-sky-weather-card.js

this is sensors.yaml 
  - platform: darksky
    api_key: !secret darksky_api_key
    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
    scan_interval:
      minutes: 5
  - platform: template
    sensors:
      dark_sky_current_text:
        value_template: >-
                         {% if is_state("sensor.dark_sky_icon","clear-day") %} Clear 
                         {% elif is_state("sensor.dark_sky_icon","clear-night") %} Clear 
                         {% elif is_state("sensor.dark_sky_icon","rain") %} Rain
                         {% elif is_state("sensor.dark_sky_icon","snow") %} Snowy
                         {% elif is_state("sensor.dark_sky_icon","fog") %} Foggy
                         {% elif is_state("sensor.dark_sky_icon","sleet") %} Sleet
                         {% elif is_state("sensor.dark_sky_icon","wind") %} Windy
                         {% elif is_state("sensor.dark_sky_icon","cloudy") %} Cloudy
                         {% elif is_state("sensor.dark_sky_icon","partly-cloudy-day") %} Partly Cloudy
                         {% elif is_state("sensor.dark_sky_icon","partly-cloudy-night") %} Partly Cloudy
                         {% elif is_state("sensor.dark_sky_icon","hail") %} Hailing
                         {% elif is_state("sensor.dark_sky_icon","lightning") %} Lightning
                         {% elif is_state("sensor.dark_sky_icon","thunderstorm") %} Thunderstorm
                         {% endif %}
                         
      dark_sky_alt_wind:
        value_template: >-
                        {% set winddir = ['North','North-Northeast','Northeast','East-Northeast','East','East-Southeast','Southeast','South-Southeast','South','South-Southwest','Southwest','West-Southwest','West','West-Northwest','Northwest','North-Northwest','North'] %}
                        {{ states('sensor.dark_sky_wind_speed') | round }} mi/h from the {{ winddir[((states('sensor.dark_sky_wind_bearing') | float / 360)*16) | round]}}

i have some doubt in the ending part, the configurator give me an error in the vale_template line:

  - platform: template
    sensors:
      dark_sky_current_text:
        value_template:  {% if is_state("sensor.dark_sky_icon","clear-day") %} Clear
                                   {% elif is_state("sensor.dark_sky_icon","clear-night") %} Clear

image

but i take it from the git page :thinking:

i have updated to 0.91.2 and forced chrome to recharge the page using Ctrl+refresh
and in the sensor page i can see the value

Image

image
image1445×694 94.4 KB

any advice?:dizzy_face:

1025

First you have to fix the error with the value_template.
The card doesn’t show up if there’s any error with the configured entities.
Look at the browser console (F12) for the error.
Copy and paste your template in Dev Tools/templates an experiment with it.
One tip: {% endif%} :slightly_smiling_face:

2 Likes
1026

Anyoone else having an issue with the weather-card phasing in and out of working condition. At times I log in and i see:

Please define a weather entity
{
  "entity_sun": "sun.sun",
  "entity_weather": "weather.dark_sky",
  "type": "custom:weather-card"
}

As a test I checked using template editor:

{{ states.weather.dark_sky }}

results in

<template state weather.dark_sky=partlycloudy; temperature=70, humidity=45, ozone=298.43, pressure=1002.79, wind_bearing=252, wind_speed=9.91, visibility=9.65, attribution=Powered by Dark Sky, forecast=[{'datetime': '2019-04-11T00:00:00', 'temperature': 71, 'templow': 45, 'precipitation': None, 'wind_speed': 4.79, 'wind_bearing': 263, 'condition': 'partlycloudy'}, {'datetime': '2019-04-12T00:00:00', 'temperature': 77, 'templow': 57, 'precipitation': None, 'wind_speed': 8.26, 'wind_bearing': 82, 'condition': 'partlycloudy'}, {'datetime': '2019-04-13T00:00:00', 'temperature': 66, 'templow': 45, 'precipitation': 1.6, 'wind_speed': 8.36, 'wind_bearing': 64, 'condition': 'rainy'}, {'datetime': '2019-04-14T00:00:00', 'temperature': 62, 'templow': 45, 'precipitation': None, 'wind_speed': 15.81, 'wind_bearing': 316, 'condition': 'windy'}, {'datetime': '2019-04-15T00:00:00', 'temperature': 76, 'templow': 57, 'precipitation': None, 'wind_speed': 11.92, 'wind_bearing': 178, 'condition': 'partlycloudy'}, {'datetime': '2019-04-16T00:00:00', 'temperature': 76, 'templow': 68, 'precipitation': None, 'wind_speed': 17.11, 'wind_bearing': 183, 'condition': 'partlycloudy'}, {'datetime': '2019-04-17T00:00:00', 'temperature': 85, 'templow': 53, 'precipitation': 0.2, 'wind_speed': 14.77, 'wind_bearing': 210, 'condition': 'windy'}, {'datetime': '2019-04-18T00:00:00', 'temperature': 69, 'templow': 48, 'precipitation': None, 'wind_speed': 15.56, 'wind_bearing': 319, 'condition': 'windy'}], friendly_name=Dark Sky @ 2019-04-11T09:06:41.288126-05:00>

So Im not sure why I keep getting the issue.

1027

Are you using darksky SENSOR like the card in this thread or darksky under WEATHER?
The custom card here uses the sensor & some template sensors.
We would not see issues with weather because we are not using it :wink:

1028

ahhh, you are so right - i posted in the wrong thread. Thank you.

1 Like
1029

Thanks for the reply :slightly_smiling_face:
I have put all the platform: template in the dev tools and it give me the corrispondyng value for wind & icon so i think it is good.

Checked the F12 console and this is the error:

Cattura%20Error
Cattura%20Error739×374 289 KB

but i can’t understand it

1030

I’m having the same exact error. I even pared down my ui-lovelace file to

          - type: 'custom:dark-sky-weather-card'
            entity_sun: sun.sun

not sure what’s going on :frowning:

Got it working. Removed the config I had and started over line by line.
Turns out

            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

was throwing an error. Had to switch it to

            entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1d
            entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2d
            entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3d
            entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4d
            entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5d

and same for entity_forecast_icon_1: sensor.dark_sky_icon_1d & entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_0d (needs the d at the end).

Don’t know why my config stopped working suddenly, but now it’s working!

1031

It was a breaking change in the darksky platform you didn’t bother to read in the Home Assistant release notes.

1032

Hope I didn’t offend you! Please accept my most sincere and humble apologies.

1033

Not at all! It just astonishes me that people don’t read at least the breaking changes in HA releases - particularly when something breaks the reason can usually be found there.

1 Like
1034

Or at least read them after they have broken. :wink:

1 Like