Instructions: TFT LCD Module Drop-down Menu

In the graphic interface design of Intelligent TFT LCD Module, users often require the implementation of  the effect of drop-down menu. For this requirement, a detailed instruction of how to create a drop-down menu is given below.


To realize the function of the drop-down menu, it is required to combine the pop-up menu with the variable icon control. In this case. Take the case project of language settings drop-down menu as an example to explain the steps required to create a drop-down menu. Figure 1 is an effect diagram of a language setting drop-down menu.


TFT LCD Module Instructions of the Drop-down Menu  TFT LCD Module Instructions of the Drop-down Menu  TFT LCD Module Instructions of the Drop-down Menu

Figure 1 Effect Diagram of Drop-down Menu


The process of creating a drop-down menu above  is divided into the following four steps:

Step 1: Prepare the materials


Prepare 4 pictures and 2 icon materials as shown in Figure 2. Picture 0 and 1 are two display status of the "pop-up menu" button made by the user. Pictures 2 and 3 are used to create two display states of the Chinese and English selection buttons. The icon is transparently displayed in the “Language” box. Refer to the “Intelligent TFT LCD Module 4.3 User Development Guide” to generate the ICON file "0.ICO" from the two icon material files.

TFT LCD Module Instructions of the Drop-down Menu

Figure 2 Icon and Picture Materials


Step 2: Create the Chinese and English selection buttons


Create the "Chinese" and "English" buttons on the language setting interface in Picture 2. As shown in Figure 3, click Picture 2 in the picture list window.


TFT LCD Module Instructions of the Drop-down Menu

Figure 3 Interface Diagram of Language Selection


Then add two buttons on the position of “Chinese” and “Englishin the picture, as shown in Figure 4. The button boxes need to be slightly smaller than the “Chinese” and “English” selection boxes in the background picture, so as to ensure that the two button controls are included into the drop-down menu display area in the third step.


TFT LCD Module Instructions of the Drop-down Menu

Figure 4 Add Chinese and English buttons


The button attributes need to be set after adding the buttons. During the attribute settings of the buttons, the button effect is set to Picture 3, the key value of Button 0 is set to 0000, and the key value of Button 1 is 0001. The problems related to key value settings will be described in detail in Step 3.


Step 3: Add the pop-up menu button

Add a pop-up menu button to Picture 0 and set its attributes. As shown in Figure 5, add a pop-up menu control on the picture with the range of the control box as the effective touch range. When you click this area on the screen, the corresponding drop-down menu will pop up.


TFT LCD Module Instructions of the Drop-down Menu                      

Figure 5 Add pop-up menu button


Next, set the attributes of the pop-up menu, and Figure 6 is the attribute settings window of the pop-up menu. The Button Effect in the attribute settings is set to Picture 1; The variable attributes requires the users to set the variable storage address on their own. The setting of variable storage address must be allocated reasonably according to the actual project of the user, which is set to 0010 in this case; Set the  page where pop-up menu is located as Page 2 in the menu attributes. Page 2 is the prepared language selection interface diagram, and then the pop-up menu effective display area is set as shown in Figure 7.


TFT LCD Module Instructions of the Drop-down Menu

Figure 6 Attribute Settings Window of Pop-up Menu


  TFT LCD Module Instructions of the Drop-down Menu

Figure 7 Select the Effective Display Area of the Pop-up Menu


Select the effective display area of the pop-up menu by dragging the mouse. Click OK, and the settings of effective display area of the pop-up menu are completed. The size of the display area needs to be appropriate so that the drop-down menu displayed can be aesthetically pleasing.


Next, set the display position of the pop-up menu on the Picture 0. Click the button located in display position to enter into drawing the display area in the Menu Attributes, and select the display position of the pop-up menu on Picture 0 (actually only the coordinate position in the upper left corner) by dragging the mouse. In order to display the words "select language" in the pop-up menu area in the language text box, the display position is set as shown in Figure 8. Click OK, and the pop-up menu attribute settings are completed.

   TFT LCD Module Instructions of the Drop-down Menu


Figure 8 Schematic Diagram of the Display Position of the Drop-down Menu


In the second step, two buttons are created in the display area of the pop-up menu, and the pop-up menu disappears when either button is clicked. Since the key values of the two buttons are 0000 and 0001 respectively, then pressing the Button 0 will return the key value 0000 to the set variable address 0010 unit, and pressing the Button 1 will return the key value 0001 to the variable address 0010 unit.


Step 4: Add a variable icon control


With the above design, it is possible to select Chinese and English from the drop-down menu, but it is still unable to display the selected language type in the language text box of Figure 1. In order to display the selected language type in the language text box of Figure 1, a variable icon control must be added to the language text box.


Add a variable icon control and set the attributes as shown in Figure 9. The variable storage address of the variable icon is consistent with that of the pop-up menu in the third step, which is also set to 0010. Select “0. ICO as the icon file with the variable lower limit of 0, and the upper limit of 1. The variable lower limit corresponds to Icon 0 (Chinese), and the variable upper limit to Icon 1(English)

Figure 9 Variable Icon Control and Attribute Settings


At this point, the entire designing process of drop-down menu is completed.


The drop-down language selection menu will be displayed when clicking the pop-up menu button. Click “Chinese”, and the pop-up menu disappears, 0000 is written into 0010 unit, and the Icon 0 (Chinese) will be synchronously displayed in the language text box; Click “English”, and the pop-up menu disappears, 0001 is written into 0010 unit, and the Icon 1 (English) is synchronously displayed in the language text box. After the configuration file is generated, the corresponding simulation operation can be verified through the virtual HMI.