# 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:** 3

<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 April 2019 11:00 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/41 "2019-04-23T11:00:22Z")

</div>

> [@purnima](#):
>
> @BartButenaerssir , i have number of ip addresses . so i generated the latitude and longitude for these ip addresses , now i want to display a heat map which shows the coordinates .

@purnima,  
Could you please answer all of my 3 questions [above](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/32), to make sure I understand your request correctly (especially a sketch of the desired layout). I have not much spare time, so I would like to use it as efficient as possible ...

> [@Miliks](#):
>
> something like this

@Miliks,  
Thanks for the screenshots! I could add two settings on the config screen:

- Show id's in the heatmap (instead of values)
- Show id's in the legend (instead of values)

To add the dates on the left is quite some work, and I have to much other things to do. But you are Always welcome to create a pull request (if you have a general reusable solution).

> [@dceejay](#):
>
> indeed - I was just thinking that if the key was on the map it would show where they are directly.

@dceejay,  
Thanks for your assistance!!  
Currently the input of my node is an array of numbers.  
But now I should also be able to have key/value pairs (id/number)...  
How would you implement that? Using a Javascript Map object, or two separate arrays, or a two-dimensional array, …

---

<div class="post-metadata">

**Author:** ![Miliks](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/miliks/32/7598_2.png) [@Miliks](https://discourse.nodered.org/u/Miliks)\
**Post date:** [23 April 2019 11:13 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/42 "2019-04-23T11:13:57Z")

</div>

@BartButenaers

> @BartButenaers  
> Show id's in the heatmap (instead of values)  
> Show id's in the legend (instead of values)

Do u mean key as id?  
Honestly i didn't get the significance of the numbers showed up on the line below.

About the dates on the left u r right, too much work and could be done in other way, so if u change configuration to add the key would be great! I'd be happy to help, but i'm just newbe and not so good to push my code to your, once i improve my knowladge for sure i'll be happy to contribute.  
thanks a lot in advance,  
Mila

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [23 April 2019 11:37 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/43 "2019-04-23T11:37:29Z")

</div>

@BartButenaers, if you did it on the map (select for labels instead of values) - then I would still expect an array but an array of objects - and allow them to be intermingled... so not all positions had a label. so something like `[{"id1":5}, 10, 25, {"id4":8}, ...]` would then just show the labels id1 and id4 - I could imagine people just adding labels to significant points like corners etc, any missing labels would be blank.

I'm still not sure how the legend works/makes sense under the map when it is 2d with say 10x10 = 100 entries..

---

<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:** [24 April 2019 20:44 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/44 "2019-04-24T20:44:59Z")

</div>

@Miliks,

- I have replaced (in my local test version) the two checkboxes by dropdowns:

- Each dropdown allows you to specify what needs to be displayed:

- The original checkbox values are converted to new dropdown values (_unchecked_ =\> '_None_' && _checked_ =\> '_Values_'), to have no impact on existing flows.

### First dropdown (what to show on top of heatmap)

When I inject following test matrix (like @dceejay proposed):

```auto
[{ key0: 29 }, 89, { key2: 81 }, 27, { key4: 34 }, 44, { key6: 76 }, 58, { key8: 93 }, ...]

```

Then the keys are displayed for locations where they are available:

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

I think that would be sufficient for your needs?

### Second dropdown (what to show in legend)

It is not clear to me how to show the keys in the legend.  
Currently (when showing the values) it works like this:

- The user specifies how many values (N) need to be displayed in the legend
- I calculate (N-2) values between the minimum and maximum values (interpolation)
- Then I calculate the colors of those (N-2) values, based on the colors of the minimum and maximum values (interpolation)
- At last all N values are displayed with their color: minvalue ... maxvalue

But suppose I have a 5 x 5 grid, where each cell has a key. Displaying those keys on the heatmap is no problem, but:

- I cannot display 25 values in the legend due to space limitations.
- And I cannot interpolate those keys to calculate 'intermediate keys'.
- And if I would allow a user to specifiy the number of keys in a legend, which keys (from the 25 available keys) would I have to select...
- Suppose I need to display 5 keys (from the 25 available keys), then I could display every 5-th key. But in the input array, the first 20 values could be key-less and only the last 5 values could have a key. In that case I would only draw in the legend the keys of the numeric values closest to the max value. So I wouldn't have a linear legend anymore...

---

<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:** [25 April 2019 06:33 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/45 "2019-04-25T06:33:16Z")

</div>

i want heat map as you had shown above but i want instead of displaying numbers ,it should display my latitude and longitude which i will define in the inject node in json format . i have ip addresses and try to track them using their coordinates and information.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [25 April 2019 07:33 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/46 "2019-04-25T07:33:39Z")

</div>

Bart,

Going back to basics surely the legend is supposed to indicate what each colour means (or the range means) - so that you then don't have to put the value numbers on the grid. IE you can work out that red means 30C not 100C or something .

Putting keys in the legend makes no sense (to me) as they have no correlation to the colour, the value (as two could have the same value) - or the location (as they are detached floating beneath the map). If someone want to print a table of labels and values then this is not the node you are looking for.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [25 April 2019 07:39 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/47 "2019-04-25T07:39:58Z")

</div>

@purnima It would be possible to do that but you will need to manipulate your data first - the map takes an array of all the data you wish to display in one go - so you need to accumulate that yourself first (ie all the positions of all the objects in one large array. To do this sensibly with this widget you would need to divide the world into "squares" so as not to have too large an array - so say the world is -180to180 and -90 to 90 degrees - you could scale that to a 36 x 18 array quite easily.  
The colour then depends on the value in that "square" - so what is going to generate that in your instance ? - number of things in that square ? value of something in that square. ?

But in general this is not really a map in the conventional sense of the word.

---

<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:** [26 April 2019 05:43 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/48 "2019-04-26T05:43:52Z")

</div>

Is it possible to add the background image instead of background color in heat map node?

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [26 April 2019 06:27 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/49 "2019-04-26T06:27:37Z")

</div>

then it isn’t a heat map

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [26 April 2019 06:45 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/50 "2019-04-26T06:45:45Z")

</div>

So, change the name to something more generic. The more options the better. This is a superb node. Kudos @BartButenaers

---

<div class="post-metadata">

**Author:** ![Miliks](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/miliks/32/7598_2.png) [@Miliks](https://discourse.nodered.org/u/Miliks)\
**Post date:** [26 April 2019 08:55 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/51 "2019-04-26T08:55:41Z")

</div>

@BartButenaers Thanks a lot, is there any way to get updated version of this node to test it with my data?  
Coming back to the discussion on the drawing data on the graph or legend, i was thinking about something like this (i made it using javascript heatmap lib), and for sure i can do the same using the node red template node writing the code, but if it would be possible to integrate this funcionality into the node red and allow to draw it without writing any line of the code.. 🙂

 ![immagine](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/ddce710111cbfe9b94d85ae14d5f55f0576ee725.png)  
For my scope i would need even one raw only, with different columns, then it could depend on the aggregation mode.  
And i agree with @dceejay, there is no need to draw the key on the map, but below the graph as on image. Legend suppose to explain u the meaning of colors.  
Thansk again for your effort!  
Mila

---

<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 May 2019 22:33 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/52 "2019-05-19T22:33:45Z")

</div>

I'm back with some delay ...

> [@purnima](#):
>
> Is it possible to add the background image instead of background color in heat map node?

@purnima: The moment I started developing this node, I knew that somebody would ask this feature 🙄 Indeed it will open the gates for interesting use cases ...

I have added (to my local test version) a '_background_' setting, where you can select a.o. an image. Currently you should send a message with `msg.image` containing a base64 encoded image:

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

Then you can draw your heatmap on top of it, with following result in your dashboard:

![heatmap_background](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/ced106895706d1018bb234eb7c4dde67c8476b5f.gif)

So a message can have one of following properties (or both in a single message):

- `msg.payload`: containing the array for the heatmap
- `msg.image`: containing the base64 encoded image (which will be stretched automatically to fit the heatmap). This message only needs to be send once, unless you want to show another image.

Does this makes sense, or does anybody have any improvements?

---

<div class="post-metadata">

**Author:** ![RiccMazz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/riccmazz/32/8561_2.png) [@RiccMazz](https://discourse.nodered.org/u/RiccMazz)\
**Post date:** [20 May 2019 14:09 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/53 "2019-05-20T14:09:36Z")

</div>

Hello everyone,  
I am new in this thread. Thanks @BartButenaers for sharing your work.  
I have been playing with the heatmap node for a while although, having made some wrong assumption, it took me a while to make it work. I will post separately my hints to make user's life easier.  
A few words about the background image: it is almost a must for most applications. In my case I need to show, both statically and dynamically people tracking and dwell time in Regions of Interest (RoI); in this case it is fundamental to show either the floorplan or a photo of the monitored area.  
Think, for instance, of the shelves of a supermarket's aisle.  
So, I very much look forward to test the version with the background image.  
Thanks again.

---

<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 May 2019 14:33 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/54 "2019-05-20T14:33:32Z")

</div>

> [@RiccMazz](#):
>
> having made some wrong assumption, it took me a while to make it work. I will post separately my hints to make user's life easier.

Hi Riccardo (@RiccMazz), thanks for the feedback! If the readme page contains incorrect or incomplete info, please let me know how to improve it. The last thing I want, is confusing the users...  
Bart

---

<div class="post-metadata">

**Author:** ![RiccMazz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/riccmazz/32/8561_2.png) [@RiccMazz](https://discourse.nodered.org/u/RiccMazz)\
**Post date:** [20 May 2019 14:54 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/56 "2019-05-20T14:54:47Z")

</div>

> [@ukmoose](#):
>
> then it isn’t a heat map

Why not!? It is, indeed!  
Maybe we give different meaning to words...  
In CCTV applications semi-transparent heatmaps are always superimposed on video or snapshots. Search CCTV heatmap or retail heatmap and you'll see many examples.

---

<div class="post-metadata">

**Author:** ![RiccMazz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/riccmazz/32/8561_2.png) [@RiccMazz](https://discourse.nodered.org/u/RiccMazz)\
**Post date:** [20 May 2019 15:21 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/57 "2019-05-20T15:21:18Z")

</div>

> [@purnima](#):
>
> can we create a heat map which will show the number of peoples available in the particular area by using any sensors and cloud database??

Yes, it is possible. This is what we do at Enliteon using 3D cameras.

---

<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 May 2019 22:11 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/58 "2019-05-23T22:11:00Z")

</div>

@RiccMazz, @purnima,

I have implemented a new version ( **2.1.0** ) on Github, which you can install directly from Github like this:

```auto
npm install bartbutenaers/node-red-contrib-ui-heatmap

```

Would be nice if somebody could test it. If it works fine, I will publish it afterwards on NPM.

This version contains a number of updates:

- The **readme** [file](https://github.com/bartbutenaers/node-red-contrib-ui-heatmap) has been updated with lots of extra information, to explain better how it works. Hopefully it is now better documented ...
- All **example flows** from the readme page have been updated for this new version, and should all be available via the menu of the flow editor.
- The `msg.payload` input can now contain different **formats** : an array of numbers, an array of key/value pairs or a mix of both (thanks to the tip from @dceejay).
- It is now possible to draw **on top** of the heatmap: nothing / numeric values / keys.
- It is possible to show a **background image** via `msg.image`, which will be stretched automatically to fill the entire heatmap widget.
- The **validations** of the input matrix have been moved from the client-side (dashboard) to the server-side (flow), to make it easier for users to determine whether their input is incorrect (by looking in the Node-RED log).

And after a couple of months my Onvif camera has finally arrived, after the Customs department had released it (and me having to pay 45 euros extra 🤬). So would like to release the heatmap node as soon as possible, so I can restart my camera developments for Node-RED again...  
Bart

---

<div class="post-metadata">

**Author:** ![DragonPigGQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dragonpiggq/32/14528_2.png) [@DragonPigGQ](https://discourse.nodered.org/u/DragonPigGQ)\
**Post date:** [25 May 2019 10:24 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/60 "2019-05-25T10:24:04Z")

</div>

Hi, i have encountered this problem whereby my heat map is not showing in the UI page. I used the sample code provided in this url: **[https://github.com/bartbutenaers/node-red-contrib-ui-heatmap/blob/master/README.md](https://github.com/bartbutenaers/node-red-contrib-ui-heatmap/blob/master/README.md)**. but my heat map is just not showing up. Anybody can help me please T.T !

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/2f2230992cad9a762f9193fa045c85737b4632d4.png)  
My flow, temperature gauge and the heatmap

 ![Capture12323](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/2e0b853f46851d47d7da6133e46177e8cfc6a508.png)  
My UI page only show the temperature gauge but does not show the Heatmap UI

I received this error every time when I deploy the flow:  
5/25/2019, 7:08:09 PM[node: heatmap](http://gq.local/#)msg : error

"TypeError: Cannot read property 'push' of undefined"

---

<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 May 2019 11:44 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/61 "2019-05-25T11:44:23Z")

</div>

Hi @DragonPigGQ,  
On my pc it is running fine ...  
Some questions:

- Did you install my version from Github (via `npm install bartbutenaers/node-red-contrib-ui-heatmap`)? This new version is NOT available on NPM yet (so **don't** use `npm install node-red-contrib-ui-heatmap` to test the new functionalities).
- Did you change anything to my example flow? I have copied it again from Github to make sure, but it works here correctly.
- You say you get the error when you deploy the flow? Or is it when you press the inject button?

Bart

---

<div class="post-metadata">

**Author:** ![DragonPigGQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dragonpiggq/32/14528_2.png) [@DragonPigGQ](https://discourse.nodered.org/u/DragonPigGQ)\
**Post date:** [25 May 2019 15:08 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-heatmap-beta-release/8125/62 "2019-05-25T15:08:19Z")

</div>

Hello Bart,  
Thanks for your fast reply!

1. I installed it through the Manage Palette like the following picture.  

2. I only changed the UI display group.

3. I have the "TypeError: Cannot read property 'push' of undefined" while I am deploying the flow, i could press the inject button but nothing shows up.

4. Anyway, I am using the older version TheThingBox version 2.6.2, could this affect the UI display?

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

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