In this guide, we shall use EEZ Studio GUI designer to design simple UI, export it and integrate it with your LvGL project.
In this guide, we shall cover the following:
- What is EEZ Studio.
- Downloading EEZ Studio.
- Creating UI.
- Integration.
- Results.
1. What is EEZ Studio:
EEZ Studio is an open-source software tool designed for creating graphical user interfaces (GUIs) for embedded systems, particularly for devices like microcontrollers and other hardware platforms. It allows developers to design and implement sophisticated interfaces using a drag-and-drop visual editor without requiring extensive coding for the UI elements.
Key features of EEZ Studio include:
- Drag-and-Drop Interface: Users can create interfaces by simply dragging and dropping elements like buttons, sliders, gauges, and other widgets onto the workspace, making it easier to visualize and design the UI.
- Code Generation: Once the interface is designed, EEZ Studio can generate the necessary code (usually in C/C++) that can be integrated into the firmware of the embedded system. This streamlines the development process by reducing the need to manually code the UI.
- Support for Popular Libraries: EEZ Studio often works with popular graphics libraries like LittlevGL (LvGL), which provides the backend for rendering the graphical elements on the hardware.
- Real-Time Preview: Developers can preview how the UI will look and behave on the actual hardware or in an emulator, allowing for immediate feedback and iterative design.
- Cross-Platform: The tool is designed to work across different operating systems, making it accessible to a wide range of developers.
- Open-Source: Being open-source, EEZ Studio encourages contributions from the community, which helps in improving and expanding its functionality.
EEZ Studio is particularly useful for developers working on embedded projects that require a modern, responsive, and user-friendly interface, such as control panels, meters, or other interactive devices.
2. Download EEZ Studio:
First head to their github repository from here.
Select the version to download according to your operating system:
Note: Windows version needs to be install while macOS can be run once you decompressed the zip file.
3. Creating the UI:
Before we create the UI, make sure that the LvGL is working properly.
This guide shall use STM32F429-Disco as base.
For full guide how to develop LvGl for this board, check these three part:
- Getting Started with LvGL V9 with STM32F429-disco Part1: Environment setup
- Getting Started with LvGL V9 with STM32F429-disco Part2: LCD and Touch Initialization
- Getting Started with LvGL V9 with STM32F429-disco Part3: LvGL Integration
Open EEZ Studio and create new project as following:
- Click on Create.
- Select LvGL alone without EEZ Flow.
- Make sure to select V9.
- Give the project a name.
- Click on Create Project.
After the creation, we need to do some minor modification.
First we need to set the resolution as following:
Make sure that you are in pages, select main.
From right, in properties, set the width and hight according to your display (240×320 respectively in this case).
Next, in settings, we need to configure the width and hight again as following:
Now, we are ready to create the UI.
From the main page, create this simple UI by drag and drop toggle switch and bar as following:
Next, from user actions, add toggle LED action which later in part 2 shall be used.
Next, click on the toggle switch and from events, add new even handlers as following:
In the event handler, select when click and ToggleLED as action as following:
Next, save the project, check and build as following:
4. Integration:
Open the generated UI project and select the UI folder and simple drag and drop the folder next to the lvgl folder of your project as following:
Next, add the UI path to the project as following:
Right click on the project and select properties:
Note: Make sure also in source location that driver is also exists.
In main.c file:
Include the UI header files as following:
#include "ui.h"
At the final initialization before the while loop, initialize the UI as following:
ui_init();
In the while loop, after the lv_timer_handler function, add the following:
ui_tick();
Next, outside the main function, declare the following:
void action_toggle_led(lv_event_t * e)
{
}
This later shall be used to control the LED and now it is needed for the code to be compiled.
Save the project, build it and run it on your STM32F429-Disco.
5. Results:
Later, we shall control the progress bar and the LED.
Stay tuned.
Happy coding 😉
Add Comment