Bingo ! The gz file was still in the folder indeed 
I didn’t realized HA would pick the .gz file by preference of the .js.
Super, thanks a lot Spudje !
1 Like
Just to report, when you zoom in Chrome and reload the page it starts to show the graphic, after that you can zoom out again, zoom level of Chrome does not matter. This works till you reopen Chrome or edit your card in lovelace, then you can zoom in reload again and zoom out.
I got it all working and it looks really good.
unfortunately when I reload the overview page the card becomes invisible and I have to edit my ui to see it again.
any fix for this?
I’m seeing this as well, but when I wait for the card to update according to it’s update-interval, then the graph appears. This is with the updated card by Spudje.
Hi, I installed it via HACS, replaced the .js file with the one from Spudje in issue12 (in folder config/www/community/lovelace-buien-rain-card and copied to be sure to the folder config/www), copied the lovelacedeleted the .gz file. Then added in Lovelace Resources both /local/buien-rain-card.js and /config/www/community/lovelace-buien-rain-card/buien-rain-card.js with Type Javascript-module. Restarted HASS and tried to create a manual card in my manual lovelace, but still I get the error “Custom element doesn’t exist: buien-rain-forecast.”
Does anybody see what I am doing wrong?
=> Found it! The Resource needed to be cahnged to /hacsfiles/lovelace-buien-rain-card/buien-rain-card.js. It is only not filled with the graph on browser Chrome (is there a solution for this), but in the iOS app it works.
By using a Vertical Stack I now have the weather card and the Rain forecast connected.
Try setting the height to ‘100% !important’ thru css
Yes, it’s not optimal. it only shows after the first data fetch. Feel free to either force this directly on initial load, or populate it with dummy (zero) data on initial load.
Hi! The issue I have is with the coordinates. As soon as I type in my latitude and its below 49.xxx the graph disappears (I do actually need 48.xxx). What could be wrong? Here is my config:
type: 'custom:buien-rain-forecast'
long: 9.0000
lat: 48.0000
lineColor: 'rgba(89, 160, 238, 1)'
fillColor: 'rgba(89, 160, 238, 0.2)'
update_interval: 10
style: |
.chartjs-render-monitor {
height: 200px;
}
How do you do this? I have the same problem.
What do you exactly copied and past in witch js file?
@lukevink any idea? tested again today, still the same type of error: Card is visible but the graph disappears. strange.
I also have the graph not showen quite often. See image below
Really like this card, but at the moment it is not really usable.
I’ve got it working, just cleared my browsers’ cache. But one thing is still annoying. The card is flickering/flashing very often due to renewal… 
@lukevink, zou je de code voor deze willen delen?
https://github.com/lukevink/lovelace-buien-rain-card/blob/b806ecba1423de76a963db3a0a67ff3d8ffd9f81/buien-card-screenshot2.png
Dat is wel een hele mooie layout 
Hi @spudje,
You wrote:
And I put that extra style somewhere.
.chartjs-render-monitor {
height: 170px;
But where is somewhere? 
In ui-lovelace.yaml:
- type: custom:buien-rain-forecast
long: x.xxxx
lat: y.yyyy
lineColor: "rgba(89, 160, 238, 1)"
fillColor: "rgba(89, 160, 238, 0.2)"
icon: mdi:weather-rainy
style: |
.chartjs-render-monitor {
height: 200px;
}
top: 58%
left: 12%
width: 24%
opacity: 0.75
update_interval: 60
I have this now, but for me licht and matig are quite close to each other.
any option to make it better?
type: 'custom:buien-rain-forecast'
long: 4.3219738
lat: 52.0376977
lineColor: 'rgba(89, 160, 238, 1)'
fillColor: 'rgba(89, 160, 238, 0.2)'
icon: 'mdi:weather-rainy'
update_interval: 5
style: |
.chartjs-render-monitor {
height: 250px;
}
top: 58%
left: 12%
width: 24%
opacity: 0.75
Yes, that’s how it looks in Buienalarm as well, which I used as reference.
You can indeed change this if you want. Look for “licht” in the .js file and increase the “value” field to the amount you want. I have set it to 0.5.
I’m seeing this “definition” at the buienradar website:
<div style="z-index:1;position:absolute;left:5px;top:16.5%;">Zwaar</div>
<div style="z-index:1;position:absolute;left:5px;top:49.5%;">Matig</div>
<div style="z-index:1;position:absolute;left:5px;top:82.5%;">Licht</div>
So Matig should be above Licht, not below it.
Oh seriously? Good spot! My bad, small oversight I guess. I think you can easily change this, can’t you?
Yes, done. I’ve switched the values for licht and matig.
I see you use the values 0.2, 0.5 and 2 for licht, matig and zwaar.
I was wondering, how do these numbers relate to the use of these limits in the graph on the buienradar website?
The buienradar website says this:
De waarde 0 geeft geen neerslag aan (droog), de waarde 255 geeft zware neerslag aan. Gebruik de volgende formule voor het omrekenen naar de neerslagintensiteit in de eenheid millimeter per uur (mm/u): Neerslagintensiteit = 10^((waarde-109)/32)
Combining this info with the percentages shown in my previous post, I’ve calculated the following values:
licht: 255*(100-82.5)% = 44: 0.01mm/h
matig: 255*(100-49.5)% = 129: 4.2 mm/h
zwaar: 255*(100-16.5)% = 213: 1778 mm/h
Update: after some more googling and reading, I propose these values:
licht: 0.1mm/h
matig: 5 mm/h
zwaar: 25 mm/h
These numbers a still a bit arbitrary but they are in line with some of the other definitions I’ve found.
1 Like