Custom Dark Sky Animated Weather Card

Its the forcasted high temp for the current day

8°!! Chilly!
image

I have the dark-sky-weather-card.js in the /config/www/custom_ui folder. HA is installed in docker on a synology NAS. I already have mini media player in my www folder

This is in my ui_lovelace.yaml section with the weather info…

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

title: Home
views:

  • badges:
    • binary_sensor.rachio_sprinkler_controller_online
    • binary_sensor.vistacam_1100_motion_sensor_bd_15
    • binary_sensor.vistacam_1100_motion_sensor_fd_11
    • binary_sensor.vistacam_1100_motion_sensor_sd_13
    • sensor.weather_cloudiness
    • sensor.weather_temperature
    • sensor.weather_wind_speed
    • sensor.weather_low_clouds
    • sensor.weather_pressure
    • sensor.weather_medium_clouds
    • sensor.weather_wind_direction
    • sensor.weather_high_clouds
    • sensor.weather_humidity
    • sensor.weather_dewpoint_temperature
    • sensor.weather_symbol
    • sensor.weather_fog
    • sensor.weather_precipitation
    • sensor.harmony_30
    • sensor.harmony_theater_2_65
    • sensor.wwn_humidity__upsta_37
    • sensor.wwn_humidity__basem_39
    • sensor.wwn_humidity__garag_43
    • sensor.harmony_hub_19
    • sensor.wwn_humidity__livin_46
    • sensor.wwn_humidity__dinin_60
    • sun.sun
      cards:
    • type: ‘custom:dark-sky-weather-card’
      entity_current_conditions: sensor.dark_sky_icon
      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
      entity_temperature: sensor.dark_sky_temperature

Yes but we have a higher humidity and barometric pressure than you.
:stuck_out_tongue_winking_eye::rofl::thinking:

1 Like

Can you please format your code (read the blue box at the top).

Have you downloaded the file in raw format?

aha, that would explain why it is missing in my setup up, I’ve 2 sensors, 1 regular, 1 for the forecast sensor items. So will quickly rename the entity in the card…which sensor is that? I think I have them all, but it won’t show:

  weather_darksky:
    name: Weer Darksky
    entities:
      - sensor.dark_sky_temperature
      - sensor.dark_sky_apparent_temperature
      - sensor.dark_sky_cloud_coverage
      - sensor.dark_sky_daily_summary
      - sensor.dark_sky_dew_point
      - sensor.dark_sky_hourly_summary
      - sensor.dark_sky_humidity
      - sensor.dark_sky_icon
      - sensor.dark_sky_minutely_summary
      - sensor.dark_sky_nearest_storm_bearing
      - sensor.dark_sky_nearest_storm_distance
      - sensor.dark_sky_uv_index
      - sensor.dark_sky_ozone
      - sensor.dark_sky_precip
      - sensor.dark_sky_precip_intensity
      - sensor.dark_sky_precip_probability
      - sensor.dark_sky_pressure
      - sensor.dark_sky_summary
      - sensor.dark_sky_visibility
      - sensor.dark_sky_wind_bearing
      - sensor.dark_sky_wind_gust
      - sensor.dark_sky_wind_speed

from:

  - platform: darksky
    api_key: !secret darksky_key
    update_interval:
    # At least one of these must be specified:
      hours: 1
    monitored_conditions:
      - summary
      - icon
      - temperature
      - temperature_high
      - temperature_low
      - precip_type
      - precip_intensity
      - precip_probability
      - precip_accumulation
      - apparent_temperature
      - apparent_temperature_high
      - apparent_temperature_low
      - dew_point
      - wind_speed
      - wind_gust
      - wind_bearing
      - cloud_cover
      - humidity
      - pressure
      - visibility
      - ozone
      - minutely_summary
      - hourly_summary
      - daily_summary
      - precip_intensity_max
      - uv_index
      - moon_phase
      - nearest_storm_distance
      - nearest_storm_bearing

the line:

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

wont pickup from the above, since these high/low sensors aren’t created in the first place without forecast settings… Think this is yet another bug in the platform.

00

EDIT_

found it… I overlooked 1 of the optional config entities:

entity_daytime_high: sensor.dark_sky_forecast_daytime_high_temperature_0

since my forecast sensors are named dark_sky_forecast (opposed to my regular sensors called dark_sky) have to rename them in the config also, which is very easy thanks to the way this card is being installed )

53

since I find the 3d temp a bit confusing without further explanation, Ive added a small message there, just as with the feels like temp.
Would that be a nice touchy for you to add @m.p.frankland?

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