今天小明為大家分享的是開發工具平臺－8ms(www.8ms.xyz)工程源碼分析

1、打開"8ms平臺",創建工程制作完UI后，選中"編譯"一欄，等待結束后，選中"下載源碼"

2、解壓獲取的源碼，打開目錄。

3、以下圖片是我創建的工程示例，用基本組件為圖片Image+文字標簽Label+按鈕Button，其中qm_ui_entry.c為此次分析的重點，包含了控件初始化，及字體圖片文件引用，用到blockly還會包含回調函數的聲明，不過只涉及此處最小工程創建暫不說明。

4、ali_font_16.c是平臺每個工程都會生成的字體取模。如果你其他控件選擇其他的字體大小，平臺則將生成對應大小的字體.c文件。同樣的，如果有加載圖片，平臺也會對圖片文件進行取模，生成對應.c文件，后續給到控件聲明時調用。



5、主函數入口分析：main.c-app_main()函數，本示例主要執行user_nvs_init() & guiTask() 兩個函數，其于兩個任務未涉及暫無作用。

void app_main()
{
user_nvs_init();//flash初始化
/*任務創建 與xTaskCreate()的區別是限制該任務運行在哪個核心-ESP32為雙核/
xTaskCreatePinnedToCore(deviceTask, “device”, 4096 * 2, NULL, 0, NULL, 0);//硬件相關-uart/gpio/…初始化,可忽略
xTaskCreatePinnedToCore(blocklyTask, “blockly”, 4096 * 2, NULL, 0, NULL, 1);//積木相關,可忽略
xTaskCreatePinnedToCore(guiTask, “gui”, 4096 * 2, NULL, 0, NULL, 1);//UI顯示核心
}

6、guiTask()函數，以下為裁剪注釋版本 ，一般簡單UI設計都在lv_qm_ui_entry()函數內實現

… //前面代碼為lvgl初始化
/控件初始化-輪詢系統***********/
lv_8ms_init(); //8msUI動畫

lv_qm_ui_entry(); //控件初始化入口 while (1) {vTaskDelay(10 / portTICK_PERIOD_MS); //延時if (xSemaphoreTake(xGuiSemaphore, (TickType_t)10) == pdTRUE){lv_qm_ui_loop(); //blockly任務創建，未涉及blockly的案例，則無生成對應操作lv_task_handler(); //lvgl的任務處理函數，處理事件響應xSemaphoreGive(xGuiSemaphore); //釋放信號量} }//發送錯誤，關閉任務 vTaskDelete(NULL);

7、qm_ui_entry.c，示例顯示主要涉及的內容

#include “qm_ui_entry.h”
#include <stdio.h>
#include <stdlib.h>

/定義對象**/
lv_obj_t * main_screen;
lv_obj_t * image_4f87;
lv_obj_t * button_542b;
lv_obj_t * label_d10c;

LV_IMG_DECLARE(image_4f87_img); //引用圖片源文件變量

/**
*開機啟動屏相關，8ms動畫
*/
static lv_style_t style_star, style_black, style_url;
LV_IMG_DECLARE(img_8ms_png);
LV_IMG_DECLARE(img_star);
lv_obj_t * logo;
lv_obj_t * logo_star;
lv_obj_t * url_label;
lv_obj_t * url_mask;
lv_obj_t * mask_layer;
int timer_cnt = 0;

void lv_qm_ui_entry(void)
{
LV_FONT_DECLARE(ali_font_16);
LV_FONT_DECLARE(ali_font_35);
LV_FONT_DECLARE(ali_font_20); //引用字體源文件變量

main_screen = lv_obj_create(NULL, NULL); lv_scr_load(main_screen);

/圖片控件初始化/
image_4f87 = lv_img_create(main_screen, NULL);
lv_img_set_src(image_4f87, &image_4f87_img);
static lv_style_t image_4f87_style;
lv_style_init(&image_4f87_style);
lv_obj_add_style(image_4f87,LV_IMG_PART_MAIN,&image_4f87_style);
lv_obj_set_pos(image_4f87, 54, 58);
/按鈕控件初始化/
button_542b = lv_btn_create(main_screen, NULL);
lv_obj_t * button_542b_label;
button_542b_label = lv_label_create(button_542b, NULL);
lv_label_set_text(button_542b_label, “Button”);
static lv_style_t style_label_button_542b_label;
lv_style_init(&style_label_button_542b_label);

//設置按鈕樣式
lv_style_set_text_font(&style_label_button_542b_label,LV_STATE_DEFAULT,&ali_font_20);
lv_obj_add_style(button_542b_label, LV_LABEL_PART_MAIN, &style_label_button_542b_label);
lv_obj_set_size(button_542b, 100, 40);
lv_obj_set_pos(button_542b, 190, 168);

//設置按鈕各狀態樣式
static lv_style_t _sty_button_542b;
lv_style_init(&_sty_button_542b);
lv_style_set_text_color(&_sty_button_542b,LV_STATE_DEFAULT,LV_COLOR_MAKE(0x31, 0x40, 0x4f));
lv_style_set_bg_color(&_sty_button_542b,LV_STATE_PRESSED,LV_COLOR_MAKE(0x01, 0xa2, 0xb1));
lv_style_set_text_color(&_sty_button_542b,LV_STATE_PRESSED,LV_COLOR_MAKE(0x31, 0x40, 0x4f));
lv_style_set_text_color(&_sty_button_542b,LV_STATE_DISABLED,LV_COLOR_MAKE(0x88, 0x88, 0x88));
lv_obj_add_style(button_542b, LV_BTN_PART_MAIN, &_sty_button_542b);//選項風格

/標簽控件初始化/
label_d10c = lv_label_create(main_screen, NULL);
lv_label_set_long_mode(label_d10c,LV_LABEL_LONG_BREAK);
lv_obj_set_size(label_d10c, 100, 46);

lv_obj_set_pos(label_d10c, 191, 85); static lv_style_t style_label_d10c; lv_style_init(&style_label_d10c);lv_style_set_text_font(&style_label_d10c,LV_STATE_DEFAULT,&ali_font_35);lv_obj_add_style(label_d10c,LV_LABEL_PART_MAIN,&style_label_d10c); lv_label_set_text(label_d10c, "Hello"); lv_label_set_align(label_d10c, LV_LABEL_ALIGN_CENTER);//todo 修復樣式錯誤 init_function();

8、**總結：**下載源碼可以發現，UI顯示涉及的內容僅僅包含一個函數初始入口lv_qm_ui_entry()，完成控件的初始化既可完成顯示，另外參考lvgl文檔及FreeRTOS即可進行UI功能的擴展，另外可參考以上內容對獲取的內容進行裁剪，獲取最精簡的工程，在這基礎上再進行擴展應用。

ESP32 lvgl編譯SDK：https://github.com/wireless-tag-com/8ms-esp32

注：以上有ESP32lvgl編譯SDK，下載完后及可進行離線編譯，結合8ms平臺下載的源碼包替換掉對應的main文件夾，編譯后即可下載，具體ESP32編譯及下載方法可參考之前的文章。

總結

以上是生活随笔為你收集整理的小明分享|8ms平台下工程源码分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。