Animation Play Controlled by Button in TFT LCD


The variable icon, the animation icon and the incremental adjustment are usually used together to realize the animation state of simulating the operation of the equipment, and the start and stop of the animation controlled by the button in the STONE Intelligent TFT LCD Module. 

As shown in Figure 1, Figure. 1A is a still picture, and the “START” button is displayed in the lower right corner. When “START” is clicked, the left side starts to display the animation effect of the device operation, and the button changes to the “STOP” at the same time as shown in Figure. 1B. Click the “STOP” button in Figure. 1B, the animation of the left device stops playing, and the button changes to “START”, as the state in Figure. 1A.

Figure. 1A

 Figure. 1B



For basic instructions on the use of variable icon, animation icon, and incremental adjustment, refer to the relevant sections of the Intelligent TFT LCD Module 4.3 User Development Guide. This article mainly introduces the implementation of the button-controlled animation display mentioned above.

In the application of the variable icon and the animation icon control, firstly, the icon material and the icon file need to be made. The manufacturing method of which refers to the User Development Guide of Intelligent TFT LCD Module 4.3. Figure 2 shows the prepared icon materials, numbered in sequence, and generated an icon library file 0. ICO by the ICON generation tool. Among them, the Icon 0 to 11 are used for animation icons which shows a dynamic effect of the operation of the device by switching the icons in sequence, and Icon 13 to 14 are used to implement a variable icon effect of the “START” and “STOP” button.

Figure. 2 Icon materials



Create a new project and start adding the control manufacturing project:

Step 1: Create the animation icon


Add an animation icon control, and then set its attributes which are shown in Figure 3.


 Figure. 3 Animation icon attributes settings



The variable address in this figure is set to 0x0000, the stop value is set to 0, and the start value is 1, so that the sequential loop display between the START icon and the STOP icon could be realized by writing 1 in the 0x0000 unit.


Step 2: Create the variable icon


Add a variable icon control in the lower right corner, and the attributes settings are shown in Figure4.

Figure. 4 Variable icon control attributes settings



The variable address in this figure is set to 0x0000, with the variable lower limit set to 0 and the variable upper limit set to 1. The variable lower limit corresponds to Icon 13 (START button), and the variable upper limit corresponds to Icon 14 (STOP button).


Step 3: Add a button for incremental adjustment


Add an incremental adjustment button that covers the variable icon control. The purpose of adding the incremental adjustment button is to change the value in the 0x0000 unit by this button, and the attributes settings are shown in Figure 5.

Figure. 5 Incremental adjustment control attributes settings



The variable address in this figure is set to 0x0000, so that the data in the 0x0000 unit could become 1 through pressing the incremental adjustment button according to the attributes settings above. At this point, the variable icon shows the Icon 14, the “STOP” , and the animation icon begins to play the animation.Click the incremental adjustment button again, the data in the 0x0000 unit changes back to 0, the variable icon shows Icon 13, the “START”, and the animation icon control stops playing the animation.

After the attributes settings are completed, the running cycle is set in the screen parameter configuration of the tool. The running cycle is the cycle of variable refresh which determines the playing speed of the animation icon. Here, the project is set to 120ms. The configuration file is generated when the settings are completed. After the configuration file is generated, the simulation operation can be performed through the virtual HMI.