Visual Lcd Studio

HUNDA
TECH

Visual UI
Programming.
Quickly make
the required
UI.
 Visual Lcd Studio User Manual

Table of contents

1.Visual lcd studio abstract............................................................................................................................................... 3

2. Brief introduction to the editor .................................................................................................................................... 5

3.Download and test tools ............................................................................................................................................... 6

4.Software setting...........................................................................................................................................................10

5.PageList........................................................................................................................................................................11

6.ImageList .....................................................................................................................................................................12

7.Compile and output .....................................................................................................................................................13

8.A brief introduction of controls and properties ............................................................................................................14

9.Configuration key design steps .....................................................................................................................................45

9.1. Image background key design steps............................................................................................................................................................................................ 45
9.2 Color key design steps .................................................................................................................................................................................................................. 47

2
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

1.Visual lcd studio abstract

Visual LCD Studio software is used for hunda LCM.The PC application tool designed by the display module UI is suitable

for all kinds of hunda vlcds LCM. It supports UI design and command test for UART, SPI, I2C and RS485 interface LCM. The

toolbar contains many kinds of controls, which is convenient for users to develop and apply quickly.

3
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

The modules of the

software tool:

1. Edit bar: edit tool for UI design.

2.Toolbars: various control tools.

3.Control property: the edit field

of the control property.

4.UI editing: interface editing

area.

5. Page list: a list of edited pages

6.Image list: import the list of

Image for UI design.

7.Compile and output: the output

window of compile project.

4
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

2. Brief introduction to the editor

1.Save the current page.

2.Open a new project.

3.Download and test tools.

4.Software setting.

5.Compile project.

6.Undo or redo

7.Bring to front or Send back

8.Control Id number display switch.

9.Grid display switch.

5
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

3.Download and Test

tools

1. Download bin file：

Download lcds settings ATST:At

the same time, download the Lcds

settings when you download the

bin file.

6
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

2. Lcds settings
RS485 address: The device address of
the Rs485 interface screen.

Uart BaudRate: The baud rate on the

Uart and Rs485 interface screens.

Backlight set: Display default

setting.

ForeColor:default ForeColor.
BackColor:lcd default BackColor.

Panel Display direction: Select the

LCD screen to display horizontally or
vertically.
Touch Panel Button press: Click the
touch screen to send data to the control
end.
Up:release button send data
Down & Up:press and release
button send data.

7
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

3.Lcds Test：

The test type can be selected

according to the interface of the

LCM.Select the test command

through the Command option.

8
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

4.TouchPanel Test:

Lcds Interface：Select the LCM

interface for the test.

Press the "Start Test" button

before you start the test.

9
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

4.Software setting

1. Set the output directory of vImage.bin:

Set the default output directory of the compiled

vImage.bin file.

10
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

5.PageList

Pagelist for managing pages.

Add a new page

Delete the selection page

Copy selection page

Refresh List

Note:

1. After adding or deleting a page, you need to press the refresh list button manually to refresh the page.

2. Up to 250 pages.

11
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

6.ImageList

ImageList for image management.

Add a new image

Delete the selection image

Exporting selected image

Replace the selection of image

Note:

most support 255 BMP images.

12
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

7.Compile and output

After the design of the UI is completed, the project is compiled. When the Edit button is pressed, the compilation results

are displayed on the compiled and output column.

13
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

8.A brief introduction of controls and properties

1.Square controls：

Properties:

Object_Id: Control Id number.

ForeColor: Control front view, square color setting.

X: The square starts X address.

Y: The square starts Y address.

Width: The width of the square.

Height: The height of the square.

isFill: Whether the square is filled with the foreground color, the False is not filled, and the True is filled

14
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

2.Line controls

Properties:

Object_Id: Control Id number.

ForeColor: Control front view, linear color setting.

X1: The straight line starts X address.

Y1: The straight line starts Y address.

X2: The line ends X address.

Y2: The line ends Y address.

15
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

3. Lable controls

Properties:

Object_Id: Control Id number.

BackColor: Control background color, lable background color setting.

ForeColor: Control front view, lable color setting.

FontSize: Lable font size selection.

Text: To display lable.

FillType: The lable displays background selection.

Transparent: Lable transparent display

Color: Lable background is filled with color

Image: Lable background is filled with image

Image: When the lable displays background selection is Image, you need to select the background image, and the background image size

16
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

must be the same as the LCD screen resolution。

X: The lable display initial X address.

Y: The lable display initial Y address.

Width: The lable display width of the area.

Height: The lable display height of the area.

Note: The FillType type is transparent (Transparent), text control uncontrollable, only Color and Image text controls can allocate Id and

controlled.

17
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

4.Number controls

Properties：

Object_Id: Control Id number..

BackColor: Control background color, number background color setting.

ForeColor: Control front view, number color setting.

FontSize: Number display size selection.

Decimals: Number setting after a decimal point

0 : No numbers

1 : 1 numbers

2: 2 numbers

3: 3 numbers

4: 4 numbers

18
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

FillType: Selection of number display background.

Color: Number background is filled with color

Image: Number background is filled with images

Image: When the number display background selects Image, the background image needs to be selected. The background image size must

be the same as the resolution of the LCD screen.

19
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

5.Form controls

Properties:

Object_Id: Control Id number.

BackColor: Control background color, table background color settings.

GridColor: Grid color setting.

Row: Table row number.

Column: Table column number.

X: The table display initial X address.

Y:. The table display initial Y address.

Width: The table display width of the area.

Height: The table display height of the area.

20
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

6.Image controls

Properties:

Object_Id: Control Id number.

ImageFile: To display a image file, select it through a list of images.

X: The image display initial X address.

Y: The image display initial Y address.

Width: The image display width of the area.

Height:The image display heightof the area.

21
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

7.Button controls

Properties:

Object_Id: Control Id number.

DispType: Button display type

Color：Color display of button

Image: Press and pop-up use images

FontSize: Button text display size selection.

Text: To display texts

ForeImage：The button pops up the display of the image.

BackImage：Press the button to display of the image.

Usage:Button usage.

UploadID: Upload the button Id number.

22
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

ChangePage: Change the page, and upload the button Id.

VirtualKey: Set the virtual key, and upload the button Id.

Target:

Usage is set to ChangePage, and enter the page number Id to switch.

Usage is set to VirtualKey to enter the Edit control Id number to output.

KeyType：Usage is set to VirtualKey, selecting key function.

Char: Enter the ASCII code character to the Edit control.

Clear: Clear the Edit control display.

Backspace: Delete a character of the Edit control.

Space: space character.

Enter: Confirm the button, the notification control side can read the character of the Edit control.

Char: When selecting the button function to Char, you need to enter the corresponding ASCII character.

23
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

8. Box controls

Properties：

Object_Id: Control Id number.

X: The box display initial X address.

Y: The box display initial Y address.

Width: Box display area width.

Height: Box display area height

24
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

9.Edit controls

Properties：

Object_Id: Control Id number.

TextColor: Text display color settings.

BackColor: Control background color, text background color setting.

FontSize: Text display size selection.

TextAlign: text alignment.

Left: Left align

Center: Align in the middle.

Right:Right align.

StoreType: Control variable storage type.

Local: Only the current page is saved, and the value of the control variable will be emptied when you exit the current page.

25
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

Global: Global storage, exit the current page, control variable values will be saved.

Password: Whether or not the password is displayed.

Yes:Display ****

No：Display ASCII characters

26
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

10.CheckBox controls

Properties：

Object_Id: Control Id number.

FontSize: Text display size selection.

Text: To display characters.

StoreType: Control variable storage type.

Local: Only the current page is saved, and the value of the control variable will be emptied when you exit

the current page.

Global: Global storage, exit the current page, control variable values will be saved

X: The check box display initial X address.

Y: The check box display initial Y address.

Width: Checkbox display area width.

27
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

Height: Checkbox display area height.

28
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

11.Slider controls

Properties：

Object_Id: Control Id number.

ForeColor: Control front view, slide bar color setting.

ImageFile:To display the background image file, select in the image list.

Location：Initial position of slider, range of value 0~100.

Direction: Slide display direction.

Horizontal: Horizontal sliding.

Vertical: Vertical sliding

StoreType: Control variable storage type.

Local: Only the current page is saved, and the value of the control variable will be emptied when you exit the current page.

Global: Global storage, exit the current page, control variable values will be saved.

29
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

X: The slider display initial X address.

Y: The slider display initial Y address.

Width: Slide block display area width.

Height: Slide block display area height.

30
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

12．Progressbar controls

Properties：

Object_Id: Control Id number.

FontSize:Text display size selection.

DispType: Progress bar display type

Color：The progress bar uses color display

Image: Progress bar using image combination display.

ForeImage：Progress bar display type is image, progress bar foreground image.

BackImage：Progress bar display type is image, progress bar background image.

X: The progress bar display initial X address.

Y: The progress bar display initial Y address.

Width: Progress bar display area width.

31
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

Height: Progress bar display area height.

32
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

13.CircleGauge controls

Properties：

Object_Id: Control Id number.

ImageFile: To display the background image file, select in the image list.

Radian：Initial position setting of pointer, 0~360 degree range of value.

PointerLength: Pointer length setting.

1/2 Width: 1/2 image width.

2/6 Width: 2/6 image width.

1/4 Width: 1/4 image width.

StoreType: Control variable storage type.

Local: Only the current page is saved, and the value of the control variable will be emptied when you exit the current page.

Global: Global storage, exit the current page, control variable values will be saved.

33
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

ForeColor: Control front view, pointer color setting.

X: The circle gauge display initial X address.

Y: The circle gauge display initial Y address.

Width: The circle gauge display area width.

Height: The circle gauge display area height.

34
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

14.BarGauge controls：

Properties：

Object_Id: Control Id number.

ImageFile: To display the background image file, select in the image list.

Location：Initial position of pointer, range of value 0~100.

Direction: The bar shows direction

Vertical: Vertical display.

Horizontal: Horizontal display.

StoreType: Control variable storage type.

Local: Only the current page is saved, and the value of the control variable will be emptied when you exit the current page.

Global: Global storage, exit the current page, control variable values will be saved.

35
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

ForeColor: Control front view, pointer color setting.

X: The bar gauge display initial X address.

Y: The bar gauge display initial Y address.

Width: The bar gauge display area width.

Height: The bar gauge display area height.

36
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

15.WaterGauge：

Properties：

Object_Id: Control Id number.

ForeColor: Control front view, water level indication color setting.

ImageFile: To display the background image file, select in the image list.

Level：Initial position of water level, range of value 0~100.

StoreType: Control variable storage type.

Local: Only the current page is saved, and the value of the control variable will be emptied when you exit the current page.

Global: Global storage, exit the current page, control variable values will be saved.

X: The water gauge display initial X address.

37
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

Y: The water gauge display initial Y address.

Width: The water gauge display area width.

Height: The water gauge display area height.

38
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

16.Themometer controls：

Properties：

Object_Id: Control Id number.

ForeColor: Control front view, temperature indication color setting.

ImageFile: To display the background image file, select in the image list.

Value：Initial location of temperature, range of value 0~120.

StoreType: Control variable storage type.

Local: Only the current page is saved, and the value of the control variable will be emptied when you exit the current page.

Global: Global storage, exit the current page, control variable values will be saved.

39
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

X: The themometer display initial X address.

Y: The themometer display initial Y address.

Width: The themometer display area width.

Height: The themometer display area height.

40
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

17.Waveform controls：

Properties：

Object_Id: Control Id number.

BackColor: Control background color, grid background color setting.

GridColor: Grid color setting.

CHColor1: Channel 1 curve color.

CHColor2: Channel 2 curve color.

ChannelNo: The number of curve channels, up to 2 channels.

GridWidth: Display the width of the grid.

GridHeigh: Display the height of the grid.

Direction: Curve display direction setting.

Left2Right: Display from left to right move.

41
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

Right2Left: Display from right to left move.

X: The waveform display initial X address.

Y: The waveform display initial Y address.

Width: The waveform display area width.

Height: The waveform display area height.

Note: the total width of the curve waveform control should not exceed 400 points, and the total height can not exceed 255 points.

42
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

18.Battery controls：

Properties：

Object_Id: Control Id number.

ImageFile: Control background color, grid background color setting.

Value：Initial location of battery capacity and range of 0~100.

Direction: Battery display direction.

Vertical: Vertical display.

Horizontal: Horizontal display.

StoreType: Control variable storage type.

Local: Only the current page is saved, and the value of the control variable will be emptied when you exit the current page.

Global: Global storage, exit the current page, control variable values will be saved.

43
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

ForeColor: Control front view, battery capacity display color settings.

X: The battery display initial X address.

Y: The battery display initial Y address.

Width: The battery display area width.

Height: The battery display area height.

44
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

9.Configuration key design steps

9.1. Image background key design steps

1.On the right is a touch button screen with 8 icons.

2.Select button controls from the control toolbar and drag to

the design area.

45
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

3. Setting button properties

DispType: change to Image.

ForeImage: Select the button foreground image, which is the current display and the display after the pop-up button (The request is full

screen image).

BackImage: Select the button background image, which is the image that presses the button to display (The request is full screen image).

Usage change to ChangPage, use as a page jump function.

Target set to p8, 8 is the page number of the button to jump (Page Id).

46
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

9.2 Color key design steps

1.The right picture is a digital keyboard that can be used for password input

interaction，

Edit control for digital key character display.

Exit button for page jump.

The number 0 to 9 is the digital button, and the Edit control displays the corresponding number after the press.

Clear button is used to clear the text display on the Edit control.

Space is to add a space character and display it on the Edit control.

Backspace is to delete a display character.

Enter is to confirm the key, and then send the confirmation instruction to the control end, and the control end can be read.The

characters displayed on the Edit control.

Note: each press key will send the Id number and key value of the key to the control side.

47
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

2. The setting of digital key 1

Digital keys are virtual keys and are used in conjunction with Edit controls.

Usage change to VirtualKey, used as a virtual key.

Target set to e2,the target of the output is e2(Edit control 2).

KeyType set to Char，output the characters to Edit control.

Char set to 1，the ASCII code is 0x31. Used for Edit control display.

Note: the other digital buttons and the ASCII character keys are the same.

48
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

3.Clear function setting

Clear function key is used to clear the character display of the Edit control.

Usage change to VirtualKey, used as a virtual key.

Target set to e2, the target of the output is e2(Edit control 2).

KeyType set to Clear, clear the character display of the Edit control 2.

49
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

4.Backspace function setting

Backspace function key is used to delete a character of the Edit control.

Usage change to VirtualKey, used as a virtual key.

Target set to e2, the target of the output is e2(Edit control 2).

KeyType set to Backspace,delete one of the characters of the Edit control 2.

50
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

5.Space function setting

Space function key is used to add a space character to the Edit control.

Usage change to VirtualKey, used as a virtual key.

Target set to e2, the target of the output is e2(Edit control 2).

KeyType set to Space, add a space character to the Edit control.

51
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

6.Enter function setting

Enter function keys are used to send confirmation information to the control end.

Usage change to VirtualKey, used as a virtual key.

Target set to e2, the target of the output is e2(Edit control 2).

KeyType set to Enter, to control the sending confirmation information, notification control terminal can read text data from Edit

control 2.

52
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

7.Page change function setting

The page change function keys are used for the page change, and then jump to the specified page after pressing the button and

then popping up.

Usage change to ChangePage,use as page change.

Target set to p4, Jump to a page numbered 4 (Page Id 4).

53
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321
 Visual Lcd Studio User Manual

54
Hunda tech Website: www.hundatech.com mail: [email protected] QQ:174091877 Phone:18124634321