Try the new version of the card.
1 Like
I have tried this but unfortunately to no avail. I have not touched the code. (it used to work before on my browser, but it just wonât load anymore. But it works perfect on my iphone now, which it didnât before the update)
I am running the latest update and this is the code I used. (Home Assistant 0.86.1, weather-card 1.2.0)
- type: 'custom:card-modder'
style:
border-radius: 20px
card:
entity: weather.dark_sky
type: 'custom:weather-card'
icons: '/local/custom-lovelace/weather-card/icons/animated/'
It used to work before like I said, but when I inspect the element it gives me the following error:
< hui-error-card style=âborder-radius: 20px;â>âŚ< /hui-error-card> customâŚ
I imagine the problem lies with the border-radius and the card modder component. However it works perfectly fine on my ios device. Iâm not very good at css unfortunately.
I get this error
https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/weather-card/weather-card.min.js:96:16 SyntaxError: expected dot, got â(â
Hi,
Great card. Works very good. I was wondering if it is possible to show bft instead of km/h with the windspeed?
If so, what do I need to do to get it like that?
Kind regards,
Wessel
be careful with that because the weather components BR and Dark_sky give windspeed in meters per second while the displayed unit is km/h. They are off *3.6⌠I recall Open weather Map ro be correct, not sure though, weâve discussed this on this community and on the Github. Lovelace cards are incorrect alsoâŚ
have a look:
# https://www.wiskundeleraar.nl/page3.asp?nummer=7134
# https://nl.wikipedia.org/wiki/Schaal_van_Beaufort
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}} km/u
{% elif wind <= 5 %}Bft: 1, Zwak: flauwe wind, {{wind_round}} km/u
{% elif wind <= 11 %}Bft: 2, Zwak, {{wind_round}} km/u
{% elif wind <= 20 %}Bft: 3, Matig: lichte bries, {{wind_round}} km/u
{% elif wind <= 28 %}Bft: 4, Matig: flauwe bries, {{wind_round}} km/u
{% elif wind <= 39 %}Bft: 5, Vrij krachtig, {{wind_round}} km/u
{% elif wind <= 50 %}Bft: 6, Krachtig, {{wind_round}} km/u
{% elif wind <= 62 %}Bft: 7, Hard, {{wind_round}} km/u
{% elif wind <= 75 %}Bft: 8, Stormachting, {{wind_round}} km/u
{% elif wind <= 89 %}Bft: 9, Storm, {{wind_round}} km/u
{% elif wind <= 103 %}Bft: 10, Zware storm, {{wind_round}} km/u
{% elif wind <= 117 %}Bft: 11, Zeer zware storm, {{wind_round}} km/u
{% else %} > 117 %}Bft: 12, Orkaan, {{wind_round}} km/u
{%- endif %}
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}}
You can however edit the unit in the custom card to your needs. On Lovelace card for DarkSky weâve made it like this:
get beaufortWind() {
if (this.config.entity_wind_speed) {
switch (this.hass.states[this.config.entity_wind_speed].attributes.unit_of_measurement) {
case 'mph':
if (this.hass.states[this.config.entity_wind_speed].state >= 73) return 12;
if (this.hass.states[this.config.entity_wind_speed].state >= 64) return 11;
if (this.hass.states[this.config.entity_wind_speed].state >= 55) return 10;
if (this.hass.states[this.config.entity_wind_speed].state >= 47) return 9;
if (this.hass.states[this.config.entity_wind_speed].state >= 39) return 8;
if (this.hass.states[this.config.entity_wind_speed].state >= 31) return 7;
if (this.hass.states[this.config.entity_wind_speed].state >= 25) return 6;
if (this.hass.states[this.config.entity_wind_speed].state >= 18) return 5;
if (this.hass.states[this.config.entity_wind_speed].state >= 13) return 4;
if (this.hass.states[this.config.entity_wind_speed].state >= 8) return 3;
if (this.hass.states[this.config.entity_wind_speed].state >=3) return 2;
if (this.hass.states[this.config.entity_wind_speed].state >= 1) return 1;
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;
}
}
return 0;
}
or use a correct entity of course in the config 
corrected that for Buienradar:
and Dark_sky:
iâve a problem with latest update, now i view this (firefox):
since previus version all worked ok, i use this config:
- url: https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/weather-card/weather-card.min.js
type: module
- type: custom:weather-card
entity: weather.dark_sky
with chrome no problem
Hi Marius,
Thanks for the elaborate response. Iâll have a look at it later and let you know the results. I do understand that normally the Bft is being measured over a period of time.
Have a nice evening.
Kind Regards,
Wessel
HI Bram,
I know I can copy your code, but is misses out on many items I have carefully setup before Lit came alongâŚ
Ive tried to see if I could add these to your new card, but I am afraid it is rather differently setup, and that is beyond my JS skills. And, since your card uses many internal attributes, it is also very different from the other Lovelace card I use and know rather well now, the dark_sky card by @m.p.frankland .
Hence my question, and I hope you donât mind: might I ask you to have a look at the weather-card.js and see if it isnât easier for me to somehow only change the extend HTML to Lit import, and use the rest of my card as it is?
using this config:
- type: custom:weather-card
entity_weather: weather.woensdrecht #buienradar
entity_sun: sun.sun
entity_apparent_temperature: sensor.jagti_windchill
entity_wind_force: sensor.br_wind_force
in the card a Bft entity has been added.
my card shows as:
or
in default theme, so you can see better.
Hope you can have a look, Id really like to ease up on the processorâŚ
If youâd want to add these items to your card, that would be most welcome too of course 
Hi @arsaboo
checking your setup/github, I see you mapping several icons I donât recognize (foggy-2, foggy-3) did you copy one of the others to a new name, or are these real foggy icons, in which case i would like to ask to share please?
secondly, what does the 31: 'night' do, does the condition ever turn to 31?
thanks!
U said go this link, but it is not working when i have
- url: https://raw.githubusercontent.com/bramkragten/custom-ui/58c41ad177b002e149497629a26ea10ccfeebcd0/weather-card/weather-card.js
type: module
in my lovelace-ui.yaml.
Any chance to work on firefox âhostedâ?
Or enable javascript.options.dynamicImport in about:config
1 Like
Hi there,
I have a suggestion, hopefully of interest 
Would it be possible to integrate a graph in the forecast driven by a show/hide option (with hide as default presumambly)?
Basically to add the nice feature of this other weather card:
Thanks
Abdrea
Love itâŚnot sure if it can be integrated in the animated card. But it will be great to include something like that in the default weather card.
to be honest I donât think why not, I mean if it can be integrated in the default as it clearly happened with the one I linked, it shouldnât be much difference for the animated one, that is loading just animated icons (beside showing additional info), am i wrong?
I have been using the card for a few weeks and like it.
After reading almost all the posts I do not see (at least with confidence) a way to add a few things.
I live in a climate that during the spring the pollution is high and the summer the temps can be 115F+.
I have a child who has bad allergies and is very sensitive to the pollution and is also very sensitive to the UV rays.
Is the a way through dark sky to add these items to the card?
Thanks
carltonb
Great card, really liking it despite two issues:
- Both Safari under macOS (10.13.6) and the HA app on iOS (12.1.4), the large icons arenât rendering the full res versions
- Strangly, the friendly names are âoffâ by one day (beginning as yesterday instead of today). I.e. today is Monday, but day 1 displays Sunday.
Both of those issues do not show up on Chrome on the same system on macOS. I have cleared cache on all browsers. Any ideas?
iOS:
macOS Safari:
macOS Chrome:
2 Likes
Hello, My card is not working anymore since last update. Does someone already had this issue and find a way to solve it.
Thanks.
1 Like
I am ready to jump 
Any idea what I am missing?
weather-card.js is in the weather-card folder
Custom element doesn't exist: weather-card.
{
"type": "custom:weather-card",
"entity": "weather.yourweatherentity",
"name": "Timnath Forecast",
"icons": "/local/custom-ui/weather-card/icons/"
}
resources:
- url: /local/mini-media-player-bundle.js
type: module
- url: /local/custom_ui/card-modder.js
type: module
- url: /local/custom-ui/weather-card/weather-card.js
type: moduleMy set-up is similar to yours, except for âweather.dark_skyâ
- type: custom:weather-card
entity: weather.dark_sky