Topway Smart LCD SGTools Handbook

Handbook Smart LCD - SGTools
Content
1 Quick Start ................................................................................................................................................................ 5
1.1 How to Use a Smart LCD .................................................................................................................................. 5
1.2 Smart LCD Connection Examples ..................................................................................................................... 5
1.3 Quick Start Example .......................................................................................................................................... 5
2 Basic Descriptions................................................................................................................................................... 6
2.1 Smart LCD Highlight .......................................................................................................................................... 6
2.2 SGTools Highlight .............................................................................................................................................. 6
2.3 Functional Block................................................................................................................................................. 6
3 Smart LCD Features and Functions....................................................................................................................... 7
3.1 Basic Concept .................................................................................................................................................... 7
3.1.1 PAGE ............................................................................................................................................................. 7
3.1.2 Page Elements ............................................................................................................................................... 7
3.1.3 Image Recourses ........................................................................................................................................... 7
3.1.4 VP Variables .................................................................................................................................................. 7
3.1.5 Call Functions ................................................................................................................................................ 7
3.2 Display and Functional Relationships ................................................................................................................ 7
3.3 Page Elements................................................................................................................................................... 8
3.3.1 Action Type Elements .................................................................................................................................... 8
3.3.2 Character (Alpha Numeric) Type Elements ................................................................................................... 9
3.3.3 Image Type Elements .................................................................................................................................... 9
3.3.4 Graphics Type Elements Details ................................................................................................................. 10
3.4 Page, IMAGE Resource and VP Variables ..................................................................................................... 11
3.4.1 Page and IMAGE Resource ........................................................................................................................ 11
3.4.2 VP Variable .................................................................................................................................................. 11
4 SGTools .................................................................................................................................................................. 12
4.1 Editor Layout .................................................................................................................................................... 12
4.2 General Operations.......................................................................................................................................... 12
4.3 Editor Menu ...................................................................................................................................................... 13
4.3.1 Start.............................................................................................................................................................. 13
4.3.2 New Project (Menu - File - New Project) ..................................................................................................... 13
4.3.3 Open Project (Menu - File - Open Project) .................................................................................................. 13
4.3.4 Save (Menu - File - Save) ............................................................................................................................ 13
4.3.5 Save As (Menu - File - Save As) ................................................................................................................. 13
4.3.6 Close Project (Menu - File - Close) .............................................................................................................. 13
4.3.7 Editor Options (Menu - Tools - Options) ...................................................................................................... 14
4.3.8 Project Setting (Menu - Tools - Project Setting) .......................................................................................... 14
4.3.9 Font Setting (Menu - Tools - Font Setting) .................................................................................................. 15
4.3.10 Built Project Files (Menu - Tools - Built Project Files) ............................................................................. 15
4.3.11 Download to Module (Menu - Tools - Download to Module) ................................................................... 15
4.4 Elements Configurations .................................................................................................................................. 16
4.4.1 Touch Key (TPK) ......................................................................................................................................... 16
4.4.2 Virtual Key (VPK) ......................................................................................................................................... 18
4.4.3 Swap Page (SWP_PG) ................................................................................................................................ 19
4.4.4 Touch Key with Repeat (TPK_RPT) ............................................................................................................ 20
4.4.5 Touch Key (TPK) ......................................................................................................................................... 21
4.4.6 Slider (SDR) ................................................................................................................................................. 22
4.4.7 Slider 2 (SDR2) ............................................................................................................................................ 23
4.4.8 Touch Ring (RNG) ....................................................................................................................................... 24
4.4.9 Touch Ring 2 (RNG2) .................................................................................................................................. 25
4.4.10 Static String (STS) ................................................................................................................................... 26
4.4.11 String Element (STR) ............................................................................................................................... 27
4.4.12 Scrolling String Element (STR_SCR) ...................................................................................................... 28
4.4.13 Number Elements (N16, N32, N64) ......................................................................................................... 29
4.4.14 Timer Display (TMR) ................................................................................................................................ 31
4.4.15 Real Time Clock (RTC) ............................................................................................................................ 32
4.4.16 Static Icon (ICO) ...................................................................................................................................... 33
4.4.17 Animation Element (ANI) ......................................................................................................................... 34
4.4.18 Bit Icon (IDX_BIT) .................................................................................................................................... 35
TOPWAY reserves the right to update the functionality of the products without prior notice. Document Name: TOPWAY_SmartLCD(SGTools)User_handbook(en)Rev100.doc
URL: www.topwaydisplay.com Page: 2 of 99
4.4.19 Indexed Icon (IDX) ................................................................................................................................... 36

4.4.20 Decimal Icon (I16, I32) ............................................................................................................................. 37
4.4.21 Tachometer (TCM) – Hand Mode ............................................................................................................ 39
4.4.22 Tachometer (TCM) – Donut Mix Color Mode / Donut Discolor Mode ...................................................... 40
Tachometer (TCM) – Icon Rotation Mode / Icon Open Mode ................................................................................. 42
4.4.23 Tachometer (TCM) - Pseudo Icon Rotation Mode / Pseudo Icon Open Mode ........................................ 43
4.4.24 Progress Bar (B16) .................................................................................................................................. 45
4.4.25 Graph Element (G16)............................................................................................................................... 47
4.4.26 Bitmap Element (BP1) ............................................................................................................................. 48
4.4.27 QR Code Element (QRC) ........................................................................................................................ 49
4.4.28 Draw Pad (DPD) ...................................................................................................................................... 49
4.4.29 Predefined Touch Key (ESC) .................................................................................................................. 50
4.4.30 Predefined Touch Key (DEL) ................................................................................................................... 50
4.4.31 Predefined Touch Key (Left) .................................................................................................................... 50
4.4.32 Predefined Touch Key (Right) ................................................................................................................. 50
4.4.33 Predefined Touch Key (ESC) .................................................................................................................. 50
4.4.34 Predefined Touch Key (CapLock) ............................................................................................................ 50
4.4.35 Predefined Touch Key (char) ................................................................................................................... 51
4.4.36 Predefined Touch Key - Set (number keyboard 1) .................................................................................. 51
4.4.37 Predefined Touch Key - Set (number keyboard 2) .................................................................................. 51
4.5 Page Configurations ........................................................................................................................................ 52
4.5.1 Page Properties ........................................................................................................................................... 52
4.5.2 Page Functions ............................................................................................................................................ 52
4.6 Elements Sub Functions Details ...................................................................................................................... 53
4.6.1 Draw Pad (DPD) in-memory command Functions ...................................................................................... 53
4.6.2 TPK, VPK Call Functions ............................................................................................................................. 54
5 Serial Communication ........................................................................................................................................... 56
5.1.1 Hardware connection ................................................................................................................................... 56
5.1.2 Communication Packet Structure ................................................................................................................ 56
5.1.3 Packet Acknowledgment ............................................................................................................................. 56
5.1.4 Color Data Value Configuration ................................................................................................................... 56
5.1.5 Data / Address / Page_ID / Location Values Configuration ......................................................................... 56
5.2 Command Summary ........................................................................................................................................ 57
5.3 Command Details ............................................................................................................................................ 58
5.3.1 Config / Status Functions ............................................................................................................................. 58
5.3.2 Display Control / Draw Functions ................................................................................................................ 59
5.3.3 VP Functions ................................................................................................................................................ 60
6 Basic Function Examples ..................................................................................................................................... 62
6.1 Display a PAGE with background image (IMG_BKG) ..................................................................................... 62
6.2 Using Touch Key (TPK) to Jump to a Page ..................................................................................................... 63
6.3 Show a Static Icon (ICO) ................................................................................................................................. 64
6.4 Show a Static String (STS) .............................................................................................................................. 65
6.5 Show an Animation Element (ANI) .................................................................................................................. 66
7 VP_Variables and Keyboard Examples ............................................................................................................... 67
7.1 Using Internal Number Keyboard to input a value to a VP_N32 ..................................................................... 67
7.2 Using Internal English Keyboard to input a string to a VP_STR ..................................................................... 68
7.3 Using Internal Password Keyboard to input a number pin .............................................................................. 69
7.4 Using Internal Real-Time-Clock Keyboard to set the Real-Time-Clock(RTC) time ......................................... 70
7.5 Using PIP Menu to input a String Value .......................................................................................................... 71
7.6 Using PIP (Number) Keyboard to input a value ............................................................................................... 72
7.7 Using PIP Keyboard to input a value ............................................................................................................... 73
7.8 Using TPK to operate VP value ....................................................................................................................... 74
8 VP and COM communication Examples .............................................................................................................. 75
8.1 Using Serial Command to update a Number variable ..................................................................................... 75
9 Advance element Examples ................................................................................................................................. 76
9.1 Show a Progress Bar ....................................................................................................................................... 76
9.2 Using Index Icon .............................................................................................................................................. 77
9.3 Using Tachometer Element (Angle Open Mode) Application Example ........................................................... 78
9.4 Using Tachometer Element (Rotation Mode) Application Example (Meter) .................................................... 80
9.5 Using Tachometer Element (Rotation Mode) Application Example (Radar) ................................................... 81
9.6 Using Decimal Icon .......................................................................................................................................... 82
9.7 Using Graph Element ...................................................................................................................................... 83
9.8 Show a Bitmap Element .................................................................................................................................. 84
9.9 Using Swap Page Element .............................................................................................................................. 85
9.10 Using Slider Element ....................................................................................................................................... 86
9.11 Using Slider 2 Element (SDR2) ....................................................................................................................... 87
9.12 Using Ring Element with Tachometer(Donut Mode) Element ......................................................................... 88
9.13 Using Ring_2 element with Tachometer(Icon Rotation Mode) Element .......................................................... 89
9.14 Using Touch Switch (TPK_SW) ....................................................................................................................... 90
9.15 Using Touch Key with Repeat(TPK_RPT) ....................................................................................................... 91
9.16 Using Tachometer(Hand Mode) Element ........................................................................................................ 92
9.17 Using Round Clock Element ............................................................................................................................ 93
9.18 - Done - ............................................................................................................................................................ 93
10 Appendix ................................................................................................................................................................. 94
10.1 SGTools Shortcut Keys ................................................................................................................................... 94
10.2 Project Limitation ............................................................................................................................................. 95
10.2.1 PAGEs, Image-Resources and VP-Variables Limitation ......................................................................... 95
10.2.2 Page's Elements Limitation ...................................................................................................................... 96
10.2.3 System Registers ..................................................................................................................................... 97
11 Precautions of using LCD Modules ..................................................................................................................... 98
12 Revisions ................................................................................................................................................................ 99
1 Quick Start
1.1 How to Use a Smart LCD
Install TOPWAY
1 SGTools
Note: SGTools support Windows XP, Win7, Win10(Administrator Mode)
Design
2 Interface
Note: TML Graphics Editor support BMP(32bit), BMP(24bit), JPG, PNG, etc picture format
Download
3 to Smart LCD
Note: Use High quality USB(A) to USB(mini) cable directly attach to the PC motherboard for better power and signaling
Power on
4 & display
Note: Please refer to the user manual for connection polarity and voltage.
Connect &
5 Show data
Note: RS-232C terminal is common grounded with the supply (some models providing logic level UART interface)
Please also refer to Product User Manual for details.
1.2 Smart LCD Connection Examples
HMT050CC-C connection example HMT070CE-C connection example

Please also refer to Product User Manual for details.
1.3 Quick Start Example

Please refer to "Basic Function Example" section
2 Basic Descriptions
TOPWAY Smart LCD Modules provide a display engine with a versatile range of TFT display sizes and
Touch-Panels to support a wide range of industrial and instrumentation applications.
The pre-loaded User Interface (UI) reduces the host system’s workload and provides a much faster
interaction with the user.
UI designs are done through SGTools, allowing design with zero coding. It dramatically simplifies and
speeds up the whole product design process.
2.1 Smart LCD Highlight

- Standard RS232-C communication interface
- Reliable packet protocol ensures reliable communication
- Host data could be accepted at any moment
- Free the host form interface response and handling
- Direct connect the USB terminal to PC for development
- USB thumb drive with OTG cable can be used for data preload in production stage (options)
- 256Mbyte Flash (vary by model) for interface pictures preload (more than 300 pictures(800x480))
2.2 SGTools Highlight

- Professional visual design interface
- Web page like page base UI design
- Various kind of touch screen effect available
- User friendly work space
- Support various countries font ASCII and extended char
- Support font import and fine font adjustment
- Only need few minutes to show a UI sample with zero coding
- One click download
2.3 Functional Block
3 Smart LCD Features and Functions

3.1 Basic Concept
3.1.1 PAGE Each display interface is a PAGE.
It could contain / link with all the predefined content
(e.g. background image, page elements, etc. )
3.1.2 Page Elements 29 type page elements could be use on screen
9 action type elements, 6 Character (Alpha Numeric) type elements,
6 image type elements, 8 graphics type elements
Most of them are linked with VP variable to generate dynamic display
content.
3.1.3 Image Recourses Image Recourses include background images (IMG_BKG), icon images
(IMG_ICO) and animation images (IMG_ANI).
They could link by PAGE or Elements to be show on screen.
3.1.4 VP Variables VP Variables is a RAM area to hold functional variable values.
They could be accessed by host via serial port command,
value operations or on screen Keyboard etc.
3.1.5 Call Functions Call Functions are functions (e.g. keyboard, values operations, etc) that
could be trigged by a Page start, Touch Key or Virtual Touch Key.
3.2 Display and Functional Relationships
3.3 Page Elements
3.3.1 Action Type Elements

icon Mnemonic Name Descriptions
Touch Key Element could place inside a page. It will be triggered by user touching on its assigned area
- Touch Key assigned area provides visual touch response (e.g. inverse color or show a icon, etc)
TPK Touch Key
- It will also report to the host machine about its ID (Page_ID / Key_ID, operated VP_address and value, etc)
- Its call functions could provide various kinds of actions (e.g. keyboards, value operations, page jump, etc.)
Virtual Key is a non-display element.
It could be defined in a PAGE and trigged by a condition like "content of a VP equal to constant value"
- Virtual Key assigned area will NOT provide visual response
VPK Virtual Key
- Its call functions could provide various kinds of actions (e.g. keyboards, value operations, page jump, etc.)
- After being triggered, the monitored VP will be cleared as 0
(note: only the PAGE with VPK showing on screen could be trigged)
Swap Page Element is a full screen element.. It allow the user to jump to another PAGE
- Sweep should start on screen area without any other touch element.
SWP_PG Swap Page
- It can jump to two different PAGE depends on the horizontal sweep direction (left-to-right or right-to-left)
- It will also report to the host machine about its Target Page_ID
Touch Key with Repeat is an element (similar as TPK) which provide long-press input.
- It assigned area provides visual touch response (e.g. inverse color or show a icon, etc)
Touch Key - It only provide VP:=VP+value function
TPK_RPT
with Repeat - It provide additional on long-press functionality which can provide repeated the VP:=VP+value function
(assign negative value can provide minus function)
Touch Switch is an element is that provide bit operation
- Touch Switch assigned area provides visual touch response (e.g. show a icon, etc)
TPK_SW Touch Switch
- It will toggle the selected bit of a VP (after the touch 0→1 or 0→1)
Slider is an element that provide sliding value input
- Slider touch area can be defined as Horizontal or Vertical slide with Absolute or Relative mode options
- It does not provide visual response
SDR Slider
(it may overlay with B16, B32, etc as corresponding visual effect)
- It can give an input value between the Content Min/Max value in ratio with sweep
Slider 2 is a full screen element (similar as SDR) which can act with two point touch operation
- Two point touch should start on screen area without any other touch element.
- It can be defined as Horizontal or Vertical slide with Gain options
SDR2 Slider 2 - It does not provide visual response
(it may overlay with B16, B32, etc as corresponding visual effect)
- It can give an input value between the Content Min/Max value in ratio with sweep
It will also report to the host machine about its ID (Page_ID / Key_ID, operated VP_address and value, etc)
Touch Ring is an round shape element is that provide circular sliding input
- Touch Ring touch area can be refined with the Radius and Angle setting
RNG Touch Ring
(it may overlay with R16, R32, etc as corresponding visual effect)
- It can give an input value between the Content Min/Max value in ratio with the assigned Sweep Angle
Touch Ring 2 is a full screen element (similar as RNG) which can act with two point touch operation
- Two point touch should start on screen area without any other touch element.
RNG2 Touch Ring 2
(it may overlay with R16, R32, etc as corresponding visual effect)
- It can give an input value between the Content Min/Max value with respect to the two point rotation angle.
note: Elements overlapped in the PAGE might affect the display result
3.3.2 Character (Alpha Numeric) Type Elements

Icon Mnemonic Name Descriptions
STS Static String Static String Element shows text string defined by its properties directly.
String Element is for displaying VP_STR content

STR String Element - Display the VP_STR content in PAGE with alignment and formatting
- String Element will be updated correspondingly in real-time, if the VP_STR content changed.
Scrolling String Elements is for displaying VP_STR content (similar as STR) which can provide scrolling effect
- Display the VP_STR content in PAGE with alignment and formatting
STR_SCR Scrolling String
- Scrolling direction could be config as horizontal or vertical with speed options
- String Element will be updated correspondingly in real-time, if the VP_STR content changed.
Number Element is for displaying VP_N16, VP_N32, VP_N64 content
N16
- Display the VP_N16, VP_N32 and VP_N64 content in PAGE with alignment and formatting
N32 Number Element
- Number Element will be updated correspondingly in real-time, if the VP_N16, VP_N32 and VP_N64
N64
content changed.
Timer Display Element links to a timer addressed inside VP_N32.

TMR Timer Display
- It Display the timer value with alignment and formatting
RTC Real Time Clock Real Time Clock Element shows the Smart LCM internal clock with formatting.
3.3.3 Image Type Elements

ICO Static Icon Static Icon Element links to an IMG_ICO and shows it on screen
Animation Element links to an IMG_ANI and shows it on the screen

ANI Animation Element
It is animation speed could be defined.
Bit Icon Element links with one bit value of VP_N16 or VP_N32
IDX_BIT Bit Icon
which could point to an IMG_ICON and display accordingly with its value
Indexed Icon Element links with VP_N16 or VP_N32 which could point to an IMG_ICON and display accordingly
IDX Indexed Icon
If the value in side the VP is outside the defined max/min rang, it will display nothing
Decimal Icon Element links with VP_N16 and display as decimal formatted icons
I16
Decimal Icon It should linked with 12 icons for full operation
I32
(where the indexed picture sequence is 0~9, dot, minus)
Tachometer Element link with VP_N16 or VP_N32 which show as a meter display accordingly.
TCM Tachometer
If the value in side the VP is outside the defined max/min rang, it will display nothing
3.3.4 Graphics Type Elements Details

Progress Bar Element links with VP_N16 and display a bar based on its value.
B16 Progress Bar The bar length is a percentage of the defined max/min value with the VP_N16 value.
An ICON pointer could also be link with it as an option
Progress Ring element links with VP_N16 or R32 and display a ring based on its value.
R16, R32 Progress Ring The ring angle is a percentage of the defined max/min value with the VP value.
An ICON pointer could also be link with it as an option
Hand Tachometer Element link with VP_N16 or VP_N32 which show as a meter display accordingly.
HND Hand Tachometer It can also generate the meter face with marking as well.
If the value in side the VP is outside the defined max/min rang, it will show the max or min pointing accordingly.
Graph Element display graphical plot of the VP_G16 content

G16 Graph Element
- It provide real time update of the VP_G16 value
Bitmap Element display a mono picture content which store inside VP_BP1
- it show picture in 1bpp
BP1 Bitmap Element
- It provide LUT for mapping 0 and 1 to different defined color
- It provide real time update of the VP_BP1 value
Round Clock Element shows the Smart LCM internal clock with hands.
CLK_R Round Clock
It can also generate the meter face with marking as well.
QRC QR Code Element QR Code Element generates a QR code with a linked VP_STR
Draw Pad Element is an element that execute a drawing function that store inside VP_N16
which point by its properties VP_address.
DPD Draw Pad
Once the command value updated, the drawing will be updated in real time.
ICON can also could be shown with by command.
3.4 Page, IMAGE Resource and VP Variables
3.4.1 Page and IMAGE Resource

Page is the basic unit of display.
PAGE Page
It links to elements and background Image(background color) predefined in Editor
Background Image is one of the Picture Resources. Picture files could be imported into Editor as Background
IMG_BKG Background Image
Image. It could also be used (automated crop) as TPK touch down effect image.
Icon is one of the Picture Recourses.
IMG_ICO Icon
Icon files could be imported in to the Editor and linked by various elements. (e.g. TPK ,IDX ,I32/16 ,B16 , ICO, etc)
Animation is one of the Picture Resources
IMG_ANI Animation
It is a series of images file which imported into the Editor and linked by ANI element to play.
Note: PAGEs and IMAGEs are store inside Smart LCD Flash memory.
3.4.2 VP Variable
String Variable with 128bit length for character strange storage (note: content must end with "\0')
VP_STR String Variable
The memory space could be allocated in Editor, and link and display by elements like STR, QR code, etc.
range: -32767~32767
VP_N16 16bit Integer Variable
The memory space could be allocated in Editor, and linked and display by elements like N16, IDX, I16, VPK, etc.
range: -2147483647 ~ 2147483647

The memory space could be allocated in Editor, and linked and display by elements like N32, I32, etc.
range: -9223372036854775807 ~ 9223372036854775806

(-9223372036854775808 (0x8000 0000 0000 0000) is reserved value)
(9223372036854775807 (0x7FFF FFFF FFFF FFFF) is reserved value)
The memory space could be allocated in Editor, and linked and display by elements like N64, etc.
groups of 16bit integer values for graphical-curve display data storage
VP_G16 16bit Graph Variable Range: -32767 ~32767 (-32768d (0xFFFF) is reserved value)
The memory space could be allocated in Editor, and linked/display by elements G16, etc
groups of picture data in 1bpp

VP_BP1 Bitmap Variable
The memory space could be allocated in Editor, and linked/display by element BP1
Special Register Variable for some of the system configuration.

VP_REG Register Variable Timer Control, RTC Control, Buzzer Control, Backlight Control, Screen Saver Control, Code Page Control, Country
Code Control.
VP_TMR Timer Variable Timer counter inside VP_N32
Note: VP variable is inside the Smart LCD RAM.
4 SGTools
UI designs are implemented under usage of SGTools allowing designs with zero coding. It dramatically
simplifies and speeds up the whole product design process.
4.1 Editor Layout
① Menu Provide basic software operation,

View options, tools options, etc
② Tools bar There are four type of tools

- file tools for project open, save, compile output, etc
- alignment and display filter tools
- display elements tools
- compile and download tools
③ Project Resources window Resource windows (right click on the resources)
- built new page,
- import pictures (IMG_BKG, IMG_ICO, IMG_ANI)
- allocated VP variable (VP_N16, VP_N32, VP_N64)
- user file, etc... (*1)
④ Working Area The working area for composing the display page.
User could build element onto the page.
⑤ Properties Window Display the selected element properties or Page properties
⑥ Prompt Output Window Prompt output window show the compiling information, warning and error
information
Note: Lua feature available on some of the model only
4.2 General Operations

Please refer to the "Examples" section for general operation examples
4.3 Editor Menu
4.3.1 Start
At the start up of the SGTools,
It will pop up a Welcome interface for use to select the
previous Edited Project, Create a New Project or Open
Project somewhere else.
4.3.2 New Project (Menu - File - New Project)

For New Project, user can type in the project
name and select the folder for that project.
It is important to ensure to select the correct screen size

that match the target Smart LCD.
(0°/180°for landscape projects)
(90°/270°for portrait projects)
After click the OK button, SGTools will

create two folders in to the Project Folder.
In this case, it creates

D:\TOPWAY_PROJECT\demo01
D:\TOPWAY_PROJECT\demo01.tmp
(.tmp folder is the working folder)
4.3.3 Open Project (Menu - File - Open Project)
Open Project look for the project folder with .tpj file inside
4.3.4 Save (Menu - File - Save)
Save the current project
4.3.5 Save As (Menu - File - Save As)

Save the current project with another name
4.3.6 Close Project (Menu - File - Close)
Close the current project
4.3.7 Editor Options (Menu - Tools - Options)

In this window, user can
- fine adjust all the image color tone during compile

by setting Image Gamma
- Select Compile Options
- Output Project Image File
- Open Output folder after compile
- Compile Project before download
- Save the project before compile
4.3.8 Project Setting (Menu - Tools - Project Setting)

In this window, user can set
- "Start Page" to show at power on
- power on "Backlight Brightness" level
- select one of the "Screen Saver Mode" (*1)
- set "Buzzer" beeping length (0=no sound)
- set RTC (real time clock) operation mode (*2)
- set power on "RS232 Baudrate"
- set “Command Format” (*3)
- set “Command Timeout” (0=no timeout)
- set power on "Country Code" for ASCII display
- set power on "Code Page" for ext. char & decoding
- set “Enable ACK” to provide command responses
“:>” : ready for new command
“!>” : command error
- set "Touch-Key lock on touch" to
lock the touch down key and action on release
- set "Upside-down" to show the generate
180 deg rotated display content
Note:
*1. Screen Saver Mode *3. Command Format
User could select one of them with related parameter. Three kinds of Command Format are aviable.
*2. RTC mode
Operating Operating
RTC Mode with RTC battery without RTC battery Descriptions
Enable 1st power up takes 6s; every power up takes 6s RTC run with correct init
next power up takes 1s
Disable every power up takes 1s every power up takes 1s RTC stop
Engineering every power up takes 1s every power up takes 1s RTC run without init
Mode RTC might not run correctly
It is NOT suggested for production setting
4.3.9 Font Setting (Menu - Tools - Font Setting)

There are 2 sections of Fonts.
Font Config <1>, the Font Width and Height are fixed and mainly for ASCII Char.
(with some default font, vary by model)
Font Config <2>, provide more free option about Size and Decoding selection. (without font by default)
Right click on the font table, select "build" could build the font with several options.
It is suggested to delete the un-used Font area for reduce the memory allocation.
Font Config <1> Table

Font Config <2> Table
Build Font <1> Build Font <2>
4.3.10 Built Project Files (Menu - Tools - Built Project Files)

After finish the layout, "Built Project Files" will compile all the resource and font etc in to a set of files. It could
download or copy to the Smart LCD at any time.
It will pop-up the output folder inside the Project Folder
4.3.11 Download to Module (Menu - Tools - Download to Module)

After connect the Smart LCD USB to user PC, the
Smart LCD will appear as a removable drive.
Using "Download to Module" could copy the
compiled project file into the Smart LCD.
Note. Graphics Editor will refuse to download without

Smart LCD
4.4 Elements Configurations
4.4.1 Touch Key (TPK)

General
- Show the basic information of the element
- X and Y is the location of element on screen
(top-left corner of the screen = 0,0)
element top-left corner is the reference point
- Width and Height are in pixels
Visual Effect
- On Press Down options are
None, Inverse Color, Show Icon or Show Cropped BgImg
- Icon/BgImage base on the above option
select a Background Image or an Icon for the visual effect.
Target
- Target Page is for page jump function after touch
Call
- Call Keyboard is for call up a keyboard after touch
- Call Operation is for simple calculation after touch
- Call Key is for building PIP_Keyboard
Content
- VP Address is for calculation or Keyboard input result
- Compile As can force VP variable work different than default (Auto)
VP_N16 (two successive VP_N16) work as VP_N32
VP_N32 (first two byte of VP_N32) work as VP_N16
VP_N64 (first four byte of VP_N64) work as VP_N32
- Data type should be signed by default (*1)
Return
- Return Value for select type of notification to host during touch
It can notify the Host via Touch Key ID Response code (0x78) (*3)
none, no notification (by default)
Up PGID + TPKID, send on TPK release
Down PGID + TPKID, send on TPK touch
Down Up PGID + TPKID, send on TPK touch and release
Properties Control (advance feature)

- Enable VP is none by default (element operate normally)
Select a VP for real time element control.
VP value will set to 1 as enable at power-on.
It can be disabled (hidden) by a zero value
Note:
*1. Please also see "TPK, VPK Call Functions" section for Call Features
*2. TPK support touch and move, action on release. It could change to "Touch-Key lock on touch" in "Project Setting".
*3. Please also see "Command" section for details
*4. TPK Visual Effect - Inverse Color Operation Idea
*5. TPK Visual Effect - Show Cropped BgImage Operation Idea
*6. TPK Visual Effect - Show Icon Operation Idea
*7. Floating point value could only be operate with N32 (or Compile As N32) and PIP Number Keyboard
4.4.2 Virtual Key (VPK)

General
- This element’s X, Y, Width, Height are not related to its functionality.
Condition
- Monitor-VP is a VP to trigger this Virtual Key
- Monitor-Value is the Value for trigging this element
Target
- Target Page is for page jump function after touch
Call
- Call Keyboard is for call up a keyboard after touch
- Call Operation is for simple calculation after touch
- Call Key is for building PIP_Keyboard
Content
- VP Address is for calculation or Keyboard input result
- Data type should be signed by default (*1)

Note:
*1. Please also see "TPK, VPK Call Functions" section for Call Features
*2. Floating point value could only be operate with N32
(or Compile As N32) and PIP Number Keyboard
4.4.3 Swap Page (SWP_PG)

General
Style
- Sweep Threshold defines the sweeping distance which start the feature
Smaller value make it more easy to be trigger
Bigger value make it slower response to the action
(Sweep should start on screen area without any other touch element)
Target
- Left Side Page is the target page that pull-out form left side
while the touch sweeping form left to right
- Right Side Page is the target page that pull-out form right side
while the touch sweeping form right to left
Return
- Return Value for select type of notification to host during touch
It can notify the Host via Touch Key ID Response code (0x78) (*3)
none, no notification (by default)
Target PGID, send on sweep release

4.4.4 Touch Key with Repeat (TPK_RPT)

General
Visual Effect
None, Inverse Color, Show Icon or Show Copped Image
Style
- Mode is touch action moment
Down Action will trigger the Short Press feature while touch down
Up Action will trigger the Short Press feature while touch up
- Long Press Time is the time for Long Press feature to be trigger
- Long Press Cycle is the repeat action cycle time for long Press
- Long Press Value is operation (VP:=VP+value) value for Long Press
- Short Press Value is the operation (VP:=VP+value) value for Short Press
(negative value for minus operation)
Content
- VP Resource is the type of VP to be used
- VP Address is the VP for the operation
- Min Value is the bottom value that will be limited by the operation
- Max Value is the top value that will be limited by the operation
Return
- Return Value / VP / Status VP for select type of notification to host
(multiple notification can be enable)
- Up, PGID+TPKID
- Down, PGID+TPKID
- Up, VP Address+Value
- Down, VP Address+Value
- Long Press, VP Address+Value
- Up, Vp Address+Status Value
- Down, Vp Address+Status Value

- Status VP is none by default
Select a VP for storing the real time status
0=no touch, 1=touch down, 2= long press
4.4.5 Touch Key (TPK)

General
Style
- Mode is touch action moment
Down Action will trigger the Short Press feature while touch down
Up Action will trigger the Short Press feature while touch up
Visual Effect
- Display Effect options are
Show Icon or Show Copped Image
Content
- Bit Position is the bit to be triggered (inversed) in the VP address
Return
- Up, PGID+TPKID
- Down, PGID+TPKID
- Cycling, VP Address+Value

0=no touch, 1=touch down
4.4.6 Slider (SDR)

General
Style
- Mode is touch action way
Absolute=give the value direct proportion to the element area
Relative=give more fine value by multiple sliding action
- Direction is for the slider sense direction
Horizontal=horizontal sliding
Vertical=vertical sliding
Content
Return
- Up, PGID+TPKID
- Down, PGID+TPKID

4.4.7 Slider 2 (SDR2)

General
Style
- Direction is for the two pint sliding sense direction
Horizontal=horizontal sliding
Vertical=vertical sliding
- Gain defines the two pint sliding amplification
Smaller value make the move-to-value gain less
Bigger value make the move-to-value gain more
Content
Return
- Return Value / Status VP for select type of notification to host

4.4.8 Touch Ring (RNG)

General
Style
- Mode is touch action way
Absolute=give the value direct proportion to the element area
- Direction is for the slider direction Clockwise or Counterclockwise
- External Radius define the outer boundary of the sensing ring (*1)
- Internal Radius define the inner boundary of the sensing ring (*1)
- Start Angle is the angular location of the min value
- Sweep Angle is the effective angular area
that relatively begin form the Start Angle for sensing
(the above 4 value define the boundary of the sensing area)
Content
Return
- Up, PGID+TPKID
- Down, PGID+TPKID

Note:
*1. Radius and Angle Definition *2. example
Direction = Clockwise
Start Angle = 255°
Sweep Angle = 270
4.4.9 Touch Ring 2 (RNG2)

General
Style
- Gain defines the two pint sliding amplification
Smaller value make the move-to-value gain less
Bigger value make the move-to-value gain more
Visual Effect
None, Inverse Color, Show Icon or Show Copped Image
Content
Return
- Return Value / Status VP for select type of notification to host

4.4.10 Static String (STS)

General
Style
- Font face could be selected at here
- Font Color is the font face color
- Background Color only available with Transparent disable
- Transparent = true, disable the Background Color box to be show
Format
- Align could be: Left / Right / Center
- Char spacing option: Default, Shrink
Content
- Static Test is the text going to be display

- Font VP is none by default (using the above selected font)
Select a VP for real time font ID change
VP value will copy the above ID at power-on.
- Foreground color VP is none by default (using the above selected color)
Select a VP for real time foreground color adjustment
VP value will copy the above selected color at power-on.
- Backgound color VP is none by default (using the above selected color)
Select a VP for real time background color adjustment
- Transparent VP is none by default (using the above option)
Select a VP for real time transparent background control
VP value will copy the above transparent config at power-on.
It can be enable by a non-zero value or disable by a zero
4.4.11 String Element (STR)

General
Style
- Mask could be any char to "represent" as the char
(Keep empty for normal operation)
- Scroll = false as default
true = convert itself as Scrolling String element (see STR_SCR for details)
Format
- Align could be:
Left / Right / Center / Multi-line Left / Multi-line Right / Multi line center
- Char Spacing option: Default, Shrink
Content
- VP Resource is the type of VP hold the text content (VP_STR by default)
- VP Address is the VP that hold the string content
(all the string should be end with \0 (0x00))
- Length is no. of Char going to display

Preview
- Preview Value is for simulation in Graphics Editor environment.
4.4.12 Scrolling String Element (STR_SCR)

General
Style
- Scroll = true as default
false = convert itself as String element (see STR for details)
- Scroll Direction can be Horizontal or Vertical
- Scroll Pixels defined the text scrolling speed
Format
- Align could be:
Left / Right / Center / Multi-line Left / Multi-line Right / Multi line center
- Char Sacing option: Default, Shrink
Content
- VP Resource is the type of VP hold the text content (VP_STR by default)
- VP Address is the VP that hold the string content
(all the string should be end with \0 (0x00))
- Length is no. of Char going to display

- Scroll Cycle VP is …
Preview
- Preview Value is for simulation in Graphics Editor environment. (*1)
Note:
*1. external ASCII can be input as #188
4.4.13 Number Elements (N16, N32, N64)

General
Style
Format
- Integer Digits is the no. of digit on left side of the dot (default Auto) (*1)(*2)
- Decimal Digits is the no of digit on right side of the dot (*1)(*2)
- Display Format option: Decimal, Hexadecimal
Content
- VP Resource is the type of VP hold the content (VP_N16 by default)
- VP Address is the VP that hold the value
Advance
- Data type as signed by default for the decoding of the RAM content
It could also present unsigned value or floating value, too
(please make sure the value in the VP variable appropriate for the type)

Preview
- Character is for simulation in Graphics Editor environment.
Note:
*1. Integer Digits / Decimal Digits Formatting Examples
VP's value Integer Decimal Display
(10's) Digits Digits Result Descriptions
15 Auto 3 0.015 Decimal Digits = 3, zero prefix is added.
Integer Digits = Auto, a minimal 0 is shown
23762 Auto 3 23.762 Decimal Digits = 3, least 3 digit as decimal value
Integer Digits = Auto, unlimited Integer digit
5629 5 1 00562.9 Decimal Digits = 1, least 1 digit as decimal value
Integer Digits = 5, zero prefix is added
-87913 3 2 -879.13 Decimal Digits = 2, two decimal
Integer Digits = 3, show all the rest as integer
Negative signed value use ”-“ as prefix
-13277 2 2 -99.99 The VP's value over the maximum value that could be
display,
the max value (within the display format) shown with sign.
1758 3 0 999 The VP's value over the maximum value that could be
display,
the max value (within the display format) shown.
*2. Float type value might rounded or truncated due to hex-dec conversion
*3. Float type value is suggested to select: Integer Digits=Auto, Decimal Digits=1~9.
to prevent over maximum value presentation error
4.4.14 Timer Display (TMR)

General
Style
Format
- Time Format could be: HH:mm:ss / mm:ss / ss
Content
- Timer: select a timer specific inside VP_N32 area

4.4.15 Real Time Clock (RTC)

General
Style
Format
- Date / Time Format could be shown as :
YYYY-MM-dd / YYYY-MM-dd HH:mm:ss /
W YYYY-MM-dd / W YYYY-MM-dd HH:mm:ss /
YYYY / MM / DD / HH / mm / ss
Parameter modification (advance feature)

4.4.16 Static Icon (ICO)

General
Style
- Transparent = False by default
True: enable transparent effect to show the IMG_ICO
Auto: enable transparent effect and pick a high possible color
as Transparent color
- Transparent Color one color in the IMG_ICO could show as transparent.
(it is suggested to use pure color for transparent effect)
(e.g. pure-magenta pure-black, pure-white, etc…)
Content
- ICON select a IMG_ICO to show

- ICON VP is none by default (using the above selected font)
Select a VP for real time font IMG_ICON change
VP value will copy the above IMG_ICO ID at power-on.
- Transparent color VP is none by default (using the above selected color)
Select a VP for real time transparent color change
4.4.17 Animation Element (ANI)

General
Style
True: enable transparent effect to show the IMG_ANI
- Transparent Color one color in the IMG_ANI could show as transparent.
Format
Loop-Play = false by default, it shows the last frame on screen
Play Speed = 100ms per frame by default
Content
- Animation select a IMG_ANI to show

Select a VP for real time font IMG_ICON change
VP value will copy the above IMG_ICO ID at power-on.
4.4.18 Bit Icon (IDX_BIT)

General
Style
Content
- VP Address is the VP that hold a value
- Bit Position select a bit in the VP as monitor bit
- Bit=1, Display options are Show Icon or Show Cropped BgImg
when monitor bit content = 1
- Bit=1, Icon/BgImage base on the above option
none by default (monitor bit content = 1; no icon to show)
- Bit=0, Display options are Show Icon or Show Cropped BgImg
when monitor bit content = 1
- Bit=0, Icon/BgImage base on the above option
none by default (monitor bit content = 1; no icon to show)

- ICON_1_VP is none by default (using the above selected font)
Select a VP for real time change the IMG_ICO ID (monitor bit content = 1)
- ICON_0_VP is none by default (using the above selected font)
Select a VP for real time change the IMG_ICO ID (monitor bit content = 0)
Preview
4.4.19 Indexed Icon (IDX)

General
Style
Content
- First Icon is the first IMG_ICO of a series of icons to be use
- Min Value is the value that link to the first of the IMG_ICO series
- Max Value is the value that link to the last of the IMG_ICO series

Select a VP for real time change the first IMG_ICO ID
of a series of icons to be use
Preview
note:
*1. Operation example
4.4.20 Decimal Icon (I16, I32)

General
Style
Format
- Integer Digits is the no. of digit on left side of the dot (Auto by default)
- Decimal Digits is the no of digit on right side of the dot
Content
- First Icon is the first IMG_ICO of a series of icons
to be use as "number font"
Advance
- Location pointer is reserved, keep none for normal operation

Select a VP for real time change the first IMG_ICO ID
of a series of icons to be use
Preview
note:
*1. Decimal Icon Operation Idea
4.4.21 Tachometer (TCM) – Hand Mode

General
Style
- Mode options: Hand / Donut / Icon / Pseudo Icon
- Direction could be Clockwise or Anticlockwise
- Start Angle is corresponding to the Min Value of content
(0°denote as the Foreground Icon original orientation)
- End Angle is corresponding to the Max Value of content
(180°denote as the Foreground Icon rotated by 180°)
Background
- Marking & Label Enable can generate the meter face details
- Base Color, Label, Minor Marking can be enable and define at here
- Label Min Value and Label Max Value is for meter face only
It show beside the Major Marking
Foreground
- Hands Type can be Line / Quadrangle / Trangle
- Hands Color is for the pointer color
- Center Mark Color is color mark at the center of the meter
Rotation Center Point

- Rotation Center Point could be Icon Center (auto select) or by manual
- Rotation Center X , Y define the the rotation reference point
Content
- Min Value is the minimum tachometer value to be show
(value smaller than this value will stop at the min location)
- Max Value is the maximum tachometer value to be show
(value bigger than this value will stop at the max location)

- Hands Type VP is for changing the hand shape for visual effect
VP value will copy the above selection at power-on.
- Color VP is for changing the color for visual effect
VP value will copy the above selected Color at power-on.
Preview
- Preview Value is for simulation
in Graphics Editor environment.
note:
*1. Radius and Angle Definition
4.4.22 Tachometer (TCM) – Donut Mix Color Mode / Donut Discolor Mode
General
Style
Background
- Show Base Color show the Donut shape background even at min value
- Base Color is the Donut background color
- Internal Radius define the middle hole of the Donut
- Edge Width can selected as an outline over the Donut
Foreground
- Step Value is for adjust display Levels color size
- Gap Value is for adjust the display Levels color gap which show Base Color
- No.Of Levels
2 for Donut Mix Color Mode show a gradient mix of two color
3-26 for Donut Discolor Mode change the whole donut color w.r.t. VP value
Rotation Center
- Rotation Center could be Icon Center (auto select) or by manual
- Rotation Center X, Y define the is the rotation reference point
Content
(value smaller than this value will hide the tachometer)
(value bigger than this value will hide the tachometer)

- Color Array VP is for changing the color for visual effect
VP value will copy the above selected Color at power-on.
Preview
Note:
*1. Radius and Angle Definition
*2. example
Direction = Clockwise
Start Angle = 255°
Sweep Angle = 270
*3. Donut Mix Color Mode example
*4. Donut Discolor Mode example
Tachometer (TCM) – Icon Rotation Mode / Icon Open Mode

General
Style
Foreground
- Icon is an IMG_ICO selected as tachometer foreground (or pointer)
The size should be same as the backgorund one.
- Icon Center could be Icon Center (auto select) or by manual
- Icon Center X, Y define the is the rotation reference point
Rotation Center Point

- Rotation Center X , Y define the the rotation reference point
Content

- Transparent VP is for real time Transparent control.
It can be disabled (not transparent) by a zero value
VP value will copy the above Transparent Color at power-on.
- Transparent Color VP is for changing the transparent color for visual effect
VP value will copy the above Transparent Color at power-on.
Select a VP for real time change the first IMG_ICO ID for rotation
Preview
Note.
*1. Icon Rotation Mode is similar to Pseudo Icon Rotation Mode. It show the Icon by its own with rotation.
*2. Icon Open Mode is similar to Pseudo Icon Open Mode. It show the Icon by its own opened angle section.
4.4.23 Tachometer (TCM) - Pseudo Icon Rotation Mode / Pseudo Icon Open Mode
General
Rotation mode
Background
- Icon is an IMG_ICO selected as tachometer background
Foreground
- Icon is an IMG_ICO selected as tachometer foreground (or pointer)
The size should be same as the backgorund one.
Rotation Center
- Rotation Center X , Y define the is the rotation reference point
Content
Parameter modification (advance feature)

Preview
Note.
*1 Pseudo Icon Rotation Mode is similar to Icon Rotation Mode.
It show the Icon with combined background
*2 Pseudo Icon Open Mode is similar to Icon Open Mode.
It show the Icon opened angle section with combined background
*3. Tachometer (Pseudo Icon Rotation mode) Operation Idea
*4. Tachometer (Pseudo Icon Open mode) Operation Idea
4.4.24 Progress Bar (B16)

General
Style
- Mode
Color Mode: longer color bar could be show with a no. close to max
(bar color could also be a mix of Forecolor1 & 2)
Icon Mode: Icon will move to the far end with a no. close to max
Fill Icon Mode: bar color could replaced by an IMG_ICO
- Direction: L→R / R→L / Up→Dn / Dn→Up
- Forecolor1 Progress start color
- Forecolor2 Progress end color
- Gap Transparent Color function depends on mode selected
In Fill Color Mode, the selected color is gap color in the Progress Bar
In Icon Mode with Transparent Enabled,
the selected color in the IMG_ICO will show as transparent.
- Gap Width is in pixel for gap in the bar
- Step Width is in pixel for the distance between gap
Content
- Icon for Move Icon mode or Fill Icon mode
- Min Value is the minimum Progress Bar value
- Max Value is the maximum Progress Bar value

- Foreground color1 VP is none by default (using the above selected color)
Select a VP for real time color change
- Foreground color2 VP is none by default (using the above selected color)
Select a VP for real time change the IMG_ICO ID
Preview
note:
*1. Progress Bar Operating Mode (Dn→Up) Idea
4.4.25 Graph Element (G16)

General
Style
- Foreground Color is the color for of graph
Format
- Dot Width could also affect the X direction scale
1-4pixel could be selected
- Dot Height could also affect the X direction scale
1-4pixel could be selected
- Plot Type could be
Dot, only plot the dot on the screen
Line, joint the plotted Dot with lines
Area, fill the area between 0 and the plotted dot
Top Fill, fill the area between Max Value and the plotted dot
Bottom Fill, fill the area between Min Value and the plotted dot
Content
- VP Graph select a VP_G16 array to be port on screen
- Min Value is minimal graph potting value
- Max Value is maximum graph potting value

- Ymin VP is none by default (using the above selected color)
Select a VP for real time graph Min Value for Y scale zoom or pan
- Ymax VP is none by default (using the above selected color)
Select a VP for real time graph Max Value for Y scale zoom or pan
- Rule1 VP is none by default
Select a VP for real time horizontal line to be show in graph
- Rule2 VP is none by default
Select a VP for another real time horizontal line to be show in graph
4.4.26 Bitmap Element (BP1)

General
Style
- Foreground Color is the color for "1" bits
- Background Color is the color for "0" bits
- Show Type are having three options
Show all (default) show all Foreground and Background Color
Show Foreground only show the "1" bits' color
Show Background only show the "0" bits' color
Content
- VP Bitmap select a VP_BP1 array for the 1bpp graph data

- Background color VP is none by default (using the above selected color)
- Transparent VP is none by default (using the Show Type)
Select a VP for real time Show Type change
0: Show all (default) show all Foreground and Background Color
1: Show Foreground only show the "1" bits' color
2: Show Background only show the "0" bits' color
VP value will copy the above selected Show Type at power-on.
4.4.27 QR Code Element (QRC)

General
Style
- Scale could adjust the size of the QR code display on the screen
Format
- Size is the QR coding container size
Content
- VP Resource is the type of VP hold the text content
VP_N16 by default, VP_STR is suggested for simple operation

Preview
4.4.28 Draw Pad (DPD)

General
Content
- VP Resource is the type of VP hold the text content
VP_N16 by default, VP_STR is suggested for simple operation
- VP Address is the start address of VPs that hold a series of draw command

Note.
*1. see the Draw Pad in-memory command Functions section for details
4.4.29 Predefined Touch Key (ESC)

- PIP keyboard's Element
- For building PIP keyboard only
- Similar as Touch Key (TPK)
- Predefined as Call Key = "ESC"
4.4.30 Predefined Touch Key (DEL)

- Predefined as Call Key = "DelLastChar(VP)"
4.4.31 Predefined Touch Key (Left)

- PIP keyboard Element
- Predefined as Call Key = "Move Cursor Left"
4.4.32 Predefined Touch Key (Right)

- Predefined as Call Key = "Move Cursor Right"
4.4.33 Predefined Touch Key (ESC)

- Predefined as Call Key = "Enter"
4.4.34 Predefined Touch Key (CapLock)

- Predefined as Call Key = "CapLock"
4.4.35 Predefined Touch Key (char)

- Predefined as Call Key = "Con(Buff, Cap/Norm(Byte0/Byte1"
- "Value" should be assigned for the key input
Example:
Value CapLock input Normal input Descriptions
0x4161 A a Value(Hi) = 0x41 ="A"; Value(Lo) = 0x61 ="a"
0x4262 B b Value(Hi) = 0x42 ="B"; Value(Lo) = 0x61 ="b"
0x4363 C c Value(Hi) = 0x43 ="C"; Value(Lo) = 0x61 ="c"
0x2131 ! 1 Value(Hi) = 0x21 ="!"; Value(Lo) = 0x31 ="1"
0x4032 @ 2 Value(Hi) = 0x40 ="@"; Value(Lo) = 0x32 ="2"
0x2333 # 3 Value(Hi) = 0x23 ="#"; Value(Lo) = 0x33 ="3"
"4" Invalid 4 Value(Hi) = 0x00 = is not an valid value; Value(Lo) = 0x34 ="4"
Suitable for the number keyboard without CapLock
"P" Invalid P Value(Hi) = 0x00 = is not an valid value; Value(Lo) = 0x50 ="P"
Suitable for the keyboard without CapLock
"Q" Invalid Q Value(Hi) = 0x00 = is not an valid value; Value(Lo) = 0x51 ="Q"
"R" Invalid R Value(Hi) = 0x00 = is not an valid value; Value(Lo) = 0x52 ="R"
4.4.36 Predefined Touch Key - Set (number keyboard 1)

- generate a set of keys (telephone-like) for quick PIP keyboard generation
- totally generate 4x4 → 16keys
- user may design a background art work before overlaying the Key - Set
1 2 3 ESC
4 5 6 
7 8 9 -
Clear 0 . ENTER
4.4.37 Predefined Touch Key - Set (number keyboard 2)

- generate a set of keys (PC-KB-like) for quick PIP keyboard generation
- totally generate 4x4 → 15keys
- user may design a background art work before overlaying the Key - Set
7 8 9 ESC
4 5 6 
1 2 3 -
0 . ENTER
4.5 Page Configurations
4.5.1 Page Properties

General
Style
- Color select a color for page background
- Background Image select a Background Image
Auto Jump
- Target select a target page to jump to
- Delay(sec) the delay before page jump
4.5.2 Page Functions

Page functions are a series of VP operations that could
carry out at the moment a page going to be display.
e.g. assign a value to a VP
Every page have its own Page Functions,
Right click on the empty space of a Page and select Page

functions could bring up the Page Functions window.
User may add several functions to any of the page.
Note.
*1. Operation functions that could be called in Page Functions
VP:= Value Byte0(VP):= Byte0(Value) Bit0(VP):= LSB(Value)
VP:= VP + Value Byte1(VP):= Byte0(Value) Bit1(VP):= LSB(Value)
VP:= VP - Value Byte2(VP):= Byte0(Value) Bit2(VP):= LSB(Value)
VP:= VP * Value Byte3(VP):= Byte0(Value) Bit3(VP):= LSB(Value)
VP:= VP/Value Bit4(VP):= LSB(Value)
*VP:= *VP XOR Value VP:= BUFF Bit5(VP):= LSB(Value)
BUFF:= VP Bit6(VP):= LSB(Value)
VP:= DelLastChar(VP) Bit7(VP):= LSB(Value)
VP:=Concatenate(VP,Value)
4.6 Elements Sub Functions Details
4.6.1 Draw Pad (DPD) in-memory command Functions

- Draw Pad element is an element that execute a drawing function that store inside VP_N16which point by its properties
VP_address.
- Host could send the Function Pack into VP by using Multi_Write (0x82) or N16_Write (0x3D) command.
- it is possible to adjust the function or parameter by VPK, TPK or Page_Call.
- And it will refresh/update the Draw Pad content accordingly.
- Each Draw Pad Element could only execute ONE command multiple times.
- The coordinate of the drawing content is based on the page coordinate.
- The Draw Pad element area is the valid area that shows the content.
Draw Pad Element Function Pack Structure

Add Content Descriptions
VP CMD Command function
VP+2 Number_of_Parmeter_SET Number of parameter set (*2)
VP+4 Parameter_set Parameter sets for command (*1)
Draw Pad Element Functions

Parameter Set
Relative Size
CMD Name Add Seq in byte Definitions Descriptions
0x0001 Draw_dot 0x00 4 xh,xl,yh,yl Dot coordinate (*1)
0x04 2 Color Dot color
0x0002 Draw_successive_line 0x00 2 Color Line color (*3)
0x02 4 x0h,x0l,y0h,y0l Coordinate of the line starting point (*1)
0x06 4 X1h,x1l,y1h,y1l Line to this coordinate
: 4 : :
0x02+4*n 4 xnh,xnl,ynh,ynl Last coordinate for line
0x0003 Draw_line 0x00 4 xsh,xsl,ysh,ysl Line start coordinate (*1)
0x04 4 xeh,xel,yeh,yel Line end coordinate
0x08 2 Color Line color
0x0004 Draw_rectangle 0x00 4 xsh,xsl,ysh,ysl Top-left corner coordinate (*1)
0x04 4 xeh,xel,yeh,yel Bottom-right corner coordinate
0x08 2 Color Rectangle line color
0x0005 Fill_rectangle 0x00 4 xsh,xsl,ysh,ysl Top-left corner coordinate (*1)
0x04 4 xeh,xel,yeh,yel Bottom-right corner coordinate
0x08 2 Color Rectangle fill color
0x0006 Show_crop_Page_BKG 0x00 2 PAGE_IDh,PAGE_IDl PAGE's background image (NOT
IMG_BKG) to be crop and show (*1)
0x02 4 xsh,xsl,ysh,ysl Top-left corner coordinate for crop
0x06 4 xeh,xel,yeh,yel Bottom-right corner coordinate for crop
0x0a 4 xh,xl,yh,yl Top-left corner coordinate for showing the
cropped image on screen
0x0007 Show_IMG_ICO 0x00 4 xh,xl,yh,yl Top-left corner coordinate for showing the
cropped image on screen (*1)
0x04 2 IMG_ICO_ID IMG_ICON to be show
0x0008 Show_text 0x00 4 xh,xl,yh,yl Top-left corner coordinate for showing
the text on screen (*1)
0x04 2 Color Text color
0x06(0x06H) 1 FONT_ID Font ID
0x07(0x06L) 1 Text_len Text length in no. of byte
0x08 n Text_STRING Text content
Note.
*1. First byte of this parameter could "control" the functionality
- 0xFF terminate the following draw function
- 0xFE terminate current parmeter_set, jump to next parameter_set
*2. Draw_successive_line need n set for (n-1) lines
*3. Color is excluded from Number_of_Parmeter_SET
4.6.2 TPK, VPK Call Functions

Call functions are functions which could be called up by TPK or VPK.
4.6.2.1 Call Functions - Keyboards

Function Descriptions
Keyboard Number Number Keyboard for number value input and report the value to the host.(*1)
The input value will be stored inside the predefined VP Variable
Keyboard Password Password Keyboard for number password input. (display as *, 9char max.) and report the input value
to the host. (*1) The input value will be stored inside the predefined VP Variable
Keyboard English English Keyboard for English input and report the input value to the host. (*1)
Keyboard Chinese Chinese Pinyin Keyboard for number value input and report the value to the host. (*1)
PIP Menu Page-in-page Menu is a customizable menu. It pop-up a little window of another page as a menu
selection input and report the input value to the host. (*1)
PIP Keyboard Page-in-page Keyboard is a customizable keyboard. It could pop up a little window of another page
as a keyboard keys and report the input value to the host. (*1)
The input value will be stored inside the predefined VP Variable.
PIP Number Keyboard Page-in-page Number Keyboard is a customizable keyboard. It pop up a little window of another
page as a keyboard keys and report the input value to the host. (*1)
The input value will be stored inside the predefined VP Variable.
PIP RTC Page-in-page RTC is a customizable interface to adjust the Real Time Clock time.
It could pop up a little window of another page as a keyboard keys.
Adjust Backlight Backlight brightness level setting.
Adjust RTC Real Time Clock time adjust interface.
Slider Single Single slider input interface input is corresponding ratio of the predefined max. min. value and report
the input value to the host. (*1) The input value will be stored inside the predefined VP Variable.
Slider Dual Dual slider input interface function as Single Slider with two VP Variable input,
Where, the two slider will limit each other for non-overlapped value input and report the input value to
the host. (*1) The two input value will be stored inside two successive predefined VP Variable.
Listing VP_STR listing window
Display the VP_STR content with predefined VP_STR Address and no. of VP_STR to be display.
Providing touch and scroll interface.
Listing with Slider VP_STR listing window
Display the VP_STR content with predefined VP_STR Address and no. of VP_STR to be display.
Providing slider bar for scroll.
Note: *1. Entered value that report to host with command header 0x77
4.6.2.2 Call Functions - PIP Keyboard's keys

Enter Enter key for PIP keyboard for finishing and confirming the input.
Esc Escape key for PIP keyboard/menu.
It could cancel the input and close the PIP keyboard/menu.
CapsLock CapsLock key function for PIP Keyboard
VP:= Value, Enter Directly assigning the value into VP variable and follow with a Enter to confirm the input.
Mainly for PIP menu items selection
Buff:=Con(Buff,Cap, Generally key call for PIP keyboard with (Capslock feature)
Nom(Byte0/Byte1)) It will put the lower byte value into the end of Buff area.
If the CapsLock toggled, the high byte will be insert into the end of the Buff area
(note: its value in properties should be a 16bit formatted value)
VP:=Concatenate(VP,Value) Put its properties value to the end of the content of the predefined VP value
Mainly work with BUFF as a general char input
E.g. VP(BUFF)= “123”, Properties' Value = 4, after call VP(BUFF)=“1234”
VP:= DelLastChar(VP) Delete the last byte of the the VP variable
Mainly for VP(BUFF) as a backspace funciton.
E.g. VP(BUFF)=“123”, after call VP(BUFF)=“12”
4.6.2.3 Call Functions - Operations

VP:= VP XOR Value Predefine VP variable XOR with a constant stay in Value, and store the result back into the VP variable
E.g. VP_N32(0x020000)=0x0055, properties' Value= 0x00AA; result VP_N32 (0x020000)=0x00FF
BUFF:= VP Copy the VP variable content to the BUFF(string format) location.
E.g. VP_N32(0x020000)=123; result VP_STR(BUFF)=“123” (note: number converted to string)
VP:= BUFF Copy the BUFF content to a VP variable (integer or a string)
E.g. VP(BUFF)=“123”, result VP_N32(0x020000)=123 (note: string converted to interger)
VP:= Value Copy a constant stay in Value to a VP variable
E.g. properties' Value= 123; result VP_N32(0x020000)=123
VP:= VP + Value Predefine VP variable add with a constant stay in Value, and store the result back into the VP variable
E.g. VP_N32(0x020000)=666, Value=2; result VP_N32 (0x020000)=668
VP:= VP - Value Predefine VP variable minus by a constant stay in Value, and store the result back into the VP variable
VP:= VP + Value, loop Predefine VP variable times by a constant stay in Value, and store the result back into the VP variable
If the value is bigger than the predefined maximum, it will "loop" to the predefined minimum.
VP:= VP - Value, loop Predefine VP variable minus by a constant stay in Value, and store the result back into the VP variable
If the value is smaller than the predefined minimum, it will "loop" to the predefined maximum.
VP:= VP * Value Predefine VP variable times by a constant stay in Value, and store the result back into the VP variable
Eg: VP_N32(0x020000)=666, Value=10; result VP_N32 (0x020000)=6660
VP:= VP/Value Predefine VP variable divided by a constant stay in Value, and store the result back into the VP variable
Byte0(VP):= Byte0(Value) Copy the constant byte0(lowest byte) stay in Value to VP variable byte0(Lowest byte) location
E.g. VP_N32(0x020000)=0x5555, Value=0x0A; result VP_N32 (0x020000)=0x550A
Byte1(VP):= Byte0(Value) Copy the constant byte0(lowest byte) stay in Value to VP variable byte1 location
E.g. VP_N32(0x020000)=0x5555, Value=0x0A; result VP_N32 (0x020000)=0x0A55
Byte2(VP):= Byte0(Value) Copy the constant byte0(lowest byte) stay in Value to VP variable byte2 location
Byte3(VP):= Byte0(Value) Copy the constant byte0(lowest byte) stay in Value to VP variable byte3(Highest byte) location
Bit0(VP):= LSB(Value) Copy the constant LSB stay in Value to VP variable bit0(LSB) location
E.g. VP_N32(0x020000)=0x0000, Value=0x01; result VP_N32 (0x020000)=0x0001
Bit1(VP):= LSB(Value) Copy the constante LSB stay in Value to VP variable bit1 location
Eg: VP_N32(0x020000)=0x0000, Value=0x01; result VP_N32 (0x020000)=0x0002
Bit2(VP):= LSB(Value) Copy the constant LSB stay in Value to VP variable bit2 location
E.g. VP_N32(0x020000)=0x0000, Value= 0x01; result VP_N32 (0x020000)=0x0020
5 Serial Communication
Smart LCD serial command is for real-time control and access. Host machine get the data which input
through the Smart LCD interface or provide the data for display.
5.1.1 Hardware connection

Smart LCDs serial UART interface are base on RS232-C standard by default config as 8N1 115200bps.
5.1.2 Communication Packet Structure

Commands and Response Packet should be format as follow (host→module):
Seq Code Code type Description
1 0xAA Packet header 1byte
2 Cmd-code Command 1byte
code
3 Par-data Parameter or (*1)
Data
: : - -
: : - -
: : - -
N-3 th 0xCC Packet tail 4byte
N-2 th 0x33
N-1 th 0xC3
N th 0x3C
Note.
*1. Unless otherwise specified,
all the multi-byte values, data, address’ byte sequence are MSB first, LSB last.
e.g. 0x12345678 should send as following sequency, 0x12(first), 0x34, 0x56, 0x78(last)
5.1.3 Packet Acknowledgment

Packet Acknowledgment is two byte in ASCII (module → host):
Response code Description
Command (in packet) executed and ":>" In ASCII
wait for next Command (0x3a, 0x3e)
Command (in packet) error and "!>" In ASCII
wait for next Command (0x21,0x3e)
Invalid Packet null No response
Note.
*1. Packet Acknowledgement response to a valid packet only.
*2. Acknowledgement could be disable in Editor option (Manual → Tools → Project Setting→ RS232 → Enable ACK)
5.1.4 Color Data Value Configuration

16 bit color value
R4 R3 R2 R1 R0 G5 G4 G3 G2 G1 G0 B4 B3 B2 B1 B0
High byte (MSB) Low byte (LSB)
D7 D6 D5 D4 D3 D2 D1 D0 D7 D6 D5 D4 D3 D2 D1 D0
5.1.5 Data / Address / Page_ID / Location Values Configuration

64 bit number value
D63…D56 D55…D48 D47…D40 D39..D32 D31…D24 D23…D16 D15…D8 D7…D0
Byte7 Byte0
(MSB) (LSB)
D7…D0 D7…D0 D7…D0 D7…D0 D7…D0 D7…D0 D7…D0 D7…D0
32 bit number value

D31…D24 D23…D16 D15…D8 D7…D0
Byte3 (MSB) Byte0 (LSB)
D7…D0 D7…D0 D7…D0 D7…D0
16 bit number value

D15…D8 D7…D0
High Byte (MSB) Low Byte (LSB)
D7…D0 D7…D0
5.2 Command Summary

Functions Name Code Description
Config/ hand_shake 0x30 Read a Hand Shake
Status read_ver 0x31 Read firmware version
Functions read_pg_id 0x32 Read Current page ID
touch_response 0x72/0x73/0x77 see also set_sys_config
0x78/0x79
set_sys_config 0xE0 System parameter configuration and Baud Rate
sel_project 0xE1 Specify operating project folder
touch_calib 0xE4 Touch panel calibration
screen_saver 0x5E Screen saver (backlight dim down time out)
backlight_ctrl 0x5F backlight brightness control (64 levels)
buzzer_touch_sound 0x79 buzzer enable time length (in 10ms step)
Buzzer_ctrl 0x7A Buzzer control
Flash_write 0x90 Write data to the flash
Flash_read 0x91 Read data from the flash
RTC_set 0x9C Set the RTC
RTC_read 0x9B Read the RTC values
USR_bin_read 0x93 Read data from the USR_bin
u_drv_format 0xE2 Format the u_drive
u_drv_unlock 0xE3 Unlock the u_drive with pre-stored password
Display disp_page 0x70 Display a pre-stored TML file (page)
Control/ set_element_fg 0x7E Set the foreground color of STR, N16, N32 or N64
Draw set_element_bg 0x7F Set the background color of STR, N16, N32 or N64
Functions set_codepage 0xE7 Sets country character set and code-page character set
suspend_vp_fresh 0xE8 Set the screen to pause the refresh and deactivate the
touchkey or release the pause to refresh and enable the
touchkey
VP Successive_write 0x82 Write successive value to VP_N16, VP_N32, VP_N64
Functions Successive_read 0x83 Read successive value from VP_N16, VP_N32, VP_N64
STR_write 0x42 Write string to VP_STR
STR_read 0x43 Read string form VP_STR
STR_fill 0x46 Fill strings to the VP_STR
N16_write 0x3D Write 16bit (signed integer) value to VP_N16
N16_read 0x3E Read 16bit (signed integer) value from VP_N16
N16_fill 0x3F Fill numbers to the VP_N16
N32_write 0x44 Write 32bit (signed integer) value to VP_N32
N32_read 0x45 Read 32bit (signed integer) value from VP_N32
N32_fill 0x47 Fill numbers to the VP_N32
N64_write 0x48 Write 64bit (signed integer) value to VP_N64
N64_read 0x49 Read 64bit (signed integer) value from VP_N64
N64_fill 0x4A Fill numbers to the VP_N64
Successive_write 0x82 Write successive value to VP_N16, VP_N32, VP_N64
Successive_read 0x83 Read successive value from VP_N16,VP_N32,VP_N64
BP1_write 0x4B Write bit-map (1bpp) data to VP_BP1
BP1_write_comp 0x4C Write compressed bit-map (1bpp) data to VP_BP1
G16_write 0x4D Write 16bit (signed integer) graphic array to VP_G16
G16_write_rotate 0x4E Rotate the VP_G16 array data inside the module and
write a 16bit (signed integer) value into end-of-array
System Register 0x3B Write System Register
(Timer_Ctrl )Write
System Register 0x3C Read System Register
(Timer_Ctrl )Read
5.3 Command Details
5.3.1 Config / Status Functions

Header Command Data:no_of_byte Tail
hand_shake AA 30 -- CC 33 C3 3C
(0x30) e.g. [host]: AA 30 CC 33 C3 3C
e.g. [LCM]: AA 30 54 6F 70 77 61 79 20 48 4D 54 20 52 65 61 64 79 00 CC 33 C3 3C
(return "Topway HMT Ready" in ASCII)
Read_ver AA 31 -- CC 33 C3 3C
(0x31) e.g. [host]: AA 31 CC 33 C3 3C
e.g. [LCM]: AA 31 31 2E 31 32 CC 33 C3 3C (return "1.12" in ASCII)
read_pg_id AA 32 Nil or ID:2 CC 33 C3 3C
(0x32) e.g. [host]: AA 32 CC 33 C3 3C
e.g. [LCM]: AA 32 00 01 CC 33 C3 3C (current page's ID is 0x0001)
touch_response AA 72/73 X:2 Y:2 CC 33 C3 3C
(0x72/0x73) e.g. [LCM]: AA 72 00 32 00 64 CC 33 C3 3C (touch release coordinate
is(50,100))
e.g. [LCM]: AA 73 00 32 00 64 CC 33 C3 3C (touch down coordinate is(50,100))
data_entered AA 77 Addr_ID:4 Data:2/4/8/n CC 33 C3 3C
(0x77) e.g. [LCM]: AA 77 00 02 00 00 00 00 00 32 CC 33 C3 3C
(Addr_ID 0x020000's 32bit data is 0x0000 0032)
(please refer to Editor description about Addr_ID and Data size)
touch_response AA 78/79 Page_ID:2 TPK_ID:1 CC 33 C3 3C
(0x78/79) e.g. [LCM]: AA 78 00 02 01 CC 33 C3 3C (PAGE:0x0002 TPK:0x01 key up)
e.g. [LCM]: AA 79 00 02 01 CC 33 C3 3C (PAGE:0x0002 TPK:0x01 key down)
set_sys_config AA E0 55 AA 5A A5 BaudRate:1 sys_par1:1 CC 33 C3 3C
sys_par2:1
(0xE0) e.g. [host]:AA E0 55 AA 5A A5 07 83 00 CC 33 C3 3C
(config baud rate to 152000, and enable TPK response (the most common setting))
(Baud rate will back to project default setting after next power on)
Set_project AA E1 Prj_ID:1 CC 33 C3 3C
(0xE1) e.g. [host]: AA E1 01 CC 33 C3 3C
(switch to project 0x01, (THMT01 folder))
Touch_calib AA E4 55 AA 5A A5 -- CC 33 C3 3C
(0xE4) e.g. [host]: AA E4 55 AA 5A A5 CC 33 C3 3C
(start touch calibration)
screen_saver AA 5E Time:2 Level:1 CC 33 C3 3C
(0x5E) e.g. [host]: AA 5E 00 0A 00 CC 33 C3 3C
(after 10sec of idel, backlight down to 0)
Backlight_ctrl AA 5F Level:1 CC 33 C3 3C
(0x5F) e.g. [host]: AA 5F 3F CC 33 C3 3C
(adjust the backlight to highest level 0x3f)
Buzzer_touch_sound AA 79 Time(in10ms):1 CC 33 C3 3C
(0x79) e.g. [host] : AA 79 01 CC 33 C3 3C
(adjust the buzzer beeping duration to 0x01= 1x10ms)
Buzzer_ctrl AA 7A Loops T1 T2 Freq1 Freq2 CC 33 C3 3C
(0x7A) e.g. [host] : AA 7A 10 0A 08 05 32 CC 33 C3 3C
(sound the buzzer beeping 16loops of 1sec 500Hz → 0.8sec 5kHz
Header Command Data:(no. of byte) Tail

Flash_write AA 90 ADDR:4 Len:2 Data:n CC 33 C3 3C
(0x90) e.g. [host]: AA 90 00 00 00 00 00 02 30 31 CC 33 C3 3C
(start form user flash area address 0x0000000 write 2bye of data 0x30 & 0x31)
(note. it is a must to ensure the power supply during the write process)
Flash_read AA 91 ADDR:4 Len:2 or Data:n CC 33 C3 3C
(0x91) e.g. [host]: AA 91 00 00 00 00 00 02 CC 33 C3 3C
(read 2byte start form address 0x0000000)
e.g. [LCM]: AA 91 30 31 CC 33 C3 3C
(return of two byte data 0x30 0x31)
RTC_set AA 9C YYMMDDHHMMSS:6 CC 33 C3 3C
(0x9C) e.g. [host]: AA 9C 0E 07 0A 17 3B 30 CC 33 C3 3C
(set the real time clock to 2014 - 07- 10 23:59:48
RTC_read AA 9B -- or YYMMDDHHMMSS:6 CC 33 C3 3C
(0x9B) e.g. [host]: AA 9B CC 33 C3 3C (ask for full data time)
e.g. [LCM]: AA 9B 0E 07 0B 00 01 12 CC 33 C3 3C
(return the day and time 2014-07-11 00:01:18
Usr_bin_read AA 93 ADDR:4 Len:2 or Data:n CC 33 C3 3C
(0x93) e.g. [host]: AA 93 00 00 00 00 00 02 CC 33 C3 3C
(request for 2 byte of data form the preloaded usr.bin file at address 0x0000 0000)
e.g. [LCM]: AA 93 30 31 CC 33 C3 3C
(return 2byte of requested data 0x30 0x31)
U_drv_format AA E2 55 AA 5A A5 CC 33 C3 3C
(0xE2) e.g. [host]: AA E2 55 AA 5A A5 CC 33 C3 3C
(format the whole internal flash memory space)
U_drv_unlock AA E3 PWD:n CC 33 C3 3C
(0xE3) e.g. [host]: AA E3 30 31 32 33 34 35 36 00 CC 33 C3 3C
(send a password "0123456" to un-lock the USB interface for file access
Note: password defined in the display project by using editor,
where password string should end with "\0")
note. Please refer to the Smart_LCD user manual for the details
5.3.2 Display Control / Draw Functions

Disp_page AA 70 Page_id:2 CC 33 C3 3C
(0x70) e.g. [host]: AA 70 00 01 CC 33 C3 3C
(show page 0x0001)
Set_element_fg AA 7E Element_type:1 Page_ID:2 CC 33 C3 3C
Element_ID:1 color:2 0x00
(0x7E) e.g. [host]: AA 7E 00 00 03 05 FF FF 00 CC 33 C3 3C
(change the STR_ID=0x05's foreground to white in Page_ID=0x0003)
Set_element_bg AA 7F Element:1 Page_ID:2 CC 33 C3 3C
Element_ID:1 color:2 mode:1
(0x7F) e.g. [host]: AA 7F 00 00 03 05 00 00 00 CC 33 C3 3C
(change the STR_ID=0x05's foreground to (non-transparent) black in Page_ID=0x0003)
Set_codepage AA E7 Country Codepage CC 33 C3 3C
(0xE7) e.g. [host]: AA E5 03 07 CC 33 C3 3C
switch the ASCII to German, Extended Codepage as 866 (OEM - Russian)
Suspend_vp_reflesh AA E8 55 AA 5A A5 mode CC 33 C3 3C
(0xE8) e.g. [host]: AA E8 55 AA 5A A5 01 CC 33 C3 3C
(pause the refresh and deactivate the touch key; mode=00 for release the pause)
note. please refer to the Smart_LCD user manual for the details
5.3.3 VP Functions
Successive_write AA 82 Add:4 Len:1 Value:n CC 33 C3 3C
(0x82) e.g. [host]: AA 82 00 08 00 00 03 00 00 11 11 22 22 CC 33 C3 3C
Write 3 sucessive 16bit value to VP_N16 address 0x0008 0000
e.g. [host]: AA 82 00 02 00 00 02 55 55 55 55 66 66 66 66 CC 33 C3 3C
Write 2 sucessive 32bit value to VP_N32 address 0x0002 0000
Successive_read AA 83 Add:4 Len:1 or Value:n CC 33 C3 3C
(0x83) e.g. [host]: AA 83 00 08 00 00 03 CC 33 C3 3C
Read 3 sucessive 16bit value from VP_N16 address start at 0x0008 0000
e.g. [host]: AA 83 00 02 00 00 02 CC 33 C3 3C
Read 2 sucessive 32bit value from VP_N32 address start at 0x0002 0000
STR_write AA 42 Add:4 Text:n CC 33 C3 3C
(0x42) e.g. [host]: AA 42 00 00 00 80 54 4F 50 57 41 59 00 CC 33 C3 3C
(write string “TOPWAY“ to VP_STR address 0x0000 0080 (string should end with "\0"))
STR_read AA 43 Add:4 or Text:n CC 33 C3 3C
(0x43) e.g. [host]: AA 43 00 00 00 80 CC 33 C3 3C
(request for VP_STR address 0x0000 0080 content value)
e.g. [LCM]: AA 43 54 4F 50 57 41 59 00 CC 33 C3 3C
(the feedback content value is "TOPWAY" (string end with "\0"))
STR_fill AA 46 Add:4 Len:2 Text:n CC 33 C3 3C
(0x46) e.g. [host]: AA 46 00 00 00 80 00 03 54 4F 50 57 41 59 00 CC 33 C3 3C
(fill 0x0003 VP_STR as "TOPWAY" (string should end with "\0")
Start form the VP_STR address 0x00000080)
N16_write AA 3D Add:4 Value:2 CC 33 C3 3C
(0x3D) e.g. [host]: AA 3D 00 08 00 00 00 32 CC 33 C3 3C
(write a 16bit value 0x0032 into VP_N16 address 0x0008 00000)
N16_read AA 3E Add:4 or Value:2 CC 33 C3 3C
(0x3E) e.g. [host]: AA 3E 00 08 00 00 CC 33 C3 3C
(read VP_N16 address 0x0008 0000's 16bit data content)
e.g. [LCM]: AA 3E 00 32 CC 33 C3 3C
(feed back the VP_N16 content value 0x0032)
N16_fill AA 3F Add:4 Len:2 Value:2 CC 33 C3 3C
(0x3F) e.g. [host]: AA 3F 00 08 00 00 00 03 00 32 CC 33 C3 3C
(fill 0x0003 VP_N16 with 0x0032 start form VP_N16 address 0x0008 0000)
N32_write AA 44 Add:4 Value:4 CC 33 C3 3C
(0x44) e.g. [host]: AA 44 00 02 00 00 00 00 00 32 CC 33 C3 3C
(write a 32bit value 0x0000 0032 into VP_N32 address 0x0002 0000)
N32_read AA 45 Add:4 or Value:4 CC 33 C3 3C
(0x45) e.g. [host]: AA 45 00 02 00 00 CC 33 C3 3C
e.g. [LCM]: AA 45 00 00 00 32 CC 33 C3 3C
(feed back the VP_N32 content value 0x0000 0032)
N32_fill AA 47 Add:4 Len:2 Value:4 CC 33 C3 3C
(0x47) e.g. [host]: AA 47 00 02 00 00 00 03 00 00 00 32 CC 33 C3 3C
(fill 0x0003 VP_N32 with 0x0000 0032 start form VP_N32 address 0x0002 0000)

N64_write AA 48 Add:4 Value:8 CC 33 C3 3C
(0x48) e.g. [host]: AA 48 00 03 00 00 00 00 00 00 00 00 00 32 CC 33 C3 3C
(write a 64bit value 0x0000 0000 0000 0032 into VP_N64 address 0x0003 0000)
N64_read AA 49 Add:4 or Value:8 CC 33 C3 3C
(0x49) e.g. [host]: AA 49 00 03 00 00 CC 33 C3 3C
e.g. [LCM]: AA 49 00 00 00 00 00 00 00 32 CC 33 C3 3C
(feed back the VP_N64 content value 0x0000 0000 0000 0032)
N64_fill AA 4A Add:4 Len:2 Value:8 CC 33 C3 3C
(0x4A) e.g. [host]: AA 4A 00 03 00 00 00 03 00 00 00 00 00 00 00 32 CC 33 C3 3C
(fill 0x0003 VP_N64 with 0x0000 0000 0000 0032
start form VP_N64 address 0x0003 0000)
BP1_write AA 4B Add:4 Len:4 CC 33 C3 3C
(0x4B) e.g. [host]: AA 4B 00 04 00 00 00 00 02 00 CC 33 C3 3C + 512byte data...
(fill 512 byte of graphics data (1bpp) in to BP1 address 0x0004 0000)
BP1_write_comp AA 4C Add:4 Len:4 CC 33 C3 3C
(0x4C) e.g. [host]: AA 4C 00 04 00 00 00 00 02 00 CC 33 C3 3C +512byte data...
(fill 512 byte of compressed graphics data (1bpp) in to BP1 address 0x0004 0000)
G16_write AA 4D Add:4 Len:2 Value:2n CC 33 C3 3C
(0x4D) e.g. [host]: AA 4D 00 06 00 00 00 02 00 32 00 33 CC 33 C3 3C
(fill 0x0002 16bit graph data(0x0032, 0x0033) into G16 address 0x0006 0000
G16_write_rotate AA 4E Add:4 Size:2 Data:2 CC 33 C3 3C
(0x4E) e.g. [host]: AA 4E 00 06 00 00 00 32 00 33 CC 33 C3 3C
(place rotate 0x0032 of G16 forward which address 0x0006 0000 and place 0x0033 at
the last)
System_register_write AA 3B Add:4 Data:1 CC 33 C3 3C
(timer_ctrl) e.g. [host]: AA 3B 00 FF FF 00 01 CC 33 C3 3C
(0x3B) (start the timer_ctrl0 as count down mode)
System_register_read AA 3C Add:4 CC 33 C3 3C
(timer_ctrl) e.g. [host]: AA 3C 00 FF FF 00 CC 33 C3 3C
(0x3C) (read the timer_ctrl status value)
note. Please also refer to the Smart_LCD user manual for the details
6 Basic Function Examples

6.1 Display a PAGE with background image (IMG_BKG)
(This example is using TOPWAY Smart LCD (HMT050CC-C) and Editor v3.22)
Step1 Start a New Project

① start TOPWAY TML Graphics Editor software, start a new project through manual bar
File --> New Project
② Enter the Project name
Project Name: BKG_Demo (as an example)
③ Select a Project folder location
Create a Project Folder in: D:
④ Select the display resolution of the SmartLCD
Screen Size: 800x480 (for this example HMT050CC-C)
⑤ Click “OK”
Step2 Built a Page and import a picture as Background Image

① In Resource window, right ② In Resource window, right click on Note: Editor supports BMP, JPG, PNG. In this case a 800x480
click on Pages, Background Images, picture could be best fit to the display. or Editor will resize it to
select New Page select Import Background Image fit the display
Step3 Link the page with image Step4 Compile and download
① Click on the working area of the page, its properties will ① Connect the Smart LCD with ② In tool bar, click on download(or F9)
show on the right. PC by using an mini USB cable ③ click “Start Download”
② In Properties window DP0000 in the Background Image. to download the project to LCM
Step5 Power on and display

① disconnect the mini USB cable
② power on the Smart LCD with 5V
③ display
-- done --
6.2 Using Touch Key (TPK) to Jump to a Page

Step1 Start a New Project Step2 Built 2 pages, import 2 pictures as background
(please refer to the previous examples) (please refer to the previous examples)
Step3 Link the page (PG0000)with the Step4 Built a Touch Key (TPK)
image ① In tools bar, select Touch Key
① Click on the working area of the page, its properties will show ② create a rectangle touch key area on PG0000
on the right. ③ In touch key properties, set Target as PG0001
② In Properties window, select DP0000 in the Background Image.
Step5 Link the page (PG0001) with the image

① Click on the working area of PG0001, its properties will show on
the right.
② In Properties window, select DP0001 in the Background Image.
Step6 Compile and download

(please refer to the previous examples)

① disconnect the mini USB cable
② power on the Smart LCD with 5V
③ display
④ touch on the touch key area
⑤ when release, the display will jump to the target page
-- done --
6.3 Show a Static Icon (ICO)

Step1 Start a New Project Step2 Built a page, import a pictures as background
Step3 Link the page with the image Step4 Import an icon
③ Click on the working area of the page, its properties will show on ① In Resources window, right click Icons select Import Icon.
the right. ② Select a icon file
④ In Properties window, select DP0000 in the Background Image. ③ select "Open"
Step5 Built a static icon on the page

① In tool bar, select static icon.
② Create a rectangle static icon area on page
③ In static icon properties, select the imported icon DI0000
④ In static icon properties, set Transparent as “True”
⑤ In static icon properties, set Transparent Color as “0xff00ff"


-- done --
6.4 Show a Static String (STS)

Step1 Start a new project and built a page

Step2 Select a background color for Step3 Import a Font Face

PAGE ① In menu bar, Tools-->Options-->Font Setting.
① In PAGE properties, click Color pull down menu ② Right click on font 0 then “Select”
② Select black (0x000000) as background color ③ Select “24_GB2312_SONG(24X24)“ (a full width char font)
④ Click “Select”
⑤ Click “OK”
（note, repeat the same on font 51 for corresponding half width char font）
Step4 Built a Static String on page

① In tools bar, select Static String
② Create a rectangle static string area on page
③ In static string properties, select font color
Font Color & Background Color
④ select Font as 24_GB2312_SONG(24X24)
⑤ Input Static Text: “你好吗？”


① disconnect the mini USB ③ display
cable
② power on the Smart LCD
with 5V
-- done --
6.5 Show an Animation Element (ANI)

Step1 Start a New Project Step2 Built a page, import a pictures as background
Step3 Link the page with the image Step4 Import pictures as Animation
① Click on the working area of the page, its properties will show on ① In resources window, right click Animations, select "Create
the right. Animation"
② In Properties window, select DP0000 in the Background Image. ② In resources window, right click on ANI001 select "Property"
③ In Animation Property's window click “Import Images”
④ select a series of animation-pictures (in same size)
⑤ click "OPEN"
⑥ click “OK”
Step5 Built a Animation Element Step6 Link the Animation with the Element
① In tool bar, select animation element ③ In Animation Element properties, set Loop-Play as True
② Creata a rectangle animation element on page ④ In Animation Element properties, select the Animation import in
step4


① disconnect the mini
USB cable
② power on the Smart
LCD with 5V
③ display
0.1s 0.1s 0.1s

→ → →
      
-- done --
7 VP_Variables and Keyboard Examples

7.1 Using Internal Number Keyboard to input a value to a VP_N32
Step1 Start a New Project Step2 Built a page, import a pictures as

(please refer to the previous examples) IMG_BKG
Step3 Link the page with the IMG_BKG Step4 Import a Font Face
① In menu bar, Tools-->Options-->Font Setting.
② Right click on font 50 then “Select”
③ Select “120x200NUM“ font face
⑤ Click "OK"
Step5 Allocate a VP_N32 variable
① In Resources window, right click on "32bit Number
Variables" select :"New VP"
Step6 Built a Number Element and link with

VP
① In tools bar, select number element
② Create a rectangle Number element area on page
③ In Number Element properties,
set "Font color" as "0xFFFFFF"
④ set "Transparent" as “True”
⑤ set "font" as "Font 50"
⑥ set "VP Address" link to "VP_N32 0x020000"
Step7 Built a Touch Key (TPK) to call out

Number Keyboard
① In tools bar, select Touch Key
② Create a rectangle touch key area on the PAGE
③ In touch key properties,
set "On Press Down" as "Inverse Color"
④ set CALL as “Keyboard Number”
⑤ set "Title/Value" as “N32 Input”
⑥ set "VP Address" as 0x020000
⑦ set "VP Max" as "2147483647"

Step9 Power on and Display

① Disconnect the mini USB
cable
② Power on the Smart LCD
with 5V
③ Touch the TPK, a number
keyboard pop up.
④ Input a value and click “OK”
-- done --
7.2 Using Internal English Keyboard to input a string to a VP_STR


Step3 Link the page with the IMG_BKG Step4 Allocate a VP_STR
① Click on the working area of the PAGE, its properties will show on ① In Resources window, right click on "String Variables" select "New
the right. VP"
② In Properties window, select the imported Background Image.
Step5 Built a String Element and linke with VP Step6 Built a Touch Key (TPK) to call out English
① In tools bar, select String Element Keyboard
② Create a rectangle String Element area on PAGE ① In tools bar, select Touch Key
③ In String Element properties set Transparent as “True” ② Create rectangle touch key area on the PAGE
④ In String Element properties, set Font as: "32_ASCII_SysBold" ③ In touch key properties,
⑤ In String Element properties, set VP Address link to VP_STR set "CALL" as "Keyboard English"
0x000080 ④ set "Title/Value" as “Input”
⑤ set "VP Address" as 0x000080
note: Keyboard English will send a confirmed input to host
Step7 Compile and download (please refer to the previous examples)

① Disconnect the mini USB cable ④ touch the TPK area ⑦ Host PC could also see "user007" in packet
② Power the Smart LCD with5V ⑤ type in “user007” with any serial terminal program.
③ Connect to PC (115200,8,n,1) ⑥ click “OK”
with a RS232-C cable
-- done --
7.3 Using Internal Password Keyboard to input a number pin

Step1 Start a New Project Step3 Link the pages with the IMG_BKGs
(please refer to the previous examples) ① Click on the working area of each Page, the properties will
show on the right.
② In Properties window, select the imported Background image
Step2 Built 3 pages, import 3 pictures as where DP0000 for login, DP0001 for login failed, DP0002 for
IMG_BKG successfully login
Step4 Allocate a VP_N32

① In Resources Window, right click on 32bit Number Variables
select "New VP"
Step5 Built a Touch Key (TPK) to call out

Password Keyboard
② Create rectangle touch key area on the PAGE
③ In Touch Key properties,
set "On Press Down" as "Inverse Color"
④ set "Target" as "PG0001"
⑤ set "Call" as "Keyboard password"
⑥ set "Title/Value" as “Input Password”
⑦ set "VP Address" as "0x000000 (BUFF)"
Step6 Built a Virtual Touch Key (VPK) to trigger Step7 Page Function that action at Page loading
a page jump (copy the BUFF value that input by password keyboard to the
Monitor-VP)
① In tool bar, select Virtual Touch Key
① Right click on the empty area of DP0001
② Create rectangle VPK area on the PAGE
select "Page Functions”
③ In Touch Key properties,
② Click on "Add”
set "Monitor-VP" as "0x020000"
③ select the Functions List ID:0
④ set "Monitor-Value" as "12345"(*1)
④ set "Call" as "VP:=BUFF"
⑤ set "Target" as "PG0002"
⑤ set "VP Address" "0x020000"
⑥ Built a retry TPK on DP0001 (login failed) page for jump back to
⑥ click "Close" to finish
PG0000 (login page)
*1. If 0x020000 value equal to "12345", it jump to PG0002

① Disconnect the mini USB cable ④ input “12345” ⑥ for wrong password, click
② Power the Smart LCD with 5V ⑤ click “ok” retry
③ touch the login key
-- done --
7.4 Using Internal Real-Time-Clock Keyboard to set the Real-Time-Clock(RTC) time


① Click on the working area of the PAGE, its properties will show on ① In menu bar, Tools-->Options-->Font Setting.
the right. ② Right click on font 44 then “Select”
② In Properties window, select the imported Background Image. ③ Select “64_NUM_SevenSegment(40x64)"
⑤ Click “OK”
Step5 Built a RTC on screen RTC Step6 Built a Touch Key (TPK) to call RTC
Keyboard
① In tools bar, select RTC ① In tool bar, select Touch Key
② Create a rectangle area on page ② Creat a rectangle touch key area on the PAGE
③ In Touch Key properties, ③ In touch key properties,
set "Font Color" as "0x00FFFF" (CYAN) set "Call" as "Adjust RTC"
④ set "Transparent" as "True”
⑤ set "Font" as "64_NUM_SevenSegment(40x64)"
⑥ set "Date/Time Format" as "YYYY-MM-dd HH:mm:ss"

① Disconnect the mini USB cable
② Power on the Smart LCD with 5V
③ Touch on the RTC area and pop up a RTC keyboard for time adjustment.
④ Click “OK” then update the time
-- done --
7.5 Using PIP Menu to input a String Value

Step1 Start a New Project Step2 Built two pages, import a pictures as
(please refer to the previous examples) IMG_BKG (please refer to the previous examples)
Step3 Link the page with the IMG_BKG ① Click on the working area of the PAGE, its properties will show on the
right.
note: DP0000 is for main page; DP0001 for PIP menu page
Step4 Allocate a VP_STR and show on page Step5 Built a Touch Key (TPK) to call PIP Menu
① In Resources Window, right click on String Variables, select ① In tools bar, select Touch Key
"New VP" ② Create rectangle touch key area on the PAGE
② In tools bar, select String Element ③ In Touch Key properties,
③ Create rectangle string element area on the PAGE set "Call" as "PIP Menu"
④ In String Element properties, ④ set "VP Address" as "0x000080"
set "Font Color" as "0xFF0000"
⑤ set "Transparent" as "True"
⑥ set "Font" as "32_ASCII_SysBold"
⑦ set "Align" as "Center"
⑧ set "VP Address" as "0x000080"
Step6 Built 5keys in PIP menu page (PG0001) Step7 PIP Menu window configuration
① In tools bar, select Touch Key ① click on PIP Menu window
② Create 5 rectangle touch keys area on the PAGE ② In PIP WIN properties,
③ In Touch Key properties set "Pop Area of Page" as "PG0001"(the menu page)
set all 5 TPKs' "On Press Down" as "Inverse Color" ③ set "PIP WIN X/Y" pop up position
④ set all 5 TPKs' "Target" as "PG0000" (hold the Ctrl key with mouse to shift the PIP window content area)
⑤ set all 5 TPKs' "Call" as "VP:=value" (After selected the TPK by mouse click, PIP window will show on page)
⑥ set all 5 TPKs' "VP Address" as "0x000080"
⑦ set each TPK "Title/Value" as "RMB", "HKD", "USD". "YAN"
and "GBP"

① Disconnect the mini USB cable ③ Click on the input box, and select the PIP MENU
② Power on the Smart LCD with 5V ④ The corresponding string show screen
-- done --
7.6 Using PIP (Number) Keyboard to input a value

Step3 Link the page with the IMG_BKG ① Click on the working area of the PAGE, its properties will show on the right.
note: DP0000 is for main page; DP0001 for PIP(number) Keyboard page,
where DP0002 for press down effect only.
Step4 Allocate a String VP and show on Step5 Built a Touch Key (TPK) to call PIP (Number)
page Keyboard
① In Resources Window, right click on String Variable, ① In tools bar, select Touch Key
select "New VP" ② Create rectangle touch key area on the PAGE
③ Create rectangle string element area on the PAGE set "Call" as "PIP Number Keyboard"
⑦ set "VP Address" as "0x000080"
Step6 PIP Keyboard configuration Step7 Built PIP keyboard's keys and its setting
① In POP TITLE properties
② Create 13 rectangle touch keys area on the PAGE
② set "Transparent" as "True"
③ In Touch Key properties
③ set "Font" as "32_ASCII_SysBold"
set all 13 TPKs' "On Press Down" as "Cropped BgImg"
④ In POP WIN properties,
④ set all 13 TPKs' "Icon" as DP0002
set "Pop Area of Page" as "PG0001" (keyboard page)
⑤ set the 10 numeric TPKs' "Call as "Buf:=Con(Buff,Cap/Nom(Byte0/Byte1))"
⑤ set "PIP WIN X/Y" pop up position
set "Title/Value" as its own value(*1)
(hold the Ctrl key with mouse to shift the POP window
⑥ set the “X” TPK's "Call" as "vp:=DelLastchar(vp)"
content area)
⑦ set the “ESC” TPK's "Call" as "Call=Esc"
⑧ set the “OK” TPK's "Call" as "Call=Enter"
*1. Key and code
value
Key Code
Value
0 0x30
1 0x31
2 0x32
: :
8 0x38
9 0x39

① Disconnect the mini USB cable ③ Click on the input box
② Power on the Smart LCD with 5V ④ enter ”768986”click "OK"
-- done --
7.7 Using PIP Keyboard to input a value

Step3 Link the page with the IMG_BKG ① Click on the working area of the PAGE, its properties will show on the right.
note: DP0000 is for main page; DP0001 for PIP (English) Keyboard page,
Step4 Allocate a String VP and show on Step5 Built a Touch Key (TPK) to call PIP Keyboard
page
① In Resources Window, right click on String Variable, ① In tools bar, select Touch Key
select "New VP" ② Create rectangle touch key area on the PAGE
③ Create rectangle string element area on the PAGE set "Call" as "PIP Keyboard"
⑦ set "VP Address" as "0x000080"
*1 TPK Title/Value
Step6 PIP Keyboard configuration Step7 Built PIP Keyboard's keys and its Key Code Upper Lower
0x4161 A a
① In POP TITLE properties setting 0x4262 B b
set "Font Color" as "0xFF0000" 0x4363 C c
① In tools bar, select Touch Key 0x4464 D d
② set "Transparent" as "True" ② Create 45 rectangle touch keys area on the PAGE
0x4565
0x4666
E
F
e
f
③ set "Font" as "32_ASCII_SysBold" ③ In Touch Key properties 0x4767 G g
0x4868 H h
⑥ In POP WIN properties, set all 45 TPKs' "On Press Down" as "Inverse Color" 0x4969 I i
0x4A6A J j
set "Pop Area of Page" as "PG0001" (keyboard page) ④ set the 40 TPKs' "Call as 0x4B6B K k
0x4C6C L l
set "PIP WIN X/Y" pop up position "Buf:=Con(Buff,Cap/Nom(Byte0/Byte1))" 0x4D6D M m
(hold the Ctrl key with mouse to shift the POP window set "Title/Value" as its own value(*1)
0x4E6E N n
0x4F6F O o
content area) 0x5070 P p
⑤ set the other 5 TPKs "Call" as special functions 0x5171 Q q
0x5272 R r
as "CapLock" / "vp:=DelLastchar(vp)" / "Enter" / "Move 0x5373 S s
Cursor Right" / "Move Cursor Left" 0x5474
0x5575
T
U
t
u
0x5676 V v
0x5777 W w
0x5878 X x
0x5979 Y y
0x5A7A Z z
0x7E60 ~ ‘
0x2131 ! 1
0x4032 @ 2
0x2333 $ 3
0x2423 # 4
0x2535 % 5
0x5E36 ^ 6
0x2637 & 7
0x2A38 * 8
0x2839 ( 9
0x2930 ) 0
0x5F2D _ -
0x2B3D + =
0x3F2F ? /

③ Click on the input box
④ enter ”user006”click "OK"
-- done --
7.8 Using TPK to operate VP value

Step3 Link the page with the IMG_BKG Step4 Allocate a 32bit Number Variable (N32)
① Click on the working area of the page, its properties will show on ① In Resources window, right click on "32bit Number Variables"
the right. select :"New VP
② In Properties window, select the Background Image.
Step6 Built a Number Element and link with VP Step6 Built 4 Touch-Key (TPK) on screen
② In tools bar, select number element ① In tools bar, select Touch-Key element
③ Create a rectangle Number element area on page ② Create 4 rectangle Touch-Key element on page
④ In Number Element properties, ③ In Touch-Key element properties
set "Font Color" as "0x00FFFF" set "On Press Down" as "Inverse Color"
⑤ set "Transparent" as “True” ④ set "VP Address" as "0x020000"
⑥ set Font" as "80_NUM_Sys" ⑤ set 1st TPK "Call" as "VP:=VP+Value", "Title/Value" as "10"
⑦ set "Align" as "Right" ⑥ set 2st TPK "Call" as "VP:=VP-Value", "Title/Value" as "1"
⑧ set "VP Address" as "0x020000" ⑦ set 3st TPK "Call" as "VP:=VP*Value", "Title/Value" as "2"
⑧ set 4th TPK "Call" as "VP:=VP/Value", "Title/Value" as "5"

③ Touch the TPKs, to get VP value update accordingly
-- done --
8 VP and COM communication Examples

8.1 Using Serial Command to update a Number variable

① Click on the working area of the page, its properties will show on the ⑥ In menu bar, Tools-->Options-->Font Setting.
right. ⑦ Right click on font 50 then “Select”
② In Properties window, select a Background Image. ⑧ Select “120x200NUM“ font face
⑨ Click “Select”
⑩ Click "OK"
Step5 Allocate a VP_N32 variable

① In Resources window, right click on "32bit Number Variables" Step6 Built a Number Element and link with
select :"New VP" VP
② In tools bar, select number element
③ Create a rectangle Number element area on page
④ In Number Element properties,
set "Font color" as "0xFFFFFF"
⑤ set "Transparent" as “True”
⑥ set "font" as "Font 50"
⑦ set "VP Address" link to "VP_N32 0x020000"

① Disconnect the mini USB cable ⑤ send a command: ⑥ send a command:
② Power on the Smart LCD with 5V AA 44 00 02 00 00 00 02 90 FA CC 33 C3 3C AA 44 00 02 00 00 00 08 AD 6D CC 33 C3 3C
③ connect the serial port (write a value 0x000290FA(168186) (write a value 0x0008AD6D(568685)
④ setting:115200,8,n,1 (default) to VP address 0x00020000) to VP address 0x00020000)
-- done --
9 Advance element Examples

9.1 Show a Progress Bar
Step3 Link the page with the IMG_BKG Step4 Allocate a 16bit Number Variable (N16)
① Click on the working area of the page, its properties will show on ① In Resources window, right click on "16bit Number Variables"
the right. select :"New VP
② In Properties window, select the Background Image.
Step5 Built a Progress Bar on screen Step6 Config the Progress Bar and link to VP
① In tools bar, select Progress Bar element ③ In Progress Bar element properties
② Create 2 rectangle Progress Bar area on screen set "Format" as "Vertical:Down to Up"
④ set "Forecolor 1" as "0xFF0000"
⑤ set "Forecolor 2" as "0xFF0000"
⑥ set "Gap Color" as "0xFF0000"
⑦ set "VP Max" as "100"
⑧ set "VP Address" as "VP 0x080000"
⑨ repeat the above to the second Progress Bar with another color

① Disconnect the mini USB cable ⑤ send a command: ⑥ send a command:
② Power on the Smart LCD with 5V AA 3D 00 08 00 00 00 32 CC 33 C3 3C AA 3D 00 08 00 00 00 64 CC 33 C3 3C
③ connect the serial port (write a value 0x0032 (50) (write a value 0x0032 (100)
④ setting:115200,8,n,1 (default) to VP address 0x00080000) to VP address 0x00080000)
Note: the value 50 is a half between MAX/MIN Note: the value 100 is same as MAX value,
value, it top up half of the bar area it top up the bar area
-- done --
9.2 Using Index Icon

Step3 Link the page with the IMG_BKG Step4 Import Icons
① Click on the working area of the page, its properties will show on the ① In Resources window, right click Icons select "Import Icon"
right. ② select the icon files
② In Properties window, select the Background Image. ③ click "Open" to finish
Step5 Allocate a 16bit Number Variable

(N16)
① In Resources window, right click on "16bit Number Variables"
select :"New VP"
Step6 Built Indexed Icon and link to VP

① In tools bar, select Indexed Icon element
② Create a rectangle Indexed Icon area on screen
③ In Indexed Icon properties,
set "Transparent" as "True"
④ set "Transparent Color" as "0xFF00FF" (icons' background)
⑤ set "ICON" as "DI0000" (the first imported icons)
⑥ set "VP Address" as "VP 0x080000"
⑦ set "VP Min" as "130" and "VP Max" as "132"

③ connect the serial port
④ setting:115200,8,n,1 (default)
⑤ send a command: ⑥ send a command: ⑦ send a command:

AA 3D 00 08 00 00 00 82 CC 33 C3 3C AA 3D 00 08 00 00 00 84 CC 33 C3 3C AA 3D 00 08 00 00 00 85 CC 33 C3 3C
(write a value 0x0083 (131) (write a value 0x0084 (132) (write a value 0x0085 (133)
to VP address 0x00080000) to VP address 0x00080000) to VP address 0x00080000)
Note: Note: Note:
value 0x0082 is same as the (MIN value + 1), value 0x0084 is same as the (MIN value + 2), value is outside the range of MAX and MIN,
thus, the 2nd icon show on screen Thus the 3rd icon show on screen Thus, no icon show on screen)
-- done --
9.3 Using Tachometer Element (Angle Open Mode) Application Example

(This example is using HMT070CQ-C and Editor v4.33)

⑥ start TOPWAY TML Graphics Editor v4.33, start a new project
through manual bar
File --> New Project
⑦ Enter the Project name
Project Name: Tachometer (as an example)
⑧ Select a Project folder location
Create a Project Folder in: desktop\Tachometer (as an example)
⑨ Select the display resolution of the SmartLCD
Screen Size: 800x480 (for this example HMT070CQ-C)
⑩ Click “OK”
Step2 Built a Page, import Background Image and icons

① In Resource window, right click on Pages, select New Page
② In Resource window, right click on Background Images,
select Import Background Image
③ Select images for background, select "Open"
④ In Resources window, right click Icons select Import Icon.
⑤ Select icon files, select "Open"
Note: Editor supports BMP, JPG, PNG. In this case a 800x480 picture
could be best fit to the display. or Editor will resize it to fit the display
Step3 Link the page with the image

⑤ Click on the working area of the page, its properties will show on the
right.
⑥ In Properties window, select DP0000 in the Background Image.
Step4 Built a Tachometer(TCM) Element on the page

① In tool bar, select Tachometer
② Create a rectangle static icon area on page
Step5 Config the Tachometer(TCM) Element as "Angle Open" mode

select :"New VP" to create a VP 0x080000.
② Config the TCM properties
No. items configuration
1 Bg. Icon Select DI0000 (*1)
2 Bg. Transparent Select True (Auto)
3 Bg. Transparent color Black (Auto)
4 Fg. Icon Select DI0001 (*2)
5 Fg. Transparent mode Select Normal
6 Fg. Transparent color Black
7 Mode Select " Angle Open" mode
8 Direction Select Clockwise
9 Start Angle Select 270°(*3)
10 End Angle Select 90°(*3)
11 Rotation Center Point Manual
12 X Coordinate Manual adjust to its center (*4)
13 Y Coordinate Manual adjust to its center (*4)
14 VP Resource Link to VP_N16
15 VP Address Link with VP 0x080000
16 Min Value 0 as no light on
*1. DI0000 *2. DI0001
17 Max Value 28 as all light on
*3. Start/End Angle *4. Rotation Center
Step6 Compile and download to the Smart LCD (please refer to the previous examples)

⑦ Disconnect the mini USB cable ⑪ send a values 0 to VP_N16(0x080000) ⑫ send a values 23 to VP_N16(0x080000)
⑧ Power on the Smart LCD by the following command by the following command
⑨ connect the serial port AA 3D 00 08 00 00 0000 CC 33 C3 3C AA 3D 00 08 00 00 0017 CC 33 C3 3C
⑩ setting:115200,8,n,1 (default)
No light on (0/28) Some light on (23/28)
note. value outside 0~28 will hide the TCM form the screen
-- done --
9.4 Using Tachometer Element (Rotation Mode) Application Example (Meter)

Step1 ~ Step4 (please refer to the last examples)
Step5 Config the Tachometer(TCM) Element as "Rotation Mode" mode

3 Bg. Transparent color 0xaab4be (Auto)
5 Fg. Transparent mode Select Normal
6 Fg. Transparent color 0xaab4be
7 Mode Select "Rotation" mode
8 Direction Select Clockwise
16 Min Value 0
17 Max Value 6
*1. DI0002 *2. DI0003
*3. Start/End Angle

*4. Rotation Center

① Disconnect the mini USB cable ⑤ send a values 0 to VP_N16(0x080000) ⑥ send a values 3 to VP_N16(0x080000)
② Power on the Smart LCD by the following command by the following command
③ connect the serial port AA 3D 00 08 00 00 0000 CC 33 C3 3C AA 3D 00 08 00 00 0003 CC 33 C3 3C
④ setting:115200,8,n,1 (default)
Radar point at 359deg (0/6) Radar rotate... (3/6)
-- done --
9.5 Using Tachometer Element (Rotation Mode) Application Example (Radar)

Step1 ~ Step4 (please refer to the last examples)
Step5 Config the Tachometer(TCM) Element as "Rotation Mode" mode

3 Bg. Transparent color Black (Auto)
5 Fg. Transparent mode Select Lighten
6 Fg. Transparent color Black (Auto)
7 Mode Select "Rotation" mode
8 Direction Select Anti Clockwise
16 Min Value 0
17 Max Value 11
*1. DI0004 *2. DI0005
*3. Start/End Angle *4. Rotation Center


⑦ Disconnect the mini USB cable ⑪ send a values 0 to VP_N16(0x080000) ⑫ send a values 4 to VP_N16(0x080000)
⑧ Power on the Smart LCD by the following command by the following command
⑨ connect the serial port AA 3D 00 08 00 00 0000 CC 33 C3 3C AA 3D 00 08 00 00 0004 CC 33 C3 3C
⑩ setting:115200,8,n,1 (default)
Radar point at 0deg (0/11) Radar rotate... (4/11)
-- done --
9.6 Using Decimal Icon

Step3 Link the page with the IMG_BKG Step4 Import Icons
③ Click on the working area of the page, its properties will show ④ In Resources window, right click Icons select "Import Icon"
on the right. ⑤ select the icon files
① In Properties window, select the Background Image. ① click "Open" to finish
Note:
1st 2nd ... 10th 11th 12th
icon icon icon icon icon
...
Step5 Allocate a 32bit Number Variable (N32)

② In Resources window, right click on "32bit Number Variables"
select :"New VP
Step6 Built Indexed Icon and link to VP

① In tools bar, select Decimal Icon element
② Create a rectangel Decimal Icon element on screen
③ In Decimal Icon properties,
set "Align" as "Center"
④ set "ICON" as "DI0000"
⑤ set "VP Resource" as "VP_N32"
⑥ set "VP Address" as "VP: 0x020000"

① Disconnect the mini USB ⑤ send a command: ⑥ send a command:
cable AA 44 00 02 00 00 00 1C B6 59 CC 33 C3 3C AA 44 00 02 00 00 66 14 49 CC 33 C3 3C
② Power on the Smart LCD with (write a value 0x001CB659 (1881689) (write a value 0x00661449 (6689865)
5V to VP address:0x00020000) To VP address 0x00020000)
③ connect the serial port Note: Note:
④ setting:115200,8,n,1 (default) the value in decimal 1881689 are showing on The value in decimal6689865 are showing on screen
screen as indexed icons form the group of icons as indexed icons form the group of icons
-- done --
9.7 Using Graph Element

Step3 Link the page with the IMG_BKG Step4 Allocate a Graph Variables
① Click on the working area of the page, its properties will show on ① In Resources window, right click on "Graph Variables" select "New
the right. Graph VP"
② In Properties window, select the Background Image. ② Enter 120 into the Width setting
③ click “OK”
Step5 Built 4 Graph Element and link to VP

① In tools bar, select Graph Element
② Create 4 rectangle Graph area on screen
③ In Graph Properties,
set all 4 "Foreground Color" as "0x00FFFF"
④ set all 4 "Min Value" as -20
⑤ set all 4 "Max Value" as 280
⑥ set all 4 "VP Graph" as "0x060000"
⑦ set one of the graphs "Dot Width" & "Dot Height" as 1 & 1
⑧ set one of the graphs "Dot Width" & "Dot Height" as 1 & 4
⑨ set one of the graphs "Dot Width" & "Dot Height" as 4 & 4
⑩ set one of the graphs "Dot Width" & "Dot Height" as 4 & 1

① Disconnect the mini USB cable ⑤ using "G16_write_rotate" commands (0x4E) to "insert" the data to the end of the graph array
② Power on the Smart LCD with 5V and shift all the data and show a "moving" graph.
③ connect the serial port ⑥
④ setting:115200,8,n,1 (default) Packet head command G16 Add Insert at (*2) Value (*3) Packet tail Note:
AA 4E 00 06 00 00 02 25 00 00 CC 33 C3 3C *1. data insert command
AA 4E 00 06 00 00 02 25 00 00 CC 33 C3 3C
*2. insert at the end of the graph data array
AA 4E 00 06 00 00 02 25 00 01 CC 33 C3 3C
AA 4E 00 06 00 00 02 25 00 02 CC 33 C3 3C *3. SIN value sequence
: : : : : :
Inserted 100 data Inserted 200 data

-- done --
9.8 Show a Bitmap Element

Step3 Link the page with the IMG_BKG Step4 Allocate a Bitmap variable
① Click on the working area of the page, its properties will show on ① In Resources window, right click on "Bitmap Variables" select
the right. "New Bitmap VP"
② In Properties window, select the Background Image. ② Enter 320 to Width and 32 to Height
③ click “OK”
Step5 Built a Bitmap Element and link to VP

① In tool bar, select Bitmap Element
② Create a rectangle Bitmap area on screen
③ In Bitmap Properties,
set "Foreground Color" as "0x00FF00"
④ set "Background Color" as "0x000000"
⑤ set "VP Bitmap" as "0x040000"
Note:
Bitmap data 1 for Foreground Color, 0 for Background Color


① Power on the Smart LCD with 5V ④ send a command ⑤ follow with 1280 byte of data
② connect the serial port AA 4B 00 04 00 00 00 00 05 00 CC 33 C3 3C 0XF9,0XCF,0X22,0X22,0X20,0X00,0X00,0X00,
③ setting:115200,8,n,1 (default) (write 0x00000500 ((320*32)/8=1280) byte data 0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,
to address address 0x040000) 0X00,0X00,0X00,0X00,0X00,... … ………
Data Example:
Black dot as 1; White dot as 0

Start form top left
1st row left 8 dots :11111001(0xF9) (as 1st byte)
2nd row left 8 dots : 11001111(0xCF) (as 2nd byte)
3rd row left 8dots : 00100010(0x22) (as 3rd byte)
:
:
-- done --
9.9 Using Swap Page Element

Step1 Start a New Project Step2 Built three page, import 3 pictures as
Step3 Link the page with the IMG_BKG Step4 Built a Swap Page Element
○
1 Click on the working area of the PAGE, ○
1 select the Swap Page Element
its properties will show on the right ○
2 put it inside any empty area of the PAGE
○In Properties window, select the imported Background Image
2 ○
3 set the Swap Page Element properties’
PG0000 link asDP0000, Left side Page and Right Side Page
PG0001 link as DP0001, PG0000: Left Side Page=PG0001, Right Side Page=PG0002
PG0002 link as DP0002 PG0001: Left Side Page=PG0002, Right Side Page=PG0000
PG0002: Left Side Page=PG0000, Right Side Page=PG0001
Note:
This element work for full page,
its Width, Height are not related to its functionality.

Step6 Power on and Display ⑤ Disconnect the mini USB cable
⑥ Power on the Smart LCD with supply
PD0000 is show at power on On PD0000, sweep form left to right On PD0000, sweep form right to left
and show the PD0001 and show the PD0002
- Done -
9.10 Using Slider Element

Step1 Start a New Project Step4 Build a Font Face
○
1 In menu bar, Tools→ Font Setting → Font Config<2> →
right click on 160 → Build
Step2 Built a page, import a picture as ○
2 set font size Width=60, Height=120
IMG_BKG ○
3 Font=Arial Black, Size=120, select centered
○
4 Click Generate, build the font for display
Step3 Link the page with the IMG_BKG
Step5 Build Slider Element Step6 Build Number Element

○
1 Select Slider Element Tool ○
1 Select Number Element Tool
○
2 Align the Element on the sliding area ○
2 Align the Element on the center box
○
3 set Properties, VP Address=0x080000 ○
3 set Properties-Style, Font=60x120_Arial Black_160
Properties-Style, Font Color=ff0000,
Properties-Format, Align=Center
Properties-Content, VPAddress=0x080000

○
1 Disconnect the mini USB cable ○
3 Display show on screen
○
2 Power on the Smart LCD with supply ○
4 Sweep on the Slider area to adjust the VP value
- Done -
9.11 Using Slider 2 Element (SDR2)

Step1 Start a New Project Step3 Link the page with the IMG_BKG
Step2 Built a page, import a picture as

IMG_BKG
Step4 Build a Slider_2 Element Step5 Build a Progress Bar Element

○
1 select Slider_2 tool ○
1 Select Progress Bar tool
○
2 create the element on somewhere of the screen area ○
2 Align the Element on the center box
○
3 set Properties-Style, Direction=Vertical ○
3 set Properties-Style, Direction=Dn→Up
Properties-Style, Gain=2000 Properties-Style, Forecolor1=800000,
Properties-Content, VP Address=080000 Properties-Style, Forecolor2=ff0000
Note: Properties-Content, VP Address=0x080000
This element work for full page,
its Width, Height are not related to its functionality.

○
4 Use two finger Sweep on anywhere of
○
2 Power on the Smart LCD with supply the screen to adjust the VP value.
○
3 Display show on screen And the Progress Bar change accordingly.
- Done -
9.12 Using Ring Element with Tachometer(Donut Mode) Element

Step2 Built a page, import a picture as

IMG_BKG
Step4 Build a Ring Element Step5 Build a Tachometer (Donut)Element

○
1 select Ring tool ○
1 select Tachometer (Donut) tool
○
2 Align the element on the right side of the screen area ○
2 Align the element on the left side of the screen area
○
3 set Properties-Style, Start angle=225 ○
3 set Properties-Style, Mode Donut Mix Color
Properties-Style, Sweep Angle=270 Properties-Style, Start angle=225
Properties-Content, VP Address=080000 Properties-Style, Sweep Angle=270
Properties-Style, Show Base Color=false
Properties-Foreground, Color0=004400
Properties-Foreground, Color1=00ff00
Properties-Content, VP Address=080000

○
4 Sweep on ring element area
○
2 Power on the Smart LCD with supply to adjust the VP value.
○
3 Display show on screen And the Donut change accordingly.
- Done -
9.13 Using Ring_2 element with Tachometer(Icon Rotation Mode) Element

○
Step2 Built a page, import a picture as ○
IMG_BKG ○
○

Step5 Build a Ring_2 Element Step6 Build an Icon Rotation Element

○
1 select Ring_2 tool ○
1 Select Icon Rotation Element
○
2 create the element on somewhere of the screen area ○
2 Align the element on the node area
○
3 set Properties-Content, VP Address=080000 ○
3 set Properties-Style, Mode=Icon Rotation
Note: Properties-Style, Direction=Clockwise
This element work for full page, Properties-Style, Start Angle=255, Sweep Angle=270
its Width, Height are not related to its functionality. Properties-Foreground, Icon=(a black icon with a red dot)
Properties-Foreground, Transparent=true
Properties-Foreground, Transparent Color=000000
Properties-Content, VP Address=080000
Step7 Build Number Element

○
○
2 Align the Element on the box
○
Properties-Style, Font Color=ff0000,
Properties-Format, Align=Center
Properties-Content, VP Address=0x080000

○
4 Put two fingers on anywhere of the screen ○
5 At the same time, the icon (with red dot) will
○
2 Power on the Smart LCD with supply twist at the same time(like turning the node) be rotated with respect to the VP value
○
3 Display show on screen The VP value will be adjusted accordingly. ○The number also show the VP value, too.
6
- Done -
9.14 Using Touch Switch (TPK_SW)

Step2 Built a page, import pictures as IMG_BKG Step4 Built a page, import pictures as
IMG_ICO
Step5 Built Touch Switch Element Step6 Built Bit Icon Element
○
1 Select Touch Switch Element Tool ○
1 Select Bit Icon Element Tool
○
2 Align 4 elements on switches area ○
2 Align 4 elements on LEDs area
○
3 set Properties-Visual Effect, Display Effect=Show Cropped BgImg ○
3 set Properties-Visual Effect, Bit=1 Display Effect=Show Icon
Properties-Visual Effect, Icon/BgImg=DP0001 Properties-Visual Effect, Bit=1 Icon/BgImg=DIDP0001
Properties-Content, VP Address=0x080000 Properties-Visual Effect, Bit=0 Display Effect=Show Icon
Properties-Content, Bit Position=1,2.3,4 for each switch Properties-Visual Effect, Bit=0 Icon/BgImg=DIDP0000
Properties-Content, Bit Position=1,2.3,4 for each LED

○
4 Touch onto the TPK_SW area ○
5 Bit Icon also based on those bit value
○
2 Power on the Smart LCD with supply Its bit value can be toggle 0→1 or 1→0 and show the on-LED and off-LED
○
3 Display show on screen The visual effect will show accordingly.
- Done -
9.15 Using Touch Key with Repeat(TPK_RPT)

Step2 Built a page, import pictures as IMG_BKG ○
○
○
○

Step5 Built TPK_RPT Element Step6 Build Number Element

○
1 Select TPK_RPT Element Tool ○
○
2 Align 2 elements on button area ○
2 Align the Element on the box
○
3 set(+) Properties-Visual Effect, Display Effect=Show Cropped BgImg ○
Properties-Visual Effect, Icon/BgImg=DP0000 Properties-Style, Font Color=ff0000,
Properties-Style, Long Press Time=500 Properties-Format, Align=Right
Properties-Style, Long Press Cycle=100 Properties-Content, VP Address=0x080000
Properties-Style, Long Press Value=10
Properties-Style, Short Press Value=1
Properties-Content, VP Resource=VP_N32
○
4 set(-) Properties-Style, Long Press Value=-10
Properties-Style, Short Press Value=-1 (others same as (+))

○
4 Touch on the (+) ○
5 Similarly on the (-)
○
2 Power on the Smart LCD with supply Short touch (+) VP value +1 Short touch (+) VP value +1
○
3 Display show on screen Long touch (+) VP value +10 Long touch (+) VP value +10
- Done -
9.16 Using Tachometer(Hand Mode) Element

Step1 Start a New Project Step2 Built a page, import a picture as

Step4 Build Slider Element
○
1 Select Slider Element Tool
○
2 Align 2 Element on the sliding area
○
3 set (left) Properties-Content, VP Address=0x080000
Properties-Content, Min Value=0
Properties-Content, Max Value=240
○
3 set (right) Properties-Content, VP Address=0x080000
Properties-Content, Min Value=0
Properties-Content, Max Value=120
Rmp’s km/h TEMP GAS

Step5 Build Tachometer(Hand Mode) Element
○
1 select Tachometer (Hand Mode) tool
○
2 Align 4 elements on the meter area
○
3 Set the RMP, km/h, TEMP, GAS properties
(see right side table)

○
1 Disconnect the mini USB cable
○
2 Power on the Smart LCD with supply
○
○
4 Slide the left slider ○
5 Slide the right slider
rpm and km/h hands move accordingly TEMP and GAS hands move accordingly.
As they are having different range, The two hands set as anticlockwise
Their rotate refer to its Max Min value When VP value higher than its max,
it stay as max (see GAS hand as example)
- Done -
9.17 Using Round Clock Element

Step2 Built a page, import pictures as IMG_BKG


Step5 Build Round Clock Element

○
1 select Round Clock tool
○
2 Align the elements on the clock face area
○
3 set Properties-Style, Mode=Hand
Properties-Style, Transparent=true
Properties-Style, Face=false
Properties-Hands, Hands Type=Line
Properties-Hands, Hour Hands Color=000000
Properties-Hands, Minute Hand Color=000000
Properties-Hands, Second Hand Color=ff0000
Properties-Hands, Center Mark Color=ff0000


○
1 Disconnect the mini USB cable
○
2 Power on the Smart LCD with supply
○
○
4 Connect the serial cable
○
5 select default baud rate setting：115200,8,n,1
○
6 send a command：
AA 9C 12 0A 0D 0A 09 00 CC 33 C3 3C (set RTC as 10:09:00)
9.18 - Done -
10 Appendix
10.1 SGTools Shortcut Keys
File Tools Image Element Tools
icon Name Shortcut Key icon Mnemonic Name Shortcut Key
New Project Ctrl + N
ICO Static Icon Ctrl + Shift + I
Open Project Ctrl + O Animation

ANI Ctrl + Shift + A
Element
Save Project Ctrl + S
IDX_BIT Bit Icon --
Close Project -- Indexed

IDX --
Icon
Generate Files F7
TCM Tachometer --
Download to Module F9 I16 Decimal

--
I32 Icon
Alignment Tools Graphics Element Tools

icon Name Shortcut Key icon Mnemonic Name Shortcut Key
Align Left -- Progress
B16 Ctrl + P
Bar
Align Right -- Graph
G16 Ctrl + G
Element
Align Top -- Bitmap
BP1 Ctrl + B
Element
Align Bottom -- QR Code
QRC --
Element
Horizontal Distribute --
DPD Draw Pad --
Vertical Distribute --
Action Element Tools

icon Mnemonic Name Shortcut Key
TPK Touch Key Ctrl + K
VPK Virtual Key

--
String Element Tools

icon Mnemonic Name Shortcut Key
STS Static String Ctrl + Shift + T
String
STR Ctrl + T
Element
N16
Number
N32 Ctrl + M
Element
N64
Timer
TMR --
Display
Real Time
RTC Ctrl + R
Clock
10.2 Project Limitation
10.2.1 PAGEs, Image-Resources and VP-Variables Limitation

icon Mnemonic Name Linked VP. Linked IMG Editor Limit Memory Limit Address range
PAGE Page -- IMG_BKG ≤1000/project 256M byte (*4) PG0000 ~ PG0999
≤10000/project
IMG_BKG Background Image -- -- DP0000 ~ DP9999
(*1)
≤10000/project
IMG_ICO Icon -- -- DI0000 ~ DI9999
(*2)
≤1000/project
IMG_ANI Animation -- -- ANI000 ~ ANI999
(*2)(*3)
VP_STR String Variable -- -- ≤1024 / project 1024(MAX) x (127+1)byte 0x000000 ~ 0x01FF80
VP_N16 16bit Integer Variable -- -- ≤32512 / project 32512(MAX) x (2)byte 0x080000 ~ 0x08FDFE
VP_N32 32bit Integer Variable -- -- ≤16128 / project 16128(MAX) x (4)byte 0x020000 ~ 0x02FBFC
VP_N64 64bit Integer Variable -- -- ≤7936 / project 7936(MAX) x (8)byte 0x030000 ~ 0x03F7F8
16384(MAX) x (8)byte
VP_G16 16bit Graph Variable -- -- ≤16384 / project 0x060000 ~ 0x07FFF8
(dynamic array allocation)
2048(MAX) x (64)byte
VP_BP1 Bitmap Variable -- -- ≤2048 / project 0x060000 ~ 0x05FFBF
(dynamic array allocation)
VP_REG Register Variable -- -- -- -- 0xFFFF00 ~ 0xFFFFFF
VP_TMR Timer Variable -- -- ≤8 / project -- 0x02FFE0 ~ 0x02FFFC
Note:
*1. IMG_BKG must >1/2 of Full-Screen (Editor auto resize to fit screen)
*2. IMG_ICON and IMG_ANI Size Limit
Project resolution Size Limit
320x240 320x240 max. (Full-Screen)
480x272 480x272 max. (Full-Screen)
640x480 131072pixels (42% of Full Screen)
1366X480 131072pixels (20% of Full Screen)
*3. 1~64frame max.
*4. Memory Size may vary by model.
10.2.2 Page's Elements Limitation

icon Mnemonic Name Linked VP. Linked IMG Editor Limit Memory Limit ID range
1x IMG_ICO or
TPK Touch Key -- ≤256 / PAGE -- 0 ~ 255 (each page)
1x IMG_BKG (*1)
VP_N16 (*2)
VPK Virtual Key -- ≤64 / PAGE -- 0 ~ 63 (each page)
VP_N32 (*2)
STS Static String -- -- ≤128 / PAGE -- 0 ~ 127 (each page)
STR String Element VP_STR -- ≤128 / PAGE -- 0 ~ 127 (each page)
N16 VP_N16 --
N32 Number Element VP_N32 -- ≤120 / PAGE -- 0 ~ 119 (each page)
N64 VP_V64 --
VP_N32
TMR Timer Display -- ≤8 / PAGE -- 0 ~ 7 (each page)
(timer only)
RTC Real Time Clock -- -- ≤8 / PAGE -- 0 ~ 7 (each page)
ICO Static Icon -- 1x IMG_ICO ≤128 / PAGE -- 0 ~ 127 (each page)
ANI Animation Element -- 1x IMG_ANI ≤8 / PAGE -- 0 ~ 7 (each page)
VP_N16 2(MAX) x
IDX_BIT Bit Icon ≤64 / PAGE -- 0 ~ 63 (each page)
VP_N32 IMG_ICON
10000(MAX) x
IDX Indexed Icon VP_N16 --
IMG_ICON
≤64 / PAGE 0 ~ 63 (each page)
181(MAX) x
TCM Tachometer VP_N16 --
IMG_ICON
I16 VP_N16 12x IMG_ICON

Decimal Icon ≤32 / PAGE -- 0 ~ 31 (each page)
I32 VP_N32 (0~9,”.”,”-“)
B16 Progress Bar VP_N16 1x IMG_ICON ≤32 / PAGE -- 0 ~ 31 (each page)
G16 Graph Element VP_G16 -- ≤8 / PAGE -- 0 ~ 7 (each page)
BP1 Bitmap Element VP_BP1 -- ≤32 / PAGE -- 0 ~ 31 (each page)
VP_STR
QRC QR Code Element -- ≤4 / PAGE -- 0 ~ 3 (each page)
VP_N16 (in seq.)
DPD Draw Pad VP_N16 (in seq.) -- ≤4 / PAGE -- 0 ~ 3 (each page)
Note:
*1. IMG_ICO for key-down display, IMG_BKG will be cropped to key size for key-down display
*2. Monitoring values
*3. Element display Size: 8x8 (MIN), except Bitmap Element
10.2.3 System Registers

Address System Register Descriptions Note
0xFFFF00 Timer_Ctrl0 D[0]=0 : stop the timer (*1)
: : D[0]=1 : start the timer
0xFFFF07 Timer_Ctrl7 D[1]=0 : count down,
time down to 0x00000000
D[1]=1 : count up,
time up to 0x7fffffff
D[7:2]=000000 : reserved
0xFFFF10 RTC_Year Value=0~99 0xffff10~0xffff16
0xFFFF11 RTC_Month Value=1~12 should be written at the
0xFFFF12 RTC_Day Value=1~31 same time
0xFFFF13 RTC_Hour Value=0~23
0xFFFF14 RTC_Minute Value=0~59
0xFFFF15 RTC_Second Value=0~59
0xFFFF16 RTC_Set Value=1 : sync the time
0xFFFF20 Buzzer Value=0~63 See Project Setting for
buzzer beeping duration (*1) details
0xFFFF21 Backlight Value=0~63
Real time backlight brightness setting (*1)
0xFFFF22 ScreenSaverBacklight Value=0~63 see Screen Saver
Screen Saver Backlight Brightness (*1) section for details
0xFFFF23 ScreenSaverPage_H Value=0~999
0xFFFF24 ScreenSaverPage_L Screen Saver display Page (*2)
0xFFFF25 ScreenSaver Timer1_H Value=0~65535
0xFFFF26 ScreenSaver Timer1_L Screen saver delay time 1 (*2)
0xFFFF27 ScreenSaver Timer2_H Value=0~65535
0xFFFF28 ScreenSaver Timer2_L Screen saver delay time 2 (*2)
0xFFFF30 Font_CodePage Font Code Page index value (*1) (*3)
0xFFFF31 Font_Country Font Country index value (*1) (*4)
Note:
*1. Value can be update by command System_register_write (0xb3) to access the register
*2. Value should be written at the same time by command Sucesstive_write (0x82)
*3. Code Page index value
index Code Page index Code Page
1 437(OEM United States) 12 1252(ANSI Latin I)
2 737(OEM Greek437G) 13 1253(ANSI Greek)
3 852(OEM Latin II) 14 1254(ANSI Turkish)
4 860(OEM Portuguese) 15 1255(ANSI Hebrew)
5 863(OEM Canadian French) 16 1256(ANSI Arabic)
6 865(OEM Nordic) 17 1257(ANSI Baltic)
7 866(OEM Russian) 18 1258(ANSI/OEM Viet Nam)
8 874(ANSI/OEM Thai) 19 GB2312 (Simplified Chinese)
9 932(ANSI/OEM Japanese Shift JIS) 20 GBK (Simplified Chinese)
10 1250(ANSI Central Europe) 21 ECU-KR ( Korea )
11 1251(ANSI Cyrillic) 22 BIG5 (Traditional Chinese)
*4. Country index value

index Code Page index Code Page
1 USA 7 DenmarkⅡ
2 France 8 Sweden
3 Germany 9 Italy
4 UK 10 Spain
5 DenmarkⅠ 11 Japan
6 DenmarkⅡ
11 Precautions of using LCD Modules

Mounting
- For mounting use the holes arranged in the four corners of the LCD Module.
- Make sure to provide an even force on to LCD module. Uneven force (ex. twisted stress) should not be
applied to the module. The casing on which a module is mounted should have sufficient strength to absorb
any external force, so the force can’t be transmitted directly to the module.
- It is suggested to attach a transparent protective plate to the surface of the module in order to protect the
polarizer. It should have sufficient strength to resist external force.
- The housing should provide sufficient thermal radiation to satisfy the temperature specification.
- Acetic Acid type and Chlorine-type materials for the cover case are not desirable because the former
generates corrosive gases, which may attack the polarizer at high temperatures which may cause circuit break
by electro-chemical reactions.
- Do not touch, push or rub the exposed polarizer with glass, tweezers or anything harder than HB pencil lead.
Never treat the polarizer with chemical agents. Do not touch the surface of polarizer with bare hand or greasy
cloth. Otherwise it may result in some cosmetics deterioration of the polarizer.
- When the surface becomes dusty, please wipe gently with absorbent cotton or another soft material. Do not
use acetone, toluene and alcohol because they cause chemical damage to the polarizer.
- Wipe off saliva or water drops as soon as possible. Their long time contact with polarizer may affect the
appearance.
Operating
- Spike noise may cause deterioration of the circuitry. Noise should be within a range of ±200mV. (Over and
under voltage)
- The LCD response time is depends on the temperature. (At lower temperatures, it becomes slower)
- Brightness depends on the temperature as well. (At lower temperatures, it becomes less bright and it takes
more time until the brightness is stable after power on).
- Try to avoid sudden temperature change, because they may cause condensation. Condensation may damage
the polarizer or the circuitry. After fading condensation a smear or spot may occur.
- When fixed patterns are displayed for a long time, remnant images are likely to occur.
- The LCD module incorporates high frequency circuitry. Sufficient suppression of electromagnetic interference
shall be done by system manufacturers. Grounding and shielding methods may be important to minimized
interferences.
Electrostatic Discharge Control
- Since a module is composed of electronic circuits, it may be affected by electrostatic discharge.
- Make sure that the worker, who is assembling the module into equipment, is connected to ground through a
ESD wrist band or insure other ESD protection.
- Avoid touching any electrical contact of the module without proper ESD protection.
Strong Light Exposure
- Strong light exposure causes degradation of polarizer and color filter.
Storage
- When storing modules as spares for a long time, precautions are necessary.
- Store the LCD modules in a dark place.
- Do not expose the module to sunlight or fluorescent light.
- Keep the temperature between 5°C and 35°C at normal humidity.
- The polarizer surface should not come in contact with any other object. It is recommended that they be stored
in the container in which they were shipped.
Protection Film
- When the protection film is peeled off, static electricity is generated between the film and polarizer. The film
should be peeled off slowly and carefully by people who are electrically grounded. It is suggested to do that
process while using an ion air blower or other suitable ESD equipment.
- The protection film is attached to the polarizer with a small amount of glue. If some stress is applied e.g. by
rubbing the protection film against the polarizer during the time it is peeled off, some protection film may
remain on top of the polarizer. Please carefully peel off the remaining protection film without rubbing it against
the polarizer.
- When the module, with protection film attached, is stored for a long time, some very small amount of glue may
remain still on the polarizer after the protection film is peeled off. You can remove the glue easily. In such a
case please wipe them off with absorbent cotton or another soft material.
Transportation
- The LCD modules should not be exposed to drop, shock, excessive pressure, water or sunshine during
transportation.
12 Revisions
Rev. Descriptions by Release Date
0.01 - Draft Release K.C. 2019-01-24
1.00 - Preliminary New Release K.C. 2019-10-10

Topway Smart LCD SGTools Handbook

Uploaded by

Copyright:

Available Formats

Topway Smart LCD SGTools Handbook

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Topway Smart LCD SGTools Handbook

Uploaded by

Copyright:

Available Formats

Handbook Smart LCD - SGTools

4.4.19 Indexed Icon (IDX) ................................................................................................................................... 36

Note: SGTools support Windows XP, Win7, Win10(Administrator Mode)

1.2 Smart LCD Connection Examples

HMT050CC-C connection example HMT070CE-C connection example

1.3 Quick Start Example

2.1 Smart LCD Highlight

2.2 SGTools Highlight

2.3 Functional Block

3 Smart LCD Features and Functions

3.2 Display and Functional Relationships

3.3 Page Elements

3.3.1 Action Type Elements

3.3.2 Character (Alpha Numeric) Type Elements

String Element is for displaying VP_STR content

Timer Display Element links to a timer addressed inside VP_N32.

3.3.3 Image Type Elements

Animation Element links to an IMG_ANI and shows it on the screen

3.3.4 Graphics Type Elements Details

Graph Element display graphical plot of the VP_G16 content

3.4 Page, IMAGE Resource and VP Variables

3.4.1 Page and IMAGE Resource

range: -2147483647 ~ 2147483647

range: -9223372036854775807 ~ 9223372036854775806

groups of picture data in 1bpp

Special Register Variable for some of the system configuration.

VP_TMR Timer Variable Timer counter inside VP_N32

Note: VP variable is inside the Smart LCD RAM.

4.1 Editor Layout

① Menu Provide basic software operation,

② Tools bar There are four type of tools

⑤ Properties Window Display the selected element properties or Page properties

Note: Lua feature available on some of the model only

4.2 General Operations

4.3 Editor Menu

4.3.2 New Project (Menu - File - New Project)

It is important to ensure to select the correct screen size

After click the OK button, SGTools will

In this case, it creates

4.3.3 Open Project (Menu - File - Open Project)

4.3.4 Save (Menu - File - Save)

Save the current project

4.3.5 Save As (Menu - File - Save As)

4.3.6 Close Project (Menu - File - Close)

Close the current project

4.3.7 Editor Options (Menu - Tools - Options)

- fine adjust all the image color tone during compile

4.3.8 Project Setting (Menu - Tools - Project Setting)

*2. RTC mode

4.3.9 Font Setting (Menu - Tools - Font Setting)

Font Config <1> Table

Build Font <1> Build Font <2>

4.3.10 Built Project Files (Menu - Tools - Built Project Files)

4.3.11 Download to Module (Menu - Tools - Download to Module)

Note. Graphics Editor will refuse to download without

4.4 Elements Configurations

4.4.1 Touch Key (TPK)

Properties Control (advance feature)

*4. TPK Visual Effect - Inverse Color Operation Idea

*5. TPK Visual Effect - Show Cropped BgImage Operation Idea