Custom Dark Sky Animated Weather Card

VDRainer · January 11, 2019, 3:49pm

Works, except for the humidity value.
Shows 0% also in your screenshot (i have to drink one more beer on such dry air)

EDIT: I’d suggest “Gefühlt” instead of “Fühlt sich an wie” in the German translation, but lets wait what others say.

m.p.frankland · January 11, 2019, 4:11pm

You are correct… Thanks for pointing that out. Updated card is on github.

VDRainer · January 11, 2019, 4:17pm

I have to thank you for your effort!

gkron · January 11, 2019, 8:57pm

I can’t seem to get this to work. i can see all the sensors in the traditional UI but no luck in lovelace. I placed this in my configuration.yaml and not the raw editor of lovelace. In lovelace I put the resource.

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

I then placed this in my lovelace raw config under 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

The result is a red box that says custom element doesnt exist dark-sky-weather-card.  I see this in the log as well.  Uncaught SyntaxError: Unexpected token <

Any ideas?

VDRainer · January 11, 2019, 9:13pm

If you’re on 0.85, all resources will be deleted on save.
Use the yaml mode until 0.85.1

gkron · January 11, 2019, 9:18pm

I’m on 0.84.6. Still switch to yaml mode?

VDRainer · January 11, 2019, 9:19pm

Not sure. I think this is only an issue with 0.85

gkron · January 11, 2019, 9:28pm

Didn’t help…same result

VDRainer · January 11, 2019, 10:04pm

Where have you saved the dark-sky-weather-card.js?
Please show the resource in ui-lovelace.yaml
www folder just created? -> needs restart

Mariusthvdb · January 11, 2019, 10:50pm

very nice! cool, and many thanks again.

Only thing missing now is Wind force in Bft scale. This fits perfectly in the left column on the wind line line, check my card adaptation of the regular card, used with Buienradar:

Could I tempt you to consider adding that?

also, please check the 2 sun entities aren’t on the same line, which isn’t a disaster, but not as nice as it was.

klogg · January 11, 2019, 11:25pm

That is because you seem to missing a line!

Mariusthvdb · January 11, 2019, 11:43pm

Hm, maybe…
What’s that 3d(!) temp for? Should it be there at all? Wasn’t there before…

m.p.frankland · January 11, 2019, 11:51pm

Its the forcasted high temp for the current day

DavidFW1960 · January 11, 2019, 11:52pm

8°!! Chilly!

gkron · January 12, 2019, 1:31am

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

klogg · January 12, 2019, 8:50am

Yes but we have a higher humidity and barometric pressure than you.

VDRainer · January 12, 2019, 9:56am

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

Have you downloaded the file in raw format?

Mariusthvdb · January 12, 2019, 10:01am

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.

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 )

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?

DavidFW1960 · January 12, 2019, 10:06am

There’s no prize for high humidity lol

gkron · January 12, 2019, 3:36pm

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