Custom Dark Sky Animated Weather Card

well I must thank you for your help my friend I just dont know what else I should put to the next template sensors to make the card work full as it should be

is that what I think ? new graphics?oh these are names for the images

one last question how do you use flags? and where do you put them ?

yes, I use this for dedicated sensor to show an image based on the dark_sky_icon. You could use is elsewhere also of course.

I am not sure I understand what you ask here. The only thing really needed for this template to work, is the dark sky sensor. As long as you have that defined in your configuration, this will work.

if this was for me, please explain what you mean… I didnt use flags in the post above?

no I meant in the configuration it says that there are flags :

locale: en
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

o yes, sorry about that. This is what I use ( but I have slightly changed the card, and havent updated in a while, so things might have changed somewhat. I use this as an !include in my Lovelace view.

#  - !include /config/lovelace/includes/dark_sky_custom_card.yaml
# https://github.com/iammexx/home-assistant-config/tree/master/ui/darksky
# Required
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_forecast_daytime_high_temperature_1d
entity_forecast_high_temp_2: sensor.dark_sky_forecast_daytime_high_temperature_2d
entity_forecast_high_temp_3: sensor.dark_sky_forecast_daytime_high_temperature_3d
entity_forecast_high_temp_4: sensor.dark_sky_forecast_daytime_high_temperature_4d
entity_forecast_high_temp_5: sensor.dark_sky_forecast_daytime_high_temperature_5d
entity_forecast_icon_1: sensor.dark_sky_forecast_icon_1d
entity_forecast_icon_2: sensor.dark_sky_forecast_icon_2d
entity_forecast_icon_3: sensor.dark_sky_forecast_icon_3d
entity_forecast_icon_4: sensor.dark_sky_forecast_icon_4d
entity_forecast_icon_5: sensor.dark_sky_forecast_icon_5d
entity_forecast_low_temp_1: sensor.dark_sky_forecast_overnight_low_temperature_1d
entity_forecast_low_temp_2: sensor.dark_sky_forecast_overnight_low_temperature_2d
entity_forecast_low_temp_3: sensor.dark_sky_forecast_overnight_low_temperature_3d
entity_forecast_low_temp_4: sensor.dark_sky_forecast_overnight_low_temperature_4d
entity_forecast_low_temp_5: sensor.dark_sky_forecast_overnight_low_temperature_5d
entity_summary_1: sensor.dark_sky_forecast_summary_1d
entity_summary_2: sensor.dark_sky_forecast_summary_2d
entity_summary_3: sensor.dark_sky_forecast_summary_3d
entity_summary_4: sensor.dark_sky_forecast_summary_4d
entity_summary_5: sensor.dark_sky_forecast_summary_5d

# Optional
entity_sun: sun.sun
entity_visibility: sensor.dark_sky_visibility
entity_daytime_high: sensor.dark_sky_forecast_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_forecast_precip_probability
entity_precip_intensity: sensor.dark_sky_precip_intensity #!!!
entity_pop_1: sensor.dark_sky_forecast_precip_probability_1d
entity_pop_2: sensor.dark_sky_forecast_precip_probability_2d
entity_pop_3: sensor.dark_sky_forecast_precip_probability_3d
entity_pop_4: sensor.dark_sky_forecast_precip_probability_4d
entity_pop_5: sensor.dark_sky_forecast_precip_probability_5d
entity_current_text: sensor.weather_now # template on sensor.dark_sky_icon|capitalize

# Extras selfmade
entity_summary_today: sensor.dark_sky_hourly_summary #sensor.dark_sky_forecast_summary_0
#entity_wind_force: sensor.br_wind_force
entity_today: sensor.vandaag
temp_color: sensor.dark_sky_temp_color

entity_precip_intensity_1: sensor.dark_sky_forecast_precip_intensity_1d
entity_precip_intensity_2: sensor.dark_sky_forecast_precip_intensity_2d
entity_precip_intensity_3: sensor.dark_sky_forecast_precip_intensity_3d
entity_precip_intensity_4: sensor.dark_sky_forecast_precip_intensity_4d
entity_precip_intensity_5: sensor.dark_sky_forecast_precip_intensity_5d

# Flags
locale: nl
static_icons: false
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
tooltips: true
old_daily_format: false
show_beaufort: true
show_separator: true

temp_top_margin: 12px
temp_font_weight: 300
temp_font_size: 4em
temp_right_pos: 1em

temp_uom_top_margin: 0px
temp_uom_right_margin: 7px

apparent_top_margin: 80px
apparent_right_pos: 1em
apparent_right_margin: 1em

current_text_top_margin: 80px #1em
current_text_left_pos: 1.3em
current_text_font_size: 1.7em

current_data_top_margin: 1em

large_icon_top_margin: -3.4em
large_icon_left_position: 0em

separator_top_margin: 8em

#    slot_l1: precip
#    slot_l2: wind
#    slot_l3: humidity
#    slot_l4: sun_following
#    slot_r1: daytime_high
#    slot_r2: visibility
#    slot_r3: pressure
#    slot_r4: sun_next

which renders this in the frontend

but where do you put flags into ?

look at the first line in my post above. this is the line

- !include /config/lovelace/includes/dark_sky_custom_card.yaml

in my view.

you can also paste it directly in your ui-lovelace.yaml of course. you add a dash (-) in front of type:, like with all cards.

so if i get it right that should be , and i should place them under resources right ? :

 -type:flags
  locale: nl
  static_icons: false
  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
  tooltips: true
  old_daily_format: false
  show_beaufort: true
  show_separator: true

You are making this way too difficult.

just create a sensor like this:

- 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 %}'

then create a card in your lovelace like this:

  - 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
    ## optional ##
    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
    show_separator: True
    # all of the rest are Flags and are optional
    locale: en
    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

Put the lovelace card into your lovelace config however you would normally add a custom card.

You don’t need the flags. They are optional. It says that in the docs.

You also don’t need the descriptively titled “optional” stuff either. It also says that in the docs.

Feel free to add or remove any of the optional/flag items to make your card look how you like.

Has anyone tried Home Assistant Cast with this custom card? Doesn’t seem to want to display for me, but works fine everywhere else.

no, it’s like @finity says, and as I posted, this is used in the config for the custom card itself. I posted my full config.

you should however download and save the custom card in your resources folder, and reference it in your ui-lovelace.yaml, as follows (of course adjust to your own file/folder structure)

resources:
# https://github.com/iammexx/home-assistant-config/tree/master/ui/darksky
  - url: /local/lovelace/resources/dark-sky-weather-card.js?v=7.1.6
    type: module

like it is explained in the docs here

the template is incorrect in the docs (it also is unnecessary long and verbose) and you should at least put it in between quotes as @finity mentioned here or use the multiline notation as I suggested using the > so you don’t need the outer quotes.

I’m still confused where this goes. I tried in configuration.yaml even the raw editor and both threw a error.

- 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 %}'

You haven’t defined it as a multi-line template

1 Like

I just figured that out… UGG its the indents that get me all the time

1 Like

for me that worked perfect

It doesn’t need to be a multi-line template. It works for me the way it’s written in my post. Which is the same way as the post above.

You need to put it under the “sensor:” section of your configuration.yaml.

The reason the “raw” editor gave an error is because it’s not a lovelace configuration, it’s a sensor.

I can’t see where the indentation is off in that code. It’s just like mine and it works for me.

1 Like

I got it working. Thanks for the help.

absolutely awesome mate. thanks for this contribution. legend.

Is any chance to add Dark Sky Animated Weather to new HACS Community in HA ?