Custom Dark Sky Animated Weather Card

There are some required entries that MUST be there.
Read Configuration Point 3.

@VDRainer: thanks for this note.

I copied everything from the example (step 3) into my ui-lovelace.yaml
But still smae error message.

For me it looks like it does not load the component correctly…

/ Ralf

Can you open

http://<dns_or_ip>:8123/local/custom_ui/dark-sky-weather-card.js

in your browser?

@VDRainer

Currently only can test with my smartphone and VPN (on iPhone). Both Safari and Chrome do not show anything but also no error messages.
Will test again today afternoon from my PC at home again.

But thanks very much for all your efforts helping me!
/ Ralf

Hi all,

I managed to get the card working and am able to see it in Chrome but I’m getting a “Custom element doesn’t exist: dark-sky-weather-card” on the app. I’m on beta 2.0.0 (62). Needless to say I’m new to this. I’m not sure where to start troubleshooting as it is working on the browser. Any help is appreciated.

i’m not really sure what you mean by "app’ but try clearing your cache or forcing a reload from source in some way. If you have the three button menu in the top right try hitting that and tap refresh.

Thanks. I’m referring to the Home Assistant iOS app.

Does that even support custom cards? You’ll need to ask the developer of the app about that.

Thanks, will do.

Custom cards work fine in the iOS app.

Good to know. Any idea why it would work on the browser and not in the app? I’m not sure where to start troubleshooting.

I had it working fine as of Home assistant 0.95.4 but today i upgraded to 0.96.5 and it broke. I didn’t see anything in the breaking changes that would of affected this card. Any ideas? I didn’t change anything in my configuration that would of affected it and it looks like all my darksky sensors are showing up in the History portion so i believe the sensors are continuing to work.

Below is my error.

Custom element doesn’t exist: dark-sky-weather-card.
{
“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”,
“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_pop”: “sensor.dark_sky_precip_probability_0d”,
“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_daily_summary”: “sensor.dark_sky_daily_summary”,
“slot_l1”: “daytime_high”,
“slot_l2”: “wind”,
“slot_l3”: “visibility”,
“slot_l4”: “sun_next”,
“slot_r1”: “pop”,
“slot_r2”: “humidity”,
“slot_r3”: “pressure”,
“slot_r4”: “sun_following”
}

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 :wink:

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