Instruction Manual

Introduction to Software and Widget Properties

1
 Contents
Modification Record ........................................................................................................................................................ 5
1. General Introduction of the Software ......................................................................................................................... 6
1.1 title bar area ...................................................................................................................................................... 7
1.2 widgets area .................................................................................................................................................... 12
1.3 debugger area ................................................................................................................................................. 12
1.4 widget alignment area ..................................................................................................................................... 13
1.5 common widgets area ..................................................................................................................................... 13
1.6 customized common widgets area.................................................................................................................. 13
1.7 project area ..................................................................................................................................................... 14
1.8 recourses area ................................................................................................................................................ 15
1.9 properties area ................................................................................................................................................ 17
1.10 window view area .......................................................................................................................................... 19
2. Make and Download the Project to the Device ........................................................................................................ 22
3. Forms and Introduction to Forms ............................................................................................................................. 26
3.1 introduction to forms........................................................................................................................................ 26
3.2 new form steps ................................................................................................................................................ 26
3.3 the specific introduction and application of different forms............................................................................. 27
3.4 keyboard.......................................................................................................................................................... 29
4. Introduction to Property Details ................................................................................................................................ 34
4.1 common basic property settings ..................................................................................................................... 34
4.2 general style settings ...................................................................................................................................... 36
5. Animation and Form Animation ................................................................................................................................ 41
5.1 form animation................................................................................................................................................. 41
5.2 form animation type......................................................................................................................................... 41
5.3 form animation properties ............................................................................................................................... 41
5.4 widget animation ............................................................................................................................................. 43
5.5 widget animation properties ............................................................................................................................ 43
6. Other Properties and Uses of the Underlying Widgets ............................................................................................ 47
6.1 window ............................................................................................................................................................ 47

6.2 button ....................................................................................................................................................... 47

6.3 check_button............................................................................................................................................ 51

6.4 radio_button ............................................................................................................................................. 51

6.5 switch ....................................................................................................................................................... 52

6.6 combo_box_ex......................................................................................................................................... 55

2
 6.7 image........................................................................................................................................................ 59

6.8 gif .............................................................................................................................................................. 62

6.9 svg ............................................................................................................................................................ 63

6.10 image value ............................................................................................................................................ 65

6.11 image animation ..................................................................................................................................... 66

6.12 edit.......................................................................................................................................................... 68

6.13 label ........................................................................................................................................................ 71

6.14 hscroll label ............................................................................................................................................ 72

6.15 text selector ............................................................................................................................................ 73

6.16 slider ....................................................................................................................................................... 77

6.17 progress circle ........................................................................................................................................ 80

6.18 progress bar ........................................................................................................................................... 83

6.19 spin_box ................................................................................................................................................. 86

6.20 time clock ............................................................................................................................................... 90

6.21 digit clock ............................................................................................................................................... 92

6.22 gauge ..................................................................................................................................................... 92

6.23 gauge pointer ......................................................................................................................................... 93

7. Instructions and examples for using enhanced widgets .......................................................................................... 95

7.1 chart_view ................................................................................................................................................ 95

7.2 tab_view ................................................................................................................................................... 98

7.3 scroll_view ............................................................................................................................................... 99

7.4 slide_view_view ..................................................................................................................................... 101

7.5 list_view_h ............................................................................................................................................. 102

7.6 list_view.................................................................................................................................................. 104

8. Enhance Other Properties of the Widget ............................................................................................................... 107

8.1 chart_view .............................................................................................................................................. 107

8.2 x_axis ..................................................................................................................................................... 110

8.3 y_axis ..................................................................................................................................................... 116

8.4 bar_series .............................................................................................................................................. 122

8.5 line_series .............................................................................................................................................. 127

8.6 tooltip ...................................................................................................................................................... 134

8.7 tab_view ................................................................................................................................................. 139

3
 8.8 pages ............................................................................................................................................................. 139

8.9 View........................................................................................................................................................ 140

8.10 tab_button_group ................................................................................................................................. 140

8.11 tab_button .............................................................................................................................................. 141

8.12 scroll_view ........................................................................................................................................... 142

8.13 slide_menu........................................................................................................................................... 144

8.14 slide_view_view ................................................................................................................................... 145

8.15 slide_indicator ............................................................................................................................................. 145
8.16 slide_view .................................................................................................................................................... 147

8.17 list_item ................................................................................................................................................ 150

8.18 scroll_bar_m ........................................................................................................................................ 150

8.19 list_view_h ........................................................................................................................................... 150

9. Other Operations .................................................................................................................................................... 151
9.1 add child widgets ........................................................................................................................................... 151
9.2 the way to add child widgets ......................................................................................................................... 151

4
 Modification Record

Version Date Last Modified by Modification summary

modification
record

v1.0 2022-01-04 2022-01-20 Develop the framework of the first version of the
Chinese manual and fill in the content

v1.1 2022-04-18 2022-04-28 Add animations, enhance widgets, and add

descriptions of child widgets.

V1.7 2022-7-27 2022-7-27 Sherry Instructions and examples for using enhanced
widgets

5
 1. General Introduction of the Software

The software adopts flat design, reasonable layout, simple and clear interface, and supports one-click switching
between light and dark themes.
The software interface adapts to the screen size and adapts to a variety of resolution screens.
A variety of functions and different widgets can be used to develop the project in detail after the UI interface design.
The overall page design is shown in the figure below, and the interior is divided into ten different modules to be
introduced one by one.

6
The above marked points are:
1: Title bar area 2: Widget area 3: Debugger area 4: Widget alignment area 5: Common widgets area 6: Customized common
widgets area 7: Project area 8: Resources area 9: Properties area 10: Window view area

1.1 title bar area

1.1.1 project

1. new project: create a new project, click to pop up the detailed setting information of the new project.

7
For the horizontal screen project corresponding to P.S.display size, the rotation angles that can be set are 0 and 180.
The corresponding vertical screen project can be set to 90 and 270. Users can design according to their own needs.
2. open project: click to pop up the project, select the corresponding .st file to open it.
3. save: save the current page.
4.save as：Save the file to the specified path.
5. save all: save the entire project.
6. windows: form function. After clicking, different forms can be selected to create, such as pop-up boxes, keyboards,
etc.
7. recently opened project: display recently opened projects, click to open.
8. project infomation: click to view information about the currently open project.
9.exit: Exit Software

P.S. the corresponding shortcut keys of the open functions can be used in the operation.
8
1.1.2 edit

9
1. undo: click to undo the previous operation.
2. redo: Click to resume the operation.
3. cut: After selecting the widget, click cut to cut the widget, which needs to be used with paste.
4. copy: After selecting the widget, click copy to copy the widget, which needs to be used with paste.
5. paste: Paste widget need to be used in conjunction with cut and copy.
6. delete: Delete widget. Note: Window cannot be deleted by delete.
7. select all (available later): Selects all widgets on the page.
8. array: Set the hierarchical relationship of widgets.
9. alignment: set the alignment of multiple widgets.
10. attribute: set the layout of multiple widgets.
P.S. the corresponding shortcut keys of the open functions can be used in the operation.

10
 1.1.3 view

1. actual size: after clicking, the window will restore the original actual size.
2. zoom in/out: zoom in and out of the current window view size.
3. toggle full screen: display the item in full screen.
4. widget: each widget.
P.S. there is a √ after each widget, and the widget will be displayed on the upper computer only when it is checked.
If the button is not checked, its icon will not be displayed in the widget bar.
1.1.4 debug

(1) running (available later): simulate running the current project.

P.S. different from save and running. When it is not saved, the interface of the project when it was last saved is run.
(2) save and running (available later): save and simulate running the current project.
(3) compile (available later): package the current project and pop up the folder.
(4) download (available later): download the current project directly to the device.
1.1.5 window

(1) resetting the default view: reset default view

(2) close: close the currently selected window
(3) close all: close all open windows
(4) minimize: minimize the interface

11
 1.1.6 tools

(1) switch language (available later): switch the page between Chinese and English.
(2) switch themes: theme switching, supports switching between two theme interfaces.
(3) font size :modify the overall font size of the upper computer.
(4) lock: lock the currently selected widget, support multiple selection.
(5) unlock: unlocks the currently selected widget, supports multiple selection.
(6) exit: exit the program.

1.1.7 help

(1) version: Current version number.

(2) checking for update (available later): Check for updates.
(3) reviews: Update the record.
(4) about us: Contact information, etc.

1.2 widgets area

Button widgets:button,check_button,radio_button,switch;
Selector widgets:spin_box,combo_box_ex,text_selector,slide_menu;
Chart widgets:chart_view,pie_slice,qr,video_view;
Image widgets:image,gif,svg,image_value,image_animation;
Text widgets:label,hscroll_lable,edit,mledit;
Indicator widgets:slider,progress_bar,progress_circle,guage,guage_pointor;
Dial widgets:digit_clock,time_clock;
View widgets:tab_view,scroll_view,slide_view,list_view,list_view_h;
Container widgets:pages,view,list_item,dragger;

1.3 debugger area

Available later

12
1.4 widget alignment area
One-click alignment for multiple widgets.

1. Top alignment Bottom alignment Left alignment Right alignment 。

2. Vertical top equally divided Horizontal center alignment Vertical center alignment

Vertical center equally divided Vertical equally divided

3. Horizontal left equally divided Horizontal center equally divided Horizontal right equally

divided Horizontal equally divided

4. Bring forward Send backward Bring to front Send to back

1.5 common widgets area

The top ten widgets are arranged according to the user's usage frequency, which is convenient for users to drag
and drop quickly.
Taking into account the user habits, it is updated every time the project is available.

1.6 customized common widgets area

Users can customize and drag the commonly used widgets they need here.
Double-click the widget to delete it, and it can be added repeatedly.

Double click on

13
1.7 project area

1.7.1 Project name

User-defined name when creating a new project, which can be changed later.
P.S. Project name and file name are two different concepts.
1.7.2 window name
The name of the window in the project, the name can be customized, but there must be a unique home_page.
For the convenience of sending and receiving instructions and other issues, avoid using invalid characters in the
json code to name widgets.
1.7.3 Widget name
The name of the widget in the project. The name can be customized.
For the convenience of sending and receiving instructions and other issues, avoid using invalid characters in the
json code to name widgets.
1.7.4 Icon
Different widgets have different corresponding icons and cannot be changed.
1.7.5 Setting
Setting can modify the project name, project resolution, baud rate, backlight, screen rotation direction, and
clicking save will save.

14
1.8 recourses area

The recourses bar is mainly used to store various resources. Resources must be put into recourses before the
widgets can be used.
It is recommended to name recourses using a mixture of letters and numbers.
The above correspond to 1 respectively: recourses category 2: Fuzzy Search 3: Add recourses 4: Resource
Information 5: Delete recourses
P.S.1. recourses with the same name and format will be replaced.
2. The longest recourses file is limited to 31 bytes, excluding the suffix name.

1.8.1 resources category

There are four different categories: image/font/video/audio

image supported file types:

font supported file types:

video supported file types:

audio supported file types:

15
 1.8.2 fuzzy search
recourses support fuzzy search, perform fuzzy search by entering characters in the search box.

16
 1.8.3 add resources
Under different categories, resources in corresponding formats can be added.
Supported file types are listed in 1.8.1recourses category.

1.8.4 resource information

Resources added to recourses will display thumbnail and actual size (image only), resource name.

1.8.5 delete recourses

Click delete to delete this resource in the recourses library.
P.S. delete will not prompt, click to delete directly. Please check carefully the resources that need to be deleted.

1.9 properties area

Thumbnail (take window as an example):

17
Expanded view (take window as an example):

properties correspond to various properties of the widget, see 3. Introduction to Property Details.

18
1.10 window view area
The window view is shown below.

1.10.1 opened window

In the window opened recently for this project, the * in the upper right corner indicates a page that has saved items.
Click the x to close, open and close the window repeatedly.

19
 1.10.2 ruler
The ruler of the overall project allows users to view the current coordinates more clearly.
The ruler icon in the lower right corner can be clicked to switch to not display the ruler.

1.10.3 gridlines
It can help users to locate coordinate points.
Click the gridlines icon in the lower right corner to switch to not display the gridlines.

20
 1.10.4 window view
The user needs to drag the widget to this space to make a project.

1.10.5 tool bar

Show border lines for all widgets: After clicking, all the widgets can be circled, which is convenient for users to find.
Ruler: After clicking, you can choose whether to display the ruler in the window bar.
Gridlines: After clicking, you can choose whether to display the gridlines in the window bar.
Current view zoom ratio: Display the thumbnail size of the current view. 100% the original size.

21
 2. Make and Download the Project to the Device

1. Open the upper computer software, right-click the new project in the project or the shortcut key ctrl+n.

2.

After setting, click create to create the project.

22
3. After the creation is completed, the project-related information will appear in the project column at the upper left,
the default recourses will be loaded in the lower left corner, and the home_page interface of the created project will
be displayed in the middle. The resource bar of home_page will appear on the right.
According to the user's needs, drag the widget to the window to design the interface.
At the same time, add recourses according to your own needs. Taking image as an example, several other items
are added in the same way.

4. After making it, save the project. Click debug-download. Select the path will pop up, select the path you want to
download to.

Select folder
Cancel

23
5. There will be a prompt message after the download is successful.

6. Connect the device to the pc and let the pc end read the device. Delete the original files in the device.

Before deleting:

After deleting:

7. After the deletion is complete, paste all the contents of the folder downloaded in step 3 into the device.

8. After all the content is pasted, click remove device.

24
9. After the system prompts that the device has been ejected safely, unplug the usb cable connected to the
computer.

10. Click the reset button of the device to restart.

11. The device is restarted, and the project is successfully burned to the device.
P.S. if you need to update the project with a u-disk, please refer to the document Instructions of U-disk Update
Firmware and Project File.

25
 3. Forms and Introduction to Forms

3.1 introduction to forms

Forms are necessary in a project. Considering that different requirements require a variety of different form interface
layouts to support the integrity of the entire project, users can create different forms according to their own choices.

3.2 new form steps

Select the project in the project on the left, and right-click to select a different form to add.

The added form will exist in the project bar on the left.

kb_default1 added

26
3.3 the specific introduction and application of different forms
3.3.1 window
As one of the basic widgets, you can drag and drop widgets on the window to create projects.
All widgets except the window can be dragged and dropped on the window.

3.3.2 dialog
The dialog is a pop-up box, which can be used in conjunction with the button. When the button is clicked, a pop-up
box prompt will appear. Such as warnings, current values, etc.

27
 3.3.3 popup
popup is a popup. When performing an operation, you can choose to use popup with popup prompts, etc.

3.3.4 overlay
overlay is overlay. When performing an operation, you can choose to cover a certain area to form effects such as
data hiding.

28
3.4 keyboard
3.4.1 introduction of keyboard
As the keyboard, considering that different users need different types of keyboards in different projects to meet the
needs of different widgets. Therefore, users can design different keyboards according to their own needs. Set the
bg_color, bg_image, etc. of each button of the keyboard according to your own needs. Afterwards, the keyboard is
introduced into the widget for use through the settings of the widget.
The currently supported keyboards are shown below.

3.4.2 the way to set keyboard

1. Choose a widget that supports text input, such as edit/spin_box/combo_box_ex.
2. Select the widget and find the keyboard option in the properties on the right.

3. After setting, download the project to the device. After clicking the widget in the device, the set keyboard can be
applied.

29
 3.4.3 kb_default
kb_default is the default keyboard, all content can be set, kb_default includes uppercase keyboard, lowercase
keyboard, numeric keyboard, symbol keyboard and Chinese keyboard.

30
 3.4.4 kb_ascii
kb_ascii is a keyboard that can only input ASCII, and you can design pages according to your own needs. All legal
ASCII input is supported.

31
 3.4.5 kb_uint
kb_uint only allows the input of uint, and design the page according to your own needs.

3.4.6 kb_int
kb_int only allows the input of int, and design the page according to your own needs.

32
 3.4.7 kb_ufloat
kb_ufloat only allows input of ufloat, and design the page according to your own needs.

3.4.8 kb_float
kb_float only allows the input of float, and design the page according to your own needs.

3.4.9 kb_phone
kb_phone only allows the input of numeric numbers, and design the page according to your own needs.

33
 4. Introduction to Property Details

4.1 common basic property settings

4.1.1 name
Widgets name For a project, each widget must have a unique name.
For the convenience of sending and receiving instructions and other issues, avoid using invalid characters in the
json code to name widgets.

 Default value: based on the widget type, assigned by the system

 Type of data: text
 Whether it is editable: Yes

4.1.2 type
Widget type (specified by the system, cannot be changed)

 Default value: based on the widget type, assigned by the system

 Type of data: text
 Whether it is editable: No

4.1.3 x/y
Widget x/y coordinates (upper left corner).
Can be set to a negative value.

 Default value: based on the widget type, assigned by the system

 Type of data: int
 Whether it is editable: Yes

4.1.4 w/h
The width/height of the widget.
Unit: pixel.

 Default value: based on the widget type, assigned by the system

 Type of data: uint
 Whether it is editable: Yes

34
 4.1.5 text
initial text on the widget.

 Default value: based on the widget type, assigned by the system

 Type of data: text
 Whether it is editable: Yes

4.1.6 enable
Whether the widget is enabled.
P.S. If this option is not selected, it will be displayed as "disabled" and cannot be operated.

 Default value: true

 Data type: bool
 Whether it is editable: Yes

4.1.7 visible
Determines whether the widget is visible.
Different from enable. If this option is not checked, the widgets will not be displayed but will still be operable.

 Default value: true

 Data type: bool
 Whether it is editable: Yes

35
4.2 general style settings
4.2.1 border_color
The border color of the widget. Most allow user to define border color.
The desired translucent effect can be achieved by adjusting the alpha value.

 Default value: based on the widget type, assigned by the system

 Type of data: hex
 Whether it is editable: Yes

4.2.2 border
The border type of the widget.
5 types to choose from: full border, transparent on the left, transparent on the top, transparent on the right, and
transparent on the bottom.

 Default value: all (full border)

 Data type: text
 Whether it is editable: Yes

4.2.3 border_width
The border width of the widget.
Unit: pixel.

 Default value: 1 (different widgets with different default values)

 Data type: uint
 Whether it is editable: Yes

36
 4.2.4 round_radius
The corner arc of the widget border.
Unit: pixel.

Click the arrow on the left to expand more detailed settings:

The upper left radian, the upper right radian, the lower left radian, and the lower right radian.

 Default value: 4 (different widgets with different default values)

 Data type: uint
 Whether it is editable: Yes

4.2.5 text_color
The text color of the widget. Most allow user to define border color.
The desired translucent effect can be achieved by adjusting the alpha value.

 Default value: based on the widget type, assigned by the system

 Type of data: hex
 Whether it is editable: Yes

37
 4.2.6 font_name
The font of the widget text. The font should be added to the resource list, otherwise it cannot be selected in
font_name.
It is recommended to avoid naming fonts with invalid characters in json code.

 Default value: default (cn normal)

 Type of data: text
 Whether it is editable: Yes

4.2.7 font_size
The font size of the widget text

 Default value: 18
 Type of data: uint
 Whether it is editable: Yes

4.2.8 text_align
Defines the alignment style for the widget text.
text_align_v: vertical alignment style

text_align_h: horizontal alignment style

 Default value: middle (text_align_v); center (text_align_h)

 Data type: text
 Whether it is editable: yes

4.2.9 bg_color
The background color of the widget. Most allow user to define border color.
The desired translucent effect can be achieved by adjusting the alpha value.

 Default value: based on the widget type, assigned by the system

 Type of data: hex
 Whether it is editable: Yes
38
 4.2.10 bg_image
Defines the widget's background image by name.
P.S.1. if the image is not defined, the background will appear transparent.
2. The picture should be uploaded to the resources list on the left before it can be referenced in the widget.

 Default value: based on the widget type, assigned by the system

 Type of data: text
 Whether it is editable: Yes

4.2.11 bg_image_draw_type
Defines the background image drawing type for the widget's background image.

(1) default: the picture will be displayed in its original size and aspect ratio and aligned in the upper left corner of
the display area of this image widget
(2) lcon: the picture will be tiled and displayed in the entire display area according to the original aspect ratio.
When the aspect ratio of the actual display area is inconsistent with the aspect ratio of the original display area,
the image will be enlarged or reduced according to the longer side.
(3) center: the picture will be displayed in the center of the display area with the original size and aspect ratio, and
the excess part will not be scaled.
(4) scale: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display area
is inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced according
to the shorter side. It will be aligned at the top.
(5) auto: similar to the default. The picture will be displayed at its original size and aspect ratio, aligned at the top
left corner of the display area of this image widget.
(6) scale_auto: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display
area is inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced
according to the shorter side.
(7) scale_down: similar to the center. The picture will be displayed in the center of the display area at its original
size and aspect ratio.
(8) scale_w: width zoom display. The image is scaled by the width of the target rectangle, the width is scaled by
this ratio, and the excess will not be displayed. The picture will be displayed in its original aspect ratio. When the
aspect ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the picture
will be enlarged or reduced according to the shorter side. It will be aligned at the top.
(9) scale h: height zoom display. The image is scaled by the height of the target rectangle, and the width is scaled
by this ratio. The excess part will not be displayed
(10) repeat: the picture is tiled in the space.
 Default value: default
 Type of data: text
 Whether it is editable: Yes

39
 4.2.12 icon
Defines the widget's icon by name.
P.S.1. if not defined, the icon will be displayed as transparent.
2. The picture should be uploaded to the resources list on the left before it can be referenced in the widget.

 Default value: based on the widget type, assigned by the system

 Type of data: text
 Whether it is editable: Yes

4.2.13 icon_at
Define the position of the icon on the widget
P.S.auto: the middle left of the widget. left: the middle left of the widget. center: the center of the widget. right: the
middle right of the widget. top: the middle top of the widget bottom: the middle bottom of the widget.

 Default value: auto

 Type of data: text
 Whether it is editable: Yes

4.2.14 margin
Defines the position and distance of the text inside the widget, calculated from its original position (defined by the
text alignment and the widget itself).

Click to expand and adjust the four directions individually.

Unit: pixel.
P.S.top: increase the distance of the current text to the top of the original position. bottom: increase the distance of
the current text to the bottom of the original position. left: increase the distance of the current text to the left of the
original position. right: increase the distance of the current text to the right of the original position.

 Default value: 0
 Type of data: uint
 Whether it is editable: Yes
4.2.15 key_tone
Click whether to trigger the background sound.

 Default value: true (different widgets with different default values)

 Data type: bool
 Whether it is editable: yes
40
 5. Animation and Form Animation

5.1 form animation

Form animation is applied to form opening and form closing, and the properties involved are open_anim_hint and
close_anim_hint. Set it according to your needs.

5.2 form animation type

Form animations can only be applied to forms. Form animation types are divided into the following types:

htranslate: left and right translate

vtranslate： up and down translate

slide_up： cover to the top

slide_down： cover to the bottom

slide_left： cover to the left

slide_right： cover to the right

5.3 form animation properties

5.3.1 anim_duration
Animation duration.
P.S. when is 0, the default is 500ms.

Default value: 0
Data type: uint
Whether it is editable: yes

41
 5.3.2 anim_trend
Animation trends.

Default value: cubic_out

Data type: text
Whether it is editable: yes

5.3.3 opacity_start_value
Transparency at the start of animation playback.

Default value: 0
Data type: uint
Whether it is editable: yes

5.3.4 opacity_end_value
Transparency at the end of animation playback.

Default value: 0
Data type: uint
Whether it is editable: yes

5.3.5 disable_anim
Whether to automatically destroy after the animation finishes playing.

Default value: false

Data type: bool
Whether it is editable: yes

42
5.4 widget animation
Widget animation can only be applied to widgets other than window. The corresponding property is the
animation_type in each widget, and the animation types of the widgets are divided into the following types:

move: control the widget to move within the specified coordinate range during the animation cycle.
value: control the change of the widget with the value property during the animation cycle.
opacity: control the transparency of the widget from the beginning to the end of the animation cycle.
scale: control the proportional scaling of the widget during the animation cycle.
rotation: control to perform a rotation of the widget around itself during the animation cycle.
Notice: scale and rotation are specific to image/gif/svg/image_value_image_animation.

5.5 widget animation properties

5.5.1 name
The name saved after setting the animation properties for the widget.

Default value:
Data type: text
Whether it is editable: yes

5.5.2 delay_start_time
Delay start time.

Default value: 0
Data type: uint
Whether it is editable: yes

43
 5.5.3 single_anim_duration
The duration of a single animation.

Default value: 0
Data type: uint
Whether it is editable: yes

5.5.4 multi_speed
Time magnification.

Default value: 1
Data type: uint
Whether it is editable: yes

5.5.5 single_anim_trend
Animation trends.

Default value: cubic_out

Data type: text
Whether it is editable: yes

5.5.6 round_trip_time
Number of round triP.S.
P.S. Need to check the front, the value will appear, 0 means permanent play.

Default value: false/

Data type: bool/uint
Whether it is editable: yes

44
 5.5.7 repeat_time
Repeat times.
P.S. Need to check the front, the value will appear, 0 means permanent play.

Default value: false/

Data type: bool/uint
Whether it is editable: yes

5.5.8 auto_play_created
The animation plays automatically after it is created.

Default value: false

Data type: bool
Whether it is editable: yes

5.5.9 auto_delete_over
Destroyed automatically after the animation ends.

Default value: false

Data type: bool
Whether it is editable: yes

5.5.10 x_strat/end
The starting x-coordinate and ending x-coordinate of the animation playback.

Default value: 0/0

Data type: int
Whether it is editable: yes

45
 5.5.11 y_start/end
The start y coordinate and end y coordinate of the animation playback.

Default value: 0/0

Data type: int
Whether it is editable: yes

5.5.12 start/end_value：
The start and end values of animation playback.

Default value: 0/0

Data type: int
Whether it is editable: yes

5.5.13 opacity_start/end_value
The start and end values of transparency.

Default value: 0/0

Data type: int
Whether it is editable: yes

5.5.14 rotation_start/end_value
The start and end values of the rotation.

Default value: 0/0

Data type: int
Whether it is editable: yes

46
 6. Other Properties and Uses of the Underlying Widgets

6.1 window
As the most basic widget, the window widget needs to be added and used by the user at the window.

6.2 button
The use of the button widget is very wide, the general use is as follows:
(1) The button can be used to jump to the page (window), pop-up box (dialog), etc. after clicking.
(2) The button button can be used to increase or decrease the value after it is bundled with the widget.
(3) The button button can be used to perform a variety of different functions during secondary development.

6.2.1 user_define:
The button's user_define has five different options: none

open_window： Once set, clicking on this widget will open a new window for the custom set target_name.

home_window： After setting, clicking this widget will return to the project's home_page.

back_window： After setting, clicking this widget will return to the previous window and close the current window.

close_window： After setting, click this widget to close the current window (home_page cannot be closed), the default
target_name is the window where it is located, and it can be modified to other windows.

set_value： Set incremental and decremental adjustment. Set the bundle target_name for addition and subtraction.

 Default value: none

 Data type: text
 Whether it is editable: yes

47
 6.2.2 target_name
The name of the object to set.

P.S.1. if user_define is set to open_window, the target name will be chosen from the window names already created
in the project. If set to home_window/back_window, you don't have to choose a target name.
2. If set to set_value, you need to select the widgets that have been generated in the page. And drag the widget to
the page before you can select the widget for set_value.
 Default value: none
 Data type: text
 Whether it is editable: yes

6.2.3 min/max:
The minimum/maximum numerical limit of the corresponding widget.
Options are only displayed if user_define is set to set_value.

 Default value: 0/100

 Data type: float
 Whether it is editable: yes

6.2.4 step:
Click the widget once to increase the step value of the decrease.
Options are only displayed if user_define is set to "set _value".

 Default value: 0/100

 Data type: float
 Whether it is editable: yes

48
 6.2.5 format
Define the data format type.
%d only displays the integer part. %f will be displayed as a floating-point number.

 Default value: %02d

 Data type: text
 Whether it is editable: yes

6.2.6 increase_decrease
Define increment or decrement after click.
++: After the button is clicked, the value of the defined widget is incremented. The incremental value will be defined
by step.
--: Each trigger decrements the value of the defined widget after the button is clicked. The decremental value is
defined by step.

 Default value: ++
 Data type: text
 Whether it is editable: yes

6.2.7 enable_long_press
Whether to enable long press events.
When repeat is greater than 0, the button function will be triggered when the time of pressing the button is
exceeded.
If the widget is kept pressed, it will fire repeatedly after the set time interval.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.2.8 long_press_time
The time to trigger the long press.
The unit is ms.

 Default value: 1000

 Data type: uint
 Whether it is editable: yes

49
 6.2.9 repeat
Repeat trigger time interval, in ms. If the value is 0, repeat does not trigger.
P.S. when repeat is greater than 0, the button function will be triggered when the time of pressing the button
exceeds. And if the widget is kept pressed, it will fire repeatedly after the set time interval.

 Default value: 0
 Data type: uint
 Whether it is editable: yes

6.2.10 enable_press_down/press_down_value
Whether to allow the return value to be sent when the button is pressed. / Custom return value sent when the button
is pressed.
P.S. if enable_press_down is not checked, the set custom return value is invalid.

 Default value: false/

 Data type: bool/hex
 Whether it is editable: yes

6.2.11 enable_press_up/press_up_value
Whether to allow the return value to be sent when the button is released. / Custom return value sent when the
button is released.
P.S. If enable_press_up is not checked, the set custom return value is invalid.

 Default value: false/

 Data type: bool/hex
 Whether it is editable: yes

6.2.12 enable_click/click_value
Whether to allow the return value to be sent when the button is clicked and released. / Custom return value sent
when the button is clicked and released.
P.S. If enable_click is not checked, the set custom return value is invalid.

 Default value: true/

 Data type: bool/hex
 Whether it is editable: yes

50
 6.2.13 enable_long_press/long_press_value
Whether to allow the return value to be sent when long-pressed. / Custom return value sent when long press.
P.S. If enable_click is not checked, the set custom return value is invalid.

 Default value: false/

 Data type: bool/hex
 Whether it is editable: yes

6.3 check_button
The check_button is mostly used for different options whether to check the corresponding options, such as when
ordering, for the specific requirements of the food, whether to add small ingredients, whether to add sauces, etc.,
just tick in front of the check_button.

6.3.1 value:
The default state of the widget, unchecked by default.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.3.2 text
The text content displayed by the widget.

 Default value: checkbutton

 Data type: text
 Whether it is editable: yes

6.4 radio_button
The radio_button is mostly used to select one of different options. For example, when filling in the information, you
need to choose one of the two genders, and click to check in front of the one that matches your own, then you need
to use the radio_button.
6.4.1 value:
The default state of the widget, unchecked by default.

 Default value: false

 Data type: bool
 Whether it is editable: yes

51
 6.4.2 text
The text content to display when the box is checked.

 Default value: radiobutton

 Data type: text
 Whether it is editable: yes

6.5 switch
Most of the switch widgets are used to widget the on and off status of an option, for example, in the process of
connecting with other devices, to widget the on and off status of the corresponding device.
style category:
6.5.1 bg_color:
The background color when the switch is in the false state.

 Default value: 0x00000000

 Data type: hex
 Whether it is editable: yes

52
 6.5.2 selected_bg_color
The background color when the switch is in the true state.

 Default value: 0x338fff

 Data type: hex
 Whether it is editable: yes

6.5.3 fg_color:
The foreground color of the widget when the switch is in the false state.

 Default value: 0xffffff

 Data type: hex
 Whether it is editable: yes

53
 6.5.4 selected_fg_color:
The foreground color of the toggle button in the true state.

 Default value: 0xffffff

 Data type: hex
 Whether it is editable: yes
Other category:

6.5.5 value:
Whether the widget is selected by default.

 Default value: false

 Data type: bool
 Whether it is editable: yes

54
6.6 combo_box_ex
combo_box_ex is a drop-down box option used to select one of several different options. For example, when filling
in the information, the identity needs to select specific options through the drop-down box, and combo_box_ex can
be used at this time.
style category:

6.6.1 selected_text_color
The text color of the selected area in the editor.

 Default value: 0x000000

 Data type: hex
 Whether it is editable: yes

6.6.2 tips_text_color
The color of the hint text.

 Default value: rgba(68, 68, 68, 1)

 Data type: hex
 Whether it is editable: yes

55
 6.6.3 selected_bg_color
The background color of the editor's selected area.

 Default value: rgba(181, 215, 253, 1)

 Data type: hex
 Whether it is editable: yes
Other category:

6.6.4 auto_fix:
Whether the widget automatically corrects errors. Once the value changes, the system will automatically fix the
content type to prevent errors.

 Default value: true

 Data type: bool
 Whether it is editable: yes

6.6.5 input_type
The format type of the input text.
text: input data will be displayed as ascii. int: input data will be displayed as int type value. float: the input data will
be displayed as a float type value.
The password input data will be displayed as ascii. (Set whether the password is visible or not with
password_visible.) date: the input data will be displayed in "yyyy/mm/dd" format (data is ascll). time: input data is
displayed in "hh:mm" format (data is ascil).

 Default value:
 Data type: text
 Whether it is editable: yes

56
 6.6.6 min/max:
The minimum/maximum numerical limit for the widget.

 Default value: 0/100

 Data type: float
 Whether it is editable: yes

6.6.7 tips:
The prompt text to display when the widget text is empty.
P.S. only valid when input_type is text.

 Default value: please enter your text

 Data type: text
 Whether it is editable: yes

6.6.8 text
The default text displayed by the widget.
P.S. it needs to correspond to the input_type set earlier. .

 Default value: combo box ex

 Data type: text
 Whether it is editable: yes

6.6.9 options:
The text content of each option in the text picker.
Fixed format: "1:xxx1;2:yyy;3:zzz;…."

 Default value:
 Data type: text
 Whether it is editable: yes
6.6.10 selected_index:
The initial default display option index number.
P.S. option index numbers are assigned by the system, starting from 0.

 Default value: 0
 Data type: unit
 Whether it is editable: yes
57
 6.6.11 item_height:
The height of the dropdown option.

Unit: pixel
 Default value: 30
 Data type: unit
 Whether it is editable: yes

6.6.12 action_text:
Determines the action for entering the keyboard.

 Default value: done

 Data type: text
 Whether it is editable: yes

6.6.13 readonly:
Whether it is read-only.
If checked, the keyboard input function is unavailable, if not checked, it is available.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.6.14 password_visible:
When the input type is set to "password", whether the content is displayed as "*" when it is not checked, and the
input information is displayed when it is checked.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.6.15 open_kb_when_focused/close_kb_when_blured
Turn on the input method when the focus is obtained/close the input method when the focus is lost.

 Default value: true/true

 Data type: bool
 Whether it is editable: yes

58
6.7 image
image is used to display an image.

6.7.1 image
The picture displayed by the widget.
The corresponding pictures need to be imported into the recourses bar on the left first.
Select from the drop-down list or enter the name of the picture file in the box to search.

 Default value: num0

 Data type: text
 Whether it is editable: yes

6.7.2 draw_type:
The way the picture is displayed.

(1) default: the picture will be displayed in its original size and aspect ratio and aligned in the upper left corner of the
display area of this image widget
(2) lcon: the picture will be tiled and displayed in the entire display area according to the original aspect ratio. When
the aspect ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the image
will be enlarged or reduced according to the longer side.
(3) center: the picture will be displayed in the center of the display area with the original size and aspect ratio, and
the excess part will not be scaled.
(4) scale: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display area is
inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced according to the
shorter side. It will be aligned at the top.
(5) auto: similar to the default. The picture will be displayed at its original size and aspect ratio, aligned at the top left
corner of the display area of this image widget.
(6) scale_auto: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display
area is inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced
according to the shorter side.
(7) scale_down: similar to the center. The picture will be displayed in the center of the display area at its original size
and aspect ratio.
(8) scale_w: width zoom display. The image is scaled by the width of the target rectangle, the width is scaled by this
ratio, and the excess will not be displayed. The picture will be displayed in its original aspect ratio. When the aspect
ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the picture will be
enlarged or reduced according to the shorter side. It will be aligned at the top.
(9) scale h: height zoom display. The image is scaled by the height of the target rectangle, and the width is scaled
by this ratio. The excess part will not be displayed
(10) repeat: the picture is tiled in the space.
 Default value: default
 Data type: text
 Whether it is editable: yes

59
 6.7.3 scale_x/y
Zoom ratio in x/y direction

 Default value: 1
 Data type: float
 Whether it is editable: yes

6.7.4 anchor_x/y:
Define the anchor point x and y coordinates. Indicates the abscissa ratio in the plane rectangular coordinate system
with the upper left corner of the picture as the origin.
P.S. two formats. If set to pure numbers (0.0 - -1.0), hour/minute/second images will be scaled. If set numbers with
"px", it will adjust the coordinates of the hour/minute/second image by the coordinates. (0 is the upper left corner)

 Default value: 0.5

 Data type: float
 Whether it is editable: yes

6.7.5 rotation
The rotation angle centered on the anchor point.
P.S. a number greater than 0 indicates the angle of clockwise rotation. A number less than 0 represents the angle of
counterclockwise rotation.

 Default value: 0
 Data type: float
 Whether it is editable: yes

6.7.6 text
The text displayed on the image.

 Default value:
 Data type: text
 Whether it is editable: yes

60
 6.7.7 clickable
Whether to trigger the click event when clicked.
Press_down/up_value and click_value can only be used after checking.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.7.8 6.7.8 selectable

Whether to set the selected state.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.7.9 enable_press_down/press_down_value
Whether to allow the return value to be sent when the button is pressed. / Custom return value sent when the button
is pressed.
P.S. if enable_press_down is not checked, the set custom return value is invalid.

 Default value: false/

 Data type: bool/hex
 Whether it is editable: yes

6.7.10 enable_press_up/press_up_value
Whether to allow the return value to be sent when the button is released. / Custom return value sent when the
button is released.
P.S. If enable_press_up is not checked, the set custom return value is invalid.

 Default value: false/

 Data type: bool/hex
 Whether it is editable: yes

61
 6.7.11 enable_click/click_value
Whether to allow the return value to be sent when the button is clicked and released. / Custom return value sent
when the button is clicked and released.
P.S. If enable_click is not checked, the set custom return value is invalid.

 Default value: true/

 Data type: bool/hex
 Whether it is editable: yes

6.8 gif
gif is used to display a moving picture in gif format, which can be added and used according to your own needs.

6.8.1 image
The picture displayed by the widget.
Import the recourses bar on the left first.
Select from the drop-down list or enter the name of the picture file in the box to search.

 Default value:
 Data type: text
 Whether it is editable: yes

6.8.2 scale_x/y:
Defines the x/y zoom ratio of the gif image file.

 Default value: 1
 Data type: float
 Whether it is editable: yes

6.8.3 anchor_x/y
Define the anchor point x and y coordinates. Indicates the abscissa ratio in the plane rectangular coordinate system
with the upper left corner of the picture as the origin.
P.S. two formats. If set to pure numbers (0.0 - -1.0), hour/minute/second images will be scaled. If set numbers with
"px", it will adjust the coordinates of the hour/minute/second image by the coordinates. (0 is the upper left corner)

 Default value: 0.5

 Type of data: float
 Whether it is editable: yes
62
 6.8.4 rotation:
The rotation angle centered on the anchor point.
A number greater than 0 represents an angle of clockwise rotation, and a number less than 0 represents an angle of
counterclockwise rotation.

 Default value: 0
 Data type: float
 Whether it is editable: yes

6.8.5 clickable
Whether to trigger a click event when clicked.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.8.6 selectable
Whether to set the selected state.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.9 svg
svg is used to display pictures in svg format, and the types of widgets and pictures support vector enlargement.

6.9.1 scale_x/y
Defines the x/y zoom ratio of the gif image file.

 Default value: 1
 Data type: float
 Whether it is editable: yes

63
 6.9.2 anchor_x/y
Define the anchor point x and y coordinates. Indicates the abscissa ratio in the plane rectangular coordinate system
with the upper left corner of the picture as the origin.
P.S. two formats. If set to pure numbers (0.0 - -1.0), hour/minute/second images will be scaled. If set numbers with
"px", it will adjust the coordinates of the hour/minute/second image by the coordinates. (0 is the upper left corner)

 Default value: 0.5

 Type of data: float
 Whether it is editable: yes

6.9.3 rotation
The rotation angle centered on the anchor point.
A number greater than 0 indicates the angle of clockwise rotation. A number less than 0 represents the angle of
counterclockwise rotation.

 Default value: 0
 Data type: float
 Whether it is editable: yes

6.9.4 text:
Default text.

 Default value:
 Data type: text
 Whether it is editable: yes

6.9.5 clickable
Whether to trigger a click event when clicked.

Default value: false

Data type: bool
Whether it is editable: yes

64
 6.9.6 selectable
Whether to set the selected state.

Default value: false

Data type: bool
Whether it is editable: yes

6.10 image value

image_value is used to display the number of the picture type. The number supports many different types. Modify
the format according to your own needs.

6.10.1 image
The picture displayed by the widget. Import the recourses bar on the left first.
Select from the drop-down list or enter the name of the picture file in the box to search.

 Default value: num

 Data type: text
 Whether it is editable: yes

6.10.2 min/max:
The minimum/maximum numerical limit for the widget.

 Default value: 0/100

 Data type: uint
 Whether it is editable: yes

6.10.3 value
Default value of the widget

 Default value: 1.23

 Data type: float
 Whether it is editable: yes

65
 6.10.4 format
Defines the data formatting type.
%d will only display the integer part, %f will display it as a floating-point number.

 Default value: %.2f

 Data type: text
 Whether it is editable: yes

6.11 image animation

image_animation is used to display a group of pictures, rotate a group of pictures, set the first picture and the last
picture according to your own needs, and whether to play in a loop.
P.S.The naming of the images should be based on the same prefix, the number followed should be in %d format and no other ch
aracters are allowed, such as a group of images with the names image_ani_1, image_ani_2, image_ani_3 .... .image_ani_100, th
en you need to fill in all the content before the number at the image, that is, image_ani_.
6.11.1 auto_play
Whether to display playback automatically.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.11.2 image
The name of the picture group displayed by the widget. Import the recourses bar on the left first.
Select from the drop-down list or enter the name of the picture file in the box to search.

 Default value: num

 Data type: text
 Whether it is editable: yes

6.11.3 start_index
Play the first picture of the picture group in the animation, defined by the number in the picture name.

 Default value: 0
 Data type: uint
 Whether it is editable: yes

66
 6.11.4 end_index
Play the last picture of the picture group in the animation, defined by the number in the picture name.

 Default value: 9
 Data type: uint
 Whether it is editable: yes

6.11.5 interval
Playing time of each picture
The unit is ms.

 Default value: 16
 Data type: uint
 Whether it is editable: yes

6.11.6 format
Determines the name format for animation image names.

 Default value: %s%d

 Data type: text
 Whether it is editable: no

6.11.7 delay:
Length of playback delay in autoplay mode.
The unit is ms.

 Default value: 0
 Data type: unit
 Whether it can be changed: yes

6.11.8 loop
Whether the animation loops repeatedly.
P.S. if the animation is not checked, it will only play once.

 Default value: true

 Data type: bool
 Whether it can be changed: yes

67
6.12 edit
edit widget is an inputable text box, and the input_type can be used to determine the content that can be entered in
the widget.
Note: 1. For the specific input type of input_type, see 4.11.5 input_type.
2. After the content of the input box is determined, only the content of a specific format can be input.
style category:

6.12.1 selected_text_color
The text color of the selected area in the editor.

 Default value: 0x000000

 Data type: hex
 Whether it is editable: yes

6.12.2 tips_text_color
The color of the hint text.

 Default value: rgba(68, 68, 68, 1)

 Data type: hex
 Whether it is editable: yes

68
 6.12.3 selected_bg_color
The background color of the editor's selected area.

 Default value: rgba(181, 215, 253, 1)

 Data type: hex
 Whether it is editable: yes
Other category:

6.12.4 auto_fix
Determine whether to automatically correct errors. Once the value changes, the system will automatically fix the
content type to prevent errors.

 Default value: true

 Data type: bool
 Whether it is editable: yes

6.12.5 input_type:
The format type of the widget input.
text: input data will be displayed as ascii. int: input data will be displayed as int type value. float: the input data will
be displayed as a float type value.
The password input data will be displayed as ascii. (Set whether the password is visible or not with
password_visible.) date: the input data will be displayed in "yyyy/mm/dd" format (data is ascll). time: input data is
displayed in "hh:mm" format (data is ascil).

 Default value: text

 Data type: text
 Whether it is editable: yes

69
 6.12.6 min/max:
The minimum/maximum numerical limit of the corresponding widget.

 Default value: 0/100

 Data type: float
 Whether it is editable: yes

6.12.7 tips:
The prompt text to display when text is empty.
Only valid when input_type is text.

 Default value: please enter your text

 Data type: text
 Whether it is editable: yes

6.12.8 text
Default text.
It needs to correspond to the input_type set earlier. .

 Default value:
 Data type: text
 Whether it is editable: yes

6.12.9 action_text:
Enter the action of the keyboard.

 Default value: done

 Data type: text
 Whether it is editable: yes
6.12.10 readonly
Whether it is read-only, that is, whether the keyboard input function is available.

 Default value: false

 Data type: bool
 Whether it is editable: yes

70
 6.12.11 password_visible
When the input type is set to "password", whether the content is displayed as "*" when it is not checked, and the
input information is displayed when it is checked.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.12.12 close_kb_when_blured
Closes the input method when the focus is lost.

 Default value: true

 Data type: bool
 Whether it is editable: yes

6.13 label
The label is a plain text box. The difference from edit is that the label cannot be entered on the device side, and the
value can only be modified through instructions. Mostly used for fixed prompt text description.
P.S. When designing widgets, be careful that the font size does not exceed the smaller one of the widget's length or
width.
6.13.1 length
The number of characters that can be displayed.
P.S.-1 is to display all characters.

 Default value: -1
 Data type: int
 Whether it is editable: yes

6.13.2 line_wrap
Whether to wrap lines automatically. Need to be used with word_wrap.

 Default value: false

 Data type: bool
 Whether it is editable: yes

71
 6.13.3 word_wrap
Whether to wrap lines automatically. Need to be used with line_wrap.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.14 hscroll label

hscroll_label is a scrolling text box, which can be set to determine whether the widget is looped, rolled back, etc. It
can also be set to play a time, which can be set according to your own needs.

6.14.1 loop:
The text content will start scrolling automatically. If unchecked, the text will only scroll once automatically.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.14.2 yoyo:
Whether the text content will be scrolled back after scrolling ends.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.14.3 duration
The time required to complete a scroll.
The unit is ms.

 Default value: 5000

 Data type: uint
 Whether it is editable: yes

72
 6.14.4 lull
The interval between each scroll.
The unit is ms.

 Default value: 500

 Data type: uint
 Whether it is editable: yes

6.14.5 text
Scrollbar realistic text content.

 Default value: hscrolltexthscrolltexthscrolltext

 Data type: text
 Whether it is editable: yes

6.15 text selector

text_selector widget is used for the selection of multiple different options. For example, the effect of a password lock
can be achieved with text_selector.
style related:

6.15.1 highlight_font_name
Font for highlighted areas.
Fonts must be uploaded in recourses before they can be used.

 Default value: default (cn normal)

 Data type: text
 Whether it is editable: yes

6.15.2 highlight_font_size
The font size of the highlighted area.

 Default value: 18
 Data type: unit
 Whether it is editable: yes

73
 6.15.3 highlight_text_color
Font color for highlighted areas.

 Default value: 0x00000000

 Data type: hex
 Whether it is editable: yes

6.15.4 mask_color:
Define the mask color for the entire widget. The color will gradually change from the edge to the center.

 Default value: 0x404040

 Data type: hex
 Whether it is editable: Yes

6.15.5 fg_color
The foreground color of the widget. Most allow user-defined colors.
The desired translucent effect can be achieved by adjusting the alpha value.

 Default value: rgba(194, 194, 194, 0)

 Type of data: hex
 Whether it is editable: Yes

6.15.6 fg_image
Define the widget's foreground image by name.
P.S.1. if the image is not defined, the background will appear transparent.
2. The picture should be uploaded to the resources list on the left before it can be referenced in the widget.

Default value: none

Data type: text
Whether is it editable: Yes

74
 6.15.7 fg_image_draw_type
Define the drawing type of the widget's foreground image.

(1) default: the picture will be displayed in its original size and aspect ratio and aligned in the upper left corner of the
display area of this image widget
(2) lcon: the picture will be tiled and displayed in the entire display area according to the original aspect ratio. When
the aspect ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the image
will be enlarged or reduced according to the longer side.
(3) center: the picture will be displayed in the center of the display area with the original size and aspect ratio, and
the excess part will not be scaled.
(4) scale: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display area is
inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced according to the
shorter side. It will be aligned at the top.
(5) auto: similar to the default. The picture will be displayed at its original size and aspect ratio, aligned at the top left
corner of the display area of this image widget.
(6) scale_auto: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display
area is inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced
according to the shorter side.
(7) scale_down: similar to the center. The picture will be displayed in the center of the display area at its original size
and aspect ratio.
(8) scale_w: width zoom display. The image is scaled by the width of the target rectangle, the width is scaled by this
ratio, and the excess will not be displayed. The picture will be displayed in its original aspect ratio. When the aspect
ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the picture will be
enlarged or reduced according to the shorter side. It will be aligned at the top.
(9) scale h: height zoom display. The image is scaled by the height of the target rectangle, and the width is scaled
by this ratio. The excess part will not be displayed
(10) repeat: the picture is tiled in the space.
Default value:
Data type: text
Whether is it editable: Yes
Other:

6.15.8 selected_index
Define the option index number for the initial highlighting.
P.S. the index number is not the same as the number. The number is the number that precedes the text content.

 Default value: 0
 Data type: unit
 Whether it is editable: yes

75
 6.15.9 visible_num
The number of options visible on the same page.

 Default value: 3
 Data type: unit
 Whether it is editable: yes

6.15.10 yspeed_scale:
Define the sliding speed.
The unit is x*default speed.

 Default value: 1
 Data type: unit
 Whether it is editable: yes

6.15.11 localize_options
Whether to localize translation.

 Default value: false

 Data type: unit
 Whether it is editable: yes

6.15.12 loop_options
Whether to cycle through all options.

 Default value: false

 Data type: unit
 Whether it is editable: yes

76
6.16 slider
slider widget is mostly used to adjust the size and other items, such as volume, brightness, etc., which can be
precisely widgetled by the value of the slider widget.
Notice: unit: uint.
syle related:

6.16.1 fg_color
The foreground color of the widget. Most allow user-defined colors.
The desired translucent effect can be achieved by adjusting the alpha value.

 Default value: rgba(194, 194, 194, 0)

 Type of data: hex
 Whether it is editable: Yes

6.16.2 fg_image
Define the widget's foreground image by name.
P.S.1. if the image is not defined, the background will appear transparent.
2. The picture should be uploaded to the resources list on the left before it can be referenced in the widget.

Default value: none

Data type: text
Whether is it editable: Yes

6.16.3 fg_image_draw_type
Define the drawing type of the widget's foreground image.

(1) default: the picture will be displayed in its original size and aspect ratio and aligned in the upper left corner of the
display area of this image widget
(2) lcon: the picture will be tiled and displayed in the entire display area according to the original aspect ratio. When
the aspect ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the image
will be enlarged or reduced according to the longer side.
(3) center: the picture will be displayed in the center of the display area with the original size and aspect ratio, and
the excess part will not be scaled.
(4) scale: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display area is
inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced according to the
shorter side. It will be aligned at the top.
(5) auto: similar to the default. The picture will be displayed at its original size and aspect ratio, aligned at the top left
corner of the display area of this image widget.

77
(6) scale_auto: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display
area is inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced
according to the shorter side.
(7) scale_down: similar to the center. The picture will be displayed in the center of the display area at its original size
and aspect ratio.
(8) scale_w: width zoom display. The image is scaled by the width of the target rectangle, the width is scaled by this
ratio, and the excess will not be displayed. The picture will be displayed in its original aspect ratio. When the aspect
ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the picture will be
enlarged or reduced according to the shorter side. It will be aligned at the top.
(9) scale h: height zoom display. The image is scaled by the height of the target rectangle, and the width is scaled
by this ratio. The excess part will not be displayed
(10) repeat: the picture is tiled in the space.
 Default value:
 Type of data: text
 Whether it is editable: Yes
Other:

6.16.4 vertical
When checked, the slider will be displayed vertically.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.16.5 bar_size
The width/height of the widget axis. Displayed vertically centered.
Unit: pixel.
P.S.1. there is no upper limit on the width/height, but when it exceeds the width/height of the selected area, it will not
be displayed completely vertically.
3. When the widget size is 0, the width/height of the toolbar will automatically adjust to half the width/height of the
display area.

 Default value: 0
 Data type: unit
 Whether it is editable: yes

78
 6.16.6 dragger_size
The width/height of the widget slider.

 Default value: 14
 Data type: unit
 Whether it is editable: yes

6.16.7 slide_with_bar
The sliding function is realized by touching the corresponding slider.
P.S. If it is not checked, touch anywhere on the screen to realize the sliding function.

 Default value: true

 Data type: bool
 Whether it is editable: yes

6.16.8 min/max:
The minimum/maximum numerical limit for the widget.

 Default value: 0/100

 Data type: float
 Whether it is editable: Yes

6.16.9 step
The minimum amount of change each time the widget is triggered to adjust the value.

 Default value: 1
 Data type: float
 Whether it is editable: yes

6.16.10 value
The default value of the widget.

 Default value: 40
 Data type: float
 Whether it is editable: yes

79
6.17 progress circle
progress_circle widget is a circular bar that can be used to display percentages, specific values, etc. For example,
when loading progress, from 0 to 100% can be achieved with progress_circle.
It can also be used to set the addition and subtraction of the value by clicking the button after being bundled with the
button.
style related:

6.17.1 fg_color
The foreground color of the widget. Most allow user-defined colors.
The desired translucent effect can be achieved by adjusting the alpha value.

 Default value: rgba(194, 194, 194, 0)

 Type of data: hex
 Whether it is editable: Yes

6.17.2 fg_image
Define the widget's foreground image by name.
P.S.1. if the image is not defined, the background will appear transparent.
2. The picture should be uploaded to the resources list on the left before it can be referenced in the widget.

Default value: none

Data type: text
Whether is it editable: Yes

6.17.3 fg_image_draw_type
Define the drawing type of the widget's foreground image.

(1) default: the picture will be displayed in its original size and aspect ratio and aligned in the upper left corner of the
display area of this image widget
(2) lcon: the picture will be tiled and displayed in the entire display area according to the original aspect ratio. When
the aspect ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the image
will be enlarged or reduced according to the longer side.
(3) center: the picture will be displayed in the center of the display area with the original size and aspect ratio, and
the excess part will not be scaled.
(4) scale: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display area is
inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced according to the
shorter side. It will be aligned at the top.

80
(5) auto: similar to the default. The picture will be displayed at its original size and aspect ratio, aligned at the top left
corner of the display area of this image widget.
(6) scale_auto: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display
area is inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced
according to the shorter side.
(7) scale_down: similar to the center. The picture will be displayed in the center of the display area at its original size
and aspect ratio.
(8) scale_w: width zoom display. The image is scaled by the width of the target rectangle, the width is scaled by this
ratio, and the excess will not be displayed. The picture will be displayed in its original aspect ratio. When the aspect
ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the picture will be
enlarged or reduced according to the shorter side. It will be aligned at the top.
(9) scale h: height zoom display. The image is scaled by the height of the target rectangle, and the width is scaled
by this ratio. The excess part will not be displayed
(10) repeat: the picture is tiled in the space.
Default value:
Data type: text
Whether is it editable: Yes
Other:

6.17.4 start angle

The starting angle of the zero point. The starting point of the x-axis is 0 degrees.
P.S. the angle is calculated clockwise.

 Default value: -90

 Data type: float
 Whether it is editable: yes

6.17.5 line width

The thickness of the loop wire.
Unit: pixel.

 Default value: 8
 Data type: unit
 Whether it is editable: yes

81
 6.17.6 unit
unit.

 Default value:
 Data type: text
 Whether it is editable: yes

6.17.7 line_cap
The shape of the line cap is rounded/square.

 Default value: round

 Data type: text
 Whether it is editable: yes

6.17.8 counter_clock_wise
Whether the direction of the progress bar is clockwise.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.17.9 show_text
Whether to display specific progress text.

 Default value: true

 Data type: bool
 Whether it is editable: yes

6.17.10 max
The maximum value the widget can achieve.
P.S. must be greater than or equal to value.

 Default value: 100

 Data type: float
 Whether it is editable: yes

82
 6.17.11 value
The default value of the widget.

 Default value: 40
 Data type: float
 Whether it is editable: yes

6.18 progress bar

progress_bar is a bar-shaped progress bar, which is mostly used to display the percentage of the current progress
and the total progress. For example, the progress of the installation process can be realized through the progress
bar of this progress_bar.
style related:

6.18.1 fg_color
The foreground color of the widget. Most allow user-defined colors.
The desired translucent effect can be achieved by adjusting the alpha value.

 Default value: rgba(0, 132, 215, 1)

 Type of data: hex
 Whether it is editable: Yes

6.18.2 fg_image
Define the widget's foreground image by name.
P.S.1. if the image is not defined, the background will appear transparent.
2. The picture should be uploaded to the resources list on the left before it can be referenced in the widget.

Default value: none

Data type: text
Whether is it editable: Yes

83
 6.18.3 fg_image_draw_type
Define the drawing type of the widget's foreground image.

(1) default: the picture will be displayed in its original size and aspect ratio and aligned in the upper left corner of the
display area of this image widget
(2) lcon: the picture will be tiled and displayed in the entire display area according to the original aspect ratio. When
the aspect ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the image
will be enlarged or reduced according to the longer side.
(3) center: the picture will be displayed in the center of the display area with the original size and aspect ratio, and
the excess part will not be scaled.
(4) scale: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display area is
inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced according to the
shorter side. It will be aligned at the top.
(5) auto: similar to the default. The picture will be displayed at its original size and aspect ratio, aligned at the top left
corner of the display area of this image widget.
(6) scale_auto: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display
area is inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced
according to the shorter side.
(7) scale_down: similar to the center. The picture will be displayed in the center of the display area at its original size
and aspect ratio.
(8) scale_w: width zoom display. The image is scaled by the width of the target rectangle, the width is scaled by this
ratio, and the excess will not be displayed. The picture will be displayed in its original aspect ratio. When the aspect
ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the picture will be
enlarged or reduced according to the shorter side. It will be aligned at the top.
(9) scale h: height zoom display. The image is scaled by the height of the target rectangle, and the width is scaled
by this ratio. The excess part will not be displayed
(10) repeat: the picture is tiled in the space.
Default value:
Data type: text
Whether is it editable: Yes
Other:

6.18.4 vertical
Whether the progress bar is displayed vertically.

 Default value: false

 Data type: bool
 Whether it is editable: yes

84
 6.18.5 show text
Displays the current value.

 Default value: true (checked)

 Data type: bool
 Whether it is editable: yes

6.18.6 reverse
Whether the widgets are displayed in reverse, that is, from right to left.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.18.7 max
The maximum value of the widget.
P.S. needs to be greater than or equal to value.

 Default value: 100

 Data type: float
 Whether it is editable: yes

6.18.8 value
The default value of the widget.

 Default value: 40
 Data type: float
 Whether it is editable: yes

85
6.19 spin_box
spin_box is mostly used to manually select numbers. For example, control the size of the final value by clicking the
up and down buttons on the right side of the widget.
style category:

6.19.1 selected_text_color
The text color of the selected area in the editor.

 Default value: 0x000000

 Data type: hex
 Whether it is editable: yes

6.19.2 tips_text_color
The color of the hint text.

 Default value: rgba(68, 68, 68, 1)

 Data type: hex
 Whether it is editable: yes

86
 6.19.3 selected_bg_color
The background color of the editor's selected area.

 Default value: rgba(181, 215, 253, 1)

 Data type: hex
 Whether it is editable: yes
Other category:

6.19.4 auto_fix:
Whether the widget automatically corrects errors. Once the value changes, the system will automatically fix the
content type to prevent errors.

 Default value: true

 Data type: bool
 Whether it is editable: yes

6.19.5 input_type
The format type of the input text.
text: input data will be displayed as ascii. int: input data will be displayed as int type value. float: the input data will
be displayed as a float type value.
The password input data will be displayed as ascii. (Set whether the password is visible or not with
password_visible.) date: the input data will be displayed in "yyyy/mm/dd" format (data is ascll). time: input data is
displayed in "hh:mm" format (data is ascil).

 Default value:
 Data type: text
 Whether it is editable: yes

87
 6.19.6 min/max:
The minimum/maximum numerical limit for the widget.

 Default value: 0/100

 Data type: float
 Whether it is editable: yes

6.19.7 tips:
The prompt text to display when the widget text is empty.
P.S. only valid when input_type is text.

 Default value: please enter your text

 Data type: text
 Whether it is editable: yes

6.19.8 text
The default text displayed by the widget.
P.S. it needs to correspond to the input_type set earlier. .

 Default value: combo box ex

 Data type: text
 Whether it is editable: yes

6.19.9 options:
The text content of each option in the text picker.
Fixed format: "1:xxx1;2:yyy;3:zzz;…."

 Default value:
 Data type: text
 Whether it is editable: yes
6.19.10 selected_index:
The initial default display option index number.
P.S. option index numbers are assigned by the system, starting from 0.

 Default value: 0
 Data type: unit
 Whether it is editable: yes
88
 6.19.11 item_height:
The height of the dropdown option.
Unit: pixel.

 Default value: 30
 Data type: unit
 Whether it is editable: yes

6.19.12 action_text
Determines the action for entering the keyboard.

 Default value: done

 Data type: text
 Whether it is editable: yes

6.19.13 readonly
Whether it is read-only.
If checked, the keyboard input function is unavailable, if not checked, it is available.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.19.14 password_visible
When the input type is set to "password", whether the content is displayed as "*" when it is not checked, and the
input information is displayed when it is checked.

 Default value: false

 Data type: bool
 Whether it is editable: yes

6.19.15 open_kb_when_focused/close_kb_when_blured
Turn on the input method when the focus is obtained/close the input method when the focus is lost.

 Default value: true/true

 Data type: bool
 Whether it is editable: yes

89
6.20 time clock
time_clock is used to display the dial clock, and set different dials and hours, minutes and seconds according to
your needs.

6.20.1 image
The picture displayed by the widget. Import the recourses bar on the left first.
Select from the drop-down list or enter the name of the picture file in the box to search.

 Default value:
 Data type: text
 Whether it is editable: yes

6.20.2 dial_image
Defines the widget's background image by name. If the image is not defined, the background will appear
transparent. The background image should be uploaded first in the resources list on the left.

 Default value: clock_bg

 Type of data: text
 Whether it is editable: Yes

6.20.3 hour/minute/second_image:
Defines the icon image for the hour/minute/second hand. The image must be uploaded to the resource list before it
can be used.
P.S. cannot be set to blank.

 Default value: clock_hour/clock_minute/clock_second

 Data type: text
 Whether it is editable: yes

90
 6.20.4 hour/minute/second_anchor_x|y:
Defines the anchor point for the hour/minute/second hand.
P.S. two formats. If set to pure numbers (0.0 - -1.0), hour/minute/second images will be scaled. If set numbers with
"px", it will adjust the coordinates of the hour/minute/second image by the coordinates. (0 is the upper left corner)

 Default value: 0.5

 Data type: float
 Whether it is editable: yes

91
6.21 digit clock
digit_clock is used to display time, date, etc. For the specific format, see 4.20.1format.
6.21.1 format:
The display format of the widget.

 Default value: y-mm-dd hh:mm:ss

 Data type: text
 Whether it is editable: yes

6.22 gauge
gague is a dial, which is mostly used for dashboards in many different scenarios, such as cars, fuel tanks, etc.
6.22.1 image:
The picture displayed by the widget. Import the recourses bar on the left first.
Select from the drop-down list or enter the name of the picture file in the box to search.

 Default value: gauge_bg

 Data type: text
 Whether it is editable: yes

92
 6.22.2 draw_type:
The way the picture is displayed.
(1) default: the picture will be displayed in its original size and aspect ratio and aligned in the upper left corner of
the display area of this image widget
(2) lcon: the picture will be tiled and displayed in the entire display area according to the original aspect ratio.
When the aspect ratio of the actual display area is inconsistent with the aspect ratio of the original display area,
the image will be enlarged or reduced according to the longer side.
(3) center: the picture will be displayed in the center of the display area with the original size and aspect ratio, and
the excess part will not be scaled.
(4) scale: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display area
is inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced according
to the shorter side. It will be aligned at the top.
(5) auto: similar to the default. The picture will be displayed at its original size and aspect ratio, aligned at the top
left corner of the display area of this image widget.
(6) scale_auto: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display
area is inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced
according to the shorter side.
(7) scale_down: similar to the center. The picture will be displayed in the center of the display area at its original
size and aspect ratio.
(8) scale_w: width zoom display. The image is scaled by the width of the target rectangle, the width is scaled by
this ratio, and the excess will not be displayed. The picture will be displayed in its original aspect ratio. When the
aspect ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the picture
will be enlarged or reduced according to the shorter side. It will be aligned at the top.
(9) scale h: height zoom display. The image is scaled by the height of the target rectangle, and the width is scaled
by this ratio. The excess part will not be displayed
(10) repeat: the picture is tiled in the space.

 Default value: center

 Data type: text
 Whether it is editable: yes

6.23 gauge pointer

gague_pointer is usually used with gague and exists as a pointer.

6.23.1 image
The picture displayed by the widget. Import the recourses bar on the left first.
Select from the drop-down list or enter the name of the picture file in the box to search.

 Default value: gauge_pointer

 Data type: text
 Whether it is editable: yes

93
 6.23.2 anchor_x/y:
Define the anchor point x/y.
P.S. two formats. If set to pure numbers (0.0 - -1.0), hour/minute/second images will be scaled. If set numbers with
"px", it will adjust the coordinates of the hour/minute/second image by the coordinates. (0 is the upper left corner)

 Default value: 0.5

 Data type: float
 Whether it is editable: yes

6.23.3 angle:
The starting angle of the widget.
P.S. Calculate the angle clockwise.

 Default value: 0
 Data type: float
 Whether it is editable: yes

94
 7. Instructions and examples for using enhanced widgets

7.1 chart_view
chart_view is a chart widget that allows you to add multiple bar charts and multiple line charts to a table at the same
time to achieve a effect similar to a data display.
The following is the effect of having multiple different bar_series in the same widget.

The following is the effect of having multiple different line_series in the same widget.

The x and y axis data of chart_view need to be set manually, and the data should be set one by one according to
your needs.
The specific operation steps are as follows.

7.1.1 Expand the chart_view widget in the project area on the left and click on the x_axis widget.

1. Find the property column on the right, and modify max and data according to your actual needs.
If data>max, you can achieve the effect of horizontal sliding; data<max, you can achieve the effect of scaling.

95
96
1. Find the corresponding line_series widget and bar_series widget and modify the value and capacity according to
your needs.

Special note: In the process of setting, if you need the data of line_series and the split_line of x_axis to achieve one-
to-one correspondence, that is, all data are on the axis of x_axis, you need to set the data and max of x_axis, the
value of max is the amount of data-1, such as data is [1,2,3,4,6,7,8,9,10], then max=9. Otherwise, it may not
correspond with the data.

97
7.2 tab_view

tab_view is a tab view, you can add tab_button by your own actual needs, and add the corresponding view to
achieve clicking different tab_button to switch to different pages.
1. The initial state is shown in the figure.

2. The effect after setting is completed

98
7.3 scroll_view
scroll_view is a scrolling view, which can be scrolled up and down or left and right.
The layout is done internally (you need to decide whether it is a list_item or a view according to your actual needs),
and after the layout is done, you can add the required sub-widgets in the corresponding view (view or list_item).
1. The initial state is shown in the figure.

2. Drag the view to the sub-widget (same as list_item)：

99
3. according to your needs for layout, such as the need for vertical sliding effect, you need to check the yslideable of
scroll_view and set similar to the following settings, that is, the stack of view in the y direction.

If you need a horizontal sliding effect, you need to check the xslideable of the scroll_view and set a setting similar to
the following, that is, the stack of views in the x-direction.

4. If you want to achieve sliding in x and y directions at the same time, you can check both xslideable and
yslideable, and set the position of the coordinates and the size of the view or list_item.

5. The effect after setting：

100
7.4 slide_view_view
slide_view_view is a sliding view, you can add several different views according to your needs, and switch pages by
sliding left and right or up and down, and you can also add an indicator below to display the position of the current
page (the corresponding value of the current page can be set to the highlighted color).
1. The initial state is shown in the figure：

2. Add a sub-widget view, when adding the view, the slide_indicator will also synchronize the corresponding amount
of views at the same time.
As shown in the figure, there are currently 4 views and the amount of slide_indicator is 4.

101
3. The effect after setting：

7.5 list_view_h

list_view_h widget is horizontal list view, horizontal list view can switch to different view interface by sliding left and
right, unlike slide_view_view, list_view widget has list_item and view as sub-widgets, list_item has some UI
interaction difference compared to view, you can choose the widgets according to your needs and add widgets and
layouts inside the selected sub-widgets.
1. The initial state is shown in the figure：

102
2. Add sub-widgets, you can add list_item and view according to your needs, here is list_item as an example

3. The effect after setting：

103
7.6 list_view

The list_view widget is a list view with a corresponding scroll bar on the right side to show the current position of the
list_item compared to the entire widget, but requires corresponding settings in the software (e.g. max and value
properties of scroll_bar_m). As list_view_h, you can choose whether to add a view or a list_item according to your
needs, and add widgets and layouts inside the selected sub-widget.

1. The initial state is shown in the figure:

2. Add sub-widgets, you can add list_item and view according to your needs, here is list_item as an example.

104
3. The effect after setting：

4.You can further make a kind of table effect by adding list_item and adding label widgets in multiple list_item for a r
easonable layout.
5. The specific widget hierarchy is shown in the following figure.：

6.Expanded as shown in the figure

105
7. Finally made into a 5 * 5 table, as shown in the figure.：

106
 8. Enhance Other Properties of the Widget

8.1 chart_view
chart_view is a chart widget, which contains bar charts and line charts. Add multiple different line_series and
bar_series to one widget according to your own needs. Make charts and so on according to your own needs.
The inclusion relationship of a chart_view is as follows:

style related:

8.1.1 selected_text_color
The text color of the selected area in the editor.

 Default value: 0x000000

 Data type: hex
 Whether it is editable: yes

107
 8.1.2 tips_text_color
The color of the hint text.

 Default value: rgba(0, 0, 0, 1)

 Data type: hex
 Whether it is editable: yes

8.1.3 highlight_text_color
Font color for highlighted areas.

 Default value: 0x00000000

 Data type: hex
 Whether it is editable: yes

8.1.4 highlight_font_name
Font for highlighted areas.
Fonts must be uploaded in recourses before they can be used.

 Default value: default (cn normal)

 Data type: text
 Whether it is editable: yes

8.1.5 highlight_font_size
The font size of the highlighted area.

 Default value: 18
 Data type: unit
 Whether it is editable: yes

108
 8.1.6 fg_color
The foreground color of the widget. Most allow user-defined colors.
The desired translucent effect can be achieved by adjusting the alpha value.

 Default value: rgba(244, 244, 244, 1)

 Type of data: hex
 Whether it is editable: Yes

8.1.7 fg_image
Define the widget's foreground image by name.
P.S.1. if the image is not defined, the background will appear transparent.
2. The picture should be uploaded to the resources list on the left before it can be referenced in the widget.

Default value: none

Data type: text
Whether is it editable: Yes

8.1.8 fg_image_draw_type
Define the drawing type of the widget's foreground image.

(1) default: the picture will be displayed in its original size and aspect ratio and aligned in the upper left corner of the
display area of this image widget
(2) i con: The picture will be tiled and displayed in the entire display area according to the original aspect ratio.
When the aspect ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the
image will be enlarged or reduced according to the longer side.
(3) center: the picture will be displayed in the center of the display area with the original size and aspect ratio, and
the excess part will not be scaled.
(4) scale: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display area is
inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced according to the
shorter side. It will be aligned at the top.
(5) auto: similar to the default. The picture will be displayed in its original size and aspect ratio, and this image
widget is aligned with the upper left corner of the display area.
(6) scale_auto: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display
area is inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced
according to the shorter side.
(7) scale_down: similar to the center. The picture will be displayed in the center of the display area at its original size
and aspect ratio.
(8) scale_w: width zoom display. The image is scaled by the width of the target rectangle, the width is scaled by this
ratio, and the excess will not be displayed. The picture will be displayed in its original aspect ratio. When the aspect

109
ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the picture will be
enlarged or reduced according to the shorter side. It will be aligned at the top.
(9) scale h: height zoom display. The image is scaled by the height of the target rectangle, and the width is scaled
by this ratio. The excess part will not be displayed
(10) repeat: the picture is tiled in the space.
Default value:
Data type: text
Whether is it editable: Yes
Other:

8.1.9 top_series
The series index at the top level.

Default value: -1
Data type: uint
Whether is it editable: Yes

8.2 x_axis
style related:
8.2.1 selected_text_color
The text color of the selected area in the editor.

 Default value: 0x000000

 Data type: hex
 Whether it is editable: yes

110
 8.2.2 tips_text_color
The color of the hint text.

 Default value: rgba(0, 0, 0, 1)

 Data type: hex
 Whether it is editable: yes

8.2.3 highlight_text_color
Font color for highlighted areas.

 Default value: 0x00000000

 Data type: hex
 Whether it is editable: yes

8.2.4 highlight_font_name
Font for highlighted areas.
Fonts must be uploaded in recourses before they can be used.

 Default value: default (cn normal)

 Data type: text
 Whether it is editable: yes

8.2.5 highlight_font_size
The font size of the highlighted area.

 Default value: 18
 Data type: unit
 Whether it is editable: yes

111
 8.2.6 fg_color
The foreground color of the widget. Most allow user-defined colors.
The desired translucent effect can be achieved by adjusting the alpha value.

 Default value: rgba(244, 244, 244, 1)

 Type of data: hex
 Whether it is editable: Yes

8.2.7 fg_image
Define the widget's foreground image by name.
P.S.1. if the image is not defined, the background will appear transparent.
2. The picture should be uploaded to the resources list on the left before it can be referenced in the widget.

Default value: none

Data type: text
Whether is it editable: Yes
8.2.8 fg_image_draw_type

Define the drawing type of the widget's foreground image.

(1) default: the picture will be displayed in its original size and aspect ratio and aligned in the upper left corner of the
display area of this image widget
(2) lcon: the picture will be tiled and displayed in the entire display area according to the original aspect ratio. When
the aspect ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the image
will be enlarged or reduced according to the longer side.
(3) center: the picture will be displayed in the center of the display area with the original size and aspect ratio, and
the excess part will not be scaled.
(4) scale: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display area is
inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced according to the
shorter side. It will be aligned at the top.
(5) auto: similar to the default. The picture will be displayed at its original size and aspect ratio, aligned at the top left
corner of the display area of this image widget.
(6) scale_auto: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display
area is inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced
according to the shorter side.
(7) scale_down: similar to the center. The picture will be displayed in the center of the display area at its original size
and aspect ratio.
(8) scale_w: width zoom display. The image is scaled by the width of the target rectangle, the width is scaled by this
ratio, and the excess will not be displayed. The picture will be displayed in its original aspect ratio. When the aspect
112
ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the picture will be
enlarged or reduced according to the shorter side. It will be aligned at the top.
(9) scale h: height zoom display. The image is scaled by the height of the target rectangle, and the width is scaled
by this ratio. The excess part will not be displayed
(10) repeat: the picture is tiled in the space.
Default value:
Data type: text
Whether is it editable: Yes

8.2.9 selected_fg_color
The foreground color of the toggle button in the true state.

 Default value: 0xffffff

 Data type: hex
 Whether it is editable: yes

8.2.10 mask_color:
Define the mask color for the entire widget. The color will gradually change from the edge to the center.

 Default value: 0x404040

 Data type: hex
 Whether it is editable: Yes

8.2.11 other:

113
 8.2.12 min/max
The minimum and maximum value of the widget range.

 Default value: 0/9

 Data type: uint
 Whether it is editable: Yes

8.2.13 axis_type
The type of axis.

 Default value: value

 Data type: text
 Whether it is editable: Yes

8.2.14 at
The position of the coordinate axis.

 Default value: auto

 Data type: text
 Whether it is editable: Yes

8.2.15 data
Displayed tick value.

 Default value: [1,2,3,4,5,6,7,8,9,10]

 Data type: text
 Whether it is editable: Yes

8.2.16 split_line
Parameters for dividing lines.

 Default value: {show:true}

 Data type: bool
 Whether it is editable: Yes

114
 8.2.17 tick
Parameters for tick marks.

 Default value: {show:true}

 Data type: bool
 Whether it is editable: Yes

8.2.18 line
Parameters of the axis.

 Default value: {show:true}

 Data type: bool
 Whether it is editable: Yes

8.2.19 label
The parameter for the tick value.

 Default value: {show:true}

 Data type: bool
 Whether it is editable: Yes

8.2.20 inverse
Whether to display in reverse.

 Default value: false

 Data type: bool
 Whether it is editable: Yes

8.2.21 offset
Offset from the starting position.

 Default value: 0
 Data type: uint
 Whether it is editable: Yes

115
 8.2.22 offset_percent
Whether the offset is a percentage.
P.S. only the value filled in offset will be valid.

 Default value: false

 Data type: bool
 Whether it is editable: Yes

8.3 y_axis
style related:

8.3.1 selected_text_color
The text color of the selected area in the editor.

 Default value: 0x000000

 Data type: hex
 Whether it is editable: yes

8.3.2 tips_text_color
The color of the hint text.

 Default value: rgba(0, 0, 0, 1)

 Data type: hex
 Whether it is editable: yes

116
 8.3.3 highlight_text_color
Font color for highlighted areas.

 Default value: 0x00000000

 Data type: hex
 Whether it is editable: yes

8.3.4 highlight_font_name
Font for highlighted areas.
Fonts must be uploaded in recourses before they can be used.

 Default value: default (cn normal)

 Data type: text
 Whether it is editable: yes

8.3.5 highlight_font_size
The font size of the highlighted area.

 Default value: 18
 Data type: unit
 Whether it is editable: yes
8.3.6 fg_color
The foreground color of the widget. Most allow user-defined colors.
The desired translucent effect can be achieved by adjusting the alpha value.

 Default value: rgba(244, 244, 244, 1)

 Type of data: hex
 Whether it is editable: Yes
8.3.7 fg_image
Define the widget's foreground image by name.
P.S.1. if the image is not defined, the background will appear transparent.
2. The picture should be uploaded to the resources list on the left before it can be referenced in the widget.

Default value: none

Data type: text
Whether is it editable: Yes

117
 8.3.8 fg_image_draw_type
Define the drawing type of the widget's foreground image.

(1) default: the picture will be displayed in its original size and aspect ratio and aligned in the upper left corner of the
display area of this image widget
(2) lcon: the picture will be tiled and displayed in the entire display area according to the original aspect ratio. When
the aspect ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the image
will be enlarged or reduced according to the longer side.
(3) center: the picture will be displayed in the center of the display area with the original size and aspect ratio, and
the excess part will not be scaled.
(4) scale: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display area is
inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced according to the
shorter side. It will be aligned at the top.
(5) auto: similar to the default. The picture will be displayed at its original size and aspect ratio, aligned at the top left
corner of the display area of this image widget.
(6) scale_auto: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display
area is inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced
according to the shorter side.
(7) scale_down: similar to the center. The picture will be displayed in the center of the display area at its original size
and aspect ratio.
(8) scale_w: width zoom display. The image is scaled by the width of the target rectangle, the width is scaled by this
ratio, and the excess will not be displayed. The picture will be displayed in its original aspect ratio. When the aspect
ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the picture will be
enlarged or reduced according to the shorter side. It will be aligned at the top.
(9) scale h: height zoom display. The image is scaled by the height of the target rectangle, and the width is scaled
by this ratio. The excess part will not be displayed
(10) repeat: the picture is tiled in the space.
Default value:
Data type: text
Whether is it editable: Yes

118
 8.3.9 selected_fg_color
The foreground color of the toggle button in the true state.

 Default value: 0xffffff

 Data type: hex
 Whether it is editable: yes

8.3.10 mask_color:
Define the mask color for the entire widget. The color will gradually change from the edge to the center.

 Default value: 0x404040

 Data type: hex
 Whether it is editable: Yes

8.3.11 other:

8.3.12 min/max
The minimum and maximum value of the widget range.

 Default value: 0/140

 Data type: uint
 Whether it is editable: Yes

119
 8.3.13 axis_type
The type of axis.

 Default value: value

 Data type: text
 Whether it is editable: Yes

8.3.14 at
The position of the coordinate axis.

 Default value: auto

 Data type: text
 Whether it is editable: Yes

8.3.15 data
Displayed tick value.

 Default value: [0,20,40,60,80,100,120,140]

 Data type: text
 Whether it is editable: Yes

8.3.16 split_line
Parameters for dividing lines.

 Default value: {show:true}

 Data type: bool
 Whether it is editable: Yes

8.3.17 tick
Parameters for tick marks.

 Default value: {show:true}

 Data type: bool
 Whether it is editable: Yes

120
 8.3.18 line
Parameters of the axis.

 Default value: {show:true}

 Data type: bool
 Whether it is editable: Yes

8.3.19 label
The parameter for the tick value.

 Default value: {show:true}

 Data type: bool
 Whether it is editable: Yes

8.3.20 inverse
Whether to display in reverse.

 Default value: false

 Data type: bool
 Whether it is editable: Yes

8.3.21 offset
Offset from the starting position.

 Default value: 0
 Data type: uint
 Whether it is editable: Yes

8.3.22 offset_percent
Whether the offset is a percentage.
P.S. only the value filled in offset will be valid.

 Default value: false

 Data type: bool
 Whether it is editable: Yes

121
8.4 bar_series
style related:
8.4.1 selected_text_color
The text color of the selected area in the editor.

 Default value: 0x000000

 Data type: hex
 Whether it is editable: yes

8.4.2 tips_text_color
The color of the hint text.

 Default value: rgba(0, 0, 0, 1)

 Data type: hex
 Whether it is editable: yes

8.4.3 highlight_text_color
Font color for highlighted areas.

 Default value: 0x00000000

 Data type: hex
 Whether it is editable: yes

122
 8.4.4 highlight_font_name
Font for highlighted areas.
Fonts must be uploaded in recourses before they can be used.

 Default value: default (cn normal)

 Data type: text
 Whether it is editable: yes

8.4.5 highlight_font_size
The font size of the highlighted area.

 Default value: 18
 Data type: unit
 Whether it is editable: yes

8.4.6 fg_color
The foreground color of the widget. Most allow user-defined colors.
The desired translucent effect can be achieved by adjusting the alpha value.

 Default value: rgba(244, 244, 244, 1)

 Type of data: hex
 Whether it is editable: Yes

8.4.7 fg_image
Define the widget's foreground image by name.
P.S.1. if the image is not defined, the background will appear transparent.
2. The picture should be uploaded to the resources list on the left before it can be referenced in the widget.

Default value: none

Data type: text
Whether is it editable: Yes

123
 8.4.8 fg_image_draw_type
Define the drawing type of the widget's foreground image.

(1) default: the picture will be displayed in its original size and aspect ratio and aligned in the upper left corner of the
display area of this image widget
(2) lcon: the picture will be tiled and displayed in the entire display area according to the original aspect ratio. When
the aspect ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the image
will be enlarged or reduced according to the longer side.
(3) center: the picture will be displayed in the center of the display area with the original size and aspect ratio, and
the excess part will not be scaled.
(4) scale: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display area is
inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced according to the
shorter side. It will be aligned at the top.
(5) auto: similar to the default. The picture will be displayed at its original size and aspect ratio, aligned at the top left
corner of the display area of this image widget.
(6) scale_auto: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display
area is inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced
according to the shorter side.
(7) scale_down: similar to the center. The picture will be displayed in the center of the display area at its original size
and aspect ratio.
(8) scale_w: width zoom display. The image is scaled by the width of the target rectangle, the width is scaled by this
ratio, and the excess will not be displayed. The picture will be displayed in its original aspect ratio. When the aspect
ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the picture will be
enlarged or reduced according to the shorter side. It will be aligned at the top.
(9) scale h: height zoom display. The image is scaled by the height of the target rectangle, and the width is scaled
by this ratio. The excess part will not be displayed
(10) repeat: the picture is tiled in the space.
Default value:
Data type: text
Whether is it editable: Yes

124
 8.4.9 selected_fg_color
The foreground color of the toggle button in the true state.

 Default value: 0xffffff

 Data type: hex
 Whether it is editable: yes

8.4.10 mask_color:
Define the mask color for the entire widget. The color will gradually change from the edge to the center.

 Default value: 0x40404000

 Data type: hex
 Whether it is editable: Yes
Other:

8.4.11 value

 Default value: 15,75,40,60,140,80,100,120,25,90

 Data type: text
 Whether it is editable: Yes

8.4.12 series_axis
Axis of sequence bits, default to retrieve the first one when empty.

 Default value:
 Data type: uint
 Whether it is editable: yes

125
 8.4.13 value_axis
Axis of series values, defaults to retrieve the first one when empty.

 Default value:
 Data type: uint
 Whether it is editable: yes

8.4.14 7.4.14 bar

Parameters for the bar.

 Default value:
 Data type: text
 Whether it is editable: yes

8.4.15 capacity
The capacity of the sequence fifo.

 Default value: 10
 Data type: uint
 Whether it is editable: yes

8.4.16 offset
The offset of the sequence fifo relative to the end.

 Default value: 0
 Data type: uint
 Whether it is editable: yes

8.4.17 display_mode
Display mode.

 Default value: push

 Data type: text
 Whether it is editable: yes

126
 8.4.18 value_animation
The duration of the sequence value animation.
The unit is ms.

 Default: 500
 Data type: uint
 Whether it is editable: yes

8.5 line_series
style related:

8.5.1 selected_text_color
The text color of the selected area in the editor.

 Default value: 0x000000

 Data type: hex
 Whether it is editable: yes

127
 8.5.2 tips_text_color
The color of the hint text.

 Default value: rgba(0, 0, 0, 1)

 Data type: hex
 Whether it is editable: yes

8.5.3 highlight_text_color
Font color for highlighted areas.

 Default value: 0x00000000

 Data type: hex
 Whether it is editable: yes

8.5.4 highlight_font_name
Font for highlighted areas.
Fonts must be uploaded in recourses before they can be used.

 Default value: default (cn normal)

 Data type: text
 Whether it is editable: yes

8.5.5 highlight_font_size
The font size of the highlighted area.

 Default value: 18
 Data type: unit
 Whether it is editable: yes
128
 8.5.6 fg_color
The foreground color of the widget. Most allow user-defined colors.
The desired translucent effect can be achieved by adjusting the alpha value.

 Default value: rgba(244, 244, 244, 1)

 Type of data: hex
 Whether it is editable: Yes

8.5.7 fg_image
Define the widget's foreground image by name.
P.S.1. if the image is not defined, the background will appear transparent.
2. The picture should be uploaded to the resources list on the left before it can be referenced in the widget.

Default value: none

Data type: text
Whether is it editable: Yes

8.5.8 fg_image_draw_type
Define the drawing type of the widget's foreground image.

(1) default: the picture will be displayed in its original size and aspect ratio and aligned in the upper left corner of the
display area of this image widget
(2) lcon: the picture will be tiled and displayed in the entire display area according to the original aspect ratio. When
the aspect ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the image
will be enlarged or reduced according to the longer side.
(3) center: the picture will be displayed in the center of the display area with the original size and aspect ratio, and
the excess part will not be scaled.
(4) scale: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display area is
inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced according to the
shorter side. It will be aligned at the top.
(5) auto: similar to the default. The picture will be displayed at its original size and aspect ratio, aligned at the top left
corner of the display area of this image widget.
(6) scale_auto: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display
area is inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced
according to the shorter side.
(7) scale_down: similar to the center. The picture will be displayed in the center of the display area at its original size
and aspect ratio.
(8) scale_w: width zoom display. The image is scaled by the width of the target rectangle, the width is scaled by this
ratio, and the excess will not be displayed. The picture will be displayed in its original aspect ratio. When the aspect

129
ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the picture will be
enlarged or reduced according to the shorter side. It will be aligned at the top.
(9) scale h: height zoom display. The image is scaled by the height of the target rectangle, and the width is scaled
by this ratio. The excess part will not be displayed
(10) repeat: the picture is tiled in the space.
Default value:
Data type: text
Whether is it editable: Yes

8.5.9 selected_fg_color
The foreground color of the toggle button in the true state.

 Default value: 0xffffff

 Data type: hex
 Whether it is editable: yes

8.5.10 mask_color:
Define the mask color for the entire widget. The color will gradually change from the edge to the center.

 Default value: 0x40404000

 Data type: hex
 Whether it is editable: Yes

8.5.11 area_color
The sequence curve and coordinates are the background color of the area.

 Default value: rgba(51, 143, 255, 0.33)

 Data type: hex
 Whether it is editable: Yes

130
 8.5.12 line_border_color
The color of the polyline.

 Default: rgba(51, 143, 255, 1)

 Data type: hex
 Whether it is editable: Yes

8.5.13 symbol_bg_color
The background color of the polyline points.

 Default value: rgba(255, 255, 255, 1)

 Data type: hex
 Whether it is editable: Yes

8.5.14 symbol_border_color
Border color for polyline points.

 Default: rgba(51, 143, 255, 1)

 Data type: hex
 Whether it is editable: Yes

8.5.15 line_border_width
The width of the polyline.

 Default value: 1
 Data type: uint
 Whether it is editable: yes

8.5.16 symbol_round_radius
The arc of the polyline point.
When it is 0, it is a square.

 Default value: 4
 Data type: uint
 Whether it is editable: yes
Other:

131
 8.5.17 value

 Default value: 15,75,40,60,140,80,100,120,25,90

 Data type: text
 Whether it is editable: Yes

8.5.18 series_axis
Axis of sequence bits, default to retrieve the first one when empty.

 Default value:
 Data type: uint
 Whether it is editable: yes

8.5.19 value_axis
Axis of series values, defaults to retrieve the first one when empty.

 Default value:
 Data type: uint
 Whether it is editable: yes

8.5.20 line
The parameters of the sequence curve.

 Default value: {smooth:true}

 Data type: bool
 Whether it is editable: yes

8.5.21 area
The sequence curve and coordinates are the parameters of the area.

 Default value: {show:true}

 Data type: bool
 Whether it is editable: yes

132
 8.5.22 symbol
Sequence point parameters.

 Default value: {show:true}

 Data type: bool
 Whether it is editable: yes

8.5.23 capacity
The capacity of the sequence fifo.

 Default value: 10
 Data type: uint
 Whether it is editable: yes

8.5.24 offset
The offset of the sequence fifo relative to the end.

 Default value: 0
 Data type: uint
 Whether it is editable: yes

8.5.25 display_mode
Display mode.

 Default value: push

 Data type: text
 Whether it is editable: yes

8.5.26 value_animation
The duration of the sequence value animation.
The unit is ms.

 Default: 500
 Data type: uint
 Whether it is editable: yes

133
8.6 tooltip
style related:
8.6.1 selected_text_color
The text color of the selected area in the editor.

 Default value: 0x000000

 Data type: hex
 Whether it is editable: yes

8.6.2 tips_text_color
The color of the hint text.

 Default value: rgba(0, 0, 0, 1)

 Data type: hex
 Whether it is editable: yes

134
 8.6.3 highlight_text_color
Font color for highlighted areas.

 Default value: 0x00000000

 Data type: hex
 Whether it is editable: yes

8.6.4 highlight_font_name
Font for highlighted areas.
Fonts must be uploaded in recourses before they can be used.

 Default value: default (cn normal)

 Data type: text
 Whether it is editable: yes

8.6.5 highlight_font_size
The font size of the highlighted area.

 Default value: 18
 Data type: unit
 Whether it is editable: yes
8.6.6 fg_color
The foreground color of the widget. Most allow user-defined colors.
The desired translucent effect can be achieved by adjusting the alpha value.

 Default value: rgba(244, 244, 244, 1)

 Type of data: hex
 Whether it is editable: Yes
8.6.7 fg_image
Define the widget's foreground image by name.
P.S.1. if the image is not defined, the background will appear transparent.
2. The picture should be uploaded to the resources list on the left before it can be referenced in the widget.

Default value: none

Data type: text
Whether is it editable: Yes

135
 8.6.8 fg_image_draw_type
Define the drawing type of the widget's foreground image.

(1) default: the picture will be displayed in its original size and aspect ratio and aligned in the upper left corner of the
display area of this image widget
(2) lcon: the picture will be tiled and displayed in the entire display area according to the original aspect ratio. When
the aspect ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the image
will be enlarged or reduced according to the longer side.
(3) center: the picture will be displayed in the center of the display area with the original size and aspect ratio, and
the excess part will not be scaled.
(4) scale: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display area is
inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced according to the
shorter side. It will be aligned at the top.
(5) auto: similar to the default. The picture will be displayed at its original size and aspect ratio, aligned at the top left
corner of the display area of this image widget.
(6) scale_auto: the picture will be displayed in the original aspect ratio. When the aspect ratio of the actual display
area is inconsistent with the aspect ratio of the original display area, the picture will be enlarged or reduced
according to the shorter side.
(7) scale_down: similar to the center. The picture will be displayed in the center of the display area at its original size
and aspect ratio.
(8) scale_w: width zoom display. The image is scaled by the width of the target rectangle, the width is scaled by this
ratio, and the excess will not be displayed. The picture will be displayed in its original aspect ratio. When the aspect
ratio of the actual display area is inconsistent with the aspect ratio of the original display area, the picture will be
enlarged or reduced according to the shorter side. It will be aligned at the top.
(9) scale h: height zoom display. The image is scaled by the height of the target rectangle, and the width is scaled
by this ratio. The excess part will not be displayed
(10) repeat: the picture is tiled in the space.
Default value:
Data type: text
Whether is it editable: Yes

136
 8.6.9 selected_fg_color
Foreground color.

 Default value: 0xffffff

 Data type: hex
 Whether it is editable: yes

8.6.10 symbol_bg_color
The background color of the polyline points.

 Default value: rgba(255, 255, 255, 1)

 Data type: hex
 Whether it is editable: Yes

8.6.11 symbol_border_color
Border color for polyline points.

 Default: rgba(51, 143, 255, 1)

 Data type: hex
 Whether it is editable: Yes

8.6.12 line_border_width
The width of the polyline.

 Default value: 1
 Data type: uint
 Whether it is editable: yes

137
 8.6.13 symbol_round_radius
The arc of the polyline point.
When it is 0, it is a square.

 Default value: 4
 Data type: uint
 Whether it is editable: yes

8.6.14 line
The parameters of the sequence curve.

Default value:
Data type: bool
Whether it is editable: yes

8.6.15 symbol
Sequence point parameters.

Default value:
Data type: bool
Whether it is editable: yes

8.6.16 tip
The parameter for the prompt text.

Default value:
Data type: bool
Whether it is editable: yes

138
8.7 tab_view
tab_view is a view, similar to a browser. View different views by switching between different tabs.
The inclusion relationship of a tab_view is as follows:

8.8 pages
Pages generally exist as child widgets and are generally not used alone.

8.8.1 value
The value of page.

Default value: 0
Data type: uint
Whether it is editable: yes

8.8.2 x/y_offset
Offset in x/y direction.

Default value: 0/0

Data type: uint
Whether it is editable: yes

139
8.9 View
view generally exists as a view of multiple child widgets, and is generally not used alone.
8.9.1 x/y_offset
Offset in x/y direction.

Default value: 0/0

Data type: uint
Whether it is editable: yes

8.10 tab_button_group
tab_button_group is a tab button group, generally not used alone.
8.10.1 compact
Whether to choose compact typography.

Default value: false

Data type: bool
Whether it is editable: yes

8.10.2 scrollable
Whether to support scrolling.

Default value: false

Data type: bool
Whether it is editable: yes

140
8.11 tab_button
tab_button is the tab button and is used in the tab_button_group group.
8.11.1 value
The value of tab_button.

Default value: false

Data type: bool
Whether it is editable: yes

8.11.2 load_ui
The ui to load after activation.

Default value:
Data type: text
Whether it is editable: yes

8.11.3 active_icon
The name of the current icon item.

Default value:
Data type: text
Whether it is editable: yes

8.11.4 icon
The name of the item that is not the current icon.

Default value:
Data type: text
Whether it is editable: yes

141
 8.11.5 x/y_offset
Offset in x/y direction.

Default value: 0/0

Data type: uint
Whether it is editable: yes

8.12 scroll_view
8.12.1 x/yoffset
The offset in x/y direction

Default value: 0/0

Data type: uint
Whether it is editable: yes

8.12.2 x/yslidable
Whether to allow sliding in x/y direction.

Default value: 0/0

Data type: uint
Whether it is editable: yes

8.12.3 x/yspeed_scale
x/y offset velocity scale.

Default value: 0/0

Data type: uint
Whether it is editable: yes

142
 8.12.4 snap_to_page
Whether to align by page when scrolling.

Default value: false

Data type: bool
Whether it is editable: yes

8.12.5 move_to_page
Whether to turn one page at a time.

Default value: false

Data type: bool
Whether it is editable: yes

8.12.6 recursive
Whether to support recursive search for all child widgets.

Default value: false

Data type: bool
Whether it is editable: yes

8.12.7 focusable
Whether to support focus stay.

Default value: false

Data type: bool
Whether it is editable: yes

143
 8.12.8 x/y_offset
Offset in x/y direction.

Default value: 0/0

Data type: uint
Whether it is editable: yes

8.13 slide_menu
slide_menu is a sliding view, which can be turned left and right to select the page to be displayed.

8.13.1 min_scale
Minimum zoom ratio.

Default value: 0.8

Data type: float
Whether it is editable: yes

8.13.2 value
The value of slide_menu.

Default value: 1
Data type: uint
Whether it is editable: yes

8.13.3 align_v
Vertical alignment.

Default value: bottom

Data type: text
Whether it is editable: yes

144
 8.13.4 x/y_offset
Offset in x/y direction.

Default value: 0/0

Data type: uint
Whether it is editable: yes

8.14 slide_view_view
slide_view_view is a sliding view, switch between different pages to view the design effect of each page.
The inclusion relationship of a slide_view_view is as follows:

8.15 slide_indicator
8.15.1 7.15.1 max
Maximum value.

Default value: 0
Data type: uint
Whether it is editable: yes

8.15.2 size
Indicator size.

Default value: 8
Data type: uint
Whether it is editable: yes

145
 8.15.3 anchor_x/y
Anchor point x/y coordinates.

Default value: 100/0

Data type: uint
Whether it is editable: yes

8.15.4 auto_hide
Auto hide. When it is 0, it is forbidden.

Default value: 0
Data type: uint
Whether it is editable: yes

8.15.5 default_paint
Type of indicator.

Default value: auto

Data type: text
Whether it is editable: yes
spacing
Spacing of indicators.

Default value: 15
Data type: uint
Whether it is editable: yes

146
 8.15.6 indicated_target
The indicated target widget name.

Default value:
Data type: text
Whether it is editable: yes

8.15.7 x/y_offset
Offset in x/y direction.

Default value: 0/0

Data type: uint
Whether it is editable: yes

8.16 slide_view
As a child widget of slide_view_view, slide_view is generally not used alone.
8.16.1 x/y_offset
Offset in x/y direction.

Default value: 0/0

Data type: uint
Whether it is editable: yes

8.16.2 loop
Whether to loop.

Default value: false

Data type: bool
Whether it is editable: yes

147
 8.16.3 vertical
Whether to slide up and down mode.

Default value: false

Data type: bool
Whether it is editable: yes

8.16.4 anim_hint
Page switching effect.

Default value: translayte

Data type: text
Whether it is editable: yes

8.16.5 auto_play
Whether to play automatically.

Default value: 0
Data type: uint
Whether it is editable: yes

8.16.6 list_view
list_view is a list view, which can be designed in the list and viewed by selecting the corresponding page.
The inclusion relationship of a list_view is as follows:

148
 8.16.7 item_height
The height of the list item.

Default value: 0
Data type: uint
Whether it is editable: yes

8.16.8 default_item_height
The height of the default list item.

Default value: 60
Data type: uint
Whether it is editable: yes

8.16.9 auto_hide_scroll_bar
Auto-hide when scrollbars are not needed.

Default value: false

Data type: bool
Whether it is editable: yes

8.16.10 floating_scroll_bar
Whether the scroll bar is suspended above the scroll_view.

Default value: false

Data type: bool
Whether it is editable: yes

149
8.17 list_item
list_item is used as a sub-widget of list_view and is generally not used alone.
8.17.1 x/y_offset
Offset in x/y direction.

Default value: 0/0

Data type: uint
Whether it is editable: yes

8.18 scroll_bar_m
scroll_bar_m is a scroll bar, which is generally used on the right side of a widget or page to indicate the progress of
the current page.
8.18.1 max
Virtual width or height.

Default value: 1000

Data type: uint
Whether it is editable: yes
8.18.2 value
Current value.

Default value: 0
Data type: uint
Whether it is editable: yes

8.19 list_view_h
list_view is a horizontal list view, which can be designed in the list and viewed by selecting the corresponding page.
The inclusion relationship of a list_view_h is as follows:

150
 9. Other Operations

9.1 add child widgets

For the current project, considering a variety of different requirements, it may be necessary to add the option of child
widgets to some widgets, that is, widget 1 contains widgets 2, 3, 4.... The affiliation of these widgets belongs to the
parent widget, rather than windows.
Generally speaking, all widgets can have their own child widgets, but most of the following widgets need to be used
with child widgets:
tab_view/slide_menu/slide_view_view/list_view/list_view_h/chart_view

9.2 the way to add child widgets

9.2.1 right click to add
1. With the widget selected, right-click add_widget.

151
2. Select the desired widget and right-click to add.

3. Add successfully. The rest of the widgets are the same.

152
 9.2.2 drag to add
1. Drag the widget to the window first.

Child widgets that need to be added to tab view

Parent widget that needs to be added

2. Move the widget to the desired parent widget on the left.

Before moving

Release the mouse after the

blue line appears

3. Added successfully.

153
 9.2.3 drag and drop to add
1. Select the parent widget in the left project column.

Current parent widget is selected

2. Drag the widget to the selected parent widget.

Circle the parent widget range when dragging to position

154
3. Release the mouse, the widget will appear in the selected parent widget, and the addition is successful.

Just dragged the added button

155