Either your file dark-sky-weather-card.js is missing or referenced incorrectly in the lovelace configuration, or try the Empty cache and hard reload in your browser.
Has anyone figured out how to get the Dark Sky alerts in the card ?
This card is amazing I got it working but I miss some text and i think its from :
entity_current_text: sensor.dark_sky_current_text
anyone knows how to create this kind of template sensor?
You create it just like any other template sensor.
The instructions has the code for creating it. Scroll down under “Configuration” until you see “example template sensors”. It’s the first one in the list.
should i place it in sensor.yaml?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 %}
you need to fix all of your indenting but that should do it.
also, you need to put single quotes around the whole template starting with ‘{% if…and ending with the very last …endif %}’.
I’m not sure why that isn’t in the docs correctly.
so if i get it it should be :
- 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 %}'
not really sure if you need the exact txts as you use in the template, but I use this:
value_template: >
{{states('sensor.dark_sky_icon')|title|replace('-',' ')}}
which is somewhat less complex 
if you need a template for the image:
entity_picture_template: >
{% set mapper =
{ 'Breezy': 'cloudy',
'Clear Night': 'night',
'Clear': 'day',
'Mostly Clear': 'day',
'Clear Day': 'day',
'Cloudy': 'cloudy',
'Fog': 'cloudy',
'Hail': 'rainy-7',
'Lightning': 'thunder',
'Mostly Cloudy': 'cloudy',
'Partly Cloudy': 'cloudy-day-3',
'Partly Cloudy Day': 'cloudy-day-2',
'Partly Cloudy Night': 'cloudy-night-3',
'Rain': 'rainy-4',
'Scattered Showers': 'rainy-3',
'Showers': 'rainy-6',
'Sleet': 'snowy-5',
'Snow': 'snowy-6',
'Mostly Sunny': 'day',
'Sunny': 'day',
'Wind': 'cloudy',
'Windy': 'cloudy'} %}
{% set state = states('sensor.dark_sky_icon')|title|replace('-',' ') %}
{% set weather = mapper[state] if state in mapper else 'weather' %}
{% set path = '/local/weather/animated/' %}
{% set ext = '.svg'%}
{{[path,weather,ext]|join('')|lower}}
2 Likes
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.