Thanks for updating this and for making the icons configurable. (I had been using it with the .js file modified to point to where my icons are)
@Bram_Kragten thanks for the update! 
Question - Iām using the Met.no entity, and it doesnāt populate the forecast:
I tried setting mode to daily as with DarkSky, any ideas? Clicking the card shows there is reported a forecast:
I donāt understand your question, the forecast data is shown in the weather card?
Sorry, my bad - I mixed up what I was looking for when I wrote this one - It seems the card wants to add a ābottom temp valueā below the FC, and it doesnāt look like the met platform captures this, so there is no value. Iāll remove the bottom line in the card code instead (the blue *C). Sorry for the confusion
Updated the code, if templow is not available it will not show it.
1 Like
Genious!
A follow up on customizing this then - in the āoldā version I had a hack for showing expected mm rain the next hour. This could replace the visibility part as this is more useful.
Declared a sensor like this for the rain itself (true/false)
- platform: rest
resource: http://api.solweb.no/yr?location=Norge%2FAkershus%2FOppeg%C3%A5rd%2FT%C3%A5rn%C3%A5sen
name: "Rain Oppegard"
headers:
User-Agent: 'Home Assistant'
Accept: 'application/json'
json_attributes:
- rain
value_template: '{{ value_json.value }}'
And one for the rain forecast in mm:
- platform: template
sensors:
rain_forecast_oppegard:
friendly_name: "Rain 1h"
unit_of_measurement: 'mm'
value_template: >-
{{ states.sensor.rain_oppegard.attributes.rain }}
icon_template: >-
{% if is_state('sensor.rain_oppegard', 'on') %}
mdi:weather-rainy
{% else %}
mdi:weather-cloudy
{% endif %}
However, I donāt understand how to get this into the updated card, can you help?
In the old version I believe it was declared like this:
const rain = hass.states[this.config.entity_rain].state;
Followed by:
<li><span class="ha-icon"><ha-icon icon="mdi:weather-rainy"></ha-icon></span>${rain}<span class="unit"> mm next hour</span></li>
Any help is appreciated as I will then have everything in one window 
Replace
const rain = hass.states[this.config.entity_rain].state;
with:
const rain = this.hass.states[this._config.entity_rain].state;
1 Like
Worked like a charm! Thanks for all the help!
Since the last update (the one from a few hours ago) this element wonāt load on my desktop (I have tried edge and firefox, cleared cache etc. but no change). However it works perfect on my iphone now, whereas it would often not load on my iphone (especially after a refresh).
The error it gives me: Custom element doesnāt exist: weather-card.
Funny that it used to work flawless on my desktop and had problems on my iphone, now itās the other way around :P. I even tried to reinstall by getting the new files from the repo, but no change 
.
Have you tried forcing a new version? Just override the version number under resources in your ui-lovelace file:
For example:
- type: js
url: /local/custom_ui/weather-card.js?v=0.0.7
This usually does the trick for me, as it forces Lovelace to reload the card in the right version. Number could be anything, but you should increase with 1 if you do changes to the card to refresh.
TJ
1 Like
Iām getting the following error:
https://domain.com/local/custom_ui/weather-card.js:7:1 Uncaught SyntaxError: Unexpected token <
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 