hunda visual lcd studio - hundatech.com · hunda tech visual lcd studio visual ui programming....

HUNDA

TECH Visual Lcd StudioVisual Lcd Studio

Visual UI Programming. Quickly make

the required UI.

Visual Lcd Studio

Visual Lcd Studio User Manual

2

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

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


3


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.


4


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.


5


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.


6


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.


7


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.


8


3.Lcds Test： The test type can be selected according to the interface of the LCM.Select the test command through the Command option.


9


4.TouchPanel Test: Lcds Interface：Select the LCM interface for the test. Press the "Start Test" button before you start the test.


10


4.Software setting 1. Set the output directory of vImage.bin: Set the default output directory of the compiled vImage.bin file.


11


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.


12


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.


13


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.


14


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


15


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.


16


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


17


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.


18


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


19


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.


20


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.


21


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.


22


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.


23


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.


24


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


25


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.


26


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


27


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.


28


Height: Checkbox display area height.


29


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.


30


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.


31


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.


32


Height: Progress bar display area height.


33


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.


34


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.


35


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.


36


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.


37


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.


38


Y: The water gauge display initial Y address. Width: The water gauge display area width. Height: The water gauge display area height.


39


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.


40


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.


41


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.


42


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.


43


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.


44


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.


45


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.


46


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).


47


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.


48


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.


49


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.


50


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.


51


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.


52


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.


53


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).


54


hunda visual lcd studio - hundatech.com · hunda tech visual lcd studio visual ui programming....

Documents