A New Way to Develop Embedded System UI - Smart TFT LCD
July 07, 2021
As the Internet Of Things is growing in popularity, Human Machine Interface is needed in more and more places, such as automobiles, industry control, medical devices, smart homes, and so on. Traditionally, implementing machine interface on LCD is a very tedious job. It is not the case for Topway Smart TFT LCD.
A Topway Smart TFT LCD with embedded MPU, controller, driver and touch panel brings completedly new benefits to your HMI development.
- Graphical UI Editor, enables quick user interface construction, speeds up product’s time-to-market
- Preloaded UI design in smart LCD, provides speedy showing and updating
- Embedded display engine, reduces main board workload and over-all cost
- Built-in Lua Script language engine, empowers rich and friendly user interface
- RJ45 port, supports long-distant update and easy expansion
- Unified body, improves EMC performance and increases reliability
To demonstrate the ease of use and power of Smart TFT LCD, we are going to use HMT070ETD-C to implement a classic game, Tetris.
Tetris game rule
A random block is generated (out of 7 shapes: T, S, Z, L, reverse L, bar & square) and dropped from top of screen. While the block is falling, player uses Left, Right, Up and Down keys to move the block or rotate it. At last, the block stops at the screen bottom. And the game checks whether a row is fully filled and need to be cleared. At the same time, score is updated.
Lua program design
Base on Tetris game rule,
- Define necessary data structure
- Draft out processing functions
- Plan out the game main routine
HMI interface design
It is going to be implemented on a resistive touch TFT LCD display. We need to consider:
- Interface design style
- How to connect a block with program data structure
- How to connect control buttons to program logic
- Update of score
The Lua program is embedded into Smart TFT LCD’s design project. Below is the program logic.
Game Scene Data Structure
Construct game scene
function Scene: ctor()
Input: scene name
Output: 12x21 scene
Scene data is stored as array.
Define block data
A three dimensions array holding a block’s possible 7 shapes and 4 rotations.
Clear / Show block
function Scene: Set(x, y, value)
Input: “x, y” block coordinate; “value” for display control, 1 – show, 0 – no show
Output: result in block is shown or cleared
This is a base function of the game. It is called by other functions (function Scene: ClearLine(); function Scene:Clear()) to display and clear block.
Obtain block address
function makeKey(x, y)
Input: block’s coordinate
Output: the block’s corresponding memory address
This function is called by function Scene: Get(), used for determining whether action is legal.
Generate new block
function BlockPrint(index, trans)
This function uses math.random() to generate one of the 7 shapes and displays the block in top-right “next” window.
function RawPlace(index, trans, scene, newX, newY)
Input: block index, status, scene and coordinate
Output: “true” block is put into new place; “false” cannot put block there
The function puts block into game scene’s new coordinate then updates screen if possible.
function Block:Move(deltaX, deltaY)
Input: deltaX – move left or right; deltaY – move down
Output: new location after move
This function is called while block is dropping.
Input: the dropping block
Output: new location after rotation
Timer & delay
Use hmt.gettick() as timer, and hmt.delayms() as delay.
Check scene after block reached bottom
Input: scene array
This function does 3 things: check if any row can be cleared; clear row and move above blocks down; update score and increase drop speed.
When game is over, this is called to show reset game scene.
Game Graphic Design
Using Topway’s free LCD UI editor, user can quickly “draw” out interface design.
Tetris interface has four parts:
- Main activity window, 12 x 21
- Next block indicator, 4 x 4
- Buttons area, 4 buttons
Each block on screen is presented with an icon control, and it is associated with variable. When variable value is “1”, the block is displayed, otherwise it is hidden.
There are four touch areas on the screen, associated with four memory addresses. Lua script reads these addresses to determine which button user press.
Next block indicator is a 4x4 icon control.
Score is a numeric control and it is linked with a variable.
You can see the project in action here. From the video you can tell the embedded system is pretty powerful. Game play is smooth and quick. The Smart TFT LCD not only handles the game logic but also takes care of display and touch function, all by itself.
With Topway Smart TFT LCD, engineer can quickly complete LCD UI design, load it into the embedded screen and run. Migrating some program logics into the TFT LCD’s Lua script further reduces your main board and communication work load.
For completed project source code, click here.
And you can see the project in action here. https://www.youtube.com/watch?v=yy_REFinua4