10分钟教你在MDK中部署LVGL

284dc571ca9c1823a8cb0354ee99c0ec.png

【说在前面的话】


说实话,LVGL这么有牌面的项目,其维护者居然没听说过cmsis-pack,这着实让我略为破防:

ed6e443f759f77f2d62be1c66a177833.png

连lwIP都在Pack-Installer里有个坑位,难道这是个LVGL的“灯下黑”?

b15e455433dab927d7ab6e755c87f02e.png

对这样的嵌入式开源界的“世界级明星白菜”,难得遇到一个“染指”的机会,怎能不“拱”一下呢?

7ae83d638128b6e66cb43a7eb6c0f6e9.png

省略一万字的过程描述……

517b9fbcc9bda1740dbd4590ca2969f2.png

1355419742f4b0f4b135eb453082504a.png

我为LVGL做的CMSIS-Pack终于被合并入仓库主线啦!

808d33a03a6ba51f80d359f2abf08861.png

6d873aa4769edb728197594cf5ed84d9.png

【如何获取 LVGL cmsis-pack】


1、用户可以通过LVGL在Github的仓库直接下载:

https://github.com/lvgl/lvgl/tree/master/env_support/cmsis-pack

2、单击文末的【阅读原文】来直接下载

3、关注公众号【裸机思维】后,发送消息“LVGL”获取网盘链接。

4、不久的将来,应该可以直接通过MDK的Pack-Installer进行直接安装,就像lwIP那样:

648078ad86d313104011f03612d1557f.png

无论采用哪种方法,一旦完成安装,以后就可以通过Pack-Installer来获取最新版本啦。

【如何在MDK中部署LVGL】


步骤一:配置RTE

在MDK中通过菜单 Project->Manage->Run-Time Enviroment 打开RTE配置窗口:

1860108dc16cd713ec81aec856321634.png

在RTE配置界面中找到LVGL,将其展开:

1fa19dff95f228fb4871f75f508daa31.png

与其它平台下部署LVGL不同,cmsis-pack允许大家像点菜那样只将所需的模块(或者功能)加入到工程中。

注意,这里必点的是“Essential”,它是LVGL的核心服务。一般来说,为了使用LVGL所携带的丰富控件(Widgets),我们还需要选中“Extra Themes”。如果你是第一次为当前硬件平台进行LVGL移植,则非常推荐加点“Porting”——它会为你添加移植所需的模板,非常方便。

单击“OK”关闭RTE配置窗口,我们会看到LVGL已经被加入到工程列表中了:

6deb3c6d5ca253f1e2e859907b2f28d3.png

此时,我们就已经可以成功编译了。

d34183c8269eaee9b4a2ecd7975652ae.png

步骤二:配置LVGL

将LVGL展开,找到配置头文件 lv_conf_cmsis.h

8aa802d985bdb8f08e001f600af87ed1.png

该文件其实就是LVGL官方移植文档中所提到的lv_conf.h,它是基于lv_conf_template.h 修改而来。值得说明的是,一些模块的开关宏都被删除了,例如:

LV_USE_GPU_STM32_DMA2D
LV_USE_GPU_NXP_PXP
……

这是因为,当我们在RTE配置窗口中勾选对应选项时,cmsis-pack就会自动把对应的宏定义加入到 RTE_Components.h 里——换句话说,再也不用我们手动添加啦!

725f139dc287fdd2d8c70b9ab0eab357.png

8ecbe358d8ca5f67ca0d18aff2458505.png

其它对LVGL的配置,请参考官方文档,这里就不再赘述。

步骤三:使用模板进行移植

当我们在RTE中选择了porting模块后,三个移植模板会被加入到工程列表中。

281480a6771e1d22e34dec9bdcdc4300.png

它们是可以编辑的,保存在当前工程的RTE/LVGL目录中。

812b4ff4e2a93d9170ebf70e5bf55945.png

这些模板极大的简化了我们的驱动移植过程,下面,我们将以lv_port_disp_template为例,为大家介绍这些模板的使用方法:

1、打开 lv_port_disp_template.h,将开头处 #if 0 修改为 #if 1,使整个头文件生效:

b9c139d62b631c5da6bc076f2a46fe30.png

2、更新对 lvgl.h 头文件的引用路径,从 "lvgl/lvgl.h" 改为 "lvgl.h"

/*********************
 *      INCLUDES
 *********************/
#include "lvgl.h"

这是因为cmsis-pack已经为 lvgl.h 添加了引用路径,因此在整个工程的任意地方都可以直接使用 #include "lvgl.h" 

3、补充对 lv_port_disp_init() 函数的声明:

/**********************
 * GLOBAL PROTOTYPES
 **********************/
extern void lv_port_disp_init(void);

4、打开 lv_port_disp_template.c,将开头处 #if 0 修改为 #if 1,使整个远文件生效。并以与步骤2相同的方式处理好对 lvgl.h 的引用。

2356795517f38557dbdfe76415a4c064.png

5、根据官方 porting 文档的指导,根据你的硬件实际情况,在三种缓冲模式中做出选择:

4c3ebf6bef6415ba8244f9ff3e3afccb.png

需要特别强调的是:如果你的系统没有 DMA或者替用户完成Frame Buffer刷新的专门LCD控制器,那么双缓冲其实是没有意义的(因为无论如何都是CPU在干活,因此不会比单缓冲模式有任何性能上的本质不同)

6、找到 disp_init() 函数,并在其中添加LCD的初始化代码。 该函数会被 lv_port_disp_init() 调用。

7、找到 disp_flush()函数,并根据你的硬件实际情况,将其改写。比如这是使用 GLCD_DrawBitmap进行实现的参考代码:

/*Flush the content of the internal buffer the specific area on the display
 *You can use DMA or any hardware acceleration to do this operation in the background but
 *'lv_disp_flush_ready()' has to be called when finished.*/
static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p)
{
    
    GLCD_DrawBitmap(area->x1,               //!< x
                    area->y1,               //!< y
                    area->x2 - area->x1 + 1,    //!< width
                    area->y2 - area->y1 + 1,    //!< height
                    (const uint8_t *)color_p);


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

GLCD_DrawBitmap 用于将给定的显示缓冲区刷新到LCD,其函数原型如下:

/**
  \fn          int32_t GLCD_DrawBitmap (uint32_t x, uint32_t y, uint32_t width, uint32_t height, const uint8_t *bitmap)
  \brief       Draw bitmap (bitmap from BMP file without header)
  \param[in]   x      Start x position in pixels (0 = left corner)
  \param[in]   y      Start y position in pixels (0 = upper corner)
  \param[in]   width  Bitmap width in pixels
  \param[in]   height Bitmap height in pixels
  \param[in]   bitmap Bitmap data
  \returns
   - \b  0: function succeeded
   - \b -1: function failed
*/
int32_t GLCD_DrawBitmap (uint32_t x, 
                         uint32_t y, 
                         uint32_t width, 
                         uint32_t height, 
                         const uint8_t *bitmap)

这里,5个参数之间的关系如下图所示:

0c87437f29e4e67857a33be81c9d8bd2.png

简单来说,这个函数就是把 bitmap 指针所指向的“连续存储区域” 中保存的像素信息拷贝到LCD的一个指定矩形区域内,这一矩形区域由位置信息(x,y)和体积信息(widthheight)共同确定。

很多LCD都支持一个叫做“操作窗口”的概念,这里的窗口其实就是上图中的矩形区域——一旦你通过指令设置好了窗口,随后连续写入的像素就会被依次自动填充到指定的矩形区域内(而无需用户去考虑何时进行折行的问题)。

此外,如果你有幸使用带LCD控制器的芯片——LCD的显示缓冲区被直接映射到Cortex-M芯片的4GB地址空间中,则我们可以使用简单的存储器读写操作来实现上述函数,以STM32F746G-Discovery开发板为例:

//! STM32F746G-Discovery
#define GLCD_WIDTH     480
#define GLCD_HEIGHT    272


#define LCD_DB_ADDR   0xC0000000
#define LCD_DB_PTR    ((volatile uint16_t *)LCD_DB_ADDR)


int32_t GLCD_DrawBitmap (uint32_t x, 
                         uint32_t y, 
                         uint32_t width, 
                         uint32_t height, 
                         const uint8_t *bitmap) 
{
    volatile uint16_t *phwDes = LCD_DB_PTR + y * GLCD_WIDTH + x;
    const uint16_t *phwSrc = (const uint16_t *)bitmap;
    for (int_fast16_t i = 0; i < height; i++) {
        memcpy ((uint16_t *)phwDes, phwSrc, width * 2);
        phwSrc += width;
        phwDes += GLCD_WIDTH;
    }


    return 0;
}

7、在 main.c 中加入对 lv_port_disp_template.h 的引用:

#include "lv_port_disp_template.h"

8、在main()函数中对LVGL进行初始化:

int main(void)
{
    ...
    lv_init();
    lv_port_disp_init();
    ...
    while(1) {
        
    }   
}

至此,我们就完成了LVGL在MDK工程的部署。是不是特别简单?

66384912bf4fd64113ef0ea4d29237f1.png

【时间相关的移植】


根据官方移植文档的要求,我们实际上还需要处理两个问题:

  • 让 lvgl 知道从复位开始经历了多少毫秒

  • 以差不多5ms为间隔,调用函数 lv_timer_handler() 来进行事件处理(包括刷新)

依据平台的不同,小伙伴们当然有自己的解决方案。这里,我推荐一个MDK环境下基于perf_counter的方案,它更通用,也更简单。关于它的使用文章,小伙伴可以参考《【喂到嘴边了的模块】超级嵌入式系统“性能/时间”工具箱》,这里就不再赘述。

步骤一:获取 perf_counter 的cmsis-pack

关注公众号【裸机思维】后,向后台发送关键字“perf_counter” 获取对应的cmsis-pack网盘链接。下载后安装。

步骤二:在工程中部署 perf_counter

打开RTE配置窗口,找到 Utilities 后展开,选中 perf_counter的 Core:

05836895d5d1de3e169e472e81686ce4.png

需要说明的是,无论你用不用操作系统,这里关于各类操作系统的 Patch 你即便不选择也能正常工作,不必担心。单击OK后即完成了部署。

在main()函数中初始化 perf_counter(别忘记添加对头文件 perf_counter.h 的包含):

#include "perf_counter.h"


int main(void)
{
    /* 配置 MCU 的系统时钟频率 */
    
    /* 重要:更新 SystemCoreClock 变量 */
    SystemCoreClockUpdate(); 
    
    /* 初始化 perf_counter */
    init_cycle_counter(true);
    ...
    while(1) {
    }
    ...
}

需要特别说明的是:

  • 调用 init_cycle_counter() 之前,最好通过 SystemCoreClockUpdate() 来将当前的系统频率更新到关键全局变量 SystemCoreClock 上。你当然也可以自己用赋值语句来做,比如:

extern uint32_t SystemCoreClock;
    SystemCoreClock = 72000000ul;  /* 72MHz */
  • 如果你已经有应用或者RTOS占用了SysTick(一般都是这样),则应该将 true 传递给 init_cycle_counter() 作为参数——告诉 perf_counter SysTick已经被占用了;反之则应该传递 false,此时 perf_counter 会用最大值 0x00FFFFFF来初始化SysTick。

步骤三:更新 lv_conf_cmsis.h

打开 lv_conf_cmsis.h,找到宏 LV_TICK_CUSTOM 所在部分:

/*Use a custom tick source that tells the elapsed time in milliseconds.
 *It removes the need to manually update the tick with `lv_tick_inc()`)*/
#define LV_TICK_CUSTOM 0
#if LV_TICK_CUSTOM
    #define LV_TICK_CUSTOM_INCLUDE "Arduino.h"         /*Header for the system time function*/
    #define LV_TICK_CUSTOM_SYS_TIME_EXPR (millis())    /*Expression evaluating to current system time in ms*/
#endif   /*LV_TICK_CUSTOM*/

将其替换为:

/*Use a custom tick source that tells the elapsed time in milliseconds.
 *It removes the need to manually update the tick with `lv_tick_inc()`)*/
#define LV_TICK_CUSTOM 1
#if LV_TICK_CUSTOM


    extern uint32_t SystemCoreClock;
    #define LV_TICK_CUSTOM_INCLUDE   "perf_counter.h" 
    #define LV_TICK_CUSTOM_SYS_TIME_EXPR  \
        (get_system_ticks() / (SystemCoreClock / 1000ul))
#endif   /*LV_TICK_CUSTOM*/

步骤四:处理 lv_timer_handler()

虽然 LVGL 的官方文档中专门指出过 lv_timer_handler() 

  • 不是线程安全的

  • 应该放在较低优先级的中断处理程序中

  • 在RTOS中使用时,应该考虑通过互斥量来建立临界区来避免与 lv_tick_inc() 产生“冲突”

然而,使用 perf_counter() 进行部署时,由于我们避开了lv_tick_inc() ,因此上述限制就都“烟消云散”了,我们完全可以将 lv_timer_handler() 简单的放置到 SysTick_Handler中,比如:

void SysTick_Handler(void)
{
    //! 典型的 1ms 中断 
    
    static uint8_t s_chDivider = 0;
    
    if ((++s_chDivider) >= 5) {
        s_chDivider = 0;
        //! 每 5ms 处理一次
        lv_timer_handler();
    }
    
    /*! \note please do not put following code here
     *!
     *!  lv_tick_inc(5);
     *!  
     *!     Use a custom tick source that tells the elapsed time in milliseconds.
     *!     It removes the need to manually update the tick with `lv_tick_inc()`)
     *!     #define LV_TICK_CUSTOM 1
     *!     #if LV_TICK_CUSTOM
     *!         extern uint32_t SystemCoreClock;
     *!         #define LV_TICK_CUSTOM_INCLUDE "perf_counter.h"  
     *!         #define LV_TICK_CUSTOM_SYS_TIME_EXPR                            \
     *!                        (get_system_ticks() / (SystemCoreClock / 1000ul))
     *!     #endif
     */
}

当然,以上处理只是一种“偷懒”,实际上,考虑到LVGL的绘图过程可能会“耗时过长”,如果SysTick还有别的功能,那么直接将  lv_timer_handler() 放置在SysTick_Handler中其实并不是一个值得推荐的方案,裸机环境下,一个更为实用的方案是:

#include "perf_counter.h"


static volatile bool s_bLVTMRFlag = false;
void SysTick_Handler(void)
{
    //! 典型的 1ms 中断 
    
    static uint8_t s_chDivider = 0;
    
    if ((++s_chDivider) >= 5) {
        s_chDivider = 0;
        //! 每 5ms 处理一次
        s_bLVTMRFlag = true;
    }
    
    /*! \note please do not put following code here
     *!
     *!  lv_tick_inc(5);
     *!  
     *!     Use a custom tick source that tells the elapsed time in milliseconds.
     *!     It removes the need to manually update the tick with `lv_tick_inc()`)
     *!     #define LV_TICK_CUSTOM 1
     *!     #if LV_TICK_CUSTOM
     *!         extern uint32_t SystemCoreClock;
     *!         #define LV_TICK_CUSTOM_INCLUDE "perf_counter.h"  
     *!         #define LV_TICK_CUSTOM_SYS_TIME_EXPR                            \
     *!                        (get_system_ticks() / (SystemCoreClock / 1000ul))
     *!     #endif
     */
}


int main(void)
{
    SystemCoreClockUpdate();
    init_cycle_counter(true);
    ...
    lv_init();
    lv_port_disp_init();
    ...
    while(1) {
        ...
        do {
            bool bLVFlag;
            
            //! 原子保护
            __IRQ_SAFE {
                bLVFlag = s_bLVTMRFlag;
                s_bLVTMRFlag = false;
            };
            if (bLVFlag) {
                lv_timer_handler();
            }
        } while(0);
    }
    
}

【跑分从未如此简单】


完成移植后,也许你会急于想知道当前环境下自己的平台能跑出怎样的帧率吧?别着急,LVGLcmsis-pack已经为您最好了准备。打开RTE配置窗口,勾选benchmark

a644732f7a48f2ac6bbd14cc49224d66.png

在 main.c 中加入对 lv_demo_benchmark.h 的引用:

#include "lv_port_disp_template.h"


#if LV_USE_DEMO_BENCHMARK
#   include "lv_demo_benchmark.h"
#endif

在 LVGL 初始化代码后,加入benchmark 无脑入口函数:

int main(void)
{


    lv_init();
    lv_port_disp_init();
    
#if LV_USE_DEMO_BENCHMARK
    lv_demo_benchmark();
#endif
    
    while(1) {
        
    }
    
}

编译,运行,走起:

6a772900200f3be9b90a32ac72b306cf.png

3acfbe9adef4a223a1f32ea36069875b.png

嗯…… Slow but common case……

70e08b0b8e75c8fac689d3ba31d22c3a.png

【装逼从未如此简单】


完成移植后,也许你“”会急于想知道当前环境下自己的平台能跑出怎样的效果吧?(咦?为什么要说又?)别着急,LVGLcmsis-pack已经为您最好了准备。打开RTE配置窗口,勾选 Demo:Widgets

e9947fec0d7cbb65fb9d6b217bb71baf.png

在 main.c 中加入对 lv_demo_widgets.h 的引用:

#include "lv_port_disp_template.h"


#if LV_USE_DEMO_BENCHMARK
#   include "lv_demo_benchmark.h"
#endif


#if LV_USE_DEMO_WIDGETS
#   include "lv_demo_widgets.h"
#endif

在 LVGL 初始化代码后,加入 Demo Widgets 的无脑入口函数:

int main(void)
{


    lv_init();
    lv_port_disp_init();
    
#if LV_USE_DEMO_BENCHMARK
    lv_demo_benchmark();
#endif
    
#if LV_USE_DEMO_WIDGETS
    lv_demo_widgets();
#endif


    while(1) {
        
    }
    
}

需要特别注意的是:要跑这个Demo,Stack(栈)和 Heap(堆)各自都不能小于 4K,切记,切记!

编译,运行,走起:

b2f52a5bf777f05a19c63004b2868b6b.png

【说在后面的话】


能参与像 LVGL 这样的项目,且在PR在三天内就并入主线,是我始料未及的。不得不佩服项目维护者的心胸和效率。

虽然很多人因为API兼容性的问题仍然在坚守 LVGL 7.x,但我相信随着cmsis-pack大幅降低了 MDK 用户的部署门槛后,应该会有越来越多的用户在新项目中使用 LVGL 8——毕竟MCU每个项目基本都是“新建文件夹”——也不能说没有历史传承,只能说基本没有……

940e3ed3b4949ddb00751a4801a529d5.gif

最后,对在MDK中用cmsis-pack来部署LVGL的过程感到好奇,但又想有个参考的小伙伴,可以关注下面这个开源项目:

https://github.com/GorgonMeducer/lv_port_mps3_an547_cm55

如果他对你有所帮助的话,还请赏赐个Star呀。

2df121f64cb30ba3c9c4c0be8da2d6fa.png


原创不易,

如果你喜欢我的思维、觉得我的文章对你有所启发,

请务必 “点赞、收藏、转发” 三连,这对我很重要!谢谢!

ddb9851f6ef407b876f57dba15a327f0.png

be99f6b4099bdd807fc20804922e36a8.png

1.RISC-V嵌入式开发课程节选版上线!文末还有图书优惠哦!赶快抢!

2.RISC-V能成为八位MCU的选择吗?

3.对嵌入式工程师硬件转软件的几条建议!

4.浅谈智能嵌入式系统的优化设计

5.单片机AD采样常用的十大滤波算法~

6.物联网时代,嵌入式软件测试工具越来越重要~

9f88997c48ae3ac12c4d33dc3f2ab139.gif

免责声明:本文系网络转载,版权归原作者所有。如涉及作品版权问题,请与我们联系,我们将根据您提供的版权证明材料确认版权并支付稿酬或者删除内容。

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值