I did that. Full delete of ALL data âtime range - all timeâ in Chrome. Still not happy. I donât get the card at all (no red screen), just the log error
no matter what I do, the red card is showing, and have this in the log:
/frontend_latest/app-19cc9e53.js:773:25742 TypeError: this.detached is not a function. (In 'this.detached()', 'this.detached' is undefined)
returned to the previous version of the card, and the red card is still there⌠have already cleared cache, refreshed, few times. nothing helps? logged out and back in: idem dito. Red cardâŚ
now what?
Did you see this:
That worked for meâŚ
thanks! missed that, and indeed it works right away.
Makes me wonder though, that we need external resources, while the whole purpose of HA was to be able to have it all under local control⌠canât we download that resource locally?
Seems more cards are going to use this resource, and if that would mean we are slowly moving to a cloudy solution, I would really appreciate that.
1 Like
Iâd say some more clarity around this will be forthcoming over the next few days⌠Dark-Sky is cloud based anyway⌠no internet, no data.
sure, appreciate that, as are many external data.
But resources that create the HA instance should be local. We should be able to show an empty interface if the data were missing, and should not get a red card for not being able to load the core interface without connection, or failing servers anywhere.
Hope this will be discussed in the architecture forum.
also see: đ ď¸ use local lit by iantrich ¡ Pull Request #11 ¡ bramkragten/custom-ui ¡ GitHub Use local Lit. Not sure if we can use the in the weather-card as such, but Local Lit should be the way forward.
3 Likes
@m.p.frankland
HI Mark,
I think you made a small but important mistake in the Beaufort calculations.
This should be the correct calculation, based on a sensor that has state in m/s (meters per second)
windkracht:
friendly_name: Windkracht
value_template: >
{% set wind = 3.6 * states('sensor.br_wind_speed')|float %}
{% set wind_round = wind|round(1) %}
{% if wind <= 1 %}Bft: 0, Wind stil, {{wind_round}} m/s
{% elif wind <= 5 %}Bft: 1, Zwak: flauwe wind, {{wind_round}} m/s
{% elif wind <= 11 %}Bft: 2, Zwak, {{wind_round}} m/s
{% elif wind <= 20 %}Bft: 3, Matig: lichte bries, {{wind_round}} m/s
{% elif wind <= 28 %}Bft: 4, Matig: flauwe bries, {{wind_round}} m/s
{% elif wind <= 39 %}Bft: 5, Vrij krachtig, {{wind_round}} m/s
{% elif wind <= 50 %}Bft: 6, Krachtig, {{wind_round}} m/s
{% elif wind <= 62 %}Bft: 7, Hard, {{wind_round}} m/s
{% elif wind <= 75 %}Bft: 8, Stormachting, {{wind_round}} m/s
{% elif wind <= 89 %}Bft: 9, Storm, {{wind_round}} m/s
{% elif wind <= 103 %}Bft: 10, Zware storm, {{wind_round}} m/s
{% elif wind <= 117 %}Bft: 11, Zeer zware storm, {{wind_round}} m/s
{% else %} > 117 %}Bft: 12, Orkaan, {{wind_round}} m/s
{%- endif %}
or:
wind_bft:
friendly_name_template: >
Bft: {{states('sensor.wind_bft')}}
value_template: >
{% set wind = 3.6 * states('sensor.br_wind_speed')|float %}
{% if wind <= 1 %}0
{% elif wind <= 5 %}1
{% elif wind <= 11 %}2
{% elif wind <= 20 %}3
{% elif wind <= 28 %}4
{% elif wind <= 39 %}5
{% elif wind <= 50 %}6
{% elif wind <= 62 %}7
{% elif wind <= 75 %}8
{% elif wind <= 89 %}9
{% elif wind <= 103 %}10
{% elif wind <= 117 %}11
{% else %} > 117 %}12
{%- endif %}
entity_picture_template: >
{% set state = states('sensor.wind_bft') %}
{% set path = '/local/weather/beaufort/' %}
{% set ext = '.jpg'%}
{{[path,state,ext]|join('')|lower}}
right now you forgot to multiply by 3.6 and as a consequence we have a windforce of 1 instead of 3 
versus:
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:
