Custom Dark Sky Animated Weather Card

[cjsimmons (Chris Simmons)]

@DavidFW1960

which has stuffed the loof of the card. A css issue I think. Here is what it looks like now:

I’m on 0.85.1 and I get this sometimes on the iOS app. Only sometimes though, so I just don’t bother at the moment chasing it down, but it only happens on my iPhone.

[DavidFW1960 (David)]

Yeah I had it on the iPhone as well and a refresh fixed it. But this was on my PC… I suspect it’s the new frontend I got with 0.86.0b0. They fixed the flickering in that and my fonts for card titles are no longer screwing up.

[cjsimmons (Chris Simmons)]

@DavidFW1960

Yeah I had it on the iPhone as well and a refresh fixed it.

Hasn’t fixed it for me. Multiple refreshes and I even deleted the beta iOS app and reinstalled it. Sometime I still get the error from yesterdays unpkg saga, so I have no idea what’s going on.

[gmschade (Gregory Schade)]

I’m the one who threw together the package for button-card, I think a little background might help you a bit.

1. I saw that unpkg was meant as a replacement for using npm.
2. I used npm to download @polymer/lit-element version 0.5.2
3. according to the the web page it depends on @polymer/polymer and lit_html (polymer_lit is in @polymer)
4. I copied the @polymer and lit_html into into my button-card-depends folder
5. using the find in project on atom and the error console in chromium wrote as many of the url requests to ‘/local/button-card-depends/whatever…’ as I could find to get button-card working

It should be the entire @polymer/lit-element but, there may be more requests I didn’t catch but that could be pretty easily fixed.
I hope this helps because it seems that unpkg is having lots of issues and the whole “I don’t need the internet” theme behind Home-Assistant.

edit: spelling and clarity
edit2: added a couple of links

[m.p.frankland]

OK. I finally have the card working using a local LitElement class as described in these posts.

@Mariusthvdb

have a look here: Custom animated weather card for Lovelace for a local solution by @Bram_Kragten.
Ive tested it with the dark-sky-weather-card and it seemed to work fine at first, but after a few reloads, it stopped working altogether… I fear versions are not in sync as Bram warns.

Maybe @m.p.frankland would you check to see that it does?

@Bram_Kragten

It is not my solution, it is from @thomasloven and @iantrich made a PR for the weather card. So credits to them.

I had originally tried this method back when I first switched to using LitElement without success. The issues with unpkg lately have forced me to revisit it.

The card now works correctly and doesn’t require any external dependencies. The only concern would be if the folks responsible for Lovelace decide to change the name of the class that is being referenced for the LitElement prototype.

Latest version is available here

[m.p.frankland]

@DavidFW1960

I also upgraded to 0.86.0b0 and got a new frontend… which has stuffed the loof of the card. A css issue I think. Here is what it looks like now:

What do I need to change in the dark-sky-weather-card.js to fix the format?

That element doesn’t have a top-margin defined so it should sit at the nominal top of the card. You could try adding a negative top-margin to the card and see if that helps. The css class is .temp.

[m.p.frankland]

This is almost always because you have specified the card type as js instead of module in ui-lovlace

[m.p.frankland]

@sparkydave

I’m wondering if it would be possible to get this card to use a sensor which already gives wind direction in N,S,E,W etc rather than an angle which the card then translates. The reason is that my local weather provider gives me this data in N,S,E,W etc already and I would rather use that than the Dark Sky angle as Dark Sky tends to be inaccurate in my area

This capability is in the latest version. You can pass either a numeric angle in degrees or a text value. Any text value will work it just displays whatever the value of the sensor is.

[DavidFW1960 (David)]

can you tell me what the search string you replaced was? I’m going to do a global search on that whole zip file to make sure you didn’t miss any

[DavidFW1960 (David)]

@m.p.frankland

That element doesn’t have a top-margin defined so it should sit at the nominal top of the card. You could try adding a negative top-margin to the card and see if that helps. The css class is .temp.

So I believe it’s because of the new frontend in 0.86.0b0

I changed it like this:

      .temp {
        font-weight: 300;
        font-size: 4em;
        color: var(--primary-text-color);
        position: absolute;
        right: 1em;
        margin-top: -20px;
      }

      .tempc {
        font-weight: 300;
        font-size: 1.5em;
        vertical-align: super;
        color: var(--primary-text-color);
        position: absolute;
        right: 1em;
        margin-top: -14px;
        margin-right: 7px;
      }

      .apparent {
        color: var(--primary-text-color);
        position: absolute;
        right: 1em;
        margin-top: 36px;
        margin-right: 1em;
      }

ie -20px for margin top and increased the apparent to 36 from 35 so it lines up a little better. Looks like this now:

[gmschade (Gregory Schade)]

I really do not, sorry.
I have a feeling there is an automated way in node/npm to do it. I was actually hoping someone would say something like “you did that the hard way.”
Btw. I was thinking if you wanted to run it as a local repo perhaps name it something like “polymer-lit_element0.5.2” that way it would keep the versioning intact
edit: it’s not too hard to find where something goes wrong using the inspect element in the browser and watching the console for errors. that will tell out the file which has an import with a wrong address.

[DavidFW1960 (David)]

@gmschade

Btw. I was thinking if you wanted to run it as a local repo perhaps name it something like “polymer-lit_element0.5.2” that way it would keep the versioning intact

It’s only the button-card now as @m.p.frankland has fixed the card to run local anyway.
I also watched the dev console yesterday but in the end, thought screw this and did a find/replace global in the depends folder and fixed it in one fell swoop. I was just trying/wanting to be sure there wasn’t anything missed… (because maybe all instances have not been accessed for some function or other)

[Biliskn3r]

@m.p.frankland

The card now works correctly and doesn’t require any external dependencies. The only concern would be if the folks responsible for Lovelace decide to change the name of the class that is being referenced for the LitElement prototype.

Wow, thanks again for this. The frontend loads so much quicker now, and your weather card is the first to load!
(the custom mini cards etc all say “element doesn’t exist” for 5-7 seconds before eventually loading).

Great job.

[Mariusthvdb (Marius)]

not sure what is going on, but I am on Ha 84.3, and only get the card with this setting import.
all others which you can see and are now // commented out, don’t even give me a red card any more, there is simply nothing loaded at all. My card works very well with the import setting , so I know it isn’t the content? Or are further adjustments to be made in the card to use the LitElement either in var or in const…

//import { LitElement, html, } from 'https://unpkg.com/@polymer/lit-element@^0.5.2/lit-element.js?module';
import { LitElement, html, } from 'https://unpkg-gcp.firebaseapp.com/@polymer/[email protected]/lit-element.js?module';
//var LitElement = LitElement || Object.getPrototypeOf(customElements.get("hui-error-entity-row"));
//var html = LitElement.prototype.html;

// const LitElement = Object.getPrototypeOf(customElements.get("ha-panel-lovelace"));
// const html = LitElement.prototype.html;

[m.p.frankland]

Yes, simply changing to use the getPrototype method will result in nothing being rendered… There were several other fixes necessary to get it to work… The issue is that the class from importing from unpkg is slightly different than the class being referenced using the new method. Primarily it doesn’t have a callback for _render() instead it calls Render()… as there was no Render() function nothing is rendered… The way the hass global object is passed in is different as well… Take a look through my latest code I added comments that may help explain the changes

[Mariusthvdb (Marius)]

Well , i did and did change them all. Somehow nothing is displayed, not even an error

I will need to test the full card later on to see if it is my setup being 84.3 or the custom card…

[m.p.frankland]

As mentioned, if you didn’t add a new Render() function that will happen. Also if you don’t handle the hass object correctly (different from the way it was before) the same thing will happen. Nothing will be rendered and you won’t see an error in the log.

[DavidFW1960 (David)]

So I further refined the css to give a better balance…

Here is my mod in case anyone is interested…

      .temp {
        font-weight: 300;
        font-size: 4em;
        color: var(--primary-text-color);
        position: absolute;
        right: 1em;
        margin-top: -20px;
      }

      .tempc {
        font-weight: 300;
        font-size: 1.5em;
        vertical-align: super;
        color: var(--primary-text-color);
        position: absolute;
        right: 1em;
        margin-top: -14px;
        margin-right: 7px;
      }

      .apparent {
        color: var(--primary-text-color);
        position: absolute;
        right: 1em;
        margin-top: 45px;
        margin-right: 1em;
      }

      .currentText {
        font-size: 1.5em;
        color: var(--secondary-text-color);
        position: absolute;
        left: 5em;
        margin-top: 39px;
      }

[fernandex00 (Fernando Tapia S)]

I followed the instructions, I’m in the latest version, copy the same configuration, and I can’t make this card working any ideas, clean cache etc

[m.p.frankland]

Any error messages