GUI DESIGNS

Examples with included initialization commands show how to create various GUI designs of different complexity levels, based on number of widgets used. 

GUI-O application is able to receive (and send) commands in various communication modes in exactly the same manner. This means that you can start developing with USB or Bluetooth and gradually scale your project to IoT without changing initialization commands or your code logic.

Basic complexity (3 widgets)

Images below show the result after the GUI-O application receives initialization commands (left image) and modification commands (right image).

IMPORTANT NOTE: Every command must be terminated with \r (carriage return) and \n (new line) characters. For the sake of brevity, both characters are omitted in the commands below.

Basic example

Initialization commands

// clear screen (widgets) and set background color

@cls

@guis BGC:#FFFFFF


// create dial widget (visibility set to hidden)

|CB UID:brightness X:50 Y:50 W:90 BTH:5 HAH:8 HAW:8 VIS:0 STA:135 ENA:45 FGC:#000000 SFGC:#FFFF00 BGC:#CBCBCB


// create image (download from web resource)

|IM UID:light_off X:50 Y:50 IP:"https://i.imgur.com/3VbsS0Z.png" VIS:1


// create another image (download from web resource, visibility set to hidden)

|IM UID:light_on X:50 Y:50 IP:"https://i.imgur.com/gNdck9A.png" VIS:0

Web resources are downloaded and shown automatically, if internet connectivity is available. This is necessary only for first initialization - once the resources are downloaded, they are retrieved from local storage. It is also possible to copy resources directly to the local storage and specify the path.

Payload for parameters that require string values must be wrapped in double quote characters by default (e.g., payload of the IP parameters in the code above). In most programming languages (C, C++, Java, Python, etc.), the double quote character should be prefixed by an escape character (i.e., backslash). Note that the wrapping character can be changed (see manual for more information).

Modification commands

// hide "light_off" widget

@light_off VIS:0


// show "ligth_on" widget

@light_on VIS:1


// show "brightness" widget and set its value

@brightness VIS:1 VAL:70


...

After the GUI is initialized, the modification commands can be used to change the properties of the widgets. 

Note that when the user touches any widget that supports user interaction, the GUI-O application sends the corresponding touch event. This event can be used as a trigger to modify the appearance and functionality of the GUI.

Intermediate complexity (10+ widgets)

Image below shows the result after the GUI-O application receives initialization commands.

IMPORTANT NOTE: Every command must be terminated with \r (carriage return) and \n (new line) characters. For the sake of brevity, both characters are omitted in the commands below.

Intermediate example

Initialization commands

// show loading screen

@sls


// clear screen (widgets), set background color and aspect ratio (see manual)

@cls

@guis BGC:#000000 ASR:0.449671


// set background image (download from web resource)

|IM UID:im1 X:50 Y:50 W:100 H:100 ROT:0 SHE:0 VIS:1 OPA:1 SCM:1 PLS:1 IP:"https://i.imgur.com/DotOAd3.jpg"


// create label widget (title display)

|LB UID:lbname X:8 Y:8 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:4 FFA:"font7" TXT:"Thermostat"


// create two label widgets (temperature and humidity display)

|LB UID:lbtemp X:50 Y:32 ALP:0 SHE:1 ROT:0 FGC:#990000 FSZ:4 FFA:"font1" TXT:"24.6°C"

|LB UID:lbhum X:50 Y:38 ALP:0 SHE:1 ROT:0 FGC:#6D9DC5 FSZ:4 FFA:"font1" TXT:"68.5%"


// create dial widget (temperature indicator)

|CB UID:cbt X:50 Y:35 W:70 ROT:0 SHE:1 BGC:#454546 SFGC:#990000 FGC:#454546 VAL:24.6 LVAL:0 HVAL:40 STA:225 ENA:-45 BTH:4 HAW:0 HAH:0 NC:#9C3B29 NT:0.2 CE:0 SHT:1 TXTC:#FFFFFF XTC:2 YTC:1 RCA:1 VIS:1 UD:0 FSZ:1.6 SHN:0 UD:0


// create dial widget (humidity indicator)

|CB UID:cbh X:50 Y:35 W:48 ROT:0 SHE:1 BGC:#454546 FGC:#454546 VAL:68.5 LVAL:0 HVAL:100 STA:225 ENA:-45 BTH:4 HAW:0 HAH:0 NC:#9C3B29 NT:0.2 CE:0 SHT:1 TXTC:#FFFFFF XTC:2 YTC:1 RCA:1 VIS:1 UD:0 FSZ:0 SHN:0 UD:0


// create label widgets (outside temperature and pressure)

|LB UID:lbnameo X:8 Y:85 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:4 FFA:"font7" TXT:"Outside"

|LB UID:lbtempo X:30 Y:95 ALP:0 SHE:1 ROT:0 FGC:#FFFFFF FSZ:2 FFA:"font2" TXT:"12°C"

|LB UID:lbpress X:70 Y:95 ALP:0 SHE:1 ROT:0 FGC:#FFFFFF FSZ:2 FFA:"font2" TXT:"1023 hPa"


// create button and label widgets (fan control) and create animated image (download from web resource)

|BT UID:bth X:28 Y:63 W:38 H:9 VIS:1 ROT:0 RAD:2 BGC:#00539b SBGC:#454546 FGC:#929c9b SHE:0 BTH:0.5 TXT:""

|LB UID:lbbth X:43 Y:63 ALP:2 SHE:1 ROT:0 FGC:#FFFFFF FSZ:2 FFA:"font1" TXT:"Auto"

|IM UID:imfan X:20 Y:63 W:15 H:7 ROT:0 SHE:1 VIS:1 OPA:1 SCM:1 PLS:1 ACT:0 IP:"https://i.imgur.com/FSUe3AL.gif"


// create button and label widgets (heat control) and create animated image (download from web resource)

|BT UID:btt X:72 Y:63 W:38 H:9 VIS:1 ROT:0 RAD:2 BGC:#78262f SBGC:#454546 FGC:#929c9b SHE:0 BTH:0.5 TXT:""

|LB UID:lbbtt X:57 Y:63 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:2 FFA:"font1" TXT:"Auto"

|IM UID:imheat X:80 Y:63 W:15 H:7 ROT:0 SHE:1 VIS:1 OPA:1 SCM:1 PLS:1 ACT:0 IP:"https://i.imgur.com/lD1BIs2.gif"


// hide loading screen

@hls

Web resources are downloaded and shown automatically, if internet connectivity is available. This is necessary only for first initialization - once the resources are downloaded, they are retrieved from local storage. It is also possible to copy resources directly to the local storage and specify the path.

Payload for parameters that require string values must be wrapped in double quote characters by default (e.g., payload of the IP, FFA and TXT parameters in the code above). In most programming languages (C, C++, Java, Python, etc.), the double quote character should be prefixed by an escape character (i.e., backslash). Note that the wrapping character can be changed (see manual for more information).

Any widget property (position, size, color, etc.) can be modified at anytime by referencing its unique identifier parameter (i.e., UID).

Advanced complexity (90+ widgets)

Image below shows the result after the GUI-O application receives initialization commands.

IMPORTANT NOTE: Every command must be terminated with \r (carriage return) and \n (new line) characters. For the sake of brevity, both characters are omitted in the commands below.

It is recommended to first start with basic and intermediate examples.

Advanced example

Initialization commands

// show loading screen

@sls


// clear screen (widgets), set background color and aspect ratio (see manual)

@cls

@guis BGC:#2E2E2F ASR:0.449671


// set orientation to landscape

|SORI UID:sori1 HID:sori ORI:2 SEN:0


// create widgets...

|IM UID:imd X:89 Y:12 W:20 H:5 ROT:0 SHE:0 VIS:1 OPA:1 SCM:0 IP:"https://i.imgur.com/VCNK1dp.png"

|IM UID:im1 X:20 Y:12 W:20 H:5 ROT:0 SHE:0 VIS:1 OPA:1 SCM:0 IP:"https://i.imgur.com/8j1RdO8.png"

|IM UID:im2 X:40 Y:12 W:20 H:5 ROT:0 SHE:0 VIS:1 OPA:1 SCM:0 IP:"https://i.imgur.com/FN3avb4.png"

|IM UID:im3 X:60 Y:12 W:20 H:5 ROT:0 SHE:0 VIS:1 OPA:1 SCM:0 IP:"https://i.imgur.com/QeqKmWO.png"


|BSL UID:bslx11 X:11 Y:30 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#FFFFFF

|BSL UID:bslx12 X:11 Y:40 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#FFFFFF

|BSL UID:bslx13 X:11 Y:50 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx14 X:11 Y:60 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx15 X:11 Y:70 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx16 X:11 Y:80 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx17 X:11 Y:90 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|SL UID:slm1 X:15 Y:60 W:28 H:2 HAH:6 HAW:6 IP:"https://i.imgur.com/eUuvOTX.png" HAR:0 HAC:#000E530A VIS:1 ROT:270 BGC:#000000 SFGC:#822d0a FGC:#4eb50a SHE:0 VAL:0 LVAL:0 HVAL:50 UD:0 RAD:1 SHH:1 CE:1

|LB UID:lb1 X:15 Y:98 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3 FFA:"font8" TXT:"CH-1"


|BSL UID:bslx21 X:21 Y:30 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#FFFFFF

|BSL UID:bslx22 X:21 Y:40 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#FFFFFF

|BSL UID:bslx23 X:21 Y:50 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx24 X:21 Y:60 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx25 X:21 Y:70 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx26 X:21 Y:80 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx27 X:21 Y:90 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|SL UID:slm2 X:25 Y:60 W:28 H:2 HAH:6 HAW:6 IP:"https://i.imgur.com/eUuvOTX.png" HAR:0 HAC:#000E530A VIS:1 ROT:270 BGC:#000000 SFGC:#822d0a FGC:#4eb50a SHE:0 VAL:0 LVAL:0 HVAL:50 UD:0 RAD:1 SHH:1 CE:1

|LB UID:lb2 X:25 Y:98 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3 FFA:"font8" TXT:"CH-1"


|BSL UID:bslx31 X:31 Y:30 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#FFFFFF

|BSL UID:bslx32 X:31 Y:40 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#FFFFFF

|BSL UID:bslx33 X:31 Y:50 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx34 X:31 Y:60 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx35 X:31 Y:70 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx36 X:31 Y:80 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx37 X:31 Y:90 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|SL UID:slm13 X:35 Y:60 W:28 H:2 HAH:6 HAW:6 IP:"https://i.imgur.com/eUuvOTX.png" HAR:0 HAC:#000E530A VIS:1 ROT:270 BGC:#000000 SFGC:#822d0a FGC:#4eb50a SHE:0 VAL:0 LVAL:0 HVAL:50 UD:0 RAD:1 SHH:1 CE:1

|LB UID:lb3 X:35 Y:98 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3 FFA:"font8" TXT:"CH-2"


|BSL UID:bslx41 X:41 Y:30 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#FFFFFF

|BSL UID:bslx42 X:41 Y:40 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#FFFFFF

|BSL UID:bslx43 X:41 Y:50 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx44 X:41 Y:60 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx45 X:41 Y:70 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx46 X:41 Y:80 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx47 X:41 Y:90 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|SL UID:slm4 X:45 Y:60 W:28 H:2 HAH:6 HAW:6 IP:"https://i.imgur.com/eUuvOTX.png" HAR:0 HAC:#000E530A VIS:1 ROT:270 BGC:#000000 SFGC:#822d0a FGC:#4eb50a SHE:0 VAL:0 LVAL:0 HVAL:50 UD:0 RAD:1 SHH:1 CE:1

|LB UID:lb4 X:45 Y:98 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3 FFA:"font8" TXT:"CH-2"


|BSL UID:bslx51 X:51 Y:30 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#FFFFFF

|BSL UID:bslx52 X:51 Y:40 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#FFFFFF

|BSL UID:bslx53 X:51 Y:50 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx54 X:51 Y:60 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx55 X:51 Y:70 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx56 X:51 Y:80 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx57 X:51 Y:90 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|SL UID:slm5 X:55 Y:60 W:28 H:2 HAH:6 HAW:6 IP:"https://i.imgur.com/eUuvOTX.png" HAR:0 HAC:#000E530A VIS:1 ROT:270 BGC:#000000 SFGC:#822d0a FGC:#4eb50a SHE:0 VAL:0 LVAL:0 HVAL:50 UD:0 RAD:1 SHH:1 CE:1

|LB UID:lb5 X:55 Y:98 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3 FFA:"font8" TXT:"CH-3"


|BSL UID:bslx61 X:61 Y:30 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#FFFFFF

|BSL UID:bslx62 X:61 Y:40 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#FFFFFF

|BSL UID:bslx63 X:61 Y:50 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx64 X:61 Y:60 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx65 X:61 Y:70 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx66 X:61 Y:80 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|BSL UID:bslx67 X:61 Y:90 SHE:0 ROT:0 LEN:8 BTH:0.1 FGC:#000000

|SL UID:slm6 X:65 Y:60 W:28 H:2 HAH:6 HAW:6 IP:"https://i.imgur.com/eUuvOTX.png" HAR:0 HAC:#000E530A VIS:1 ROT:270 BGC:#000000 SFGC:#822d0a FGC:#4eb50a SHE:0 VAL:0 LVAL:0 HVAL:50 UD:0 RAD:1 SHH:1 CE:1

|LB UID:lb6 X:65 Y:98 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3 FFA:"font8" TXT:"CH-3"


|LB UID:lbc1 X:8 Y:30 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3.5 FFA:"font8" TXT:"+10"

|LB UID:lbc2 X:8 Y:40 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3.5 FFA:"font8" TXT:"+5"

|LB UID:lbc3 X:8 Y:50 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3.5 FFA:"font8" TXT:"0"

|LB UID:lbc4 X:8 Y:60 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3.5 FFA:"font8" TXT:"-5"

|LB UID:lbc5 X:8 Y:70 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3.5 FFA:"font8" TXT:"-10"

|LB UID:lbc6 X:8 Y:80 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3.5 FFA:"font8" TXT:"-15"

|LB UID:lbc7 X:8 Y:90 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3.5 FFA:"font8" TXT:"-20"


|LB UID:lbd1 X:72 Y:30 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3.5 FFA:"font8" TXT:"+10"

|LB UID:lbd2 X:72 Y:40 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3.5 FFA:"font8" TXT:"+5"

|LB UID:lbd3 X:72 Y:50 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3.5 FFA:"font8" TXT:"0"

|LB UID:lbd4 X:72 Y:60 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3.5 FFA:"font8" TXT:"-5"

|LB UID:lbd5 X:72 Y:70 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3.5 FFA:"font8" TXT:"-10"

|LB UID:lbd6 X:72 Y:80 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3.5 FFA:"font8" TXT:"-15"

|LB UID:lbd7 X:72 Y:90 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3.5 FFA:"font8" TXT:"-20"


|LB UID:lbm X:83.5 Y:98 ROT:0 SHE:1 FGC:#FFFFFF ALP:0 FSZ:3 FFA:"font8" TXT:"MASTER"

|SL UID:slml X:80 Y:60 W:28 H:2 HAH:7 HAW:7 IP:"https://i.imgur.com/5PppO2J.jpg" HAR:0 HAC:#00772200 VIS:1 ROT:270 BGC:#000000 SFGC:#ffc04c FGC:#a93c3c SHE:0 VAL:15 LVAL:0 HVAL:50 UD:0 RAD:1 SHH:1 CE:1

|SL UID:slmd X:87 Y:60 W:28 H:2 HAH:7 HAW:7 IP:"https://i.imgur.com/5PppO2J.jpg" HAR:0 HAC:#00772200 VIS:1 ROT:270 BGC:#000000 SFGC:#ffc04c FGC:#a93c3c SHE:0 VAL:15 LVAL:0 HVAL:50 UD:0 RAD:1 SHH:1 CE:1


|SI UID:si1 X:98 Y:72 W:1.5 VIS:1 ROT:0 BGC:#B0C4DE FGC:#009900 SHE:0 EN:1

|SI UID:si2 X:98 Y:65 W:1.5 VIS:1 ROT:0 BGC:#B0C4DE FGC:#009900 SHE:0 EN:1

|SI UID:si3 X:98 Y:58 W:1.5 VIS:1 ROT:0 BGC:#B0C4DE FGC:#009900 SHE:0 EN:1

|SI UID:si4 X:98 Y:51 W:1.5 VIS:1 ROT:0 BGC:#B0C4DE FGC:#009900 SHE:0 EN:1

|SI UID:si5 X:98 Y:44 W:1.5 VIS:1 ROT:0 BGC:#B0C4DE FGC:#FFC300 SHE:0 EN:1

|SI UID:si6 X:98 Y:37 W:1.5 VIS:1 ROT:0 BGC:#B0C4DE FGC:#FFC300 SHE:0 EN:1

|SI UID:si7 X:98 Y:30 W:1.5 VIS:1 ROT:0 BGC:#B0C4DE FGC:#990000 SHE:0 EN:1


|SI UID:sj1 X:92 Y:72 W:1.5 VIS:1 ROT:0 BGC:#B0C4DE FGC:#009900 SHE:0 EN:1

|SI UID:sj2 X:92 Y:65 W:1.5 VIS:1 ROT:0 BGC:#B0C4DE FGC:#009900 SHE:0 EN:1

|SI UID:sj3 X:92 Y:58 W:1.5 VIS:1 ROT:0 BGC:#B0C4DE FGC:#009900 SHE:0 EN:1

|SI UID:sj4 X:92 Y:51 W:1.5 VIS:1 ROT:0 BGC:#B0C4DE FGC:#009900 SHE:0 EN:1

|SI UID:sj5 X:92 Y:44 W:1.5 VIS:1 ROT:0 BGC:#B0C4DE FGC:#FFC300 SHE:0 EN:1

|SI UID:sj6 X:92 Y:37 W:1.5 VIS:1 ROT:0 BGC:#B0C4DE FGC:#FFC300 SHE:0 EN:1

|SI UID:sj7 X:92 Y:30 W:1.5 VIS:1 ROT:0 BGC:#B0C4DE FGC:#990000 SHE:0 EN:1


|LB UID:lb11 X:95 Y:72 ROT:0 SHE:0 ALP:0 FGC:#FFFFFF FSZ:2.7 FFA:"font8" TXT:"-60dB"

|LB UID:lb12 X:95 Y:65 ROT:0 SHE:0 ALP:0 FGC:#FFFFFF FSZ:2.7 FFA:"font8" TXT:"-48dB"

|LB UID:lb13 X:95 Y:58 ROT:0 SHE:0 ALP:0 FGC:#FFFFFF FSZ:2.7 FFA:"font8" TXT:"-30dB"

|LB UID:lb14 X:95 Y:51 ROT:0 SHE:0 ALP:0 FGC:#FFFFFF FSZ:2.7 FFA:"font8" TXT:"-18dB"

|LB UID:lb15 X:95 Y:44 ROT:0 SHE:0 ALP:0 FGC:#FFFFFF FSZ:2.7 FFA:"font8" TXT:"-6dB"

|LB UID:lb16 X:95 Y:37 ROT:0 SHE:0 ALP:0 FGC:#FFFFFF FSZ:2.7 FFA:"font8" TXT:" 0dB"

|LB UID:lb17 X:95 Y:30 ROT:0 SHE:0 ALP:0 FGC:#FFFFFF FSZ:2.7 FFA:"font8" TXT:"OVER"


|BSE UID:bseon X:5 Y:12 W:5.5 HIW:1 SHE:0 ROT:0 BTH:0.2 BGC:#a1a1a1 FGC:#a1a1a1

|BT UID:bton X:5 Y:12 W:4 H:9 SHE:1 ROT:0 RAD:3 BGC:#7a7a7a SBGC:#d9d9d9 FGC:#FFFFFF FSZ:4 BTH:0 TXT:"" SVAL:"ON"

|BSA UID:bsao1 X:5 Y:12 W:1.1 SHE:0 ROT:0 BTH:0.3 BGC:#000000 STA:-245 ENA:65

|BSL UID:bslo1 X:5 Y:12 ROT:90 FGC:#000000 LEN:1.5 BTH:0.3


|KNO UID:kno1 X:95 Y:87 W:7 VIS:1 ROT:0 SHE:1 STR:10 STS:1.5


// hide loading screen

@hls

Web resources are downloaded and shown automatically, if internet connectivity is available. This is necessary only for first initialization - once the resources are downloaded, they are retrieved from local storage. It is also possible to copy resources directly to the local storage and specify the path.

Payload for parameters that require string values must be wrapped in double quote characters by default (e.g., payload of the IP, FFA, TXT and SVAL parameters in the code above). In most programming languages (C, C++, Java, Python, etc.), the double quote character should be prefixed by an escape character (i.e., backslash). Note that the wrapping character can be changed (see manual for more information).

Any widget property (position, size, color, etc.) can be modified at anytime by referencing its unique identifier parameter (i.e., UID).

Connect . Create . Control

Connect . Create . Control

YouTube channel
Facebook