使用GUI Guider工具開發(fā)嵌入式GUI應(yīng)用(3)

引言

本節(jié)講述在GUI Guider中，應(yīng)用各種UI的基本元素，并順利部署到MCU的過程。在GUI Guider中使用各LVGL的組件時(shí)，將會(huì)涉及到GUI Guider的操作，以及將某些組件額外生成的源碼添加到Keil工程中。至于具體產(chǎn)品中的UI應(yīng)用，可以是這些基本UI元素的組合使用，以實(shí)現(xiàn)更加豐富的顯示效果。

在本文中，將說明使用通過GUI Guider創(chuàng)建并使用LVGL的label組件顯示字符信息。

在GUI Guider工程中創(chuàng)建label組件

在新建GUI Guider工程搭建MCU運(yùn)行時(shí)的框架工程時(shí)，曾使用了label組件實(shí)現(xiàn)在屏幕上顯示一個(gè)“Hello World”字符串的演示效果。Label是GUI Guider中最簡單的組件，可用于顯示字符。

當(dāng)需要為某個(gè)頁面添加一個(gè)顯示字符串的對(duì)象時(shí)，可在編輯區(qū)域左邊的工具欄中選擇label按鈕，此時(shí)，在組件窗口中就可以看到，當(dāng)前的頁面screen下出現(xiàn)了一個(gè)label_1的對(duì)象。如圖x所示。

figure-gui-using-label-1
圖x 新增label對(duì)象

雙擊在當(dāng)前頁面上出現(xiàn)的label對(duì)象，可以在編輯區(qū)域的右側(cè)激活該對(duì)象的屬性設(shè)置對(duì)話框，如圖x所示。在其中，可以執(zhí)行該對(duì)象的名字、位置、文本內(nèi)容、字體、顏色等屬性。當(dāng)然，既然是在圖形編輯界面，對(duì)象的位置也可以通過在圖形編輯區(qū)拖拽對(duì)象來調(diào)整。

figure-gui-using-label-2
圖x 編輯label對(duì)象屬性

然后，重新生成代碼。在運(yùn)行時(shí)的Keil工程已經(jīng)包含了靜態(tài)頁面的源文件，因此不用額外再執(zhí)行添加文件的操作。但實(shí)際上，這里新生成的源碼位于./gui/generated/setup_scr_screen.c文件中。有源碼如下：

/*  
 * Copyright 2023 NXP  
 * SPDX-License-Identifier: MIT  
 * The auto-generated can only be used on NXP devices  
 */  
  
#include "lvgl.h"  
#include < stdio.h >  
#include "gui_guider.h"  
#include "events_init.h"  
#include "custom.h"  
  
  
void setup_scr_screen(lv_ui *ui){  
  
 //Write codes screen  
 ui- >screen = lv_obj_create(NULL);  
 lv_obj_set_scrollbar_mode(ui- >screen, LV_SCROLLBAR_MODE_OFF);  
  
 //Set style for screen. Part: LV_PART_MAIN, State: LV_STATE_DEFAULT  
 lv_obj_set_style_bg_color(ui- >screen, lv_color_make(0xff, 0xff, 0xff), LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_bg_grad_color(ui- >screen, lv_color_make(0x21, 0x95, 0xf6), LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_bg_grad_dir(ui- >screen, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_bg_opa(ui- >screen, 0, LV_PART_MAIN|LV_STATE_DEFAULT);  
  
 //Write codes screen_label_1  
 ui- >screen_label_1 = lv_label_create(ui- >screen);  
 lv_obj_set_pos(ui- >screen_label_1, 51, 68);  
 lv_obj_set_size(ui- >screen_label_1, 218, 43);  
 lv_obj_set_scrollbar_mode(ui- >screen_label_1, LV_SCROLLBAR_MODE_OFF);  
 lv_label_set_text(ui- >screen_label_1, "Hello World");  
 lv_label_set_long_mode(ui- >screen_label_1, LV_LABEL_LONG_WRAP);  
  
 //Set style for screen_label_1. Part: LV_PART_MAIN, State: LV_STATE_DEFAULT  
 lv_obj_set_style_radius(ui- >screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_bg_color(ui- >screen_label_1, lv_color_make(0x7c, 0x00, 0xff), LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_bg_grad_color(ui- >screen_label_1, lv_color_make(0x21, 0x95, 0xf6), LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_bg_grad_dir(ui- >screen_label_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_bg_opa(ui- >screen_label_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_shadow_width(ui- >screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_shadow_color(ui- >screen_label_1, lv_color_make(0x21, 0x95, 0xf6), LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_shadow_opa(ui- >screen_label_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_shadow_spread(ui- >screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_shadow_ofs_x(ui- >screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_shadow_ofs_y(ui- >screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_text_color(ui- >screen_label_1, lv_color_make(0xff, 0xff, 0xff), LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_text_font(ui- >screen_label_1, &lv_font_montserratMedium_32, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_text_letter_space(ui- >screen_label_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_text_line_space(ui- >screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_text_align(ui- >screen_label_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_pad_left(ui- >screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_pad_right(ui- >screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_pad_top(ui- >screen_label_1, 8, LV_PART_MAIN|LV_STATE_DEFAULT);  
 lv_obj_set_style_pad_bottom(ui- >screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);  
}

此時(shí)，可以通過預(yù)覽頁面，看到本頁面的靜態(tài)顯示效果。還可以通過運(yùn)行模擬器，在GUI Guider中模擬UI程序運(yùn)行時(shí)的動(dòng)態(tài)效果（如果有動(dòng)態(tài)效果）。如圖x所示。

figure-gui-using-label-3
圖x 預(yù)覽編輯label對(duì)象的效果

編譯MCU工程并下載到開發(fā)板

編譯對(duì)應(yīng)的Keil工程，啟動(dòng)針對(duì)代碼量的優(yōu)化，看下對(duì)存儲(chǔ)空間的占用。

Build started: Project: project  
*** Using Compiler 'V6.18', folder: 'C:Keil_v5ARMARMCLANGBin'  
Build target 'Target 1'  
compiling clock_init.c...  
compiling board_init.c...  
compiling hal_crc.c...  
compiling lcd_port.c...  
compiling pin_init.c...  
compiling lcd.c...  
...  
compiling events_init.c...  
compiling gui_guider.c...  
compiling lv_font_montserratMedium_16.c...  
compiling lv_table.c...  
compiling setup_scr_screen.c...  
compiling lv_font_montserratMedium_32.c...  
compiling lv_textarea.c...  
linking...  
Program Size: Code=154616 RO-data=64380 RW-data=148 ZI-data=29100    
".Objectsproject.axf" - 0 Error(s), 0 Warning(s).  
Build Time Elapsed:  00:00:14

下載程序到MCU并運(yùn)行，可以看到，開發(fā)板上的顯示屏上也成功顯示了“同款”圖像。如圖x所示。

figure-gui-using-label-4-mini
圖x 在開發(fā)板上運(yùn)行UI顯示label對(duì)象