UI Interface Design
Today we are doing a simple home control. Through PS, I have designed this simple interface as follows.
Function: When the light button is pressed, the page jumps to the next picture, showing the switching status of the three lights. When the light switch button is pressed, the serial port of the screen module sends out the switch signal protocol. The external MCU can send data directly to the screen module via the serial port.
This allows the screen to display the on/off status of the lights directly.A new project with TOOL 2019
The latest version of STONE TOOL 2019 is available for download on the STONE website and allows you to work on UI projects.STONE TOOL 2019 is a no-installation design tool that can be opened and run directly after downloading and unzipping. The details are as follows.
Double click on the software icon to open the STONE TOOL software.
Then click on the “file” button in the top left corner to create a new project.
As I am using STVC050WT-01, the resolution is 480*272, the default Flash space size is 128Mbyte (expandable to 1024MByte), so I choose 128Mbyte here.
Set the project name and storage path, then click “OK” to finish.Adding UI pictures
Add the two UI icons we have prepared for the project by right-clicking on the “picture” directory.
Adding a button
We want to add a function to the “Light” button on the first UI screen in the STONE TOOL software: when you click on the “Light” button, it will jump to a second page.
Click on the “Button” icon and draw the area of the button.
The yellow part indicates the area of the button drawn by the user. The properties of the button are listed in the properties section on the right-hand side of the STONE TOOL software.
Simply set the “pages witch” option to 1 to switch to a second page when the button is pressed.
Once this is done we click on “Tool” inside the “Generating configuration file”, then on “Virtual serial port screen” and we can see the virtual runtime effect.
We then proceed to change the arrow in the top left corner of page 2 to a button.
When the user presses this button, it returns to the first page.
Adding text to the display
Using the Text variable control, circle the blank space behind “light1”.
Then click on the Text Variable you have just added, and the properties screen will appear on the right of the STONE TOOL software, changing the following parameters.
Among them, “Variable memory address” means the memory address where the display content is stored, an address can store two Bytes, our default display content is “OFF”, which requires three Bytes of Our default display is “OFF”, which requires three bytes of memory space, so we change “Word Length” to 4, which takes up two memory addresses. This means that we are storing “OFF” at addresses 0020 and 0021.
Buttons with return values
The control we used above is “Button”, which has no return value, meaning that the serial port of the display module does not send data to the MCU when the user presses the button.
If we want the display module to return data to the MCU when the user presses the button, we can use the “return pressed key value” control.
You must be logged in to reply to this topic.