Help needed to migrate from heatmap.js

[bartbutenaers]

Hi @nswamy14,

I am trying to migrate my application from heatmap.js to your library, but there are a couple of things I don't understand yet. It is not my intention to ask you to do all the work! But I would love to get your opinion, and if possible some tips about how to implement it...

1. The heatmap.js library also has a setDataMin method to set the minimum value, while yours only has a method to set the maximum value. Is it possible to add such a method also in your library, or not for some reason?

2. When no maximum value is specified, you use Infinity here as the default maximum value. I am wondering if it would be possible to calculate the max value (in the render method), as the maximum value of all the values in exData (as a third option)?

3. In my previous program I had the ability to show labels (which could be the numerical values or some short labels) on top of the heatmap. This was not a feature of the heatmap.js library, but a layer I created on top of heatmap.js. But I am wondering if this feature could be part of your library?

4. In my previous program I also had the ability to show a background image behind the heatmap. I am wondering if this a feature could be part of your library. I mean an extra setBackgroundImage method which accepts e.g. an ArrayBuffer (or something similiar...).

If you want to don't think it is good practice to implement 4 and 5 in your library, then I again need to workaround it. Which would be kind of a pity, because it is much more efficient and cleaner if baked into your render method...

Looking forward to hear your thoughts. Thanks!!

Bart

[nswamy14]

Hi @bartbutenaers ,
I see the point 1,2,4 are feasible, but the 3rd point is beyond the scope of the current version. Label requirements may vary from case to case, and implementing them—such as label wrapping, collision avoidance, custom labels etc.—will require considerable effort. I will add these requests as enhancement requests to the project.

[bartbutenaers]

but the 3rd point is beyond the scope of the current version.

@nswamy14 , Yes I understand your concerns.

So I thought to work quickly around this myself, by drawing the values on top of your canvas (after you rendered the canvas). However it seems that a webgl based context does not support drawing text. Did some reading about this, and the simplest solution seems to be to add a second (2d) canvas on top of your webgl canvas. However when your canvas is resized/scrolled/..., then my canvas need to behave the same.

Not sure at the moment how I could solve this properly. Do you have any advice, based on your experience with this?

Thanks again!!

[nswamy14]

@bartbutenaers , We can achieve this in multiple ways. I feel the best approach, considering the library, would be to expose a projection method that takes (x, y) coordinates and gives transformed ('x, 'y) coordinate with respect to the heatmap layer. On every interaction you need to get the transformed coordinates for the label positioning.

For text, you can choose either Html text(for low volume) or Canvas/WebGL( for high volume). For webGL/Canvas, checkout I2djs framework. It provides (WebGL/Canvas)Layer API which you can overlay on heatmap layer.

[nswamy14]

@bartbutenaers , I have added the following features :

• Background Image,
• Min, Max will be derived from the data set
• added Projection method to get layer coordinates
• Added new examples to showcase Background image and Labels using projection method (with I2djs)

[bartbutenaers]

@nswamy14,
This is most kind of you!!!
Thanks a lot for the great and fast response!
I will test it as soon as the newyear madness is gone here in Belgium ;-)
Will get back to you afterwards.
Bart

[bartbutenaers]

@nswamy14,
Would be nice if you could have a look at the two new demo's (on the master branch):

The first one gives "page cannot be found".
And the second one refers to heatmap3.html, while it should be heatmapWithLabels.html I assume?

Thanks!!

[nswamy14]

@bartbutenaers Thank for pointing it out. I have updated ReadMe.md file , also did some minor bug fixes.

[nswamy14]

@bartbutenaers : Just to note.. Visual-Heatmap does not support the rendering of labels. I've provided an example to demonstrate how label rendering can be accomplish through the use of the projection API. In this particular example, I used the WebGLLayer from the I2Djs framework to render text labels.

[nswamy14]

@bartbutenaers , did you get a chance to test these changes?

[bartbutenaers]

Hi @nswamy14,
My sincere apologies for not responding earlier!!!!
Some unexpected issues in my personal life got completely between me and all my open source developments...
I will try to continue where I left, and get back to you as soon as I have feedback about your new version 1.1.0
Sorry again, and thanks for all your hard work!
Bart

[nswamy14]

Hi @bartbutenaers ,
No issues! I had to close this issue as it was open for too long. Please do verify the changes and share your feedback. Thanks,
Nswamy

[bartbutenaers]

@nswamy14,
I can confirm that the background images work like a charm! Nice feature!

When I inject a base64 encoded image (from my Node-RED flow) as background, I can easily draw the heatmap on top of it with some opacity:

Up to the next feature test...

[bartbutenaers]

@nswamy14,
At first sight the min and max values also seem to behave as expected.
Thanks for providing all these features!