@purnima,
Could you please answer all of my 3 questions above, 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,
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,
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, …
@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
@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..
Then the keys are displayed for locations where they are available:
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...
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.
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.
@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.
@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..
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
@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:
Then you can draw your heatmap on top of it, with following result in your dashboard:
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?
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.
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
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.
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 readmefile 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
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?
Indeed it will open the gates for interesting use cases ...
). So would like to release the heatmap node as soon as possible, so I can restart my camera developments for Node-RED again...
