File No.

Version Security Classification

Wireless-Tag Technology Co., Ltd
V2.1.0 None
File Name 8ms Visual Development Platform Operation Manual Date Nov 2, 2020

8ms Visual Development Platform

Operation Manual

Editing software: MS Office Word 2003, MS Office Visio2003 SP3

All rights reserved by Wireless-Tag Technology Co., Ltd

 Wireless-Tag Technology Co., Ltd V2.1.0

Revision History

No. Version Changes Change (+/-) Descriptions Author Date

Wen
1 V1.0 C Create the document March 13, 2020
Zhougang

2 V1.0.0 A Add new features Lin Fuliang July 13, 2020

3 V2.1.0 A Add new features Liu Hao October 31, 2020

*Changes：C――create，A——add，M——modify，D——delete

Document approval information:

Author: Liu Hao Date： October 31, 2020

Format review: Liang Sufang Date： November 5, 2020
Content review: Date：
Approval: Date：

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 1

 Wireless-Tag Technology Co., Ltd V2.1.0

Contents

1 Overview...................................................................................................................................................4
1.1 Purpose of writing........................................................................................................................ 4
1.2 Terms and Abbreviations............................................................................................................. 4
1.2.1 Terms................................................................................................................................ 4
1.2.2 Abbreviations................................................................................................................... 4
1.3 Reference Documents.................................................................................................................. 4
2 Software Overview.................................................................................................................................5
2.1 Software Use.................................................................................................................................5
2.2 Framework Introduction.............................................................................................................. 5
2.3 Software Operation...................................................................................................................... 6
3 Functional Descriptions.................................................................................................................... 7
3.1 New Project.................................................................................................................................. 7
3.2 Workspace Description.............................................................................................................. 10
3.3 Toolbar........................................................................................................................................13
3.3.1 File................................................................................................................................ 13
 Save........................................................................................................................................ 13
 Save and copy.........................................................................................................................13
 New screen............................................................................................................................. 13
 Delete selected screen............................................................................................................ 14
3.3.2 Edit................................................................................................................................ 14
 Undo....................................................................................................................................... 14
 Redo........................................................................................................................................14
3.3.3 Compile.......................................................................................................................... 14
 Compile.................................................................................................................................. 14
 Preview................................................................................................................................... 15
 Refresh....................................................................................................................................16
 Download source.................................................................................................................... 16
 Download Bin.........................................................................................................................16
3.3.4 Layout............................................................................................................................ 16
 Designer..................................................................................................................................16
 Hybrid..................................................................................................................................... 16
 Blockly....................................................................................................................................17
4 Widgets Usage.......................................................................................................................................18
4.1 Page Layout................................................................................................................................ 18
4.1.1 Tab View........................................................................................................................ 18
4.1.2 Tile View.......................................................................................................................18
4.2 Basic Display............................................................................................................................... 19
4.2.1 Text................................................................................................................................ 19
4.2.2 Image.............................................................................................................................. 20
4.2.3 Arch................................................................................................................................ 21
4.2.4 Text area...................................................................................................................... 21

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 2

 Wireless-Tag Technology Co., Ltd V2.1.0

4.3 Dynamic Display......................................................................................................................... 22

4.3.1 Slider............................................................................................................................ 22
4.3.2 Checkbox........................................................................................................................ 22
4.3.3 Switch............................................................................................................................ 23
4.3.4 Bar.................................................................................................................................. 23
4.3.5 Drop-down...................................................................................................................... 24
4.3.6 MSG box.......................................................................................................................... 25
4.3.7 Preloader...................................................................................................................... 26
4.3.8 Roller............................................................................................................................ 27
4.4 HMI............................................................................................................................................. 29
4.4.1 Button............................................................................................................................ 29
4.4.2 List................................................................................................................................ 30
4.4.3 Line................................................................................................................................ 30
4.5 Function widgets........................................................................................................................ 31
4.5.1 Calendar........................................................................................................................ 31
4.5.2 Gauge.............................................................................................................................. 32
4.5.3 LED.................................................................................................................................. 33
5 Programming...........................................................................................................................................34
5.1 ESP32 Programming................................................................................................................... 34
5.2 Sigmastar SSD 201 programming...............................................................................................36

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 3

 Wireless-Tag Technology Co., Ltd V2.1.0

1 Overview

1.1 Purpose of writing

The purpose of writing this software operation manual is to fully describe the functions and
operating environment that the software can achieve, so that users can understand the scope and
method of the software, and it provides necessary information for the maintenance and update of
the software.

1.2 Terms and Abbreviations

1.2.1 Terms

None

1.2.2 Abbreviations

None

1.3 Reference Documents

Table 1 Reference Documents

Title No. Author Release Date Remarks

8ms Graphical Development Lin Fuliang July 13, 2020

Platform User Manual

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 4

 Wireless-Tag Technology Co., Ltd V2.1.0

2 Software Overview

2.1 Software Use

8ms visual development platform is a web-based visual design system for UI and applications of
embedded or MCU terminals, which can improve the versatility of peripheral application and UI.
You can implement editing interface and writing logic code by dragging a mouse or using a touch
screen. Low code or even zero code is used in the design and development of application and UI.
Currently, the platform supports ESP32, Sigmastar SSD201 and Unisound’s Hummingbird &
Hummingbird M. The GUI library uses littlevGL7.3 and the code logic uses Google's Blockly.

2.2 Framework Introduction

The platform is mainly composed of three parts as shown in Table 2.

Table 2 Frame Composition
No. Name Description
1 GUI editor Web-based widget editing
2 Code editor Code logic editing based on Blockly
3 Background Project generation based on Java template engine

Figure 1Frame Diagram

 GUI editor
It provides visual editing functions and generates project description files, including pages
(traditional pages, Tab sub-pages, window pages), widgets (supporting 20 kinds of widgets
temporarily), and saves them in JSON format.

 Blockly logic editor

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 5

 Wireless-Tag Technology Co., Ltd V2.1.0

Widget events and pages in GUI support code logic. When editing code in GUI, you can enter
Blockly to add new code blocks or select existing code blocks. Code blocks can control all the
widgets in GUI, but can’t add or modify widget names. After editing, it’s saved to the background
and gets CodeID returned.

 Background project generation and compilation

Through the project template, the JSON description file of a GUI project is generated into C
project file, which is compiled and provided with binary file download.

2.3 Software Operation

Visit the website: http://8ms.xyz/

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 6

 Wireless-Tag Technology Co., Ltd V2.1.0

3 Functional Descriptions

3.1 New Project

1. Visit the website“http://8ms.xyz/”，and log in as shown in Figure 2.

Figure 2 Login

Notes:

Visit this website and log in. If you haven’t got an account, please register an account first.

a) Click “Sign up”.

b) Enter your username (only consists of letters and numbers, at least 5 characters), password (it cannot be empty,

at least 6 characters), Email address used to retrieve your password, company name and mobile phone number .

c) Click "Sign up".

2. Enter the registered "Username" and "Password", click "User Login" to login your account as
shown in Figure 3.
Figure 3 Project category

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 7

 Wireless-Tag Technology Co., Ltd V2.1.0

Notes：

At present, the platform supports the following hardware chips, including ESP32 of Espressif, Sigmastar, Unisound,
Allwinner and RK.
3. Click the selected item, such as "ESPRESSIF", and enter it as shown in Figure 4.
Figure 4 New project

4. Click "New Project" to enter it as shown in Figure 5.

Figure 5 New Project Wizard

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 8

 Wireless-Tag Technology Co., Ltd V2.1.0

a) Define a project name.

b) Select a hardware model that matches the project.
c) Select a theme.
d) Describe the project content.
e) Define the project tags.
f) Click "Confirm", and the project is created successfully.

 If you need to edit a project, hover the mouse over "..." on the target project and click "Edit
Basic Information" on the pop-up menu.

 If you need to delete a project, hover the mouse over "..." on the target project and click
"Remove Items" on the pop-up menu.

 If you need to clone a project, hover the mouse over "..." on the target project and click
"Clone" on the pop-up menu.

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 9

 Wireless-Tag Technology Co., Ltd V2.1.0

3.2 Workspace Description

The workspace of a project consists of seven areas, as shown in Figure 6. The detailed
descriptions of them are shown in Table 3.
Figure 6Workspace

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 10

 Wireless-Tag Technology Co., Ltd V2.1.0

Table 3 Workspace
No. Name Function Descriptions
File, Edit, Compile, Layout and  File
Help.  Save
 Save and copy
 Create screen
 Delete selected screen
 Edit
 Undo
 Redo
 Compile
 Compile
 Preview
1 Toolbar  Refresh
 Download source
 Download bin
 Layout
 Designer
 Hybrid
 Blockly
 Help
 User guide
 Get started
 Cases
 About
Save, Undo, Redo, Format brush, Alignment includes:
Alignment, Compile, Run and  Align left
Download source.  Horizontal center
Shortcut
2  Align right
button
 Align top
 Vertical center
 Align bottom
The main_screen is the default To create a new screen, please refer to
screen, and you can create a new "New Screen".
3 Screens
screen according to the project
requirements.
You can choose a light or dark
theme color as default. You can also
4 Theme
create a new theme according to the
project.
It contains: Hover over a widget icon with the mouse
 Layout to display the name of the widget. Click a
5 Widget bar
 Basic display widget and drag it to the widget editing
 Dynamic display area to add it to the current screen. For

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 11

 Wireless-Tag Technology Co., Ltd V2.1.0

No. Name Function Descriptions

 HMI details, please refer to “Widgets Use”.
 Function
The canvas size corresponds to the The image widget doesn’t support setting
Widget screen size. You can move a widget the size, and the widget size is the same as
6
editing area to adjust its position, and drag its the image size.
border to adjust the size.
When you select a widget or a Some widgets support event logic.
Widget screen, the basic properties
7 properties corresponding to the widget or the
area screen are displayed in the right
area.

Notes:

Widgets differ in their respective properties. Take the "label" widget as an example to show the basic properties

of the widget, as shown in Figure 7.

Figure 7 "label" widget properties

Notes：

ID is the unique identifier of the widget, which is unique in the entire project. You can adjust the actual effect of

the widget by changing other properties.

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 12

 Wireless-Tag Technology Co., Ltd V2.1.0

3.3 Toolbar

3.3.1 File

 Save

You can save a project by clicking “File”--- “save” in the toolbar, or you can also save it by
clicking the shortcut button . If a project hasn’t been compiled after design, when you click
“Save”, the project will be compiled first.

 Save and copy

Not yet open.

 New screen

You can create a screen by clicking “File” --- “Create screen” in the toolbar, or you can also
directly click “Create screen” in the “Screens” area. After clicking “Create screen”, you will enter
the name of the screen and click “Confirm”, as shown in Figure 8.
Figure 8 New screen

After creating a screen, you can set the screen type and background color in the screen properties
area on the right. The screen types are described as follows:
 “Screen” is a standard screen page.
 “Dialog” is a pop-up page. You can set the position and size of the pop-up window.
 “Tabpage” is a tabview embedded page.
 “Console” is a console program, i.e. no serial port is displayed.

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 13

 Wireless-Tag Technology Co., Ltd V2.1.0

 Delete selected screen

To delete a screen, you can only delete the screen created by yourself, not a system screen. If you
need to delete a self-built screen, you can click “Delete selected screen” and then click “Confirm”,
as shown in Figure 9.
Figure 9 Delete selected screen

3.3.2 Edit

 Undo

Not yet open.

 Redo

Not yet open.

3.3.3 Compile

 Compile

To compile a project, you can click “Compile” in the toolbar, and you can also click a shortcut
button to achieve it. The initial state of compiling a project is shown in Figure 10.
Figure 10 Initial state of compilation

The platform will compile the designed project in the cloud, generate the corresponding download
firmware, and display the compilation log in the browser. In the compilation log, you can check

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 14

 Wireless-Tag Technology Co., Ltd V2.1.0

the firmware programming address or the reason for a compilation error, as shown in Figure 11.
Figure 11 Compilation error

The platform will compile the designed project, generate the correct download firmware, and
display the compilation log.
Figure 12 Compilation completed status

 Preview

Not yet open.

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 15

 Wireless-Tag Technology Co., Ltd V2.1.0

 Refresh

Not yet open.

 Download source

To download the source code, you can click “Compile” --- “Download Source” in the toolbar, or
you can click the shortcut button to achieve it. Click "Compile\Download Source", define the
source file name and select the save path.

 Download Bin

To download bin, you can click “Compile”--- “Download Bin”, define the bin file name and select
the save path.

3.3.4Layout

 Designer

A new project is in the Designer environment by default, and the Designer environment contains
seven areas. Please refer to “3.2Workspace Description”.

 Hybrid

Hybrid is used to achieve synchronous design, on which Designer and Blockly share the same
working interface, as shown in Figure 13.
Figure 13 Hybrid

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 16

 Wireless-Tag Technology Co., Ltd V2.1.0

 Blockly

Click to enter “Blockly” and edit widget logic, as shown in Figure 14.
Figure 14 Blockly operation interface

Notes:

 Widgets are under the category of UI controls, and the widgets used can be found in widgets variables.

 For the specific operation of Blockly, please refer to Blockly user manual.

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 17

 Wireless-Tag Technology Co., Ltd V2.1.0

4 Widgets Usage

4.1 Page Layout

4.1.1 Tab View

Tab View is a widget used to switch screens by selecting tabs. Before creating a Tab view, you
need to create screens. There is a one-to-one correspondence between tabs and screens. To create a
Tab view, drag and drop the Tab view widget from the widget bar on the left to the editing area,
and then click the Tab drop-down to enter the tab name and screen ID.

4.1.2 Tile View

1. Create a Tile View

Notes:

Be sure to add screens to a Tile View widget.

Drag and drop a Tile View widget from the widget bar on the left to the editing area to create a
Tile View, as shown in Figure 15.
Figure 15 Create a Tile View

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 18

 Wireless-Tag Technology Co., Ltd V2.1.0

2. Set a Tile View

Click the drop-down in the widget properties area, and add three screens created to the content of
the Tile View as the left, middle and right screens accordingly.

4.2 Basic Display

4.2.1 Text

Text is mainly used to show what developers need to express.

1. Create a text
Drag and drop a text widget from the widget bar on the left to the editing area, then create a
default text, as shown in Figure 16.
Figure 16 Text

2. Set a text
Click the content drop-down in the widget properties area to set the content and appearance of the
text. Set the text according to the needs of the project, and the actual effect after setting is shown
in Figure 17.
Figure 17 Text effect

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 19

 Wireless-Tag Technology Co., Ltd V2.1.0

4.2.2 Image

1. Create & add an image

Notes:

a.The image selected cannot be named in Chinese and the pixel is no larger than the current screen.

b.The number of frames of gif should not be too many.

c.It is recommended to set the image size to be the same as the actual size, because the image size burned into the

hardware is the same as the actual size.

Drag and drop an image widget from the widget bar on the left to the editing area, then click the
content drop-down on the right to add an image.

2. Frame by frame animation

Select frame by frame animation materials. Add frames to the animation drop-down on the right.
Enable animation. Then add an image as the starting image in the content. Frame by frame
animation is completed. You can see the actual effect after programming it to the hardware. The
wifi animation effect is shown in Figure 18.
Figure 18 Frame by frame animation

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 20

 Wireless-Tag Technology Co., Ltd V2.1.0

4.2.3 Arch

1. Create an arch
Drag and drop the arch widget from the widget bar to the editing area to create an arch as shown
in Figure 19.
Figure 19 Create an arch

2. Set an arch
Click the content drop-down of the widget properties area to set the start and end angles and the
style of the arch, as shown in Figure 20.
Figure 20 Set an arch

4.2.4 Text area

When we log in a platform, the area where we enter the username and password is a textarea.

1. Create a textarea
Drag and drop a textarea widget from the widget bar on the left to the editing area and create a

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 21

 Wireless-Tag Technology Co., Ltd V2.1.0

default textarea.

2. Set a textarea
Set a textarea by filling in the widget properties area with default value and placeholder, select the
password mode(masked or unmasked) and the line mode(multi or single). Click action and content
change action need to program code blocks.

4.3 Dynamic Display

4.3.1 Slider

A slider is similar to a progress bar with a knob. When you drag the knob, the value will change.

1. Create a slider

Drag and drop the slider widget from the widget bar on the left to the editing area, and create a
default slider, as shown in Figure 21.
Figure 21 Create a slider

2. Set a slider

Click the content drop-down in the widget properties area to set the default value and appearance
of the slider.

4.3.2 Checkbox

1. Create a checkbox
Drag and drop the check box widget from the widget bar on the left to the editing area to create a
check box, as shown in Figure 22.
Figure 22 Checkbox

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 22

 Wireless-Tag Technology Co., Ltd V2.1.0

2. Set a checkbox
Click the content drop-down in the widget properties area to set the checkbox text related
properties.

4.3.3 Switch

A switch is used to turn on or off something.

1. Create a switch
Drag and drop the switch widget from the widget bar on the left to the editing area to create a
switch, as shown in Figure 23.
Figure 23 Create a switch

2. Set a switch
Click the content drop-down in the widget properties area and set the default value and actual
style of a switch.

4.3.4 Bar

A bar is basically composed of background and indicator parts, used to show the progress of
things. For example, when we watch a video, there is always a progress bar below to show the
progress of the video.

1. Create a bar
Drag and drop the bar widget from the widget bar on the left to the editing area to create a bar, as
shown in Figure 24.
Figure 24 Create a bar

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 23

 Wireless-Tag Technology Co., Ltd V2.1.0

2. Set a bar
Click the content drop-down in the widget properties area and set the default value and actual
style of a bar.

4.3.5 Drop-down

1. Create a drop-down
Drag and drop the drop-down widget from the widget bar on the left to the editing area to create a
drop-down, as shown in Figure 25.
Figure 25 Create a drop-down

2. Set a drop-down
Click the content drop-down in the widget properties area to add options, as shown in Figure 26.
Figure 26 Set a drop-down

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 24

 Wireless-Tag Technology Co., Ltd V2.1.0

4.3.6 MSG box

1. Create a MSG box

Drag and drop the MSG box widget from the widget bar on the left to the editing area. Click the
content drop-down in the widget properties area to enter prompt information, as shown in Figure
27 .
Figure 27 Create a MSG box

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 25

 Wireless-Tag Technology Co., Ltd V2.1.0

2. Set the effect of a MSG box

Click the content drop-down in the widget properties area and set the text style and display effect
of the MSG box.

3. Set the click action of a MSG box

The click action of a MSG box is achieved by code block programming.

4.3.7 Preloader

1. Create a preloader
Drag and drop the preloader widget from the widget bar on the left to the editing area and create a
default preloader.

2. Set the actual effect of a preloader

Click the content drop-down in the widget properties area and set the related style of the preloader,
as shown in Figure 28.
Figure 28 Set a preloader

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 26

 Wireless-Tag Technology Co., Ltd V2.1.0

4.3.8 Roller

1. Create a roller
Drag and drop the roller widget from the widget bar on the left to the editing area and set the text
information of the roller in the widget properties area, as shown in Figure 29.
Figure 29 Create a roller

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 27

 Wireless-Tag Technology Co., Ltd V2.1.0

2. Set the basic properties of a roller

In the widget properties area, you can set the default value, visible rows, text related information
of a roller and click action. Click action is achieved by writing code blocks.
Figure 30 Set the basic properties of a roller

3. Selected style
Click the selected style in the widget properties area and set the actual effect when the roller is
selected, as shown in Figure 31.
Figure 31 Set selected style properties

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 28

 Wireless-Tag Technology Co., Ltd V2.1.0

4.4 HMI

4.4.1 Button

When a button is pressed or released, its state and style will change. Correspondingly, it can
trigger some event when a button changes its state. For example, if a button is pressed, the screen
will jump to another one.

1. Create a button
Drag and drop a button widget from the widget bar on the left to the editing area, and create a
default button, as shown in Figure 32.
Figure 32 Button

2. Set a button’s content

Notes:

The added image is not named in Chinese, and the pixels are not larger than the current screen. If a button is set

with an image, the text will be useless.

Click the content drop-down in the widget properties area. You can modify the content of the
button and its actual style, and add an image to the button.

3. Set the action

Currently, there are basically three actions for a button: click to jump screen ID, click and long
press. Click to jump screen ID,that is, to select the screen that needs to be jumped in the
drop-down, and then jump to the corresponding screen. Click and long press can be achieved by
writing code blocks programs.

4. Set the style

Buttons have different styles in different states. You can click the style drop-down on the right to
set a corresponding style for the button.

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 29

 Wireless-Tag Technology Co., Ltd V2.1.0

4.4.2 List

1. Create a list
Drag and drop the list widget from the widget bar on the left to the editing area. Click the content
drop-down in the widget properties area and add contents to create a list, as shown in Figure 33.
Figure 33 Create a list

2. Click event
The click event can be achieved by editing code blocks.

4.4.3 Line

1. Create a line
Notes:
You need to add two or more coordinates and the added coordinate points must be on the screen,

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 30

 Wireless-Tag Technology Co., Ltd V2.1.0

otherwise the line cannot be seen.

Drag and drop the line widget from the widget bar on the left to the editing area and add
coordinate points to the fold line, as shown in Figure 34.
Figure 34 Create a line

2. Set the actual style of a line

Click the content drop-down in the widget properties area and change the color and the width of
the line.

4.5 Function widgets

4.5.1 Calendar

1. Create a calendar
Drag and drop the calendar widget from the widget bar on the left to the editing area to create a
default calendar, as shown in Figure 35.
Figure 35 Create a calendar

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 31

 Wireless-Tag Technology Co., Ltd V2.1.0

2. Set the current date of the calendar

Click the content drop-down in the widget properties area and set the value of year, month, and
day.

4.5.2 Gauge

1. Create a gauge
Drag and drop the gauge widget from the widget bar on the left to the editing area and create a
default gauge, as shown in Figure 36.
Figure 36 Create a gauge

2. Set a gauge
Click the content drop-down in the widget properties area and set the style and values of the gauge,
as shown in Figure 37.
Figure 37 Set a gauge

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 32

 Wireless-Tag Technology Co., Ltd V2.1.0

4.5.3 LED

1. Create an LED
Drag and drop the LED control from the widget bar on the left to the editing area and create an
LED as shown in Figure 38.
Figure 38 Create an LED

2. Set an LED
Click the basic drop-down in the widget properties area to set the color and default value of the
LED, as shown in Figure 39.
Figure 39 Set an LED

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 33

 Wireless-Tag Technology Co., Ltd V2.1.0

5 Programming

This article mainly introduces the programming methods of ESP32 and Sigmastar SSD201
developed on the system.

5.1 ESP32 Programming

Steps to flash firmware:

1. Save the completed project.

2. Compile the project.

3. Download the firmware, and flash the firmware according to the compiled address.
Figure 40 Download firmware

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 34

 Wireless-Tag Technology Co., Ltd V2.1.0

4. Unzip the downloaded firmware package xxx.zip, which contains:

bootloader.bin, partition-table.bin, lvgl-demo.bin and readme.txt.

Figure 41 Firmware bin file

5. Run esp_download_tool to flash the firmware.

Figure 42 esp_download_tool

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 35

 Wireless-Tag Technology Co., Ltd V2.1.0

5.2 Sigmastar SSD 201 programming

Steps to flash firmware:

1. Save the completed project.

2. Compile the project.

3. Click “download bin” to download the firmware as shown below.

Figure 43 Download bin

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 36

 Wireless-Tag Technology Co., Ltd V2.1.0

4. Open the folder where the firmware is located.

5. Open the firmware save path, and copy the firmware DEMO to "Tftp32" in the installation

directory of the programming tool, and replace the file in the target folder.

6. Open Xshell and create a new session, such as “test”. Define the name of the new session, select

“connection protocol”, select “host address”, such as “192.168.1.1” and port number "23".

7. Click OK, select the newly created session, and enter Xshell.

8. Enter the command "ls" to query files.

9. Enter the command "rm -f demo" to delete the previously existing demo on the development

board.

10. Enter the command "tftp -g -r demo server address (such as: 192.168.1.156)", to start

programming, as shown in Figure 50. When the status is displayed as 100% , the programming is

complete.
Figure 44 Programming completed

11. Enter the commands "chmod +x demo" and "./demo" to confirm whether the programming is

successful. A successful programming is as shown in Figure 45.

Figure 45 Successful programming

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 37

Wireless-Tag Technology Co., Ltd V2.1.0

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 38

Wireless-Tag Technology Co., Ltd V2.1.0

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All Rights Reserved. 39