A New Way to Develop Embedded System UI - Smart TFT LCD

July 07, 2021

Product

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.

Requirement Analysis

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

Lua Program

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

cBlockArray[]

A three dimensions array holding a block’s possible 7 shapes and 4 rotations.

Game Functions

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.

Check block

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.

Move block

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.

Rotate block

function Block:Rotate()

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

function Block:Check()

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.

Initialize game

function Block:lifeDown()

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.

Game scene

Tetris interface has four parts:

• Main activity window, 12 x 21
• Next block indicator, 4 x 4
• Score
• Buttons area, 4 buttons

Block design

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.

Button design

There are four touch areas on the screen, associated with four memory addresses. Lua script reads these addresses to determine which button user press.

Information Section

Next block indicator is a 4x4 icon control.

Score is a numeric control and it is linked with a variable.

Summary

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