Custom Dark Sky Animated Weather Card

[m.p.frankland]

Ok… looks like a bug… The sun was above the horizon when I wrote the code so this code path didn’t get thoroughly tested… will put out an update soon

[Narfel (Narf Elchen)]

If you comment out the 132 and 135 it “works”. So it has to be something about that method.

edit: man, you’re too fast

[Mariusthvdb (Marius)]

@m.p.frankland

The value of currentConditions is actually displayed… It’s just hidden behind the icon. The purpose is to show a value if something bad happens to the icon or if Dark Sky adds a condition that isn’t mapped to an icon.

I figured as much. Still, I want it to show always, sort of a header for the card… I might rethink the options then, and think of some default icon to show if the weather component goes wrong…

@m.p.frankland

Not quite sure what your “Station” is. You are referencing an object called entity. What is that object? Where does it come from ?

i use the buienradar component for this card.

  - type: custom:card-modder
    style:
      background-image: url("/local/lovelace/images/weather-background-[[ sun.sun.state ]].png")
      background-size: 100% 400px
      --primary-text-color: var(--primary-text-color)
      --secondary-text-color: var(--secondary-text-color)
      --paper-item-icon-color: var(--primary-text-color) #small variation icons
    card:
      type: custom:weather-card
      title: Modded Woensdrecht
      entity_weather: weather.woensdrecht
      entity_sun: sun.sun
      entity_apparent_temperature: sensor.jagti_windchill
      entity_wind_force: sensor.br_wind_force

which has the station name as attributes.friendly_name.

[m.p.frankland]

@Kaostral @Narfel I have updated the card. Try it again if you wouldn’t mind. It is working now for me.

[Kaostral]

I can confirm, it is working fine.

Thank you for the quick update !

By the way, i noticed that you used this in your lovelace
entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_0

It doesn’t seem to be working unless I replace it by
entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_1

Getting this error when I do not
dark-sky-weather-card.js:169:85 Uncaught TypeError: Cannot read property 'state' of undefined

[m.p.frankland]

You need to add the 0th forecast day to your Dark Sky sensor config.

    forecast:
      - 0
      - 1
      - 2
      - 3
      - 4
      - 5

This was a note I had in the original post about this …

@m.p.frankland

Note that in my version of the card I add an extra forecast day (0). This was in response to a breaking change that was made a couple of versions ago. The original platform provided the 0 (current day) forecast items without explicitly requesting them. The breaking change made this work like the rest of the forecast days which also meant that the entities for forecast day 0 now had a _0 appended to them. This is important so that the overnight low forecast can be correctly set for each day. eg: Day 1’s overnight forecast should come from forecast 0 to match the way it is displayed on the DarkSky website.

More info on this …

@m.p.frankland

As far as the forecast goes, The way to think about it is:

Day 0 Forecast High = Today’s forecasted high temp
Day 0 Overnight Low = Tonight into tomorrow morning low temp
Day 1 Forecast High = Tomorrow’s forecasted high temp
Day 1 Overnight Low = Tomorrow night into Day 2’s morning low temp
etc …

The confusion is because the overnight low spans two distinct days. In reality it is really up to the individual if they want the low to be the morning low or night low. The DarySky site uses morning low so I tried to match that.

To add to the confusion the card shows the high temp first (on top). If the temps were displayed side by side from low to high it might make more intuitive sense… (hmmm… maybe a change to the card there)

[Kaostral]

Oh thank you, I actually read those but i guess I missed this.

[Mariusthvdb (Marius)]

this pops up every time the card is loaded:

frontend_latest/app-0d042052.js:773:25742 TypeError: this.detached is not a function. (In 'this.detached()', 'this.detached' is undefined)

have another weather card which gives the same, which might be expected, since the cards use plenty same code.

always points at the line:

this.content.innerHTML = `

can’t and the detached in the code though so what might that be?

[VDRainer]

Great work! Like it!
Would be nice if the locale setting also changes the wind direction letters.
So ‘E’ (East) would be ‘O’ (Ost) in my language.

[m.p.frankland]

Does the card eventually load or does it stay at that error…

[m.p.frankland]

Yah… The wind direction letters are hard coded. If someone can provide a translation list for a specific language I can add it and use the locale flag to show them

[VDRainer]

Can’t find one at google, so maybe everyone can add his language?

de:
  N
W   O
  S
en:
  N
W   E
  S

For me the ‘O’ is enough.

Wondering how it’s done in the darksky weather component.

EDIT: Or maybe a simple flag?
directions: NOSW

[Mariusthvdb (Marius)]

@m.p.frankland

Does the card eventually load or does it stay at that error…

its loaded fine! also the new sunset and sunrise Ive asked for… thanks for that a bunch.

[Mariusthvdb (Marius)]

couldn’t that be done with a mapper, just like the weather icons?

btw, Ive simply done it manually in my other cards:

const windDirections = ['N','NNO','NO','ONO',
                        'O','OZO','ZO','ZZO',
                        'Z','ZZW','ZW','WZW',
                        'W','WNW','NW','NNW',
                        'N'];

[Jokerigno]

for italian:

N (north) S (South) O (West) Est (Est)

[Narfel (Narf Elchen)]

Thanks for the update! Another minor thing: on iOS/webkit the tooltip info gets printed rather ugly below the temps.

[m.p.frankland]

That looks like a .css file issue. I dont have a iPhone so I cant test…

[Mariusthvdb (Marius)]

HI!

trying to get the Tooltips more in style with the icons I made it this far:

would the tooltip box have a border we can change?

this is what I did to change the color of the box and text, and the little arrow below the tooltip:

.fcasttooltip .fcasttooltiptext {
  visibility: hidden;
  width: 110px;
  background-color: rgb( 75,155,239);
  color: #fff ;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 50%;
  left: 0%; 
  margin-left: -5px;
}

.fcasttooltip .fcasttooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgb(255,161,0) transparent transparent transparent;
}

would love to have the border around the blue box in the same orange color
/* color orange = rgb(255,161,0)

[Narfel (Narf Elchen)]

If you take out the ::after part in the css it works fine in ios/webkit as the usual “tap to tooltip” behaviour.

edit: what i meant is: if you remove the section shown below

[VDRainer]

No problems on iOS here.