8ms Blockly Manual V1.0.0 en

Wireless-Tag Technology Co., Ltd. V1.0.
8ms Blockly Manual
V1.0.0
Dec 25, 2020
Wireless-Tag Technology Co., Ltd.
About this document
This document provides users with a manual for the Blockly part of the 8ms visual development platform.
Document version
http://www.wireless-tag.com
Wireless-Tag Technology Co., Ltd. V1.0.0
Please visit Wireless-Tag’s official website to download the latest version of the document.
Revision history
Please go to the document revision history page to view the revisions of the document.
Disclaimer and copyright notice
Information in this paper, including URL references, is subject to change without prior notice.
This document is provided “as is” with no warranties whatsoever, including any warranty of merchantability,
non-infringement, fitness for any particular purpose, or any warranty otherwise arising out of any proposal,
specification or sample. All liability, including liability for infringement of any patent rights, relating to use of
information in this document is disclaimed. No licenses, either express or implied, by estoppel or otherwise, to
any intellectual property rights are granted herein.
All trade names, trademarks and registered trademarks mentioned in this document are property of their
respective owners, and are hereby acknowledged.
Copyright © 2020 Wireless-Tag Technology Co., Ltd. All rights reserved.
Statement
Due to product version upgrade or other reasons, the contents of this manual may be changed. Wireless-Tag Technology Co., Ltd
reserves the right to modify the contents of this manual without any notice or prompt. This manual is only used as a guide.
Wireless-Tag Technology Co., Ltd makes every effort to provide accurate information in this manual, but it does not guarantee that
the contents of the manual are completely free of errors. All statements, information and suggestions in this manual do not constitute
any express or implied guarantee.
http://www.wireless-tag.com
Document Revision History
No. Version Changes Change (+/ -) description Author Date
1 V1.0.0 C First release Zhang Guangxing Dec 25, 2020
*Changes: C--Create, A--Add, M--Modify, D--Delete
Document approval information:
Author: Zhang Guangxing Date: Dec 25, 2020
Format review: Date:
Content review: Date:
Approval: Date:

Contents
1. Process/Event.................................................................................................................................................... 6
1.1 UI....................................................................................................................................................................8
1.2 IOT............................................................................................................................................................... 11
1.3 Hardware...................................................................................................................................................... 12
2. Base................................................................................................................................................................. 13
2.1 Codec/Decode.............................................................................................................................................. 13
2.2 Loops............................................................................................................................................................14
2.3 Math............................................................................................................................................................. 14
2.4 Text...............................................................................................................................................................15
2.5 Logic.............................................................................................................................................................16
3. UI Controls......................................................................................................................................................18
3.1 Widgets Variables........................................................................................................................................ 18
3.2 Object Base.................................................................................................................................................. 18
3.3 Label.............................................................................................................................................................19
3.4 Button........................................................................................................................................................... 20
3.5 Image............................................................................................................................................................21
3.6 MessageBox................................................................................................................................................. 21
3.7 Switch...........................................................................................................................................................22
3.8 Slider............................................................................................................................................................ 23
3.9 Drop-down List............................................................................................................................................ 23
3.10 Widgets Anime.......................................................................................................................................... 24
3.11 Checkbox....................................................................................................................................................25
3.12 Gauge......................................................................................................................................................... 25
3.13 Process bar................................................................................................................................................. 26
3.14 Led..............................................................................................................................................................27
3.15 List..............................................................................................................................................................27
3.16 Roller..........................................................................................................................................................28
3.17 Textarea......................................................................................................................................................29

4
4. IOT.................................................................................................................................................................. 30
4.1 HTTP............................................................................................................................................................30
5. Base Peripherals.............................................................................................................................................. 31
5.1 BLE.............................................................................................................................................................. 31
5.2 Serial.............................................................................................................................................................31
5.3 GPIO.............................................................................................................................................................32
5.4 PWM............................................................................................................................................................ 33
5.5 ADC............................................................................................................................................................. 34
5.6 WIFI............................................................................................................................................................. 34
6. Extension Hardware........................................................................................................................................ 36
7. System Status.................................................................................................................................................. 36

5
1. Process/Event
Figure 1 Process/Event
 "1" Boolean statement fragment---The calculation result of the input fragment is a Boolean value used for
if condition judgment.
 "2" Add code fragment---It can implement personalized functions with the interface provided by the
platform; You can click "{ } Code" to view the added code fragment.
 "3" Number statement fragment---The calculation result of the input fragment is a numeric value.
 "4" When Boot---It is generally used to perform widgets and peripherals initialization, as shown
inFigure 2.
Figure 2 Boot

6
 "5" Loop Forever, as shown inFigure 3.
Figure 3 Loop Forever
 "6" Timer duration, as shown inFigure 4.
Figure 4 Timer duration

7
 Click "{ } Code" to view the corresponding code, as shown inFigure 5.
Figure 5 view the corresponding code
1.1 UI
Figure 6 UI

8
 "1" When "i" Button clicked or long clicked--- Change "i" to the button widget id and bind the widget, as
shown inFigure 7.
Figure 7 utton clicked or long clicked to Change
 Code Analysis
Figure 8 Code Analysis

9
 "2" When Checkbox "i" value change---Change "i" to the Checkbox widget id and bind the widget.
 "3" When Drop-down List "i" value change---Change "i" to the Drop-down list widget id and bind
the widget.
 "4" When List "i" clicked---Change "i" to the List widget id and bind the widget.
 "5" When MessageBox "i" button pressed---Change "i" to the MessageBox widget id and bind the
widget.
 "6" When Roller "i" value change---Change "i" to the Roller widget id and bind the widget.
 "7" When Slider "i" value change---Change "i" to the Slider widget id and bind the widget.
 "8" When Switch "i" value change---Change "i" to the Switch widget id and bind the widget.
 "9" When Textarea "i" value change---Change "i" to the Textarea widget id and bind the widget.
 Note: Click "{ } Code" to view the code generated by the corresponding widget.
Demo:
 Function: Click the button, the progress bar displays a random value ranging from 1-100;
 Control selection: HMI -> Button, Dynamic->Bar
 Layout(Hybrid)-Blockly building process：
 Note: Button and Bar widgets need to exist on the canvas in advance, otherwise there is no id to
select.
 Button: Process/Event->UI->When "i" button, then select target button id.
 Bar: UI Controls->Process bar->Set process bar->Choose UI objects(select target bar

10
id)->Base->Math->random integer from "1" to "100" to replace value "50".
1.2 IOT
Figure 9 IOT
 "1" http callback---http response callback
 "2" wifi connected---When the wifi connection is successful
Demo:
Please refer to "Intelligent Weather" (used with 2. Base->Codec/Decode and 4. IOT), as shown in Figure
10.
Figure 10 Intelligent Weather

11
1.3 Hardware
 (to be implemented)

12
2. Base
2.1 Codec/Decode
Figure 11 Codec/Decode
 "1" Delete json
 "2" Get json value by key ""
 "3" Initialize json
 "4" If key "" in json
Example:
It provides test interface: http://api.8ms.xyz/weather/
Json data:
{"city":"Shenzhen","datas":
[{"air":"good","date":"2020-11-27","wea":"cloudy","weaImg":"yun","weekDesc":"Friday","we
ndu":"16~25°C","wet":"87"},
{"date":"2020-11-28","wea":"cloudy","weaImg":"yun","weekDesc":"Saturday","wendu":"14~2 4°C" },
{"date":"2020-11-29","wea":"cloudy","weaImg":"yun","weekDesc":"Sunday","wendu":"15~2

13
3°C"},
{"date":"2020-11-30","wea":"cloudy","weaImg":"yun","weekDesc":"Monday","wendu":"16~2 3°C"} ]
You can get the temperature from the json data string on the 8ms platform:
"3" Initialize json->"2" get json value by key "wendu" -> display it on the label.
2.2 Loops
Figure 12 Loops
 "1" Break out of loop.
 "2" The variable "i" counts from "1" to "10" and increases by "1" each time.
 "3" Repeat 10 times.
 "4" Repeat while.
2.3 Math
Figure 13 Math

14
The values in the Math section can be modified.
 "1" "1"+"1"
 "2" Remainder of "64" ÷ "10"
 "3" "123"
 "4" Random integer from "1" to "100"
 "5" Round 3.1
 "6" Square root "9"
 "7" Sin "45"
2.4 Text
Figure 14 Text

15
You can customize the text content, such as "8ms.xyz".
2.5 Logic
Figure 15 Logic

16
 "1" If-do
 "2" "true"
 "3" "="
 "4" "not"
 "5" "null"
 "6" "and"
 "7" Compare string with
 "8" Test if true/if false

17
3. UI Controls
3.1 Widgets Variables
Figure 16 Widgets Variables
Widgets Variables such as "1", "2" and "3" are the widgets and screens created in the Designer.
3.2 Object Base
Figure 17 Object Base

18
 "1" Enable widget clicked as "true" of "false"---Click "Choose UI Objects" to choose and bind the
corresponding widget id to bind the widget id; the status is "True" or "False" depending on the actual
needs.
 "2" Choose "Display" or "Hidden" depending on the actual needs; Click "Choose UI Objects" to choose
the corresponding widget id to bind the widget.
 "3" Click "Choose UI Objects" to choose the corresponding widget id to bind the widget.
 "4" Click "Choose UI Objects" to choose the corresponding widget id to bind the widget; You can click
"50" to modify the values of x and y coordinates to the values you need, but do not exceed the canvas
size.
 "5" Delete dynamic screen; Click "Choose UI Objects" to choose the corresponding widget id to bind the
widget; You can click "50" to modify the width and height values you need, but do not exceed the canvas
size.
 "6" Display screen; Click "Choose UI Objects" to choose the corresponding widget id to bind the widget.
3.3 Label
Figure 18 Label

19
Example: Click Basic->Text in the Designer to create a text widget, then click UI Controls->Label in the
Blockly to choose Label id and set label content.
3.4 Button
Figure 19 Button

20
 "1" Set Button content; Click "Choose UI Objects" to choose the corresponding widget id to bind the
widget; Click " " to set your custom text content.
 "2" "Enable" or "disable" a button; Click "Choose UI Objects" to choose the corresponding widget id to
bind the widget.
3.5 Image
Figure 20 Image
 "1" "Start" or "stop" Image widget animation; Click "Choose UI Objects" to choose the corresponding
widget id to bind the widget.
 "2" Set Image widget to ""; Click "Choose UI Objects" to choose the corresponding widget id to bind the
widget.
3.6 MessageBox
Figure 21 MessageBox

21
 "1" Get selected Button text (for Message Box in event function).
3.7 Switch
Figure 22 Switch

22
 "1" Read switch status; Click "Choose UI Objects" to choose the corresponding widget id to bind the
widget.
 "2" Toggle switch; Click "Choose UI Objects" to choose the corresponding widget id to bind the widget.
3.8 Slider
Figure 23 Slider
 "1" Read Slider value; Click "Choose UI Objects" to choose the corresponding widget id to bind the
widget.
 "2" Set Slider value; Click "Choose UI Objects" to choose the corresponding widget id to bind the widget;
Modify the value "50" to the slider widget value you need.
3.9 Drop-down List
Figure 24 Drop-down List

23
 "1" Get the currently selected item in the Drop-down List; Click "Choose UI Objects" to choose the
corresponding widget id to bind the widget.
 "2" Set Drop-down List index; Click "Choose UI Objects" to choose the corresponding widget id to bind
the widget; Modify the value to set the order of the list items.
3.10 Widgets Anime
Figure 25 Widgets Anime

24
 "1" Arc Anime---Set anime time, start angle, end angle and end with hidden items; Click "Choose UI
Objects" to choose the corresponding widget id to bind the widget.
 "2" Bar Anime---Set anime time and end with hidden items; Click "Choose UI Objects" to choose the
corresponding widget id to bind the widget.
 "3" Count Anime---Set hour, minute, second and end with hidden items; Click "Choose UI Objects" to
choose the corresponding widget id to bind the widget.
3.11 Checkbox
Figure 26 Checkbox
 "1" Read checkbox status; Click "Choose UI Objects" to choose the corresponding widget id to bind the
widget.
 "2" Choose "Select" or "Unselect" depending on the actual needs; Click "Choose UI Objects" to choose
the corresponding widget id to bind the widget.
3.12 Gauge
Figure 27 Gauge

25
 "1" Read Gauge value; Click "Choose UI Objects" to choose the corresponding widget id to bind the
widget.
 "2" Set Gauge value; Click "Choose UI Objects" to choose the corresponding widget id to bind the
widget.
3.13 Process bar
Figure 28 Process bar

26
 "1" Click "Choose UI Objects" to choose the corresponding widget id to bind the widget.
 "2" Click "Choose UI Objects" to choose the corresponding widget id to bind the widget. You can click
"50" to modify the value ranging from 0 to 100.
3.14 Led
Figure 29 Led
 "1" Set LED status; Click "Choose UI Objects" to choose the corresponding widget id to bind the widget;
The status is "True" or "False".
 "2" Set LED brightness; Click "Choose UI Objects" to choose the corresponding widget id to bind the
widget; You can modify the brightness to any integer value from 0-255.
 "3" Switch LED status; Click "Choose UI Objects" to choose the corresponding widget id to bind the
widget.
3.15 List
Figure 30 List

27
 "1" Get list item content selected; Click "Choose UI Objects" to choose the corresponding widget id to
bind the widget.
3.16 Roller
Figure 31 Roller

28
 "1" Read Roller value; Click "Choose UI Objects" to choose the corresponding widget id to bind the
widget.
 "2" Set Scroll Roller direction to "up" or "down"; Click "Choose UI Objects" to choose the corresponding
widget id to bind the widget.
3.17 Textarea
Figure 32 Textarea
 "1" Show keyboard and select textarea; Click "Choose UI Objects" to choose the corresponding widget id
to bind the widget.
 "2" Read Textarea value; Click "Choose UI Objects" to choose the corresponding widget id to bind the
widget.
 "3" Set Textarea value; Click "Choose UI Objects" to choose the corresponding widget id to bind the
widget.

29
4. IOT
4.1 HTTP
Figure 33 HTTP
 "1" http callback.
 "2" Request http page.
 "3" http init.
Please refer to Intelligent Weather demo in the application market.

30
5. Base Peripherals
5.1 BLE
Figure 34 BLE
 "1" Initialize Blufi for network configuration
 "2" Blufi switch "open" or "close" options.
 Blufi is used to achieve ESP32-WIFI network configuration. Please refer to Intelligent Weather demo in
the application market.
5.2 Serial
Figure 35 Serial

31
 "1" uart init.
 "2" Read uart datas.
 "3" Serial port- write data.
5.3 GPIO
Figure 36 GPIO
 "1" Read GPIO. "GPIO0" is for reference, it needs to be selected according to the actual situation.
 "2" Set GPIO level. "GPIO0" level is set to "0" for reference, it needs to be set according to the actual
situation.
 "3" Initialize GPIO mode. "GPIO0" mode is set to "output" for reference, it needs to be set according to
the actual situation.
Figure 37 ESP32-SC01 Pin Diagram

32
Pin
Definition:http://www.wireless-tag.com/wp-content/uploads/2021/01/WT32-SC01DataSheetV3.3-2-with-nuts.pdf
5.4 PWM
Figure 38 PWM
 "1" Initialize PWM.
 "2" Set PWM channel and duty value.

33
5.5 ADC
Figure 39 ADC
 "1" Set ADC parameters.
5.6 WIFI
Figure 40 WIFI

34
 "1" WIFI callback again.
 "2" Initialize WIFI.

35
6. Extension Hardware
(To be implemented.)
7. System Status
(To be implemented.)

36

8ms Blockly Manual V1.0.0 en

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

8ms Blockly Manual V1.0.0 en

Uploaded by

Copyright:

Available Formats

Wireless-Tag Technology Co., Ltd. V1.0.

8ms Blockly Manual

Dec 25, 2020

Wireless-Tag Technology Co., Ltd.

About this document

Disclaimer and copyright notice

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All rights reserved.

any express or implied guarantee.

Document Revision History

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

1 V1.0.0 C First release Zhang Guangxing Dec 25, 2020

*Changes: C--Create, A--Add, M--Modify, D--Delete

Document approval information:

Author: Zhang Guangxing Date: Dec 25, 2020

Format review: Date:

Content review: Date:

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All rights reserved.

3.1 Widgets Variables........................................................................................................................................ 18

3.2 Object Base.................................................................................................................................................. 18

3.9 Drop-down List............................................................................................................................................ 23

3.10 Widgets Anime.......................................................................................................................................... 24

3.13 Process bar................................................................................................................................................. 26

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All rights reserved.

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All rights reserved.

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All rights reserved.

 "5" Loop Forever, as shown inFigure 3.

Figure 3 Loop Forever

 "6" Timer duration, as shown inFigure 4.

Figure 4 Timer duration

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All rights reserved.

 Click "{ } Code" to view the corresponding code, as shown inFigure 5.

Figure 5 view the corresponding code

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All rights reserved.

Figure 7 utton clicked or long clicked to Change

Figure 8 Code Analysis

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All rights reserved.

 Control selection: HMI -> Button, Dynamic->Bar

 Layout(Hybrid)-Blockly building process：

 Button: Process/Event->UI->When "i" button, then select target button id.

 Bar: UI Controls->Process bar->Set process bar->Choose UI objects(select target bar

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All rights reserved.

id)->Base->Math->random integer from "1" to "100" to replace value "50".

 "1" http callback---http response callback

 "2" wifi connected---When the wifi connection is successful

Figure 10 Intelligent Weather

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All rights reserved.

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All rights reserved.

 "1" Delete json

 "2" Get json value by key ""

 "3" Initialize json

 "4" If key "" in json

It provides test interface: http://api.8ms.xyz/weather/

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All rights reserved.

 "1" Break out of loop.

 "3" Repeat 10 times.

 "4" Repeat while.

Copyright © 2020 Wireless-Tag Technology Co., Ltd. All rights reserved.

The values in the Math section can be modified.

 "2" Remainder of "64" ÷ "10"

 "4" Random integer from "1" to "100"

 "5" Round 3.1

 "6" Square root "9"

 "7" Sin "45"