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

As I said before I used Node-RED managed by the IBM Cloud so I couldn't see which Nodejs version ran underneath or force an upgrade to 1.0


Colin

1 October
Are you sure you are not now using a different version of nodejs?

I am sure it is possible to see which version of nodejs is running on IBM Cloud. My point was that it may not have been the upgrade to version 1.0 of node-red that fixed it, but the fact that you are now running with a later version of nodejs (if you are).

1 Like

On the IBM Cloud I still get the same error "TypeError: Cannot read property 'push' of undefined" as soon as I deploy the heatmap ui node on the editor surface. My versions are the following:

Node-RED: v.1.0.2
Node.js: v. 10.16.3
npm: v. 6.9.0
node-red-dashboard: v. 2.17.1
node-red-contrib-ui-heatmap: v. 2.1.2

Hi Raphael,
Looks like everything is on recent versions. No clue on which line the error is caused...
Suppose I create a dedicated version for you on Github with lots of extra logging, are you able to install that via "npm install ..." on Bluemix? Or can you access my html and js files, to overwrite them manually by my new temporary version?

Raphael,

I have no spend more than two hours trying to reproduce your error message in the debug window, but I never get that same error :weary:

Have put this all over the place:

var undefinedVariable;
undefinedVariable.push("something");

So let's focus on your error a bit more:

image

  • That node 336d7e3a.c614f2 is that my heatmap node, or the function node (because that also contains a push statement)?

  • In the inject node please unselect the checkbox:

    image

    When you deploy now, is there also an error? Or does the error now only is being displayed as soon as you inject a message? If so, you get the same error every time a new message is injected?

  • Can you please add a debug node, and let me know what that debug message contains (see debug window)?

    image

    Just to make sure that the input message doesn't contain an empty payload or whatever ...

1 Like

Hey there
Thanks for your enormous efforts! I really appreciate your help. I tried to reproduce what you asked me to do. Uncheck the periodic injection and adding another debug node. The TypeError comes from your heat map node as soon as I deploy it. The function node sends an array with 200 random indices as it should do on msg.payload (see following screenshot)

What surprises me is that on my local machine the heat map works just fine. I even deleted the Cloud Node-RED service and reinstalled everything with the latest versions as I showed you above and only installed the dashboard and heatmap nodes to not have any interferences. Still I get the same issue...

Could it be some sort of security issue that the module doesn't work on the IBM Cloud? Did you manage to create an IBM Cloud account and run Node-RED there to install your heatmap module? it's all possible with a free account and no credit card required, if you wanna give it a try?

1 Like

No. I spend all my free evenings already in developing nodes for free for the community, after a full time job & my familly & my non-hobby related todos. When I need (on top of that) learn and experiment with all platforms where my nodes run, is rather impossible. Will see if I have some time left next week...
Had hoped that somebody could give me tip, based on your screenshot ...

I have create an IBM cloud account and installed the heatmap node.
Indeed I get the same error when the flow is deployed:

image

Have been trying a couple of things, but I have no clue how I could debug this. Does anybody have an idea how to get started here? E.g. can I change the source code of my node to add a debugger; statement somehow?

well worst case - there are only 4 .push in the lib/heatmap.js library and 1 in your js file. I can't see yours being incorrect so must be one of the others being called for some reason....

@dceejay,
Thanks! But I only have a flow editor, and no dashboard at the moment. So I thought it couldn't be the heatmap library, since that is only used in the dashboard (not in the flow editor and not on server side). The heatmap instance is created here:

$scope.$watch('msg', function(msg) {
   ...
   $scope.heatMapInstance = h337.create($scope.h337Config);
   ...
}

Which is dashboard side code...

So it seems to me that it is in the client side (flow editor side) OR in the server side of my node. But I'm also not sure whether a server side error would be displayed like in the screenshot. And no clue how to debug anything on IBM Cloud ...

I'm pretty certain that error comes from server side Bart.

Id put some extra try catch code everywhere in the server side stuff and call node.error(e, msg) in the catch part.
This way, a catch node in your flow with have much richer error info.

1 Like

Hey Steve,
Thanks a lot !!!!!!!!!!!!!!!!!!!!
Will try that tomorrow.

P.S. I forgot to mention here that I have opened another discussion for the IBM cloud problem. Otherwise users reading about heatmaps will get lost in non-heatmap related stuff...

1 Like

Dear all
I came across a behavior of the heat map that I can't really explain to myself. The goal was to display different sensors and their temperature. It seems that when I scale the heat map size big, the colors will not be displayed the same way as if the heat map is small. My temperatures range from 18°C to 32°C where 18 should be blue and 32 red. As you can see from the following screenshots, the red color is only correctly displayed if the overall size of the heat map is small? Furthermore, the legend shows a violet kind of color for the middle temperature which actually should be green? 25 is around the middle and will be displayed greenish in the heat map but the legend shows a violet color for that temperature?

The radius was the same in all three scenarios. I only changed the over all node size. It seems like the color depends on how much space there is between other values and the border? Is there a way to solve this issue?

1 Like

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

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

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...

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

@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:

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...