Binary Buffer to Graph

[podi62]

Hi all,
I have a binary buffer that comes from a a serial port and looks like this:
buffer[15]
0: 0x0
1: 0x10
2: 0x22
3: 0x33
4: 0x44
5: 0x55
6: 0x66
7: 0x77
8: 0x88
9: 0x99
10: 0xa0
11: 0xb1
12: 0xc2
13: 0xd3
14: 0xff

I need to feed it to a dashboard graph node. I tried reading it as buffer ( m2.data [Buffer.from(msg.payload)] and then writing it in an array in a for loop but the graph won't accept it.
Anyone has done something similar?
Thanks in advance.

[Colin]

This describes the format you need in msg.payload to pre-fill a chart. Look at the section Stored Data. node-red-dashboard/Charts.md at master · node-red/node-red-dashboard · GitHub

[podi62]

Hi Colin, thanks.
I already tried the kine chart and can get an array plotted. For example if I pass this one it works fine.
m2.data = [
[170, 169, 166, 162, 153, 133, 101, 76, 62, 55, 57, 65, 77, 88, 95, 98, 101, 103, 106, 109, 110, 112, 114, 114, 114, 112, 111, 111, 110, 110, 108, 107, 106, 105, 104, 106, 107, 108, 109, 110, 112, 112, 113, 114, 114, 114, 114, 112, 110, 109, 107, 106, 104, 103, 99, 95, 88, 79, 71, 65, 67, 78, 99, 130]
];

My problem is that the value I should get into m2.data from the serial port are in a buffer and I can't get them in a format like the one above to pass to the graph.

[Colin]

@podi62

I already tried the kine chart

What is a kine chart?

[podi62]

typo ... line chart. Or I should have said just chart.

[Colin]

Show us what you are sending to the chart for the one that works.

[podi62]

Here what works.
This is just test data.

m2.labels = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64];
m2.series = [1];
m2.data = [
[170, 169, 166, 162, 153, 133, 101, 76, 62, 55, 57, 65, 77, 88, 95, 98, 101, 103, 106, 109, 110, 112, 114, 114, 114, 112, 111, 111, 110, 110, 108, 107, 106, 105, 104, 106, 107, 108, 109, 110, 112, 112, 113, 114, 114, 114, 114, 112, 110, 109, 107, 106, 104, 103, 99, 95, 88, 79, 71, 65, 67, 78, 99, 130]
];

[Colin]

That isn't what you are giving to the chart, that is is some code from a function node, presumably you then manipulate that into the form required by the chart.
Feed your incoming data into a debug node and show us what it gives.

[podi62]

This is the output of debug node attached to the serial input:
buffer[15]
0: 0x0
1: 0x10
2: 0x22
3: 0x33
4: 0x44
5: 0x55
6: 0x66
7: 0x77
8: 0x88
9: 0x99
10: 0xa0
11: 0xb1
12: 0xc2
13: 0xd3
14: 0xff

I need to transform this in an array of integers to feed to the graph node as the example I've used to test it.

[podi62]

This is my function:
var m2={};

//var dd = String (msg.payload);
m2.labels = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64];
m2.series = [1];
//test data
//m2.data = [
[170, 169, 166, 162, 153, 133, 101, 76, 62, 55, 57, 65, 77, 88, 95, 98, 101, 103, 106, 109, 110, 112, 114, 114, 114, 112, 111, 111, 110, 110, 108, 107, 106, 105, 104, 106, 107, 108, 109, 110, 112, 112, 113, 114, 114, 114, 114, 112, 110, 109, 107, 106, 104, 103, 99, 95, 88, 79, 71, 65, 67, 78, 99, 130]
];

var j;
for (j=0;j < msg.payload.length;j++) {
//m2.data [0][j]= dd.charCodeAt(j) ; // [m2[j]];
m2.data [0][j]= msg.payload[j] ;
}
return {payload:[m2]};

and this is the output if this function and the graph doesn't like it.

[Steve-Mcl]

your function (with the hardcoded data) works for me...

[{"id":"f3242d57.06f4f","type":"ui_chart","z":"553814a2.1248ec","name":"","group":"dce9e7a2.d20c78","order":5,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"x":1550,"y":580,"wires":[[]]},{"id":"20e90dd8.d49882","type":"inject","z":"553814a2.1248ec","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":1240,"y":580,"wires":[["67feff68.ff6d"]]},{"id":"67feff68.ff6d","type":"function","z":"553814a2.1248ec","name":"","func":"var m2 = {};\n\n//var dd = String (msg.payload);\nm2.labels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64];\nm2.series = [1];\n//test data\nm2.data = [\n[170, 169, 166, 162, 153, 133, 101, 76, 62, 55, 57, 65, 77, 88, 95, 98, 101, 103, 106, 109, 110, 112, 114, 114, 114, 112, 111, 111, 110, 110, 108, 107, 106, 105, 104, 106, 107, 108, 109, 110, 112, 112, 113, 114, 114, 114, 114, 112, 110, 109, 107, 106, 104, 103, 99, 95, 88, 79, 71, 65, 67, 78, 99, 130]\n];\n\nvar j;\nfor (j = 0; j < msg.payload.length; j++) {\n    //m2.data [0][j]= dd.charCodeAt(j) ; // [m2[j]];\n    m2.data[0][j] = msg.payload[j];\n}\nreturn { payload: [m2] };\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1400,"y":580,"wires":[["f3242d57.06f4f"]]},{"id":"dce9e7a2.d20c78","type":"ui_group","name":"Object detection","tab":"5132060d.4cde48","order":1,"disp":true,"width":"7","collapse":false},{"id":"5132060d.4cde48","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

can you expand the data[0][...] array = is it filled with numeric values like this...

[podi62]

Hi Steve, yes correct. With the hard coded data it works. It doesn't with the binary payloads I get from the serial port. The array[64] expanded looks like this:
[0 … 9]
0: 0x44
1: 0x55
2: 0x66
3: 0x1
4: 0x22
5: 0x33
6: 0x44
7: 0x55
8: 0x66
9: 0x77

[Steve-Mcl]

can you do 2 things please...

1. paste a screenshot of the debug (expanded so we can see data values in the array)
2. put a debug BEFORE the function and then use the copy button (that appears when you hover over the payload) & paste that into a reply (please use the code formatting button </> then paste between the backticks to preserve code formatting).

[Colin]

Also show us what is coming out of the function node

[podi62]

[68,85,102,1,34,51,68,85,102,119,136,153,160,177,194,211,1,34,51,68,85,102,119,136,153,160,177,194,211,1,34,51,68,85,102,119,136,153,160,177,194,211,51,51,51,51,51,51,51,51,1,34,51,68,85,102,119,136,153,160,177,194,211,255]

This is the input to the function. The buffer that is coming from my serial node

[podi62]

This sis the output of the function

[podi62]

It looks like this is working. Initially I didn't see the graph updating but now it's working.
The following function seems to work properly to decode the binary input from the serial port and send it the the graph node.
Thanks for all your help
var m2={};

//var dd = String (msg.payload);
m2.labels = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64];
m2.series = [1];
m2.data = [
[170, 169, 166, 162, 153, 133, 101, 76, 62, 55, 57, 65, 77, 88, 95, 98, 101, 103, 106, 109, 110, 112, 114, 114, 114, 112, 111, 111, 110, 110, 108, 107, 106, 105, 104, 106, 107, 108, 109, 110, 112, 112, 113, 114, 114, 114, 114, 112, 110, 109, 107, 106, 104, 103, 99, 95, 88, 79, 71, 65, 67, 78, 99, 130]
];

var j;
for (j=0;j < msg.payload.length;j++) {
//m2.data [0][j]= dd.charCodeAt(j) ; // [m2[j]];
m2.data [0][j]= msg.payload[j] ;
}
return {payload:[m2]};