please help configuring serial studio for my raw biary file

[AnnabellePundaky]

Hi! I am trying to set up serial studio to process and visualize raw binary data that is transmitted via a radio connected to the usb serial port of my laptop. I am having issues with setting up the project editor/parse function to correctly read the incoming raw binary data and would appreciate any advice i could get on how to do it. attached below is the structure for the raw binary data that is transmitted :

// this struct collects info per timestep
typedef struct {
	unsigned short acid = 0; // id of the aircraft
	unsigned short lognum = 0; // log number
	unsigned char rug3isfresh = 0; /
	unsigned char isauto = 0; 

	uint32_t week; 
	double timeofweek;
	uint32_t insstatus; 
	uint32_t hdwstatus;
	float euler[3]; // Euler rpy, rad
	float vned[3]; // Velocity NED m/s
	double lla[3]; // WGS84 latitude, longitude, height 

	double timeon; 
	float bar; 
	float mslbaro; 
	float tempbaro; 
	float humidity; 

	float unixtime; 
	float vair; 
	unsigned short rcpwm[6]; 

	// following are the controls and actuation-related params
	float vtgt, cogtgt, phitgt;
	float cog, gamma;
	float htgt, gamtgt, thetatgt;
	unsigned int activefpidx, tgtwpidx;

	float ctrl[4]; // aile, elev, throt, rudd
	
    float echoctrl[4]; // echo of ctrl[4]
    unsigned short pwmout[4]; // pwm generated by the pico board, based on ctrl	
} subscale_t;
#pragma pack(pop)

[alex-spataru]

Hi!

I think this problem can be solved with the following steps. I highly recommend reading the dataflow section in the wiki to make everything easier to understand and follow.

Step 1: Configure Serial Studio for “Project Mode”

Ensure Serial Studio is set up to parse data using “Project Mode.” You can read about the different operation modes here.

Step 2: Create a New Project and Configure Data Conversion

• Click on the "Project Editor" button in the toolbar.
• Create a new project and set data conversion to Hexadecimal.
• Before passing received data to the frame parser function, Serial Studio can optionally convert input data into a suitable format to pass as an argument (frame parameter) to the JavaScript function.

Step 3: Set Frame Start/End Delimiters

• Configure an appropriate frame start/end sequence or delimiter.
• Optionally, Serial Studio can parse incoming data bursts directly, but it might or might not work as expected depending on a variety of factors such as the serial port driver, baud rate, and transmission intervals. More details can be found here.

Step 4: Write a Frame Parser Function

The frame parser function converts an input string from the serial port into an array for populating Serial Studio dashboard widgets.
A starting point for hexadecimal/binary data is:

function parse(frame) {
    // Split the hex string into an array of byte values
    let bytes = [];
    for (let i = 0; i < frame.length; i += 2) {
        let byte = parseInt(frame.substring(i, i + 2), 16);
        bytes.push(byte);
    }
    return bytes;
}

The code above will simply convert any binary input data into an array with the numerical values for each byte. For your usage case, it might be a bit more complicated since the different data types in your structure will require different number of bytes (e.g. float might need 4 bytes, while unsigned char will only use one byte).

Step 5: Encoding Data on the Microcontroller

You can totally skip this step if you already implemented it, just adding how I might do it:

void encodeAndSendData(subscale_t *data) {
    uint8_t buffer[256]; 
    uint8_t *ptr = buffer;

    // Pack fields into the buffer
    // Optional: add a frame starting sequence
    memcpy(ptr, &data->acid, sizeof(data->acid)); 
    ptr += sizeof(data->acid);
    memcpy(ptr, &data->lognum, sizeof(data->lognum)); 
    ptr += sizeof(data->lognum);
    memcpy(ptr, &data->rug3isfresh, sizeof(data->rug3isfresh)); 
    ptr += sizeof(data->rug3isfresh);
    memcpy(ptr, &data->isauto, sizeof(data->isauto)); 
    ptr += sizeof(data->isauto);
    memcpy(ptr, &data->week, sizeof(data->week)); 
    ptr += sizeof(data->week);
    memcpy(ptr, &data->timeofweek, sizeof(data->timeofweek)); 
    ptr += sizeof(data->timeofweek);
    // Repeat for other fields...
    // Optional: add a frame end sequence (e.g. \n).

    // Send the buffer through the serial port...
}

Step 6: Revised Frame Parser for Serial Studio

Here’s an (untested) JavaScript parser function that decodes the packed data sent from the microcontroller. As you might notice, we retain the first part of the initial hexadecimal parsing function to build an array of bytes...the rest of the function focuses on extracting data from the byte array and "reconstructing" the data types in your C-structure.

function parse(frame) {
    let bytes = [];
    for (let i = 0; i < frame.length; i += 2) {
        let byte = parseInt(frame.substring(i, i + 2), 16);
        bytes.push(byte);
    }

    let index = 0;
    let acid = (bytes[index++] << 8) | bytes[index++];
    let lognum = (bytes[index++] << 8) | bytes[index++];
    let rug3isfresh = bytes[index++];
    let isauto = bytes[index++];
    let week = (bytes[index++] << 24) | (bytes[index++] << 16) | (bytes[index++] << 8) | bytes[index++];
    let timeofweek = bytesToDouble(bytes, index); index += 8;
    let insstatus = (bytes[index++] << 24) | (bytes[index++] << 16) | (bytes[index++] << 8) | bytes[index++];
    let hdwstatus = (bytes[index++] << 24) | (bytes[index++] << 16) | (bytes[index++] << 8) | bytes[index++];
    // Decode other fields similarly...

    return [
        acid,
        lognum,
        rug3isfresh,
        isauto,
        week,
        timeofweek,
        insstatus,
        hdwstatus,
        // Add the rest of the parsed data fields
    ];
}

function bytesToDouble(bytes, offset) {
    let buffer = new ArrayBuffer(8);
    let view = new Uint8Array(buffer);
    for (let i = 0; i < 8; i++) {
        view[i] = bytes[offset + i];
    }
    return new Float64Array(buffer)[0];
}

Note: You can use console.log() to validate your data/byte conversions or debug your frame parser code. Any logged data will appear in the console widget within Serial Studio.

Also, I highly recommend setting the Console display mode to Hexadecimal. This avoids potential crashes that can occur when Serial Studio tries to display binary data as readable characters in the console widget:

Step 7: Register Groups and Widgets

Finally, create groups and widgets that correspond to the data parsed. Ensure that the array indices in your datasets match the indices in the parser function.

Please let me know if this helps you!

[AnnabellePundaky]

thank you so much, this is the script i ended up writing:

`function parse(frame) {
// 1) Convert the incoming hex string into a byte array
console.log("Received frame (hex):", frame);

let bytes = [];
for (let i = 0; i < frame.length; i += 2) {
    let hexStr = frame.substring(i, i + 2);
    let val    = parseInt(hexStr, 16);
    bytes.push(val);
}
console.log("Converted to bytes array:", bytes);

// 2) Verify the total frame length is exactly 205 bytes
if (bytes.length !== 205) {
    console.log("Error: expected 205 bytes, got", bytes.length);
    return [];
}
console.log("Frame length is correct (205 bytes).");

// 3) Check the start delimiter: 'G' (0x47), 'A' (0x41)
if (bytes[0] !== 0x47 || bytes[1] !== 0x41) {
    console.log("Error: invalid start delimiter, expected 0x47 0x41, got:", 
                bytes[0].toString(16), bytes[1].toString(16));
    return [];
}
console.log("Header 'GA' is valid.");

// 4) Skip the 5‑byte header
let idx = 5;
console.log("Skipping 5-byte header, starting payload parse at index:", idx);

//
// 5) Parse each variable of interest from the payload (little-endian)
//

// acid (unsigned short)
let acid = parseU16LE(bytes, idx);
idx += 2;
console.log("acid =", acid);

// lognum (unsigned short)
let lognum = parseU16LE(bytes, idx);
idx += 2;
console.log("lognum =", lognum);

// rug3isfresh (unsigned char)
let rug3isfresh = parseU8(bytes, idx);
idx += 1;
console.log("rug3isfresh =", rug3isfresh);

// isauto (unsigned char)
let isauto = parseU8(bytes, idx);
idx += 1;
console.log("isauto =", isauto);

// week (uint32_t)
let week = parseU32LE(bytes, idx);
idx += 4;
console.log("week =", week);

// timeofweek (double)
let timeofweek = parseDoubleLE(bytes, idx);
idx += 8;
console.log("timeofweek =", timeofweek);

// insstatus (uint32_t)
let insstatus = parseU32LE(bytes, idx);
idx += 4;
console.log("insstatus =", insstatus);

// hdwstatus (uint32_t)
let hdwstatus = parseU32LE(bytes, idx);
idx += 4;
console.log("hdwstatus =", hdwstatus);

// euler[3] (float)
let euler = [];
for (let i = 0; i < 3; i++) {
    let val = parseFloatLE(bytes, idx);
    euler.push(val);
    idx += 4;
}
console.log("euler =", euler);

// vned[3] (float)
let vned = [];
for (let i = 0; i < 3; i++) {
    let val = parseFloatLE(bytes, idx);
    vned.push(val);
    idx += 4;
}
console.log("vned =", vned);

// lla[3] (double)
let lla = [];
for (let i = 0; i < 3; i++) {
    let val = parseDoubleLE(bytes, idx);
    lla.push(val);
    idx += 8;
}
console.log("lla =", lla);

// timeon (double)
let timeon = parseDoubleLE(bytes, idx);
idx += 8;
console.log("timeon =", timeon);

// bar, mslbaro, tempbaro, humidity (float each)
let bar      = parseFloatLE(bytes, idx); idx += 4;
let mslbaro  = parseFloatLE(bytes, idx); idx += 4;
let tempbaro = parseFloatLE(bytes, idx); idx += 4;
let humidity = parseFloatLE(bytes, idx); idx += 4;
console.log("bar =", bar, "mslbaro =", mslbaro, "tempbaro =", tempbaro, "humidity =", humidity);

// unixtime, vair (float each)
let unixtime = parseFloatLE(bytes, idx); idx += 4;
let vair     = parseFloatLE(bytes, idx); idx += 4;
console.log("unixtime =", unixtime, "vair =", vair);

// rcpwm[6] (unsigned short)
let rcpwm = [];
for (let i = 0; i < 6; i++) {
    let val = parseU16LE(bytes, idx);
    rcpwm.push(val);
    idx += 2;
}
console.log("rcpwm =", rcpwm);

// vtgt, cogtgt, phitgt (float)
let vtgt   = parseFloatLE(bytes, idx); idx += 4;
let cogtgt = parseFloatLE(bytes, idx); idx += 4;
let phitgt = parseFloatLE(bytes, idx); idx += 4;
console.log("vtgt =", vtgt, "cogtgt =", cogtgt, "phitgt =", phitgt);

// cog, gamma (float)
let cog   = parseFloatLE(bytes, idx); idx += 4;
let gamma = parseFloatLE(bytes, idx); idx += 4;
console.log("cog =", cog, "gamma =", gamma);

// htgt, gamtgt, thetatgt (float)
let htgt     = parseFloatLE(bytes, idx); idx += 4;
let gamtgt   = parseFloatLE(bytes, idx); idx += 4;
let thetatgt = parseFloatLE(bytes, idx); idx += 4;
console.log("htgt =", htgt, "gamtgt =", gamtgt, "thetatgt =", thetatgt);

// activefpidx, tgtwpidx (uint32_t)
let activefpidx = parseU32LE(bytes, idx); idx += 4;
let tgtwpidx    = parseU32LE(bytes, idx); idx += 4;
console.log("activefpidx =", activefpidx, "tgtwpidx =", tgtwpidx);

// ctrl[4] (float)
let ctrl = [];
for (let i = 0; i < 4; i++) {
    let val = parseFloatLE(bytes, idx);
    ctrl.push(val);
    idx += 4;
}
console.log("ctrl =", ctrl);

// echoctrl[4] (float)
let echoctrl = [];
for (let i = 0; i < 4; i++) {
    let val = parseFloatLE(bytes, idx);
    echoctrl.push(val);
    idx += 4;
}
console.log("echoctrl =", echoctrl);

// pwmout[4] (unsigned short)
let pwmout = [];
for (let i = 0; i < 4; i++) {
    let val = parseU16LE(bytes, idx);
    pwmout.push(val);
    idx += 2;
}
console.log("pwmout =", pwmout);

// Final debug:
console.log("Finished parsing frame; total consumed bytes from payload:", idx - 5);

//
// Return the parsed fields in an array
//
return [
    acid,         // index 0
    lognum,       // index 1
    rug3isfresh,  // index 2
    isauto,
    week,
    timeofweek,
    insstatus,
    hdwstatus,
    euler[0],     // index 10
    euler[1],
    euler[2],
    vned[0],
    vned[1],
    vned[2],
    lla[0],
    lla[1],
    lla[2],
    timeon,
    bar,
    mslbaro,
    tempbaro,
    humidity,
    unixtime,
    vair,
    rcpwm[0],     // index 26
    rcpwm[1],
    rcpwm[2],
    rcpwm[3],
    rcpwm[4],
    rcpwm[5],     // index 31
    vtgt,
    cogtgt,
    phitgt,
    cog,
    gamma,
    htgt,
    gamtgt,
    thetatgt,
    activefpidx,
    tgtwpidx,
    ctrl[0],      // index 42
    ctrl[1],
    ctrl[2],
    ctrl[3],      // index 45
    echoctrl[0],
    echoctrl[1],
    echoctrl[2],
    echoctrl[3],  // index 49
    pwmout[0],
    pwmout[1],
    pwmout[2],
    pwmout[3]     // last index
];

}

// -------------------------------------------------------------------------
// HELPER FUNCTIONS (little-endian parsing) + optional debug console logs
// -------------------------------------------------------------------------
function parseU16LE(bytes, offset) {
// Two-byte unsigned integer (little-endian)
let result = (bytes[offset] & 0xFF) | ((bytes[offset + 1] & 0xFF) << 8);
// console.log(parseU16LE @${offset}:, result);
return result;
}

function parseU8(bytes, offset) {
// One-byte unsigned integer
let result = bytes[offset] & 0xFF;
// console.log(parseU8 @${offset}:, result);
return result;
}

function parseU32LE(bytes, offset) {
// Four-byte unsigned integer (little-endian)
let result =
(bytes[offset] & 0xFF) |
((bytes[offset + 1] & 0xFF) << 8) |
((bytes[offset + 2] & 0xFF) << 16) |
((bytes[offset + 3] & 0xFF) << 24);
// console.log(parseU32LE @${offset}:, result);
return result;
}

function parseDoubleLE(bytes, offset) {
let buffer = new ArrayBuffer(8);
let view = new Uint8Array(buffer);
for (let i = 0; i < 8; i++) {
view[i] = bytes[offset + i];
}
let result = new Float64Array(buffer)[0];
// console.log(parseDoubleLE @${offset}:, result);
return result;
}

function parseFloatLE(bytes, offset) {
let buffer = new ArrayBuffer(4);
let view = new Uint8Array(buffer);
view[0] = bytes[offset];
view[1] = bytes[offset + 1];
view[2] = bytes[offset + 2];
view[3] = bytes[offset + 3];
let result = new Float32Array(buffer)[0];
// console.log(parseFloatLE @${offset}:, result);
return result;
}
`