Custom Dark Sky Animated Weather Card

Share your Projects! Dashboards & Frontend
870

I merely asked because your var declaration uses quotes.

but my sensor complies :wink: and it works!

19
19372×548 40.1 KB

cool!

strangely enough it seems to interfere with the cards unit while Lovelace constantly refreshes:

28

a reload of the page brings it back to the correct state.

871

Currently the entire text you provide will use the css style for the slots. Not sure if that can be changed to allow embedded style changes
 It’s non trivial in any case.

872

You mean like this one here :slight_smile:

1 Like
873

Oh ok. Sounds like it is not possible then.

I still do not understand why it cannot just pick up the unit together with the value from the sensor. I assume it would be much preferred to have those always connected, instead of being two individual things? Could it be done with a raw flag for something that just takes whatever the sensor gives, in my case a value and m/s.

874

Yes it would be if Dark sky was consistent in the way it handles units. Unfortunately its not. It seems to vary widely based on locales and uom settings in the sensor.

In the future, I may have the uom attribute be used as an option. That way if it works correctly for you it could be used and if not it would fall back to the simple lookup
 I will add it to the list of enhancements.

875

Hate to tell you this but 0.88.0b3 is breaking this card and a bunch of @thomasloven ones as well. Balloob did a fix for Thomas here https://github.com/thomasloven/lovelace-card-tools/pull/11 I bet it’s likely the same issue?

Changing line 4 to:

var LitElement = LitElement || Object.getPrototypeOf(customElements.get("home-assistant-main"));

Fixes it

3 Likes
876

Thanks for catching this. I have updated the card to use “home-assistant-main” as the source for the LitElement prototype.

877

IMPORTANT

HA 0.88 will break the card if you have not updated to the latest version. Thanks to @DavidFW1960 for catching the breaking change in the 0.88 beta.

New version is available here

0.10.2

  • Updated LitElement source object to “home-assistant-main” as “hui-error-entity-row” is being removed in HA 0.88 update.
878

hi

i make HA update to 0.88 and update the darksky weather card to the new version ,
but always got error :
dark-sky-weather-card.js?v=7.1:4:39 Uncaught TypeError: Cannot convert undefined or null to object

any idea how to fix it ?

879

I have a problem to, updated to 0.88 and:

Custom element doesn’t exist: dark-sky-weather-card.

880

Update to the 0.10.2 version of the card.

881

I also have a problem with Custom Dark Sky on new version Home Assistant 0.88.
I get error. I have a version custom card 0.10.2

882

If you are using Chrome hit F12 then right click the refresh button and click “Empty Cache and Hard Reload”.

883

Hi. I open windows by F12 but i can not found option about which you talk


884

image
image1519×634 81.2 KB

885

Ok i found and works ok thanks


886

No matter what I do this card never shows up on my Lovelace. I followed the latest info and used the 0.10.2 version but nothing shows up.

887

Check entities numbering in card configuration, on my HA card started work after changing

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

to

entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_1
entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_2
entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_3
entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_4
entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_5
888

Do you have day 0 in the forecast conditions?
If you don’t that’s why you see an error.

889

I have the latest dark-sky-weather-card.js in /config/www/custom_ui

Here is my code:
dark-sky-weather-card.js copied from: https://github.com/iammexx/home-assistant-config/blob/master/ui/darksky/dark-sky-weather-card.js

icons in: /config/www/icons/weather_icons (two folders inside this folder: animated and static)
image

configuration.yaml:
weather:
- platform: darksky
api_key: !secret darksky
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

ui-lovelace.yaml:
title: Home Control Panel
resources:
- url: /local/custom_ui/tracker-card.js?track=true
type: js
- url: /local/custom_ui/card-tools.js?track=true
type: js
- url: /local/custom_ui/card-modder.js?track=true
type: js
- url: /local/custom_ui/compact-custom-header.js?track=true
type: module
- url: /local/custom_ui/state-switch.js?track=true
type: js
- url: /local/custom_ui/layout-card.js?track=true
type: js
- url: /local/custom_ui/thermostat-card.js?track=true
type: module
- url: /local/custom_ui/ecobee-card.js
type: js
- url: /local/custom_ui/dark-sky-weather-card.js
type: module

views:
  - title: Main
    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
      - type: custom:ecobee-card
        entity: climate.my_ecobee3
      - type: custom:thermostat-card
        title: Guest Room
        entity: climate.stelpro_stzw402_electronic_thermostat_heating_1
  - !include lovelace/doors.yaml
  - !include lovelace/lights.yaml
  - !include lovelace/alarm.yaml
  - !include lovelace/remote.yaml
  - !include lovelace/settings.yaml
  - !include lovelace/testing.yaml

I don’t see any of these entities under my state view


this is the error I get:

image
image919×199 7.4 KB