小明分享|8ms平台下工程源码分析

今天小明为大家分享的是开发工具平台－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编译及下载方法可参考之前的文章。