STM32+GUI Guider+Littlevgl

准备

硬件平台：

这里采用正点原子探索者开发板

注意参考硬件平台是否满足需求

编译不通过

编译通过

仓库地址：

lvgl github
这里也可以使用仓库导入，提升速度

这里我使用的是7.10.1版本

my仓库地址

建立工程and移植

一开始使用的是正点原子官方提供移植好的工程，发现触摸出现问题，看视频说什么电阻屏需要校准，可我设置了校准但按下按键没有反应，我意识到我的是电容屏，然后我怀疑是源码移植有问题，我就把裸机触摸章节的代码移植到了该工程，发现也没有用，在裸机触摸屏章节是可以的，这也就排除了触摸芯片问题，然后我觉得是不是工程问题，然后我就在该工程下开始移植liteevgl。

还有就是我的是电容屏，可为什么还是执行了那句电阻屏执行代码，执行了电容屏的测试程序，不知道是原子哥写错了还是我理解错了。

移植文件

把lvgl-7.10.1中所以代码搞到/GUI/lvgl中，这里取名为lvgl是有讲究的，是为了适配nxp的gui guider软件生产的代码，改为lv_conf.h这里改名字是为了适配其他文件包含报错问题，当然你可以选择这里不改，去改大量其他文件。

配置keil

配置keil环境，这里没有讲究，最好分好类，利于理解和修改，port也就是端口，到时候调用底层lcd显示函数和底层触摸函数得在这里修改。

把这里面所有的.c文件搞到lvgl_src中。

添加demo文件

这里新建一个存放demo实验的文件夹，移植以下内容及改名


keil工程添加.c文件

头文件包含

修改文件

这里可以参考正点原子的移植手册
我这里没有说明的地方都是和移植手册一样的，我只说不一样和值得注意的点。

修改lv_conf.h文件

#define LV_HOR_RES_MAX          (480)
#define LV_VER_RES_MAX          (800)
#define LV_COLOR_DEPTH     16
#define LV_DPI              60     /*[px]*/

这里我没有按正点原子的修改
#  define LV_MEM_SIZE    (32U * 1024U) 

lvgl 7的版本我就修改了这几项，可以参考正点原子移植手册，正点原子6的版本有些修改配置是没有的，没有就不管。

修改lv_port_disp_template.c文件

 /* Example for 1) */
    static lv_disp_buf_t draw_buf_dsc_1;
    static lv_color_t draw_buf_1[LV_HOR_RES_MAX * 10];                          /*A buffer for 10 rows*/
    lv_disp_buf_init(&draw_buf_dsc_1, draw_buf_1, NULL, LV_HOR_RES_MAX * 10);   /*Initialize the display buffer*/
//    /* Example for 2) */
//    static lv_disp_buf_t draw_buf_dsc_2;
//    static lv_color_t draw_buf_2_1[LV_HOR_RES_MAX * 10];                        /*A buffer for 10 rows*/
//    static lv_color_t draw_buf_2_1[LV_HOR_RES_MAX * 10];                        /*An other buffer for 10 rows*/
//    lv_disp_buf_init(&draw_buf_dsc_2, draw_buf_2_1, draw_buf_2_1, LV_HOR_RES_MAX * 10);   /*Initialize the display buffer*/

//    /* Example for 3) */
//    static lv_disp_buf_t draw_buf_dsc_3;
//    static lv_color_t draw_buf_3_1[LV_HOR_RES_MAX * LV_VER_RES_MAX];            /*A screen sized buffer*/
//    static lv_color_t draw_buf_3_1[LV_HOR_RES_MAX * LV_VER_RES_MAX];            /*An other screen sized buffer*/
//    lv_disp_buf_init(&draw_buf_dsc_3, draw_buf_3_1, draw_buf_3_2, LV_HOR_RES_MAX * LV_VER_RES_MAX);   /*Initialize the display buffer*/

    /*-----------------------------------
     * Register the display in LVGL
     *----------------------------------*/

    lv_disp_drv_t disp_drv;                         /*Descriptor of a display driver*/
    lv_disp_drv_init(&disp_drv);                    /*Basic initialization*/

    /*Set up the functions to access to your display*/
    

	主要修改这里，实现动态获取屏幕大小
	

    /*Set the resolution of the display*/
    disp_drv.hor_res = lcddev.width;
	disp_drv.ver_res = lcddev.height;

    /*Used to copy the buffer's content to the display*/
    disp_drv.flush_cb = disp_flush;

	因为这里有调用，所以最开始Example for 1我没有注释，你也可以尝试把这里注释，把Example for 1也注释。
	
    /*Set a display buffer*/
    disp_drv.buffer = &draw_buf_dsc_1;

static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p)
{
    /*The most simple case (but also the slowest) to put all pixels to the screen one-by-one*/

	这里就是调用最底层lcd显示函数了，不管移植啥开源上层库都会调用驱动库中最底层函数，注意包含lcd驱动头文件

    //把指定区域的显示缓冲区内容写入到屏幕
		LCD_Color_Fill(area->x1,area->y1,area->x2,area->y2,(u16*)color_p);

    /* IMPORTANT!!!
     * Inform the graphics library that you are ready with the flushing*/
    lv_disp_flush_ready(disp_drv);
}

修改lv_port_indev_template.c文件

lv_port_indev_init函数只保留这些其他注释。


void lv_port_indev_init(void)
{
    /* Here you will find example implementation of input devices supported by LittelvGL:
     *  - Touchpad
     *  - Mouse (with cursor support)
     *  - Keypad (supports GUI usage only with key)
     *  - Encoder (supports GUI usage only with: left, right, push)
     *  - Button (external buttons to press points on the screen)
     *
     *  The `..._read()` function are only examples.
     *  You should shape them according to your hardware
     */

    lv_indev_drv_t indev_drv;

    /*------------------
     * Touchpad
     * -----------------*/

    /*Initialize your touchpad if you have*/
    touchpad_init();

    /*Register a touchpad input device*/
    lv_indev_drv_init(&indev_drv);
    indev_drv.type = LV_INDEV_TYPE_POINTER;
    indev_drv.read_cb = touchpad_read;
    indev_touchpad = lv_indev_drv_register(&indev_drv);

触摸最底层函数

static bool touchpad_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data)
{
    static uint16_t last_x = 0;
		static uint16_t last_y = 0;
		if(tp_dev.sta&TP_PRES_DOWN)//触摸按下了
		{
		last_x = tp_dev.x[0];
		last_y = tp_dev.y[0];
		data->point.x = last_x;
		data->point.y = last_y;
		data->state = LV_INDEV_STATE_PR;
		}else{//触摸松开了
		data->point.x = last_x;
		data->point.y = last_y;
		data->state = LV_INDEV_STATE_REL;
		}
		//返回 false 代表没有缓冲的数据
		return false;
}

修改lv_demo_widgets.c demo文件

这也就是为什么我移植app demo的时候要带上它的原因
#include "../../lv_examples.h"
#include "lv_demo_widgets.h"

反正调用demo文件就得包含它
#include "lv_ex_conf.h"

包含改文件是 #include LV_THEME_DEFAULT_INCLUDE 报错
#include "lvgl.h" 

#include LV_THEME_DEFAULT_INCLUDE

修改lv_ex_conf.h文件

/*Show some widget*/
#define LV_USE_DEMO_WIDGETS        1
#if LV_USE_DEMO_WIDGETS
#define LV_DEMO_WIDGETS_SLIDESHOW  0
#endif

运行

这里定时器啥的通过lvgl节拍自行添加

#include "lvgl.h"
#include "lv_port_disp_template.h"
#include "lv_port_indev_template.h"

#include "lv_demo_widgets.h"

lv_init();
lv_port_disp_init();
lv_port_indev_init();
lv_demo_widgets();


while(1)
	{
		tp_dev.scan(0);
		lv_task_handler();
	}

这样你的第一个demo应该就可以跑起来了。

使用gui guider

安装包，gui guider安装包及java
链接: https://pan.baidu.com/s/1sNRjr_azmKR-ieDo67cVNA?pwd=gyqt 提取码: gyqt 复制这段内容后打开百度网盘手机App，操作更方便哦

java下载地址

安装啥的就无脑下一步，这里gui guider文件需要jdk java环境

设置中文

编辑控件生成代码

代码窗口

查看这里你也就知道需要移植哪些文件了。

设置按键事件

移植gui guider生成代码

keil配置在上面已经配置了
反正就是把移植的2个文件所以c代码添加进去，那个custom文件需要移植，因为其他文件包含了它，具体干什么用我不了解，你也不移植它，试着把那头文件包含删除。这里没有添加custom.c是因为里面啥也没有。

运行

#include "gui_guider.h"
#include "events_init.h"

lv_ui guider_ui;
setup_ui(&guider_ui);

演示效果bilibili