Custom Dark Sky Animated Weather Card

[DavidFW1960 (David)]

See above for my adjustments for this problem

[Mariusthvdb (Marius)]

@m.p.frankland

please note in the last card.js you use incorrect ticks around the line 217:

  'windy-variant': `cloudy-day-3`

and replace with:

'windy-variant': 'cloudy-day-3'

[Bieniu (Maciek)]

Thanks, now it looks great.

[m.p.frankland]

@Mariusthvdb

Thanks, I will look into that. But since this card is still called dark-sky-weather-card, I was kind of hoping that could be done inside the card…

Well, As you say, it is the dark-sky-weather-card. It uses the value provided by dark-sky. As mentioned it works fine for me. if dark-sky is providing an incorrect value for you I would suggest trying to understand why that is happening.

Edit… Your other post got me thinking about this more… When you have his issue, what is the value from the dark-sky sensor. if it is windy-variant, it will always show cloudy-day. Let me think about how I can change that based on sun position.

[Mariusthvdb (Marius)]

@m.p.frankland

what is the value from the dark-sky sensor.

when I posted yesterday night it was ‘cloudy’ and the icon showed a cloud with a sun…
in @finity post we can see a partly cloud night icon, while the condition shows Partly Cloudy. I think thats what I am trying to establish: based on the sun.sun or time show the available day/night icons that aren’t explicitly in the state.

[m.p.frankland]

cloudy maps to the cloudy icon which doesn’t show moon or sun (just shows clouds). The partly-cloudy-day or partly-cloudy-night states map to icons that show clouds and either a sun or moon. If you really had ‘cloudy’ as the state and you were showing an icon with clouds and sun showing, there is something wrong with your icons…

I have modified the code to correct the issue when windy-variant is the state. it should show the correct partly cloudy icon now. Note in the code below how the cloudy state links to the cloudy icon.

      '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': '!!'

[d4rthpaul]

I am getting this issue too, can you tell me what the suggested fix was? I cant see it in the thread. Thanks

[Bieniu (Maciek)]

Custom Dark Sky Animated Weather Card

Awesome! I so appreciate this! Thanks. I’m going to give that a go right now! OK DONE!!! It works ‘as advertised’! I replicated my earlier changes as it was showing all over-printed with the defaults but making the lovelace changes to replicate my earlier css ‘playing’ gave the result I wanted with the new stock card. Great card and thanks for those changes Mark. Just in case it helps someone else: temp_top_margin: -20px temp_font_weight: 300 temp_font_si…

[Mariusthvdb (Marius)]

@m.p.frankland

there is something wrong with your icons…

not sure what to say or look for, I have the exact same icons, only added rainy-night.svg. (can’t upload it here, svg not allowed) but here’s a screenshot:

But I’m not sure if this was for this card or for one of the other templates I use…
Any case, will see what happens after sunset today, rainy or clear

for now its alright:

[finity]

@finity

where does the weekly forecast summary at the bottom of this card come from?

Does anyone have an answer for this?

[m.p.frankland]

entity_daily_summary: sensor.dark_sky_daily_summary

[finity]

thank you!

[Mariusthvdb (Marius)]

HI Sir!

would you please consider adding the precipitation intensity to the daily forecast column:

entity_precip_intensity_1: sensor.dark_sky_forecast_precip_intensity_1
entity_precip_intensity_2: sensor.dark_sky_forecast_precip_intensity_2
entity_precip_intensity_3: sensor.dark_sky_forecast_precip_intensity_3
entity_precip_intensity_4: sensor.dark_sky_forecast_precip_intensity_4
entity_precip_intensity_5: sensor.dark_sky_forecast_precip_intensity_5

it might perfectly fill the leftover space with useful info?
thanks!

[DavidFW1960 (David)]

@Mariusthvdb

  'windy-variant': `cloudy-day-3`

and replace with:

'windy-variant': 'cloudy-day-3'

@m.p.frankland is this a fix we need to make or are you going to update the card?

[m.p.frankland]

I am updating it… Actually changing it slightly to

'windy-variant': html`cloudy-${this.dayOrNight}-3`,

I don’t know that I have ever seen windy-variant passed by darksky but the way it is currently coded, it would map a cloudy day icon no matter whether it was day or night. This new method should map the correct icon for day or night. This is similar to the way it used to work several revisions ago. I changed it when I made entity_sun optional as the original forced entity_sun to be defined or you would get an error. This new version uses the dayOrNight getter that checks that entity_sun is defined and returns ‘day’ or ‘night’ based on sun position. If it is not defined it just returns ‘day’.

I have made the changes just working on testing it.

[DavidFW1960 (David)]

@m.p.frankland

htmlcloudy-${this.dayOrNight}-3,

is sunset: true removed now? It’s not in the readme?

Also the seperator top margin is being ignored… it doesn’t matter what I use it stays the same

[m.p.frankland]

Yep… removed several versions ago…

@m.p.frankland

Major changes in this version are:

• Added Dutch (nl) translation for Wind Directions
• Added Feels Like to current temperature
• Added current daytime high forecast
• Added current probability of precipitation
• Added daily forecast probability of precipitation
• Altered the way daily forecast high and low appear
• Added old_daily_format flag. Shows old style daily forecast high and low format (values stacked on top of each other).
• Made most current condition items optional
• Removed Sunset flag. Adding entity_sun to the configuration will cause the sunset information to appear

See last line in the release notes posted for that version.

[DavidFW1960 (David)]

sorry - cross posted…

seperator margin is being ignored…

[m.p.frankland]

what does the line in your ui-lovelace for the flag look like ?

[DavidFW1960 (David)]

flag? I tried 5em - the default and 8em - no difference. It only seems to apply spacing if the show_separator is true.
I’d like that to be false but still be able to get a bit more room above the slots actually… I keep getting the text for the condition running into the temperature fiels when in landscape on my iPad if the condition is long like Partly Cloudy - that’s why I moved it up (one of the reasons) but I could put it under the icon if there was more room but I don’t like the line being displayed.