Zephyr GUI Development with GUI Guider

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Zephyr GUI Development with GUI Guider

Zephyr GUI Development with GUI Guider

zhenhualuo_2-1793267958436.jpeg

In recent years, Zephyr has gained strong momentum in embedded development. With broad hardware support, an active open-source ecosystem, and flexible extensibility, it is increasingly being used in consumer electronics, IoT devices, and industrial control systems. At the same time, as embedded products place higher demands on graphical user interfaces, developers are looking for more efficient ways to design GUIs and deploy them quickly on Zephyr-based platforms.

This article uses GUI Guider 2.0.1, the i.MX RT1064-EVK development board, and the RK043FN66HS-CTG display as an example. It walks through the complete workflow, from UI design and Zephyr application export to project build, flashing, and runtime verification, so you can get your designed interface running on the board with confidence.

Let’s start with the development environment and complete this hands-on GUI Guider and Zephyr workflow step by step.

1. Set Up and Verify the Zephyr Development Environment

Before getting started, follow the Zephyr development environment setup section in the official GUI Guider User Guide. Then use an official sample to confirm that the target board can be built, flashed, and run successfully.

2. Generate and Export the Zephyr Application

1. Create a Project and Generate Code

After creating an i.MX RT1064-EVK-based project in GUI Guider and completing the UI design, click Generate Code to generate the application code.

2. Export the Zephyr Application

Click OS > Zephyr to export the application to the target directory in your Zephyr workspace, for example: <zephyr-workspace>/gui_guider_demo

zhenhualuo_3-1793267958450.png

3. Check the Exported Files

After the export is complete, the application directory should contain the following files and folders:

gui_guider_demo/
├── CMakeLists.txt
├── prj.conf
└── src/
    ├── main.c
    ├── custom/
    └── generated/

  • CMakeLists.txt: defines the Zephyr application build entry point and specifies the source files to compile.
  • prj.conf: configures options such as LVGL, memory, and thread stack settings.
  • src/main.c: the application entry file, responsible for initializing the UI and starting the application logic.
  • src/custom/: stores custom business logic to avoid being overwritten when code is regenerated.
  • src/generated/: stores UI code automatically generated by GUI Guider. Direct modification is not recommended.

3. Build and Flash the Zephyr Application

Open a terminal, go to the root directory of the exported Zephyr application, and run the following commands:

west build -p always -b mimxrt1064_evk --shield rk043fn66hs_ctg .

west flash

Note: The . in the command indicates the current application directory. This applies to Windows, Linux, and macOS.

4. Verify the Runtime Result

Runtime verification: After flashing is complete, check that the screen displays the designed UI correctly and that touch interactions respond as expected. If these checks pass, the deployment workflow from GUI Guider to Zephyr is working properly.

Common issues:

  • No display output or abnormal UI behavior: check the serial log, display shield configuration, and display resolution settings in the GUI Guider project.
  • Out-of-memory errors during build or runtime: increase CONFIG_LV_Z_MEM_POOL_SIZE in prj.conf as needed.
  • Main thread stack overflow or unexpected reboot: increase CONFIG_MAIN_STACK_SIZE.

After updating the configuration, rebuild and flash the application again. The exact values should be determined based on the error logs, UI complexity, and available hardware resources.

5. Establish a Repeatable UI Iteration Workflow

After the first build and deployment are complete, you can iterate on future UI changes using the following workflow:

Regenerate code

→

Export Zephyr application

→

Build

→

Flash

→

Verify

 

To prevent custom logic from being overwritten when code is regenerated, keep business logic in the custom code area. It is also recommended to put both the GUI Guider project and the exported Zephyr application under version control.

Summary

GUI Guider provides a complete path from UI design to Zephyr application export. Once the initial environment setup is complete, future UI updates only require repeating the generate, export, build, and verify workflow. This can significantly reduce the effort required for UI iteration and board-level deployment.

No ratings
Version history
Last update:
Thursday
Updated by: