agree with that, though that would mean more libraries to update - also, what are the license terms, can we copy the code and have it run locally? or does it have to completely reside within unpkg.com?
It works. 
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?
It is not my solution, it is from @thomasloven and @iantrich made a PR for the weather card. So credits to them. 
1 Like
I got the Beaufort scale #s from here or here or here.
If I look at your cards showing in your post. You show a wind speed of of 5.5km/h in your other card and a Bft of 3. According to the charts from the websites, that should be Bft 1 as Bft 2 doesnāt start until 6 km/h. and Bft 3 doesnāt start until 12km/h ā¦ Not sure where your 3.6 multiplier comes from as I havenāt seen in mentioned anywhere on the sites.
When I first switched the card to use LitElement I spent significant time trying to get it to work as a locally referenced class using the same technique described here. (using getPrototypeOf()).
I was unsuccessful in getting it to work consistently. Most of the time I ended up with a blank card. Even if it did work there is a risk that the folks who make HA will make a change to what ever class you try to get the prototype of and the card will start failing.
Until the Lit classes are baked directly into HA (I have no idea if they will be), the most consistent results are obtained by using the external reference.
import { LitElement, html, } from 'https://unpkg-gcp.firebaseapp.com/@polymer/[email protected]/lit-element.js?module';
BTW. I updated the reference to the one above from the one I had which was the original reference stated in the Lovelace docs on creating custom cards. This reference seems to work much better.
EDIT ---- It looks like some folks have used bundling to overcome the external reference issue. I will investigate and see if I can get that to work . The downside to creating a bundle is that you wonāt be able to change the card source If you have something different you want to do with it.
EDIT 2 ā The card now works using this methodology for access to the LitElement class
they arenāt in km/h,ā they are in m/s. And they are correct and align with what the Bft sensor Buienradar shows.
the template itself is correct, its just the base number that isnāt yet in the correct format. At least for the metric sensors Buienradar and Dark-sky (should have made that precision, sorry)
3.6 its simply the conversion from m/s to km/hr: https://www.wiskundeleraar.nl/page3.asp?nummer=7134 and both scales are listed here Schaal van Beaufort - Wikipedia
i do see an error now in my templatesā¦ Iām listing m/s while it would be km/hā¦ thanks for spotting that! (luckily it hasnāt got anything to do with the real arythmatic of the template ā¦
have a look at the unchanged output of Buienradar:
5,77 m/s * 3,6 = 20.8 Km/hr = BFT 4 which is what my sensor says:
Here is the value from your screen shot in your original post above:
That shows a value of 5.5 km/h which is ~1.53 m/s (5500m / 3600s). Based on the chart from the site you posted listed here https://nl.wikipedia.org/wiki/Schaal_van_Beaufort Bft should be 1 not 3. This also matches the charts on the sites I posted.
Yepā¦ If the value of windspeed is in m/s not km/h I need to do the multiplication I assumed km/h based on your screenshot. I will update for next release.
cool, thanks.
did you have the opportunity to have a look how I could use my own sensor as a config entity? No use having the same calculations done twice.
a yes, another error! should be m/s of course ā¦ I only added the Bft, the windspeed sensor is from the original card 
will update that
I think it is a bug in the native weather cards or the platform definition. Must say Ive never payed much attention to it, just worked with the buienradar and the Lovelace cards.
Have a look here, only correct card is Open weather map, while the individual sensors of these platforms all show windspeed in m/s and are more or less close to each other.
filed an issue: https://github.com/home-assistant/home-assistant-polymer/issues/2482
Yes, I am considering a way that you can pass an sensor entity to the show_beaufort flag. In other words show_beaufort could be true / false / sensor.beauft_sensor. If truethe value shows based on internal calcs. If false or just not specified the value does not show. If present and neither true or false it would assume you are trying to pass a sensor and try to reference it.
I havenāt coded it yet. Will try to get to it sometime over the next couple of daysā¦
1 Like
fixed the āregularā custom-cardā I think @Bram_Kragten now updated (I am still on the older hand changed version) like this:
const windSpeed = Math.round((entity.attributes.wind_speed*3.6)*100)/100;
would this be the best way to create the number and round the km/hr to 2 decimals?
and your card:
That rounding method will generally work but it will fail in specific circumstances. eg 1.005 will not return 1.01 it will return 1.
There are other solutions but the best ones involve creating your own round function.
yes, I read about that, but needed a quick fixā¦ Seems a bit strange js hasnāt got a round(2) function around for thisā¦ Anyways, I am not capable enough to write my own function. Even worse, this was my quick solution for the windspeed conversion. Tried it with what I always do in Jinja templates or even my python scripts ( something like var speed = (this.hass.states[this.config.entity_wind_speed].state*3.6; and then use that variable speed in the template, but that would work. Did it the brute force way now:
default:
if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 118) return 12;
if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 103) return 11;
if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 89) return 10;
if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 75) return 9;
if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 62) return 8;
if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 50) return 7;
if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 39) return 6;
if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 29) return 5;
if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 20) return 4;
if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 12) return 3;
if (this.hass.states[this.config.entity_wind_speed].state*3.6 >=6) return 2;
if (this.hass.states[this.config.entity_wind_speed].state*3.6 >= 1) return 1;
and:
var windBearing = 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>${this.current.beaufort}${this.current.windBearing} ${(this.current.windSpeed)*3.6}<span class="unit"> ${this.getUOM('length')}/h</span></li>` : ``;
For m/s to km/hr reference see https://github.com/home-assistant/home-assistant/issues/16793#issuecomment-454526140 and
Hi @m.p.frankland as you may have seem above, Iām having trouble getting this card to work. 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. I know thatās a big askā¦ plus I donāt actually have the card working yet to even get to that stage. Any idea what I can do to get the card working? It seems that after a Crtl+F5 I get the āCustom element doesnāt exist: dark-sky-weather-cardā error, then if I navigate to a different Lovelace screen, then back to the weather one, I no longer get a card at all, only log errorsā¦
ā¦also, given how awesome this custom-card looks it really should feature as a standard Lovelace card but with generic weather entities so it can be used with whatever local weather data is available rather than being called āDark Skyā. I know that we can change the entity data but it would be nice to simply be āweatherā and not reference a particular provider. Just a thought
I get the following error, the Token Ok. what could be the problem?
dark-sky-weather-card.js?v=4:3:8 Uncaught SyntaxError: Unexpected token {
Bugger it! Started getting the red screen againā¦
With the button-card @gmschade made a local lit https://github.com/kuuji/button-card/issues/43#issuecomment-454944829 which works for the button-card and works here as well
I d/l the zip file to /local/button-card-depends and edited the dark-sky card
import { LitElement, html, } from '/local/button-card-depends/@polymer/lit-element/lit-element.js';
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?
Further to the button-card-depends - I edited all the files in the zip file and replaced button-card-depends with a local-lit so itās a more generic fix (and changed the js files as well)
1 Like