开源GUI LittlevGL V5.0版本移植

[复制链接]

creep 发布时间：2018-1-13 18:42

技术帖
文章封面:	-
文章简介:	-

本帖最后由 creep 于 2018-1-13 19:17 编辑

最近看到越来越多的小伙伴在讨论littlevgl，这说明这个开源GUI正在被更多的人了解和使用，最近littlevgl正式推出了V5.0版本，完善了整个代码架构和一些API及函数的命名，重新设计了移植的接口方式，添加了众多的控件及可更换主题等功能。我之前在STM32F769-DISCO 上移植了V4.2版本，下面的移植使用最新的V5.0版本的源码。

1、V5.0新特性

源码提供了各种内置主题可以选择比如下面的黑色主题

Elegant dark theme which shows confidence and high quality.

下面的是Android's material design风格主题

更多主题可以到官网查看：http://littlevgl.com/themes
Unicode support、Symbol fonts 支持

5.0版本也增加了一些新的的控件：http://littlevgl.com/object-types

更详细的请移步官网：http://littlevgl.com/basics

2、移植
官网给出的移植要求如下，littlevgl 的移植性很高，基本不需要单片机外部资源。

新的5.0版本的移植接口采用了函数注册的方式，Display interface、Input device interface、Tick interface ，只要实现这3个简单的接口就可以
简单的跑起来littlevgl,接口的移植的详细的说明可以参考:http://littlevgl.com/porting

其中需要注意的Display interface，为了优化显示，可以使用2个Virtual Display buffers (VDB)并行的rendering and flushing。作者的移植例子使用的是DMA中断在进行background flushing。我移植的时候为了简单就直接使用的单缓冲，然后手动调用lv_flush_ready();。

/**
* Flush a color buffer
* @param x1 left coordinate of the rectangle
* @param x2 right coordinate of the rectangle
* @param y1 top coordinate of the rectangle
* @param y2 bottom coordinate of the rectangle
* @param color_p pointer to an array of colors
*/
static void tft_flush(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const lv_color_t * color_p)
{
/*Return if the area is out the screen*/
if(x2 < 0) return;
if(y2 < 0) return;
if(x1 > TFT_HOR_RES - 1) return;
if(y1 > TFT_VER_RES - 1) return;
/*Truncate the area to the screen*/
int32_t act_x1 = x1 < 0 ? 0 : x1;
int32_t act_y1 = y1 < 0 ? 0 : y1;
int32_t act_x2 = x2 > TFT_HOR_RES - 1 ? TFT_HOR_RES - 1 : x2;
int32_t act_y2 = y2 > TFT_VER_RES - 1 ? TFT_VER_RES - 1 : y2;
uint32_t x;
uint32_t y;
/*Put the map to the remaining area*/
for(y = act_y1; y <= act_y2; y++)
{
for(x = act_x1; x <= act_x2; x++)
{
/*Your specific function comes here!*/
/*my_put_pixel(x, y, color_p->full);*/
BSP_LCD_DrawPixel(x, y, ((color_p->full) | 0xFF000000));
color_p++;
}
color_p += x2 - act_x2; /*Skip the parts out of the screen*/
}
lv_flush_ready();
}

复制代码

首先测试下一个demo

然后测试下内置的主题换肤

看下main函数

int main(void)
{
CPU_CACHE_Enable();
HAL_Init();
SystemClock_Config();
USART1_Init();
BSP_LCD_Init();
BSP_LCD_LayerDefaultInit(0, LCD_FB_START_ADDRESS);
BSP_LCD_SetTextColor(LCD_COLOR_RED);
BSP_LCD_Clear(LCD_COLOR_WHITE);
BSP_LCD_SetBackColor(LCD_COLOR_BLACK);
lv_init();
tft_init();
touchpad_init();
//可以使用下面的注释
//测试button
//button_test();
//测试demo
//demo_create();
//测试theme
lv_theme_t *th = lv_theme_alien_init(21, NULL);
lv_test_theme_1(th);
while(1)
{
HAL_Delay(10);
lv_task_handler();
}
}

复制代码

3、参考资料

参考资料要推荐的官网的详细的说明和各种控件的使用说明及代码实例，还有就是作者在github上提供了PC模拟器以及各种控件和入门的代码可以参考，最后要感谢作者无私的开源精神！

官网：http://littlevgl.com/
pc_simulator：http://github.com/littlevgl/pc_simulator
lv_examples：http://github.com/littlevgl/lv_examples

测试代码：