Announce: node-red-contrib-ui-heatmap (beta release)

Share Your Nodes
104

Hi Raphael (@Rtholl),
That is indeed very weird. I use the heatmap.js library under the hood, and their source code repository is on Github. Unfortunately the project is not maintained anymore, and there are a lot of other issues and open pull-request. You could register an issue there, and if you are lucky somebody will answer your question. Or you can search through the open issues to find a similar one.

I only wrote this node to help a poor soul on this forum, but I'm not using it myself ...

I have added that legend myself, which means I had to calculate the colors myself (via interpolation) as you can see here. So it seems the heatmap.js calculates the colors somehow differently as I do ... If you (or anybody else) has time to investigate how I need to calculate it (to get the same result as heatmap.js), please let me know and I will change my code!

By looking at your screenshots, I'm wondering if you the node-red-contrib-ui-level perhaps is a better solution for your use case?

1 Like
105

I thought the way heatmaps work is down to the density of data - so if there is more overlap (ie the compressed scale on the right) then you get greater density and so the "higher" colour. So I think it is behaving correctly. You would need to increase the radius (or decrease it) proportionately so the density remains the same.

2 Likes
106

Dave,
that might be correct when looking at this article about heatmap.js:

the gradientā€™s alpha starts at a calculated value in relation to the datapoint count

If someone wants to digg into this, that would be very welcome!
Then I will implement the requirements...

107

Not sure there is anything to implement - you can configure the radius and the spacing already so the user has control over the density.

1 Like
108

@BartButenaers: thanks for the suggestion of the other node module. I guess it doesn't really suit my use case tho. Your heat map is exactly what I need.

@dceejay: Seems like it yes, but how to solve the issues with the borders of the heat map? I increased the radius and If you check out my new screenshot below you'll see the top left value is 25.5Ā°C but "cooler displayed" than other cooler values :confused:

42
421646Ɨ1430 450 KB

109

Could you perhaps solve it by adding an extra value above the top row, and duplicate there the value from your current top row? If that solves your problem, I could perhaps add a boolean variable 'showValue' for every cell (so you can specify for each cell whether the value should be displayed or not). That way the duplicate value wouldn't become visible. Although it would be more a workaround, and not a solution...