【Jianxinchuang D133CBS】--5. Use GuiGuider to configure LVGL

andeyqi

【Jianxinchuang D133CBS】--5. Use GuiGuider to configure LVGL [Copy link]

 

<i class="pstatus">This post was last edited by andeyqi on 2024-9-28 08:28</i> ## Introduction The development board has been consistently adapted to LVGL, and some written demos have been integrated into the SDK. This time, GuiGuider will be used to generate the display interface and display it on the card. ## GuiGuider interface configuration Configure the screen resolution to 1024*600 and the screen color under GuiGuider. Add switch and LED controls, and use the switch control to control the lighting of the LED space to simulate the lighting scene. <ignore_js_op> <img style="cursor:pointer;" id="aimg_847436" aid="847436" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202409/28/073803vg7b6jigg1ng57gx.png" file="data/attachment/forum/202409/28/073803vg7b6jigg1ng57gx.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_847436_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>1111111111.png</strong> <em class="xg1">(197.26 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_847436" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=847436&handlekey=savephoto_847436">save to album</a> </p> <p class="xg1 y">2024-9-28 07:38 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> Set the click event of the switch to control the lighting of the LED. <ignore_js_op> <img style="cursor:pointer;" id="aimg_847437" aid="847437" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202409/28/074105dz81j8trdpwp5xb9.png" file="data/attachment/forum/202409/28/074105dz81j8trdpwp5xb9.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_847437_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>2222222222222222222.png</strong> <em class="xg1">(135.74 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_847437" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=847437&handlekey=savephoto_847437">save to album</a> </p> <p class="xg1 y">2024-9-28 07:41 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> After configuring the above event, the following code will be generated in event_init.c. We just need to add the corresponding processing in it. ```c #include "events_init.h" #include<stdio.h> #include "lvgl.h" #if LV_USE_FREEMASTER #include "freemaster_client.h" #endif static void screen_sw_1_event_handler (lv_event_t *e) { lv_event_code_t code = lv_event_get_code(e); switch (code) { case LV_EVENT_CLICKED: { lv_obj_t * status_obj = lv_event_get_target(e); int status = lv_obj_has_state(status_obj, LV_STATE_CHECKED) ? 1 : 0; switch(status) { case 0: { break; } case 1: { break; } default: break; } break; } default: break; } } ``` At this point, Guiguider has been configured. We will continue to modify the SDK to add demo support for GuiGuider. ## Add GuiGuider code to SDK ```c LVGL startup process is as follows lvgl_thread_init ==》rt_thread_init //Create LVGL thread ====》lvgl_thread_entry ======》lv_port_disp_init();//Initialize configuration LCD display ======》lv_port_indev_init();//Configure touch screen input response ======》lv_user_gui_init();//Configure display interface ========》aic_ui_init() ``` Finally, the aic_ui_init() function will be called. This function will configure the LVGL interface configuration. Our GuiGuider code call should also be placed here. Different demos will be run according to different macro configurations in this function. The corresponding code is as follows: ```c void aic_ui_init() { /* qc test demo is only for aic internal qc testing, please ignore it. */ #ifdef LPKG_USING_LVGL_VSCODE extern void vscode_ui_init(); vscode_ui_init(); return; #endif #ifdef AIC_LVGL_BASE_DEMO #include "base_ui.h" base_ui_init(); #endif #ifdef AIC_LVGL_METER_DEMO #include "meter_ui.h" meter_ui_init(); #endif #ifdef AIC_LVGL_LAUNCHER_DEMO extern void launcher_ui_init (); launcher_ui_init(); #endif #ifdef AIC_LVGL_MUSIC_DEMO extern void lv_demo_music(void); lv_demo_music(); #endif #ifdef AIC_LVGL_DASHBOARD_DEMO extern void dashboard_ui_init(void); dashboard_ui_init(); #endif #ifdef AIC_LVGL_SHOWCASE_DEMO extern void showcase_de mo_init(void); showcase_demo_init(); #endif #ifdef AIC_LVGL_ELEVATOR_DEMO #include "elevator_ui.h" elevator_ui_init(); #endif #ifdef AIC_LVGL_SLIDE_DEMO extern void slide_ui_init(void); slide_ui_init(); #endif #ifdef AIC_LVGL_SIMPLE_PLAYER_DEMO extern void simple_player_ui_init(void); simple_player_ui_init(); #endif return; } ``` Based on the above code structure, we add the AIC_LVGL_GUI_GUIDER configuration project. <ignore_js_op> <img style="cursor:pointer;" id="aimg_847438" aid="847438" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202409/28/081300di1qscaldkug02g0.png" file="data/attachment/forum/202409/28/081300di1qscaldkug02g0.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_847438_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>33333333333.png</strong> <em class="xg1">(206.79 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_847438" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=847438&handlekey=savephoto_847438">save to album</a> </p> <p class="xg1 y">2024-9-28 08:13 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> Select the demo in the menuconfig configuration interface <ignore_js_op> <img style="cursor:pointer;" id="aimg_847439" aid="847439" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202409/28/081511kaa2maazaao8siao.png" file="data/attachment/forum/202409/28/081511kaa2maazaao8siao.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_847439_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>555555555555555.png</strong> <em class="xg1">(160.52 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_847439" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=847439&handlekey=savephoto_847439">save to album</a> </p> <p class="xg1 y">2024-9-28 08:15 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> Add the GuiGuider initialization code in the aic_ui_init() function, and add the code generated by GuiGuider to the project compilation. <ignore_js_op> <img style="cursor:pointer;" id="aimg_847440" aid="847440" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202409/28/081924hqqdyd2zkq2ydbl2.png" file="data/attachment/forum/202409/28/081924hqqdyd2zkq2ydbl2.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_847440_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>66666666666666.png</strong> <em class="xg1">(190.59 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_847440" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=847440&handlekey=savephoto_847440">save to album</a> </p> <p class="xg1 y">2024-9-28 08:19 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> <ignore_js_op> <img style="cursor:pointer;" id="aimg_847441" aid="847441" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202409/28/082052po9lzklvyw9ww7ay.png" file="data/attachment/forum/202409/28/082052po9lzklvyw9ww7ay.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_847441_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>88888888888888.png</strong> <em class="xg1">(103.79 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_847441" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=847441&handlekey=savephoto_847441">save to album</a> </p> <p class="xg1 y">2024-9-28 08:20 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> After configuration, add the LED on/off control code in the switch event response, corresponding to the content of switch case 0/1. ```c extern lv_ui guider_ui; static void screen_sw_1_event_handler (lv_event_t *e) { lv_event_code_t code = lv_event_get_code(e); lv_color_t led_color; switch (code) { case LV_EVENT_CLICKED: { lv_obj_t * status_obj = lv_event_get_target(e); int status = lv_obj_has_state(status_obj, LV_STATE_CHECKED) ? 1 : 0; switch(status) { case 0: { led_color.ch.green = 0x3f; led_color.ch.blue = 0x00; led_color.ch.red = 0x00; lv_led_set_color(guider_ui.screen_led_1,led_color); lv_led_set_brightness(guider_ui.screen_led_1,0); break; } case 1: { led_color.ch.green = 0x3f; led_color.ch.blue = 0x00; led_color.ch.red = 0x00; lv_led_set_color(guider_ui.screen_led_1,led_color); lv_led_set_brightness(guider_ui.screen_led_1,255); break; } default: break; } break; } default: break; } } ``` ## Compile and run The above code is compiled and run as follows. LVGL has run as designed. <div id="player_2f5f2a13e6268400be7518adc71877780" class="localvideo-box"></div><div class="localvideo-title">459ada45c97138de0665ea8367fc0ea4</div><br/> </stdio.h>

wangerxian

Can GuiGuider create complex interfaces?

andeyqi

wangerxian posted on 2024-9-29 17:41 Can GuiGuider make complex interfaces?

Yes, there are more complex demos like digital instrument in guiguider's examples.

wangerxian