GUI Guider
is a PC-based GUI design tool provided by NXP, which allows you to design LVGL GUI by dragging and dropping controls to accelerate GUI design. After designing, you can simulate and run the design on your PC, and then generate Python scripts to integrate into the module. This guide will show you how to use GUI Guider to assist in Quecpython LVGL development.
Click here
to download GUI Guider.
Main features of GUI Guider:
Once you have installed GUI Guider correctly, you can start designing your GUI. After completing the design and simulation, you can generate Python code with just one click. After making a few modifications, you can download and run the code on the module. Here are the specific steps:
Open GUI Guider and select "Create a new project" on the interface below.
Select "V8.3.5" and click "Next >".
Select "Simulator".
Select a template. You can choose according to your needs, such as player, label and dashboard. After selecting, click "Next >".
On the right side of the window, enter the "Project Name" and select the "Project Directory". Choose "16bit" for color depth and select the resolution based on the actual resolution of your LCD. After completing the information, click "Create" to create the project.
After creating the project, you will enter the UI design page. Here are the introductions to several main areas:
Please follow these steps to complete the UI design:
If you need to add events to widgets, such as switching interfaces when clicked, select the widget to add events to, right-click anywhere, and click "Add Event" to open the event window, as shown below.
After completing the UI design, click the triangle icon in the upper right corner and select "Micropython" in the drop-down list of "Simulator" to start the simulation. Check the effects and verify the events on the simulator.
After completing the GUI design and simulation, click the button in the upper right corner to generate the code.
Click "Code Viewer" in the middle view to preview the generated code. The generated Python code is named "gui_guider.py" as shown below. The code is located in the "generated" directory under the project.
The script generated by GUI Guider has some slight differences from the actual application script. After making some modifications, it can be directly run on the module. The main steps are as follows:
Add the LCD initialization code at the beginning of the generated Python file from GUI Guider. Please refer to LCD - LCD Driver for details.
Some modifications need to be made to the generated Python file from GUI Guider to adapt it to Quecpython LVGL.
Modify the LVGL initialization code in the generated file according to the "LVGL Initialization" section in the LVGL - Workflow document.
In the generated file, call the custom decoding API to decode images, while Quecpython LVGL is equipped with an image decoder. Therefore, you can directly use the image path when calling the image in Quecpython LVGL.
Modify all the parameters of the set_src
APIs in the generated .py file to the path of the image, as shown below.
img_obj.set_src("U:/demo.png")
Note:
In the generated code from GUI Guider, each widget has a corresponding style, which makes the code very bloated. Therefore, if you need to do advanced development, you need to further optimize it, such as reducing unnecessary style definitions or removing unnecessary try statements.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。