- Introduction
GUI Guider is a user-friendly graphical user interface development tool from NXP that enables the rapid development of high quality displays with the open-source LVGL graphics library. GUI Guider's drag-and-drop editor makes it easy to utilize the many features of LVGL such as widgets, animations and styles to create a GUI with minimal or no coding at all.
In recent years, Smart Home has emerged rapidly and has a strong momentum of development. Smart Homes connect various household appliances and provide services such as lighting control, telephone remote control, burglar alarm and environmental monitoring. Smart Home applications are more and more widely used, but it is difficult for many developers to start. Using NXP GUI Guider can improve the development speed, reduce development difficulty, shorten development cycle.
This article mainly introduces the use of GUI Guider to realize some functions of Smart Home, and shares some common methods in the use of GUI Guider, including creating a new project, adding controls, adding events, interface design and layout, and controlling the lighting of hardware lights.
- Development environment
2.1 Hardware environment
Evaluation of LPC54628 -LPCXpresso54628, also applies to LPCxpresso54618, LPCxpresso54608.
2.2 Software Environment
This Smart Home demo uses GUI Guider version 1.5.1 to set up the software environment. GUI Guider version 1.5.1 supports LVGL versions 7.10.1 and 8.0.2. This introduction is based on version 8.0.2 LVGL.
Download link: https://www.nxp.com/design/software/development-software/gui-guider:GUI-GUIDER
- Create a new project
3.1 Double-click the GUI Guider icon to start the GUI Guider.
3.2 Click Create a new project (" Create a New Project ") button to start the project creation process.
3.3 select LVGL version v8.3.2 and click Next button.
3.4 Select LPC54628 as the target board template and click Next button.
3.5 Select empty application template EmptyUI and click Next.
3.6 Perform the project Settings, and set the project name, project location, and screen type (select RK043FN66H or RK043FN02H according to your screen type). Click Create to create the project.
3.7 After the project is created, the interface is as follows.
- Page Design and Layout
This section describes how to adjust the background color, layout, add various controls (Such as images, image buttons, text, and containers , etc), and set properties.
4.1 Create the image folder, and put the image resources needed in the project under the established image folder.
4.2 Adjust the background color of the interface
① Click the Background color icon to open the background color Settings.
② You can set the background Gradient or monochrome by using Gradient.
③ Then select the background color.
4.3 Add images
① Open Widgets control options.
② Click to add the Image control.
③ Then click the image shape button in the Attribute box of the property Settings, and “Select Images” will pop up.
In “Select Images”, select the image you want to add, click OK to add the image, and adjust the image size and position.
In the same way, you can add the "small house" image. In the Widgets box, you can view the added image and set the image name. In the Screen box, you can view the current interface and set the interface name.
4.4 Add text
① Open the control options, select and click the Label control. ② In Property Settings Text, set the text content to SMART HOME. ③ Then click the Background background setting area to set the Label control background. ④ Set the color depth of the Label control to 0, without background color. ⑤ Set the Font color, size and style in the font.
4.5 Add a container
Containers are essentially basic objects with layout and automatic resizing capabilities.
- Open the control option, click Container to add the Container control, and drag the control size.
- Set the background color in the property Settings. ③ Then set the Border and rounded corner of container in "Border".
Name the added Container control cont_TodayInfo. Add other controls to the Container control. You can view other controls (including picture, text, and line controls) added to the cont_TodayInfo container in the Widgets.
4.6 Add an Image button
Image button are very similar to simple "button" objects. The only difference is that it displays image in each state defined by the user.
① Open component options, select and click the Imgbtn control. ② Add the Released and Pressed images.
In the same way, add other Imgbtn controls and Label controls.
- Switch the interface
This section describes how to create sub-interfaces and switch between the main interface and sub-interface.
5.1 Add a second new interface
Click “+” to add a new screen, rename the new screen src_Light, add Image, imgbtn controls, and change the background color.
5.2 Add interface switching trigger conditions
① Select the imgbtn_Light button on the first screen. ② Select the Events Settings. ③ Click “+” to add an event, and then set the event. ④ In event Settings, trigger conditions need to be selected, here Clicked trigger conditions are selected. Target Select the second new interface src_Llight that you want to load, and then select the Delete current interface option.
When the program is running, when the imgbtn_Light button is clicked, it will switch to the second src_Light interface.
5.3 Add a trigger condition for returning to the interface
① Select the imgbtn_Home control. ② In the event Settings, select Clicked trigger conditions, Target select src_Welcome for the interface to be loaded, and select Delete the current interface option.
When the program is running, when the imgbtn_Light button is clicked, it returns to the first main screen of src_Welcome.
5.4 Design the second interface
Add controls in the second interface, including Switch control, Slider control, Dropdown control, Image control, Imgbtn control, Label control.
Switch control: This switch can be used to turn the light on/off and it looks like a small slider.
Slider control: The slider object looks like a bar supplemented with knobs. You can drag the knob to set the value. The slider can be vertical or horizontal.
Dropdown control: A drop-down list allows the user to select a value from a list. By default, the drop-down list is turned off and displays a single value or predefined text.
The Image control, Imgbtn control, and Label control are described in the previous section.
- Control hardware light design
Smart home usually has the control of the light, through the control interface to control the hardware light on and off, the steps are as follows:
6.1 GUI Guider generates code project
① Generate the code by clicking the Generate code button.
② Click the Folder icon to open the project folder
6.2 Starting the MDK Project
After the generated code is completed, open the project folder and open the MDK project in the specified directory (support MCUXpressoIDE, MDK, IAR).
6.3 First, the drive to control the light switch is added to the project
Add a GPIO initializer in lvgl_guider.c.
6.4 then, add a custom Led control function under Custom.c
This routine adds Led1_Control, Led2_Control, and Led3_Control lamp control functions.
6.5 Add custom event program to GUI Guider
① Select the first Switch control and add the event.
② In the event, select Trigger to trigger the event condition that the Switch control is on and off, and the Target option is set to Null.
- In Action, select C to add custom events and click to open Edit Code.
- Add a custom event function to Edit Code (open Led3, close Led2, Led1), and add the header file of the file where the custom event function is located.
6.6 View custom events in the MDK project
After setting the custom event, the set Led custom trigger event can be found on events_init.c after the GUI Guider regenerates the code again.
- Program download and demo
After the project is completed, there are two ways to download the program to the development board:
- Open the project with IDE (MCUXpresso IDE, KEIL or IAR), compile and download the program to the development board.
- Selecting MCUXpresso, Keil, or IAR from Target in the GUI Guider automatically compiles the program to download to the board.
The following diagram shows how Guider automatically compiles the download program to the development board in GUI.
Attached video shows the effect.
8.In SUMMARY
This artical mainly shares the Smart Home interface design based on GUI Guider. GUI Guider, as a tool for GUI design, is powerful and easy to use. This article only uses a few functions of GUI Guider, we can further learn to explore GUI Guider, the related project has been placed in the attachment.
The GUI Guider application guide can be found on the NXP official website, and the following are some ways to find information when learning to use GUI Guider.
- View the User Guide and click Help->User Guide
- control Settings and usage instructions, you can click the following small icon to view
