Custom Dark Sky Animated Weather Card

I don’t think it is, but @DavidFW1960 has a BOM card that basicly is this but with extra sauce.

If someone made one that would work with the weather entities but had this level of customization it’d be great.

yes I know about the Bom card. But in fact the DS card can be used with any wether entity, as long as they are setup correctly :wink:
that’s not my issue, as I have edited the card on many places myself before.

Was seeking help on this particular wish, to change the icon for wind bearing, and maybe someone with great coding skills could help me (suffering trial and error style here…)

As far as I recall, you’d have to create a ton of template sensors to parse out the data in the single weather.whatever entity to get this card to work with it :frowning:

Give me a few I’ll see what I can whip up :stuck_out_tongue:

So likely something like this?

https://raw.githubusercontent.com/firstof9/home-assistant-config/master/ui/darksky/dark-sky-weather-card.js

not sure yet, what exactly did you change, also in the html of the card? I have to only set the new bits for this icon, because the rest of my card has some serious changes compared to the original

this is the line in my adapted card:

    var wind = this.config.entity_wind_bearing && this.config.entity_wind_speed ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span><span id="beaufort-text">${this.current.beaufort}</span><span class="ha-icon"><ha-icon icon="mdi:arrow-top-right"></ha-icon></span><span id="wind-bearing-text"> ${this.current.windBearing}</span><span id="wind-speed-text"> ${(this.current.windSpeed)}</span><span class="unit"> ${this.getUOM('length')}/h</span></li>` : ``;

update

and the icon should probably become something like:

<ha-icon icon=${this.windIcons[this.config.entity_wind_bearing].state}></ha-icon>

but I cant get it right for now…

Ya don’t bother I see where the icon’s set.

This code’s formatting has my OCD in an up roar :frowning:

I see where to adjust the icon, I’ll need more time :slight_smile:

Currently tweaking bramkragten’s ‘weather-card’ to be more like this card.

I was just about to recommend what you edited in your post. lol

On a side note I did mod bramkragten’s card pretty well.
image

update:

were getting closer…

using this for the icon in the html:

<ha-icon icon=${this.windIcons[this._hass.states[this.config.entity_wind_bearing].state]}

and an ultimately simplified function mapper to the currents state:

  get windIcons() {
    return {
      355: "mdi:arrow-down"}
  }

it is showing as it should:

next up would be to change the fixed 355 to the template I posted earlier, and probably create a variable for the ‘[this._hass.states[this.config.entity_wind_bearing].state]’ although that is of later priority :wink:

Any idea for an icon for the underlined status in this photo?

The state is “exceptional”.

ok, so I made it :wink: albeit a bit lazy, and not inside the custom-card itself, but with an extra external template sensor I made based on my JS customization I posted earlier:

      wind_bearing_icon:
        friendly_name: Wind bearing icon
        value_template: >
          {% set bearing = states('sensor.dark_sky_wind_bearing')|int %}
          {% set icons = ['mdi:arrow-down','mdi:arrow-bottom-left','mdi:arrow-left',
                     'mdi:arrow-top-left','mdi:arrow-up','mdi:arrow-top-right',
                     'mdi:arrow-right','mdi:arrow-bottom-right'] %}
          {% set quadrant = (bearing/45)|round() %}
          {% if quadrant < icons|length %} {{icons[quadrant]}}
          {% else %} mdi:arrow-collaps
          {% endif %}

adding:

entity_wind_bearing_icon: sensor.wind_bearing_icon

to the dark_sky_card_config, and this changing to this line in the card itself, where I inject the state of the new config_entity directly (could have made it into a neat variable, but wanted to make it easy for now)

<ha-icon icon=${this._hass.states[this.config.entity_wind_bearing_icon].state}></ha-icon>

works as it should, bare metal. No js polish, and needing an external sensor, but hey, it does the job. Has the added advantage, I will now easily be able to add an input_select to the template sensors, so I can easily switch between weather integrations, if needed and for testing purposes :wink:

just add a nice icon to the mapping here:

  get weatherIcons() {
    return {
      'clear-day':'day',
      'clear-night':'night',
      'rain':'rainy-5',
      'snow':'snowy-6',
      'sleet':'rainy-6',
      'wind':'cloudy',
      'fog':'cloudy',
      'cloudy':'cloudy',
      'partly-cloudy-day':'cloudy-day-3',
      'partly-cloudy-night':'cloudy-night-3',
      'hail':'rainy-7',
      'lightning':'thunder',
      'thunderstorm':'thunder',
      'windy-variant': html`cloudy-${this.dayOrNight}-3`,
      'exceptional':'severe-thunderstorm',
    }
  }

fwiw, I’ve changed my card to use 5 lines of slots, to have a little more space for some further detailing in the bearing and windspeed, and added Uv index in 1 move:

Very nice overview Marius for all important weather parameters! Can it also be easily used for other weather integrations like for example Buienradar or Weatherbit?

sure, as long as you enter the correct entities in the config filed and they use the same unit and state. This card grows on you: you adapt your skills to your needs :wink: Mine is quite heavily customized from the original darksky animated weather card, which in itself was an adaptation from another custom-weather card (think Bram made that one, and it might still be available)

Ya I think I’m going to need a warning type icon, we get those types of status when the temp goes above 43C :stuck_out_tongue:

43C… :sweat: :skull_and_crossbones:

There is no way I could stand that. It’s bad enough here in northern Indiana where the summer temps never really get above 95F very often. I melt then. I can’t imagine 110. Especially since it happens often enough that you need a special icon for it. :worried:

Meh I’ve dealt with 121F (49.5C) that’s why we invented AC :stuck_out_tongue:
It’s not too bad as long as the humidty and dew point is low, but usually when it’s 120-ish we’re looking at 65+ dew point and then it’s bad.

Yeah, that’s the bad part here. Even if it doesn’t get that hot we have humidity issues where the dew points get over 70 quite a bit. So then you get heat indexes of 105 to 110.

I guess the weather just sucks everywhere. Except maybe southern California. but then there’s the earthquakes…

The forecasters down here in Phoenix don’t give out the heat indexes anymore. We already know it’ll be liquid asphalt time in July :stuck_out_tongue:

1 Like

Got it working :slight_smile:

captured

Always post with code…