使用QtCreator创建lvgl开发环境


一、lvgl简介

? LVGL是一个开源图形库,用于创建和开发嵌入式系统GUI,它具有易于使用的图形元素、漂亮的视觉效果和低内存占用等特性。

? 官方地址:

https://lvgl.io/

? 本文主要分享:如何在QtCreaotr下创建lvgl的开发环境,以及运行一个官方例子。

? 目前lvgl正在以火箭般的速度进行迭代开发,如下图所示:

二、在QtCreator下创建lvgl的开发环境

? QtCreator是Qt官方开发的一个集成开发环境,用于开发基于Qt C++框架的软件。同样的,lvgl也可以在QtCreaotr中进行lvgl相关程序的设计、工程的编译和构建。

? 创建环境时需要准备一下:

(1)安装QtCreator  ------笔者的为QtCeeator 4.14.2
(2)获取SDL2    	------url地址如下:

? https://www.libsdl.org/download-2.0.php

(3)获取lvgl源码    ------ url地址如下:

? https://github.com/lvgl/lvgl

? 这里笔者选择的release/v7

(2-1)在QtCreator中创建工程

? 生成工程如下:

(2-2)向工程中添加lvgl源码

? 现在在QtCreator中创建了一个lvgl_pc_7项目,接下来将介绍如何将lvgl添加到该工程下。

  • 将下载的lvgl安装包解压后,将目录src(lvgl的源码目录)、example(lvgl的一些使用例子)目录、lv_conf_template.h和lvgl.h文件拷贝到lvgl_pc_7目录下。

  • 将文件lv_conf_template.h重命名为lv_conf.h,并将文件中内容打开(代码开始行处将0替换为1,使能该宏下的代码)

  • 下载lv_drivers,url地址:https://github.com/lvgl/lv_drivers
    (这里注意笔者下载的v7版本的),然后将其拷贝到lvgl_pc_7目录下。

  • 下载lvgl的官方演示示例,url地址:https://github.com/lvgl/lv_demos/tree/release/v7
    (这里笔者同样下载的v7版本的),然后将其拷贝到lvgl_pc_7目录下。

  • 将SDL2目录也同样拷贝到lvgl_pc_7目录下。

  • 根据其目录下xxx_template.h的模板文件重新复制,然后对其内容进行配置。(注意:对于lv_drivers和lv_demos以及lvgl源码目录下都有详细使用步骤)

  • 完成后,目录结构如下图所示:

  • 向QtCreator添加源码:

    (1)添加lvgl的源码

    (2)添加lv_drivers相关文件:

    display目录下的文件monitor.h/.c ;
    indev目录下mouse.h/.c  mousewheel.h/.c keyboard.h/.c
    

    (3)添加演示示例文件:

    ? 这里以lv_demo_widgets.h为例,故lv_demo_widgets.h/.c文件添加到工程中

    (4)添加鼠标数据文件mouse_cursor_icon.c

    完成后,QtCreaotr中项目结构图如下:


(注1)在创建工程中,可能由于源码目录的移动或者删除,有些源码文件中会出现错误头文件引入路径。此时,只需要将其正确引用即可解决。

(注2)在使用lv_demos演示模块源码或者lv_drivers时可能需要配置相应的宏定义,以便开启由该宏定义管控的代码。


(2-3)创建应用

然后就是main.c这个软件主框架了。这里就直接上一份代码:

#include 
#include 
#define SDL_MAIN_HANDLED   
#include 

#include "lvgl.h"
#include "lv_drivers/display/monitor.h"
#include "lv_drivers/indev/mouse.h"
#include "lv_drivers/indev/mousewheel.h"
#include "lv_drivers/indev/keyboard.h"
#include "lv_demos-release-v7/src/lv_demo_widgets/lv_demo_widgets.h"

static void hal_init(void);
static int tick_thread(void * data);
static void memory_monitor(lv_task_t * param);

int main(int argc, char ** argv)
{
    (void) argc;    /*Unused*/
    (void) argv;    /*Unused*/

    /* 初始化 LittlevGL */
    lv_init();

    /* 初始化 the HAL (display, input devices, tick) for LittlevGL */
    hal_init();
	
    /* 此处创建应用 */
    lv_demo_widgets();

    while(1) {
        lv_task_handler();
        usleep(5 * 1000);
    }
}

/**
 * 初始化Littlev graphics library 硬件抽象层
 */
static void hal_init(void)
{
    /* Use the 'monitor' driver which creates window on PC's monitor to simulate a display*/
    monitor_init();

    /*Create a display buffer*/
    static lv_disp_buf_t disp_buf1;
    static lv_color_t buf1_1[480*10];
    lv_disp_buf_init(&disp_buf1, buf1_1, NULL, 480*10);

    /*Create a display*/
    lv_disp_drv_t disp_drv;
    lv_disp_drv_init(&disp_drv);                 /*Basic initialization*/
    disp_drv.buffer = &disp_buf1;
    disp_drv.flush_cb = monitor_flush;    /*Used when `LV_VDB_SIZE != 0` in lv_conf.h (buffered drawing)*/

    lv_disp_drv_register(&disp_drv);

    /* Add the mouse as input device
     * Use the 'mouse' driver which reads the PC's mouse*/
    mouse_init();
    lv_indev_drv_t indev_drv;
    lv_indev_drv_init(&indev_drv);          /*Basic initialization*/
    indev_drv.type = LV_INDEV_TYPE_POINTER;
    indev_drv.read_cb = mouse_read;         /*This function will be called periodically (by the library) to get the mouse position and state*/
    lv_indev_t * mouse_indev = lv_indev_drv_register(&indev_drv);

    /*Set a cursor for the mouse*/
    LV_IMG_DECLARE(mouse_cursor_icon); /*Declare the image file.*/
    /*Create an image object for the cursor */
    lv_obj_t * cursor_obj =  lv_img_create(lv_disp_get_scr_act(NULL), NULL); 
    lv_img_set_src(cursor_obj, &mouse_cursor_icon);/*Set the image source*/
    lv_indev_set_cursor(mouse_indev, cursor_obj);/*Connect the image  object to the driver*/

    /* Create an SDL thread to do this*/
    SDL_CreateThread(tick_thread, "tick", NULL);
}

/**
 * A task to measure the elapsed time for LittlevGL
 * @param data unused
 * @return never return
 */
static int tick_thread(void * data)
{
    (void)data;

    while(1) {
        SDL_Delay(5);   /*Sleep for 5 millisecond*/
        lv_tick_inc(5); /*Tell LittelvGL that 5 milliseconds were elapsed*/
    }

    return 0;
}
三、运行效果演示

四、注意事项

? 总而言之,目标就是在QtCreaotr这个IDE下进行lvgl的开发,并使用SDL2来进行PC上实际运行仿真。可以有直观的效果,同时也能在没有具体硬件平台的情况下,进行软件的开发和调试。

? 在这个过程中,重要的还是需要将lvgl源码、lv_drivers和lv_demos三个部分集成在一起,需要保证三个源码包的发布版本一致,不然可能会出现不同版本间接口不统一,或者lvgl源码文件重构后,无法编译通过。哈哈......