== Elements ==

=== Action Elements ===
[[File:TPK.png|64x64px]] '''Touch_Key (TPK)'''
Touch_Key Element is used on a page. User touching on its assigned area will trigger an event.
- Touch Key assigned area provides visual touch response (e.g. inverse color or show a icon, etc).
- The event will in turn report its ID (Page_ID / Key_ID, operated VP_address and value, etc) to the host machine.
- The event kicks off call functions to provide various kinds of actions (e.g. keyboards, value operations, page jump, etc.)

[[File:VPK.png|64x64px]] '''Virtual_Key (VPK)'''
Virtual_Key is a non-display element, like an event.
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
- 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 reset as 0
(note: VPK is active only when its parent Page is shown on screen)

'''[[File:SWP-PG.png|64x64px]] Swap_Page (SWP_PG)'''
Swap_Page Element is a full screen element. It allows user to jump to another PAGE
- Swipe action should start on screen area without any other touch element
- The action leads to two different PAGEs depends on the horizontal swiping direction (left-to-right or right-to-left)
- It will also report to the host machine about its Target Page_ID

'''[[File:TPK-RPT.png|64x64px]] TPK_Repeat (TPK_RPT)'''
TPK_Repeat is an element (similar as TPK) which captures long-press input.
- Its assigned area provides visual touch response (e.g. inverse color or show a icon, etc)
- It only provides VP:=VP+value function
- Long-press will repeat the VP:=VP+value function (using negative value can provide subtract function)
- It will also report to the host machine about its ID (Page_ID / Key_ID, operated VP_address and value, etc)

'''[[File:TPK-SW.png|64x64px]] TPK_Switch (TPK_SW)'''
TPK_Switch is an element that provides bit operation
- Touch Switch assigned area provides visual touch response (e.g. show a icon, etc)
- Touching the element will toggle its linked VP's bit value (0-to-1 or 0-to-1)
- It will also report to the host machine about its ID (Page_ID / Key_ID, operated VP_address and value, etc)

'''[[File:SDR.png|64x64px]]Slider (SDR)'''
Slider is an element that provides 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
- It saves input value to linked VP, proportional to user slid position.
- It will also report to the host machine about IDs (Page_ID / Key_ID, operated VP_address and value, etc)

'''[[File:SDR2.png|64x64px]] Slider_2 (SDR2)'''
Slider_2 is a full screen element (similar as SDR) operated by two points touch
- Two points touch should start on screen area without any other touch element.
- It can be defined as Horizontal or Vertical slide with Gain options
- It does not provide visual response
- It saves an input value between Min/Max corresponding to slid distant
- It will also report to the host machine about IDs (Page_ID / Key_ID, operated VP_address and value, etc)

'''[[File:RNG.png|64x64px]] Ring (RNG)'''
Ring is identical to Slider element, but with dial action

'''[[File:RNG2.png|64x64px]] Ring_2 (RNG2)'''
Ring_2 is a full screen element same as Slider_2, with 2 touch points spin
note: Elements overlapped in the PAGE might affect the display result

=== Character Elements (Alpha Numeric Elements) ===
'''[[File:STS.png|64x64px]] Static String (STS)'''
Static String Element shows text string defined by its properties directly

'''[[File:STR.png|64x64px]] String Element (STR)'''
String Element is for displaying VP_STR content
- Display the VP_STR content in PAGE with alignment and formatting
- String Element shows linked VP's content in real-time

'''[[File:STR SCR.png|64x64px]] Scrolling String (STR_SCR)'''
Scrolling String Element 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
- Scrolling direction could be config as horizontal or vertical with speed options
- Scrolling String displays linked VP's value in real-time

'''[[File:Num.png|64x64px]] Number Element (N16, N32, N64)'''
Number Element is for displaying numeric value in different data types, 16bit, 32bit or 64bit
- Display the content in PAGE with alignment and formatting
- Number Element shows linked VP's numeric value

'''[[File:TMR.png|64x64px]] Timer Display (TMR)'''
Timer Display Element links to a timer addressed inside VP_N32
- It Display the timer value with alignment and formatting

'''[[File:RTC.png|64x64px]] Real Time Clock (RTC)'''
Real Time Clock Element shows the Smart LCM internal clock with formatting.
note: Elements overlapped in the PAGE might affect the display result

=== Image Elements ===
'''[[File:ICO.png|64x64px]] Static Icon (ICO)'''
Static Icon Element links to an IMG_ICO and shows it on screen

'''[[File:ANI.png|64x64px]] Animation Element (ANI)'''
Animation Element links to an IMG_ANI and shows it on the screen
Its animation speed could be defined

'''[[File:IDX BIT.png|64x64px]] Bit Icon (IDX_BIT)'''
Bit Icon Element links with one bit value of VP_N16 or VP_N32
which could point to an IMG_ICON and display accordingly with its value

'''[[File:IDX.png|64x64px]] Indexed Icon (IDX)'''
Indexed Icon Element links with VP_N16 or VP_N32 which could point to an IMG_ICON and display accordingly
If the value in side the VP is outside the defined max/min rang, it will display nothing

'''[[File:IDX DEC.png|64x64px]] Decimal Icon (I16, I32)'''
Decimal Icon Element links with VP_N16 and display as decimal formatted icons
It should linked with 12 icons for full operation
(where the indexed picture sequence is 0~9, dot, minus)

note: Elements overlapped in the PAGE might affect the display result

=== Graphics Elements ===
[[File:HND.png|64x64px]] '''Tachometer - Hand Mode (HND)'''
Hand Element link with VP_N16 or VP_N32 which show as a meter display accordingly.
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

'''[[File:TCM.png|64x64px]] Tachometer - Icon Mode (TCM)'''
Tachometer Element link with VP_N16 or VP_N32 which show a rotating icon or show a angular section of an icon as a meter accordingly

[[File:R16.png|64x64px]] '''Tachometer - Donut Mode (R16, R32)'''
Donut Element links with VP_N16 or VP_N32 and display a ring based on its value.
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

[[File:B16.png|64x64px]] '''Progress Bar (B16, B32)'''
Progress Bar Element links with VP_N16 and display a bar based on its value.
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

[[File:G16.png|64x64px]] '''Graph Element (G16)'''
Graph Element display graphical plot of the VP_G16 content
It provide real time update of the VP_G16 value

[[File:BP1.png|64x64px]] '''Bitmap Element (BP1)'''
Bitmap Element display a mono picture content which store inside VP_BP1
it show picture in 1bpp and provide LUT for mapping 0 and 1 to different defined color
It can real time update with the VP_BP1 value

[[File:CLK-R.png|64x64px]] '''Round Clock (CLK_R)'''
Round Clock Element shows the Smart LCM internal clock with hands.
It can also generate the meter face with marking as well.

[[File:QRC.png|64x64px]] '''QR Code Element (QRC)'''
QR Code Element generates a QR code with a linked VP_STR

[[File:DPD.png|64x64px]] '''Draw Pad (DPD)'''
Draw Pad Element is an element that execute a drawing function that store inside VP_N16
which point by its properties VP_address. Once the command value updated, the drawing will be updated in real time. ICON can also be shown by command.
note: Elements overlapped in the PAGE might affect the display result

== Resources ==

=== PAGE and IMAGE Resources ===
'''[[File:PAGE.png|48x48px]] Page (PAGE)'''
Page is the basic unit of display
It links to elements and background Image(background color) predefined in Editor

'''[[File:PAGE.png|48x48px]] Template Page (PAGE)'''
Template Page is a overlay for pages
Elements in the Template Page can overlay over a range of pages specified
(e.g. place a TPK to jump to home page in a Template, then all pages can have that key for home function)

'''[[File:BKG IMG.png|48x48px]]Background Image (IMG_BKG)'''
Background Image is one of the Picture Resources. Picture files could be imported into Editor as Background Image. It could also be used (automated crop) as TPK touch down effect image.

'''[[File:ICO IMG.png|48x48px]] Icon (IMG_ICO)'''
Icon is one of the Picture Recourses
Icon files could be imported in to the Editor and linked by various elements (e.g. TPK ,IDX ,I32/16 ,B16 , ICO, etc)

'''[[File:ANI IMG.png|48x48px]] Animation (IMG_ANI)'''
Animation is one of the Picture Resources
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.

=== VP Resources ===
'''[[File:VP STR.png|48x48px]] String Variable (VP_STR)'''
String Variable with 128bit length for character strange storage (note: content must end with "\0')
The memory space could be allocated in Editor, and link and display by elements like STR, QR code, etc.

'''[[File:VP N16.png|48x48px]] 16bit Integer Variable (VP_N16)'''
range: -32767~32767
The memory space could be allocated in Editor, and linked and display by elements like N16, IDX, I16, VPK, etc.

'''[[File:VP N32.png|48x48px]] 32bit Integer Variable (VP_N32)'''
range: -2147483647 ~ 2147483647
The memory space could be allocated in Editor, and linked and display by elements like N32, I32, etc.

'''[[File:VP N64.png|48x48px]] 64bit Integer Variable (VP_N64)'''
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.

'''[[File:VP G16.png|48x48px]] 16bit Graph Variable (VP_G16)'''
groups of 16bit integer values for graphical-curve display data storage
Range: -32767 ~32767 (-32768d (0xFFFF) is reserved value)
The memory space could be allocated in Editor, and linked/display by elements G16, etc

'''[[File:VP BP1.png|48x48px]] Bitmap Variable (VP_BP1)'''
groups of picture data in 1bpp
The memory space could be allocated in Editor, and linked/display by element BP1

'''[[File:VP REG.png|48x48px]] Register Variable (VP_REG)'''
Special Register Variable for some of the system configuration
Timer Control, RTC Control, Buzzer Control, Backlight Control, Screen Saver Control, Code Page Control, Country Code Control

'''[[File:VP TMR.png|48x48px]] Timer Variable (VP_TMR)'''
Timer counter inside VP_N32
note: VP variable are inside the Smart LCD RAM

Operations

2025-06-18T02:31:03Z

Usr230: /* Items Descriptions */

== Display Elements and Functions Operation Links ==
[[File:SGT-linking.png|894x894px]]

== Items Descriptions ==
'''PAGE'''
Each display interface is a PAGE.
It is the container of a UI screen.

'''Element'''
29 elements could be used 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.

'''Image'''
Image include background images (IMG_BKG), icon images (IMG_ICO) and animation images (IMG_ANI).
They are used(linked) with PAGE or Element to provide visual presentation.

'''VP Variable'''
VP Variable is a RAM area to hold functional variable values.
They could be accessed by host via serial port command, Element's value operation or on screen Keyboard etc.

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

SLD Introduction

2025-06-18T02:11:35Z

Usr230: /* TOPWAY Smart LCD */

== TOPWAY Smart LCD ==
'''TOPWAY Smart LCD''' (SLD) provides a display engine with 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 user.

Host data can be displayed in real time with the communication protocols.

UI designs are implemented under usage of '''TOPWAY SGTools''' allowing designs with zero coding. It dramatically simplifies and speeds up the whole product design process.

== Smart LCD Highlight ==
=== Speed Up the Project ===

* [[File:Response ring.png|right|640x640px]]Simplify the UI design
* Easily realize the Embedded display
* Faster work flow – Load and Play

=== Suppress the BOM cost ===

* Reduce host MCU workload from display and touch responses
* Save cost by using low-tier MCU for the project
* Preserve memory space by preloading UI into Smart LCD

=== Increase Reliability ===

* Shorter Hi-Freq display signal path improves EMC performance
* All-in-one construction boosts ESD protection level
* Robust RS-232C interface for minimal data transfer
* Reliable packet protocol ensures reliable communication

=== Reduce MCU loading ===

* Host data could be accepted at any moment
* Free host from display generation and user input response

=== Easy to use ===

* Direct connect the USB terminal to PC for development
* Optional UI refresh via OTG after product launched
* 256Mbyte Flash (vary by model) for interface pictures preload (more than 300 pictures(800x480) for example)

== Functional Blocks ==
[[File:FunctionalAdvantage.png.png|640x640px]]

== SGTools Highlight ==

* Free professional user interface design software
* page base UI design
* Various kind of touch screen effect available
* User friendly work space
* Support various countries fonts, 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