STM32-based Jinpeng Serial Screen GUI Development: Rapid HMI Implementation

In modern embedded system design, the Human-Machine Interface (HMI) has become increasingly crucial. An intuitive, visually appealing, and responsive Graphical User Interface (GUI) not only elevates a product's perceived quality but also significantly enhances user experience. However, traditional TFT color LCD module development often entails complex low-level driver writing, frame buffer management, and graphics library porting, posing a substantial challenge for projects with tight schedules.

Jinpeng Industry, a National High-Tech Enterprise with 21 years of experience, specializes in the R&D and manufacturing of serial screens, TFT color LCD modules, and OLED display modules. Addressing this pain point, we offer high-performance serial screen solutions. This article, in conjunction with the widely used STM32 microcontroller, will provide a detailed guide on how to leverage Jinpeng serial screens to rapidly build high-performance HMIs.

1. Why Choose Jinpeng Serial Screens?

配图1

Jinpeng serial screens are more than just display modules; they integrate high-performance graphics processors, video memory, and touch controllers. Their core advantages lie in:

Simplified Development: All display and interaction operations are accomplished through a simple Universal Asynchronous Receiver-Transmitter (UART) interface, eliminating the need to delve into complex low-level hardware details.
Reduced MCU Load: Most graphics rendering and logic processing are handled by the serial screen's internal processor, significantly freeing up STM32's computational resources for core control logic.
Rapid Iteration: We provide an intuitive PC-based graphical development tool supporting drag-and-drop design, enabling GUI layout and interaction logic design without writing complex code.
Rich Functionality: Support for various common controls such as images, text, buttons, sliders, progress bars, and charts, meeting the requirements of the vast majority of application scenarios.
Stability and Reliability: Jinpeng Industry's 21 years of manufacturing experience ensure high product quality and long-term stability, suitable for demanding environments like industrial control, medical equipment, and smart homes.

2. Jinpeng Serial Screen GUI Development Workflow

配图2

GUI development with Jinpeng serial screens primarily consists of two phases: PC-side interface design and STM32-side driver development.

2.1 PC-side Interface Design

Jinpeng provides a companion graphical development software (e.g., JP-Studio). Developers can accomplish the following tasks on a PC:

New Project: Select the corresponding serial screen model and resolution.
Resource Import: Import necessary images, fonts, and other resources into the project.
Interface Layout: Drag and drop controls like buttons, text boxes, and progress bars from the control library onto the canvas, and set their properties (position, size, color, image, etc.).
Interaction Logic Design: Add event handling logic to controls. For instance, navigate to another page when a button is clicked, or send specific serial commands.
Compilation and Download: Compile the designed interface into a binary file and download it to the serial screen via USB or serial port.

2.2 STM32-side Driver Development

Communication between STM32 and the Jinpeng serial screen is based on the standard UART protocol. Driver development primarily involves:

UART Initialization: Configure the STM32 UART interface, setting the baud rate (typically 115200bps or higher), data bits, stop bits, and parity.
Sending Commands: Encapsulate functions to send commands according to the Jinpeng serial screen's communication protocol. Examples include updating text box content, setting slider values, and switching pages. Commands typically consist of a frame header, command code, data, and a frame footer.

// Example: Encapsulation of command to update text box content
void JP_Screen_SetText(uint16_t control_id, const char *text) {
    uint8_t frame_header[] = {0xEE, 0xB1, 0x10}; // Hypothetical frame header and command code
    uint8_t frame_tail[] = {0xFF, 0xFC, 0xFF, 0xFF}; // Hypothetical frame footer
    
    // Send frame header
    HAL_UART_Transmit(&huart1, frame_header, sizeof(frame_header), HAL_MAX_DELAY);
    
    // Send control ID
    uint8_t id_buf[2];
    id_buf[0] = (control_id >> 8) & 0xFF;
    id_buf[1] = control_id & 0xFF;
    HAL_UART_Transmit(&huart1, id_buf, 2, HAL_MAX_DELAY);
    
    // Send text content
    HAL_UART_Transmit(&huart1, (uint8_t *)text, strlen(text), HAL_MAX_DELAY);
    
    // Send frame footer
    HAL_UART_Transmit(&huart1, frame_tail, sizeof(frame_tail), HAL_MAX_DELAY);
}

Receiving Data: Handle data sent back from the serial screen. This is typically done using serial port interrupts or DMA. The received data may contain information such as touch events and control state changes. It needs to be parsed according to the communication protocol, and corresponding actions should be executed.

// Example: Serial port receive interrupt service function
void HAL_UART_RxCpltCallback(UART_HandleTypeDef *huart) {
    if (huart->Instance == USART1) {
        // Put received data into a ring buffer
        RingBuffer_Write(&rx_buffer, rx_data);
        
        // Trigger data processing task (e.g., set a flag)
        data_ready_flag = 1;
        
        // Re-enable receive interrupt
        HAL_UART_Receive_IT(&huart1, &rx_data, 1);
    }
}

// Example: Data parsing main loop
void Process_Screen_Data(void) {
    if (data_ready_flag) {
        data_ready_flag = 0;
        // Read data from buffer and parse based on protocol
        // ... parsing logic ...
        if (is_button_click_event) {
            // Handle button click event
            uint16_t button_id = get_button_id();
            if (button_id == ID_START_BUTTON) {
                // Start the device
                Start_Device();
            }
        }
    }
}

3. Practical Application Case: Smart Temperature and Humidity Monitoring System

配图3

Let's examine a simple smart temperature and humidity monitoring system case to see how Jinpeng serial screens simplify development.

Requirements:

Display current temperature and humidity.
Display temperature change curve.
Set temperature alarm threshold.
Control fan switch via a button.

Implementation Steps:

PC-side Design:
- Create the interface using JP-Studio.
- Place two text controls to display temperature and humidity numbers.
- Place a chart control to display the temperature trend.
- Place a slider control to set the alarm threshold, and use a text control to display the current setting.
- Place a switch button control to control the fan.
- Set IDs for each control.
STM32-side Development:
- Initialize UART.
- Periodically read temperature and humidity sensor data in the main loop.
- Use the JP_Screen_SetText command to update the temperature and humidity text controls.
- Use a specific command to add new temperature data points to the chart control.
- Parse slider and button events in the serial port receive interrupt.
- When a slider value change event is received, update the alarm threshold variable and the text control displaying the threshold.
- When a button click event is received, control the STM32 GPIO pin to drive the fan and update the button control's state display.

In this manner, complex GUI development that would originally take weeks or even months can now be completed in just a few days or even hours, dramatically improving development efficiency.

4. Jinpeng Serial Screen Selection Guide

Jinpeng Industry offers serial screens in various specifications to meet the needs of different application scenarios. When selecting, consider the following factors:

Screen Size: Ranging from 2.4 inches to 10.1 inches or larger, choose the appropriate size based on product product design.
Resolution: Higher resolution means finer display effects but also requires stronger graphics processing power and more memory.
Touch Screen Type: Resistive touch screens are lower cost and suitable for industrial environments; capacitive touch screens support multi-touch, offer a better experience, and are suitable for consumer electronics.
Interface Type: Besides standard UART, some models support industrial bus interfaces like RS232 and RS485.
Operating Temperature: Industrial-grade products need to support a wider operating temperature range (e.g., -20°C to +70°C).

As a National High-Tech Enterprise with 21 years of focus on the R&D and manufacturing of serial screens, TFT color LCD modules, and OLED display modules, Jinpeng Industry possesses a comprehensive product line and a professional technical support team. Whether you are designing a new product from scratch or upgrading an existing product's HMI, we can provide the most suitable solution and comprehensive technical support.

5. Conclusion

Jinpeng serial screens offer an efficient and convenient solution for embedded system HMI development. By offloading graphics processing tasks from the MCU to the serial screen and utilizing intuitive graphical development tools, developers can focus on core business logic, significantly shorten development cycles, reduce development costs, and create high-performance GUIs with excellent user experience. Combined with the powerful STM32 microcontroller, Jinpeng serial screens are undoubtedly an ideal choice for building modern human-machine interfaces.

If you are interested in Jinpeng serial screens or encounter any issues during development, please feel free to contact us. We are dedicated to serving you!