Custom Dark Sky Animated Weather Card

There’s no prize for high humidity lol

Yes I copied the raw file. Sorry just starting out with HA. Here is my code:

In ui_lovelace.yaml I have these…

    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

resources:
  - type: module
    url: /local/mini-media-player-bundle.js?v=0.9.2
  - type: module
    url: /local/custom_ui/dark-sky-weather-card.js?v=7.1

In configuration.yaml I have this…

sensor:
  - platform: darksky
    api_key: xxxxxxxxxx
    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: 5

What is the difference between sensor.dark_sky_precip_probability, sensor.dark_sky_precip_probability_0 and sensor.dark_sky_precip_probability_1. Which means today? The last one means tomorrow, right?

Edit: How could I use 24h time format with EN locale?

I have noticed that sensor.dark_sky_precip_probability always seems to be 0… sensor.dark_sky_precip_probability_0 is today’s forecast.

I have updated the card with a new flag time_format.

Force 24 hour (metric) time regardless of locale

time_format: 24

Force 12 hour time regardless of locale

time_format: 12

I believe you mentioned above that you are using yaml mode and not storage mode. It’s not the default any more so I assume you have

lovelace:
  mode: yaml

in your configuration.yaml file…

Yes it’s in there. Has to be something with the way I have it in the ui_ lovelace file I think or the js file. I created a file and copied and pasted the raw output. I couldn’t figure out a way to download it. I also tried doing a wget in putty but it downloaded a much different file. I see the sensors at the top in the traditional view so I know darksky api is working.

youre missing

forecast:
  - 0

!!!

It’s there right under api key.

It’s very kind from you, thank you very much!

hmmm… just to cover basics… you restarted HA after adding the card to your www folder, cleared the browser cache and refreshed the UI.

Are there any other errors in the log when you try to access the card?

Something else to check is that you have

frontend:
  javascript_version: latest

defined in your configuration.yaml. I’m not sure it is completely necessary but I have it in mine

Try this once again

cd to your www/custom_ui folder
rm dark-sky-weather-card.js
wget https://raw.githubusercontent.com/iammexx/home-assistant-config/master/ui/darksky/dark-sky-weather-card.js

still same thing after putting this in and redownloading the js. This is what I see iin the log:

Log Details (ERROR)

Sat Jan 12 2019 16:32:17 GMT-0500 (Eastern Standard Time)

https://xxxxxxxxx.duckdns.org/local/custom_ui/dark-sky-weather-card.js?v=7.1:7:1 Uncaught SyntaxError: Unexpected token <
4:32pm components/system_log/init.py (error)

on overview page it says custom element does not exist: dark-sky-weather-card

EDIT Got it working. I had to put the card in the /www folder not the /www/custom_ui folder. Thanks for the help everyone

1 Like

i dont know what youre seeing but i see this in the first post:

Well that’s not my post. I’ve got it working now putting the js file in the www folder not custom ui folder. Appreciate the help

@m.p.frankland Hi, translation in italian for “Feels like” is “Percepito” instead your “Si sente come” :wink:

Love this card and the things that keep getting added. Keep up the good job @m.p.frankland!!!

I do have a few issues with this version where I will refresh the screen and it will not be there and just a card with the text Custom element doesn’t exist: dark-sky-weather-card. but I don’t understand why this is happening and why it’s causing some of my other cards to fail. The only way to fix it is to click the 3 dots button on the top right and select Refresh.

Anyway, here is my card below. It’s a combination of using sensors from my personal weather station for current readings, Australian Weather Forecast using BOM Public FTP, and Dark Sky to fill in any blanks (icons, visibility reading, and apparent temperature). I’ve also added a little working to the new daily maximum sensor. I just looks odd having a rather random temperature value sitting there with no explanation.

weather

Could you please share your code / entity setup / procedure to get this working with BOM data? I am currently trying to do just that but having some issues. It is currently breaking my Lovelace weather screen completely with the below error in the log:

https://xxxxx:8123/local/custom_ui/dark-sky-weather-card.js?v=4:134:87 Uncaught TypeError: Cannot read property ‘state’ of undefined

yep, suggested that too. see Custom Dark Sky Animated Weather Card - #485 by Mariusthvdb
hope @m.p.frankland can make this ‘official’

did you simply add these words to the line, or did it involve other code than:

var daytimeHigh = this.config.entity_daytime_high ? html`<li><span class="ha-icon"><ha-icon icon="mdi:thermometer"></ha-icon></span>Max today: ${Math.round(this.hass.states[this.config.entity_daytime_high].state)}<span> ${this.getUOM('temperature')}</span></li>` : ``;

suppose this should be done the way the feels like text is done with a locale setting?

feature request:

would it be possible to have the current condition as a header above the large icon? Seems we’re missing that right now, and it reallyiq a nice addition to immediately see what the current condition is:

like:

31

it is the sensor.dark_sky_forecast_icon_0 if your using this in the forecast sensor, or sensor.dark_sky_forecast_icon for the regular sensor.

I just setup the Aussie weather forecast using BOM FTP as per the link above. I did nothing special there. It just works, and I set it up for a forecast area close by that works for me. Unfortunatly for me it’s not the local BOM station at the airport a few kms away, but it’s the regional centre almost 30 minutes away. Below is my bom_forecast code:

## BOM Forecast
  - platform: bom_forecast
    product_id: IDN11053
    name: WG Forecast
    forecast_days: 5
    rest_of_today: True
    friendly: false
    friendly_state_format: '{min} to {max}, {summary}'
    monitored_conditions:
      - 'max'
      - 'min'
      - 'chance_of_rain'
      - 'possible_rainfall'
      - 'summary'
      - 'detailed_summary'

This gives my a bunch of sensors starting with sensor.bom_wg_forecast_ for rain, detailed_summary, summary, max_temp_c, min_temp_c, and possible_rainfall, and does this for 5 days, 0-5. IDN11053 is for Wollongong.

My code for the weather card is as follows:

  - type: custom:card-modder
    card:
      type: custom:dark-sky-weather-card
      entity_sun: sun.sun
      entity_daily_summary: sensor.bom_wg_forecast_detailed_summary_0
      entity_current_conditions: sensor.dark_sky_icon
      entity_humidity: sensor.pws_relative_humidity
      entity_pressure: sensor.pws_pressure_mb
      entity_pop: sensor.bom_wg_forecast_chance_of_rain_0
      entity_temperature: sensor.pws_temp_c
      entity_apparent_temp: sensor.dark_sky_apparent_temperature
      entity_daytime_high: sensor.bom_wg_forecast_max_temp_c_0
      entity_visibility: sensor.dark_sky_visibility
      entity_wind_bearing: sensor.bom_wind_bear
      entity_wind_speed: sensor.pws_wind_kph
      entity_forecast_high_temp_1: sensor.bom_wg_forecast_max_temp_c_1
      entity_forecast_high_temp_2: sensor.bom_wg_forecast_max_temp_c_2
      entity_forecast_high_temp_3: sensor.bom_wg_forecast_max_temp_c_3
      entity_forecast_high_temp_4: sensor.bom_wg_forecast_max_temp_c_4
      entity_forecast_high_temp_5: sensor.bom_wg_forecast_max_temp_c_5
      entity_forecast_low_temp_1: sensor.bom_wg_forecast_min_temp_c_1
      entity_forecast_low_temp_2: sensor.bom_wg_forecast_min_temp_c_2
      entity_forecast_low_temp_3: sensor.bom_wg_forecast_min_temp_c_3
      entity_forecast_low_temp_4: sensor.bom_wg_forecast_min_temp_c_4
      entity_forecast_low_temp_5: sensor.bom_wg_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_wg_forecast_chance_of_rain_1
      entity_pop_2: sensor.bom_wg_forecast_chance_of_rain_2
      entity_pop_3: sensor.bom_wg_forecast_chance_of_rain_3
      entity_pop_4: sensor.bom_wg_forecast_chance_of_rain_4
      entity_pop_5: sensor.bom_wg_forecast_chance_of_rain_5
      entity_summary_1: sensor.bom_wg_forecast_summary_1
      entity_summary_2: sensor.bom_wg_forecast_summary_2
      entity_summary_3: sensor.bom_wg_forecast_summary_3
      entity_summary_4: sensor.bom_wg_forecast_summary_4
      entity_summary_5: sensor.bom_wg_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
    style:
      background: -webkit-linear-gradient(top,rgba(25,25,25,0.9),rgba(25,25,25,0.8),rgba(50,50,50,0.3))
      border-radius: 10px
      border: solid 1px rgba(100,100,100,0.3)
      color: "#999999"
      box-shadow: 3px 3px rgba(0,0,0,0.4)

Yep. Exactly that on line 23. Ideally something with different language settings would be great for everyone, but that is beyond my skill level today.

Thank you! It took a lot of messing around with indentation (I hate how the Raw editor doesn’t have line numbers or any indentation tracking) but after copying/pasting into my IDE editor to get that side of things sorted, it is finally working…all but I lost the background image on that page… now to fix that