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.
Figure 1 Effect Diagram of Drop-down Menu
The process of creating a drop-down menu above is divided into the following four steps:
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.
Figure 2 Icon and Picture Materials
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.
Figure 3 Interface Diagram of Language Selection
Then add two buttons on the position of “Chinese” and “English” in 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.
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.
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.
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.
Figure 6 Attribute Settings Window of Pop-up 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.
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.