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

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125>\
**Category:** Share Your Nodes\
**Created:** [18 February 2019 23:23 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125 "2019-02-18T23:23:02Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [18 February 2019 23:23 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/1 "2019-02-18T23:23:02Z")

</div>

Hi folks,

Damn, I got distracted again from my planning. This time by an interesting question about heat maps (i.e. temperature maps): see [discussion](https://discourse.nodered.org/t/how-to-visualize-temperature-map-mlx90640/7856/5).

P.S. _ **It would be nice if somebody could assist** _ @janek _ **in the above discussion** _. Something tells me that there should be a compact solution to read such an I2C device from Node-RED. But I have no experience with this kind of stuff ... But if we could manage to get that working, it would be a nice project in combination with this new UI node.

I have added a test flow and a series of use cases for my new node on the [readme](https://github.com/bartbutenaers/node-red-contrib-ui-heatmap/blob/master/README.md) page. For those who don't have time to click on the link, here is a small example of this node in action:

![heatmap_result](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/adf075783516b42d509db71eaa06706cbf9b09d4.gif)

P.S. the heatmap is calculated on the client-side (i.e. in the dashboard running in your browser). Just set the matrix size to NxM, and make sure you send an array of numbers to it (length NxM).

As usual, all '_constructive_' feedback is welcome!

Have fun!  
Bart

---

<div class="post-metadata">

**Author:** ![seth350](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/seth350/32/4617_2.png) [@seth350](https://discourse.nodered.org/u/seth350)\
**Post date:** [19 February 2019 02:51 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/2 "2019-02-19T02:51:12Z")

</div>

Good work Bart!

---

<div class="post-metadata">

**Author:** ![purnima](https://avatars.discourse-cdn.com/v4/letter/p/49beb7/32.png) [@purnima](https://discourse.nodered.org/u/purnima)\
**Post date:** [19 February 2019 07:30 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/3 "2019-02-19T07:30:59Z")

</div>

Hello, can you post Your flows so that i can understand ,i tried but i m not able to create heat ap ,please help .

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [19 February 2019 11:47 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/4 "2019-02-19T11:47:28Z")

</div>

@BartButenaers it seems the test flow is missing from the readme.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [19 February 2019 12:16 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/5 "2019-02-19T12:16:11Z")

</div>

@purnima, @zenofmud,  
Seems indeed I have forgotten to add the flow...  
I'm now at work, so I will update the readme page this evening.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [19 February 2019 22:14 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/6 "2019-02-19T22:14:20Z")

</div>

@purnima, @zenofmud,

I have added the example flow to the [readme](https://github.com/bartbutenaers/node-red-contrib-ui-heatmap/blob/master/README.md) file.

As you can see on the readme page, the example flow is now also available via the Node-RED **menu**. But then you have to install my latest version:

```auto
npm install node-red-contrib-ui-heatmap@1.0.0-beta.3

```

Thanks to @dceejay for this tip ...

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [20 February 2019 22:23 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/7 "2019-02-20T22:23:32Z")

</div>

I have published version **node-red-contrib-ui-heatmap@1.0.0-beta.4** with following changes:

- The example flow contains now radius 40 instead of 5.

- The spacing between the matrix points has been fixed, because they were incorrect at the right and bottom sides:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4535a2e31150ab718822cff40ce9dbfea2ecf522.png)

- @janek requested [here](https://discourse.nodered.org/t/how-to-visualize-temperature-map-mlx90640/7856/11?u=bartbutenaers) to be able to _ **show the input matrix values** _ in the heatmap.  
So I have added a new checkbox in the config screen:

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [23 February 2019 00:25 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/8 "2019-02-23T00:25:15Z")

</div>

A new version **node-red-contrib-ui-heatmap@1.0.0-beta.5** has been published, with following changes:

- To download the third-party library script, now `RED.httpNode.get` is used instead of `RED.httpAdmin.get`. This is a tip from @dceejay for UI node developers ...

- It is now possible to generate a **legend** below the heatmap (as requested by @janek), and specify how many numbers you want to see in the legend:

Unfortunately I haven't found how to solve following exception:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/70498ffa4cf5881061ed333949d6a59727ae778a.png)

For some reason the heatmap library **thinks** incorrectly that the canvas height is `0` from time to time. And then it generates such an exception every time the numbers are set, and nothing is drawn. But I cannot find the cause 🥴

---

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [25 February 2019 02:14 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/9 "2019-02-25T02:14:53Z")

</div>

@BartButenaers, thanks, almost there. For now works only once and stops receiving updates. Btw, the minimum and maximum values for the legend and colors should be taken (IMHO) from the input matrix dynamically for each frame

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [25 February 2019 07:19 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/10 "2019-02-25T07:19:26Z")

</div>

> [@janek](#):
>
> For now works only once and stops receiving updates.

Yes, but to solve that I need help for this [issue](https://discourse.nodered.org/t/div-height-0-after-deploy/8336). I have no clue how I can solve that. So I **REALLY** hope somebody can help us with that... P.s. could you have a look in the console log to make sure your issue is due to the same error as mine!

> [@janek](#):
>
> the minimum and maximum values for the legend and colors should be taken (IMHO) from the input matrix dynamically for each frame

Isn't that the case already? As you can see in the above animation, the min and max change. But if you select in the config screen a **fixed** min and max, then I show those fixed limits...

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [25 February 2019 21:11 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/11 "2019-02-25T21:11:37Z")

</div>

@janek:  
About the DOMException: it looks to me that the dashboard gives us **_available height 0_** only for a small amount of time (e.g. immediately after a deploy). Right after that small time interval, the height will get the correct value (in pixels). But our heatmap received that correct height not before the next deploy, so _until then no heatmap updates were drawn_ ...

I have published a new version **node-red-contrib-ui-heatmap@1.0.0-beta.6** which contains a fix for the DOMException.

- As soon as I detect that the heatmap canvas height is 0, I again determine the available height (that we get from the dashboard) and I set the heatmap canvas height to that value. You can see in the browser console log when this happens:

- However sometimes (i.e. when the above correction is calculated during the small interval immediately after the deploy) the height I determine is still 0. In that case I don't draw the new input matrix, since it would fail anyway. As a result _this input matrix will never be drawn_, which you can see in the browser console log:

Could you please test it, and let me know if I can publish it as version 1.0.0 on NPM.

---

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [26 February 2019 00:41 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/12 "2019-02-26T00:41:08Z")

</div>

@BartButenaers, thanks works for me with one problem:  
In my application, the values come with one decimal point accuracy, eg. 34.5  
below is the updated random matrix generator for that:

```auto
// Generate some random data
// See https://www.patrick-wied.at/static/heatmapjs/example-minimal-config.html
var len = 200;

msg.payload = [];

while (len--) {
  var value = Math.floor(Math.random()*1000); // was 100
  value = value / 10;
(Math.round(value * 10) / 10).toFixed(1);
  msg.payload.push(value);
}

return msg;

```

Can you do the rounding to one decimal point in the legend as currently i can display very long numbers (unlimited decimal point) making it invisible

Cheers and thanks  
Jan

```auto
![image|363x323](upload://nTD9qxqD4KDH9mvPLOc8GPrgIy6.png) 

```

---

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [26 February 2019 00:47 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/13 "2019-02-26T00:47:21Z")

</div>

@BartButenaers  
update - within the legend can you make values rounded to integers (no decimal points)?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [26 February 2019 21:01 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/14 "2019-02-26T21:01:47Z")

</div>

@janek,

I have released **node-red-contrib-ui-heatmap@1.0.0-beta.7** on NPM, which allows you to round the numbers to be displayed (to N decimal places). The numbers that are drawn on top of the heatmap can have a different number of decimals, compared to the numbers in the legend:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/603d8919259d9001499dda23a0733051f002b1a5.png)

By default the number of decimals is `0`, which means you have nothing behind the decimal separator.

Remark: When you drag a new heatmap node on your flow, the decimals will be default `0`. However for your **_existing_** heatmap node(s) in your flow, the decimals field will be **_empty_**. I haven't added code to migrate existing nodes, since you are the only person testing this node at the moment...

P.S. It is not clear to me whether you have accomplished already to get your MLX90640 temperature values into Node-RED?? If yes, it would be very interesting if you could explain in a new topic (category "_share your projects_") how you have done that:

- Material list & links
- Drawing of electrical wiring
- A whole example together with this UI node
- Flow
- Explanation
- ...

Since I'm busy developing for Node-RED, I have no time left for experimenting with hardware. So it would be handy if I could just buy such a MLX90640, and follow the setup in your tutorial ...

Thanks in advance! Bart

---

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [26 February 2019 23:31 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/15 "2019-02-26T23:31:11Z")

</div>

@BartButenaers.  
Thanks for your work. I will share my project once it's in a stable state

---

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [26 February 2019 23:43 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/16 "2019-02-26T23:43:02Z")

</div>

```auto
[{"id":"b966424a.8fbdf","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"38cb1bee.0c69ac","type":"heat-map","z":"b966424a.8fbdf","group":"4b91d6fb.ff5e4","order":0,"width":"16","height":"12","name":"","rows":"32","columns":"24","minMax":false,"minimumValue":"0","maximumValue":"0","backgroundColor":"#ffffff","radius":"40","opacity":0.6,"blur":0.85,"showValues":true,"valuesDecimals":"1","showLegend":true,"legendDecimals":"0","legendCount":"5","x":720,"y":80,"wires":[[]]},{"id":"b596b767.2d0c1","type":"function","z":"b966424a.8fbdf","name":"Generate random matrix","func":"// Generate some random data\n// See https://www.patrick-wied.at/static/heatmapjs/example-minimal-config.html\nvar len = 768; // 32 x 24 was 200\n\nmsg.payload = [];\n\nwhile (len--) {\n var value = Math.floor(Math.random()*1000); // was 100\n value = value / 10;\n(Math.round(value * 10) / 10).toFixed(1);\n msg.payload.push(value);\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":510,"y":80,"wires":[["38cb1bee.0c69ac"]]},{"id":"760688a2.30c198","type":"inject","z":"b966424a.8fbdf","name":"Show heatmap","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":true,"onceDelay":"1","x":280,"y":80,"wires":[["b596b767.2d0c1"]]},{"id":"8e3cd0b9.4c3008","type":"ui_template","z":"b966424a.8fbdf","group":"4b91d6fb.ff5e4","name":"Clock Toolbar","order":4,"width":"0","height":"0","format":"<script id=\"titleScript\" type=\"text/javascript\">\n $('#clock').remove();\n var toolbar = $('.md-toolbar-tools');\n var div = $('<div/>');\n var p = $('<p/ id=\"clock\">');\n \n $('#titleScript').parent().hide();\n div.append(p);\n div[0].style.margin = '5px 5px 5px auto';\n toolbar.append(div);\n\n function displayTitle(lh) {\n p.text(lh); \n }\n \n function upTime() {\n var d = new Date();\n p.text(d.toLocaleTimeString('de-AT'));\n }\n\n \n\n // Watch the payload and update the title\n (function(scope) {\n scope.$watch('msg.payload', function(data) {\n displayTitle(data);\n });\n setInterval(upTime,1000);\n })(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":260,"y":120,"wires":[[]]},{"id":"4b91d6fb.ff5e4","type":"ui_group","z":"","name":"HeatMap","tab":"e141d62c.0125","order":1,"disp":true,"width":"16","collapse":true},{"id":"e141d62c.0125","type":"ui_tab","z":"","name":"HeatMap","icon":"dashboard","disabled":false,"hidden":false}]
The problem is with the legend displaying only 2 values (instead of 5 as in settings) - see attached
![Heatmap1|620x500](upload://f03PqOZofqXwupSF2P8kboWWBx3.jpeg) ![Heatmap2|352x500](upload://fbyD3tWEtHSPE1WuB3an2CLw3e4.jpeg) 

```

---

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [26 February 2019 23:43 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/17 "2019-02-26T23:43:50Z")

</div>

![Heatmap1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/6922659f9bb91f4a58641cdb48c9b0fc48c8bb25.jpeg)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [27 February 2019 21:10 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/18 "2019-02-27T21:10:00Z")

</div>

Hey @janek,

Indeed I can reproduce the problem.  
Must be something simple, but for some reason I cannot find the cause 🥴

In my Chrome developer tools, I see that the canvas element has a **width of 846 pixels** :

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1fe24b1a9e53b4d76efa4b0ea511c7fa82784b7d.png)

In the config screen, you have specified that **5 values** need to be displayed in this canvas. So the loop will be executed 5 times (i.e. legendCount is 5):

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b37d0e7cb42dde8a6fa89fb111e31785215489f6.png)

The `fillText` function (on line 175) will display the value on the canvas for the calculated x coordinate. On the next line I show the x coordinates in the console log:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b6a6da5aa00b0f58f1c97411cd74f584e6023697.png)

To me these x coordinates look fine ...  
As I said, it must be something simple, but I cannot find it ...

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [27 February 2019 23:16 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/19 "2019-02-27T23:16:27Z")

</div>

Hello @janek,

Damn, completely wasted my evening due to this problem ...

There are two ways to set the size of a canvas:

- As **CSS** style, which is the display size (i.e. the actual size of the canvas on the screen).
- As **DOM** element attributes, which is the matrix of real pixel values in the canvas (ie. the drawing buffer). So this determines the coordinate system that the canvas API will use...

So I just had to multiply all the text X-coordinates with the ratio (CSS width / DOM width).  
That is all. Told the solution would be simple ...

I have published a new version **node-red-contrib-ui-heatmap@1.0.0-beta.8** ,which solves the issue when I run your test flow with the large heatmap:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/cf27e91882d0215fd1452ccad07e0e9475a297d2.png)

---

<div class="post-metadata">

**Author:** ![janek](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@janek](https://discourse.nodered.org/u/janek)\
**Post date:** [27 February 2019 23:55 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/20 "2019-02-27T23:55:59Z")

</div>

@BartButenaers, thanks that works, but if I specify minimum and maximum values, the legend is not displayed

 ![Heatmap3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/dd3107372f6da8119d25b743ef39ca4dd7215b2e.jpeg)

[Next page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125.md?page=2)