Events to Send

You can send the following events to the SDK via WebSocket:

Event	Description
getFirmVersion	Retrieve the firmware version
read	Read event (key event, knob event, background image setting success event, all events will be sent before reading begins. It only needs to be sent once after connection)
setBackgroundImg	Set the background image (different devices may have different background images)
setBackgroundImgData	Set the background image using byte data (different devices may have different background images)
clearAllIcon	Clear all button icons (recommended to send this event before setting icons to clear the background image)
clearIcon	Clear a specific button icon
setKeyImg	Set an icon for a specific button (icon size may vary by device)
setKeyImgData	Set an icon for a specific button using byte data (icon size may vary by device)
setBrightness	Set the device brightness (0-100)
refresh	Refresh the device (icons will display after refresh; the SDK already calls this by default)

getFirmVersion

Retrieve the firmware version (in base64 format)

{
    "event": "getFirmVersion",
    "path": path
}

Member	Description
event	getFirmVersion
path	Device path (unique ID)

read

Read events (key events and knob events will only start reading after this event is sent). It is recommended to send this event directly after the websocket is connected to start event monitoring. When the device is disconnected, it will automatically stop monitoring.

{
    "event":"read",
    "path":path
} 

Member	Description
event	read
path	Device path (unique identifier, device connection event acquisition)

setBackgroundImg

Set the background image (the background image may be different for different devices). During the process of setting the background image, no other events can be sent, otherwise the screen may be distorted. You need to receive the background image setting success event before sending other events (the background image setting success event needs to be sent after the read event is sent, so the read event needs to be sent before setBackgroundImg)

{
    "event":"setBackgroundImg",
    "path":path,
    "payload":{
        "url":"E:\\img\\bg.jpg"
    }
} 

Member	Description
event	setBackgroundImg
path	Device path (unique identifier, device connection event acquisition)
payload	JSON object

The payload object contains the following members:

payload	Description
url	The address of the background image to be set (293V2\293V3\N4 background image size: 800×480, N3 background image size: 320×240)

setBackgroundImgData

Set the background image through byte data (the background image may be different for different devices). Do not send other events during the background image setting process, otherwise the screen may be distorted. You need to receive the background image setting success event before sending other events (the background image setting success event needs to be sent after the read event is sent, so the read event needs to be sent before setBackgroundImgData)

{
    "event":"setBackgroundImgData",
    "path":path,
    "payload":{
        "imgData":base64String
    }
} 

Member	Description
event	setBackgroundImgData
path	Device path (unique identifier, device connection event acquisition)
payload	JSON object

The payload object contains the following members:

payload	Description
imgData	RGB byte array in bsae64 format to be set (293V2\293V3\N4 background image size: 800×480, N3 background image size: 320×240)

Example:

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 800
canvas.height = 480

ctx.fillStyle = "pink";
ctx.fillRect(0, 0, 800, 480);
ctx.font = `${100}px'YaHei'`;
ctx.fillStyle = "white";
ctx.fillText("TEST", 150, 100);

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const byteArray = imageData.data; // Get byte array

// Convert RGBA to RGB (RGB channels are used in SDK)
const rgbByteArray = [];
for (let i = 0; i < byteArray.length; i += 4) {
    rgbByteArray.push(byteArray[i+2], byteArray[i+1], byteArray[i]);
}

// Convert RGB byte array to Base64
function byteArrayToBase64(byteArray) {
    let binary = '';
    for (let i = 0; i < byteArray.length; i++) {
        binary += String.fromCharCode(byteArray[i]);
    }
    return btoa(binary); // Convert a binary string to Base64
}

const base64String = byteArrayToBase64(rgbByteArray);
const data = {
    "event": "setBackgroundImgData",
    "path": path,
    "payload": {
        "imgData": base64String,
    }
};
ws.send(JSON.stringify(data));

clearAllIcon

Clear all button icons (it is recommended to send this event to clear the background image before setting the icon)

{
    "event":"clearAllIcon",
    "path":path
} 

Member	Description
event	clearAllIcon
path	Device path (unique identifier, device connection event acquisition)

clearIcon

Clear a button icon

{
    "event":"clearIcon",
    "path":path,
    "payload":{
        "key":1
    }
} 

Member	Description
event	clearIcon
path	Device path (unique identifier, device connection event acquisition)
payload	JSON object

The payload object contains the following members:

payload	Description
key	Key number starts from 1

setKeyImg

Set a key icon (different device icon sizes are different)

{
    "event":"setKeyImg",
    "path":path,
    "payload":{
        "url":"E:\\img\\icon.jpg",
        "key":1,
        "refresh":false
    }
} 

Member	Description
event	setKeyImg
path	Device path (unique identifier, device connection event acquisition)
payload	json object

The payload object contains the following members:

payload	Description
url	Address of the key icon to be set
key	The key sequence to be set starts from 1
refresh	Whether to refresh the display, optional parameter, refresh the display by default, if set to false, you need to call the refresh event to refresh the display (mainly used to batch set pictures to refresh all displays at once)

TIP

293V2 image size: 100×100

293V3 image size: 112×112

N3 image size: 64×64

N4 image size: 112×112 (key), 176×112 (secondary screen)

setKeyImgData

Set a key icon through byte data (icon sizes are different for different devices)

{
    "event":"setKeyImgData",
    "path":path,
    "payload":{
        "imgData":base64String,
        "key":1,
        "refresh":false
    }
} 

Member	Description
event	setKeyImgData
path	Device path (unique identifier, device connection event acquisition)
payload	JSON object

The payload object contains the following members:

payload	Description
imgData	RGB byte array in bsae64 format of the key icon to be set
key	The key sequence to be set starts from 1
refresh	Whether to refresh the display, optional parameter, refresh the display by default, if set to false, you need to call the refresh event to refresh the display (mainly used to batch set pictures to refresh all displays at once)

TIP

293V2 image size: 100×100

293V3 image size: 112×112

N3 image size: 64×64

N4 image size: 112×112 (key), 176×112 (secondary screen)

Example:

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = canvas.height = 100;

ctx.fillStyle = "black";
ctx.fillRect(0, 0, 100, 100);

ctx.font = `${35}px'YaHei'`;
ctx.fillStyle = "white";
ctx.fillText("tExt", 0, 50);

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const byteArray = imageData.data; // Get byte array

// Convert RGBA to RGB (RGB channels are used in SDK)
const rgbByteArray = [];
for (let i = 0; i < byteArray.length; i += 4) {
    rgbByteArray.push(byteArray[i+2], byteArray[i+1], byteArray[i]);
}

// Convert RGB byte array to Base64
function byteArrayToBase64(byteArray) {
    let binary = '';
    for (let i = 0; i < byteArray.length; i++) {
        binary += String.fromCharCode(byteArray[i]);
    }
    return btoa(binary); // Convert a binary string to Base64
}

const base64String = byteArrayToBase64(rgbByteArray);
const data = {
    "event": "setKeyImgData",
    "path": path,
    "payload": {
        "imgData": base64String,
        "key": 15
    }
};
ws.send(JSON.stringify(data))

setBrightness

Set device brightness (0-100)

{
    "event":"setBrightness",
    "path":path,
    "payload":{
        "brightness":100
    }
} 

Member	Description
event	setBrightness
path	Device path (unique identifier, device connection event acquisition)
payload	JSON object

The payload object contains the following members:

payload	Description
brightness	Brightness (0-100)

refresh

Refresh the device (refresh after setting the icon, it has been called by default in the SDK)

{
    "event":"refresh",
    "path":path
} 

Member	Description
event	refresh
path	Device path (unique identifier, device connection event acquisition)