This project’s aim is to design a display interface for controlling a Servo motor. The Servo angle or position is changed either by dragging or pressing the button on the LCD display interface. The interface is built on a 4.3-inch touch display and programmed using an STM32 development board.
Components Required
- STONE 4.3-inch serial screen (display resolution of 480×272)
The serial screen is a type of screen that is controlled by the serial port. This screen saves a lot of time as it requires no programming and is perfect for those who use microcontrollers in designing the UI. By using this screen, you can get some common spaces through simple settings and there is no need to write the code for the UI implementation.
- Stm32 development board (atomic f103 development board)
Designing the GUI
First of all, the interface of the serial port screen is designed. You can design a picture of the same using paint or any other similar tool. For each key effect, a particular image should be designed. For example, here I have designed separate display pictures for the separate key effect:
The original image is displayed when the screen is turned ON. In other words, it is the foreground display picture. Whereas the second picture with the corresponding position is displayed when the +ve or -ve position buttons are pressed.
Step 1: Downloading the GUI design software
To design the GUI, download this free GUI design software from the link given below: https://www.stoneitech.com/support/download
Step 2: Create a New Project
After installing the software, open it, and create a new project. Since the resolution of the display screen is 480×272 px, select this resolution in the project details. I want to use the screen horizontally, so all other options are set to default.
Step 3: Add relevant images in the project
Add the designed picture you want to use in the GUI. The picture name must start with a number, although there are no special requirements for the specified number. The size of the picture should be consistent with your screen resolution, otherwise, it will prompt an error.
Here I have added the two pictures, the default or foreground display picture is named as number 2. For this, I changed the screen settings inside the startup picture display. In this setting, the startup display picture corresponds to picture number 2.
Step 4: Add Icon Images
If your project has different types of image files, you need to create several .ico folders to store different types of icon images.
Step 5: Add a touch button area
On the right side of the interface, there is a hotkey area where you need to modify the storage address and the adjustment method. For the same operation or function of the -ve side, the storage address is made the same as the + address.
Step 6: Add a Sliding Control
Under the variable configuration column, select the slider scale. In the right column, modify the slider file and slider icon properties that you want to display over the image.
Adjust the size of the slider scale control so that it fits your scale value. But keep in mind that the icon may exceed the lower scale. So, you can control the slider scale control by adjusting the size of the slider scale control. Or adjust the offset of X coordinate to align it, try to generate a project to debug it to see if the position is suitable.
There are other properties of the sliding scale control that need to be modified: the stored address corresponds to the +ve and -ve address and the minimum and maximum scale corresponding to the scale bar at the bottom.
Step 7: Add drag and drop adjustment area
In the touch configuration toolbar drop-down menu, select the drag adjustment to place over the picture. Now adjusts it to the appropriate size and modify its properties. The storage address is still consistent with the above but the maximum and minimum value range needs to be adjusted.
Step 8: Adding Data Variables
Add a data variable and the data should be stored at the same address as above. This is mainly to display the data and to better observe the changes in the data.
After completing this step, you can download or run the simulation test. If there are no problems with the design of the serial screen, move on to write the microcontroller program.
Writing Program for the STM32 Microcontroller
I used STM32cube IDE software to write the program for the board. But before that, the configuration setting should be selected for STM32, and I’ll give a brief description of the configuration here.
- Open tim2 ch1 channel output PWM wave. The minimum adjustment is 1us for accuracy. The servo adjustment is 0° – 270° corresponding to the pulse of 0.5ms-2.5ms. After the configuration is complete, select the output frequency of 100K PWM wave.
- Open the serial port 1. Here I used the DMA, mainly a matter of habit, there is this more advanced configuration on the use of it. Get used to the future of the project also helps ah! The images given below are the screenshot of the configuration information. And after the completion of the configuration, you can generate code.
After the configuration is completed, you have to add the code. All you have to do is add the array and the serial port receives the completion flag data.
Here we add our code to turn on the idle interrupt and DMA receive before while(1).
Adding the post-receive code handler
a) On PWM Output, Idle Interrupt, DMA Receive Code
HAL_TIM_PWM_Start(&htim2,TIM_CHANNEL_1); HAL_UART_Receive_DMA(&huart1,buff,20); __HAL_UART_ENABLE_IT(&huart1,UART_IT_IDLE);
b) Add its own receive code to the receive interrupt of serial port 1 and update the flag bits.
if(__HAL_UART_GET_FLAG(&huart1,UART_FLAG_IDLE)==SET)
{
__HAL_UART_CLEAR_IDLEFLAG(&huart1);
UART_CLEAR_IDLEFLAG(&huart1); HAL_UART_DMAStop(&huart1);
//HAL_UART_Transmit_DMA(&huart1,rx_buff,temp);
HAL_UART_Receive_DMA(&huart1,buff,20); //HAL_UART_Receive_DMA(&huart1,buff,20);
USART1_RX_STA=1;//receive completion flag
}
c) In a regular project, the serial port processing function should be handled separately. But we don’t do it here because our function is relatively simple.
if(USART1_RX_STA==1)
{
USART1_RX_STA=0;
if ((buff[0]==0xa5)&&(buff[1]==0x5a))
{
data=(uint16_t)(buff[7]<<8|buff[8])*15/2+500;
__HAL_TIM_SET_COMPARE(&htim2,TIM_CHANNEL_1,data);//Modify the PWM duty cycle.
}
memset(buff,0,20);
}
After the completion of the entire project, compile and download the code to the board. It should be noted that the screen communication connections are of 232 and TTL types. My board is not connected to 232, so it is directly connected to the IO port. Here on the screen, there are J17 solder joints that need to be welded open.
Once the connections are made, switch on the board and start playing!
Through the motor +ve/-ve or dragging the slider, the data display box data is changed, while the servo will also follow the rotation of its angle.
And the project is complete. The entire UI design is based on the picture. The MCU development was relatively simple as the serial port is used which greatly reduces the burden on the developers.
