搜索
查看: 33441|回复: 49

[原创] 开源GUI LittlevGL V5.0版本移植

  [复制链接]

该用户从未签到

60

主题

2111

帖子

31

蝴蝶豆

版主

最后登录
2023-6-21
发表于 2018-1-13 18:42:54 | 显示全部楼层 |阅读模式
本帖最后由 creep 于 2018-1-13 19:17 编辑

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


                                  IMG_0407.JPG


1、V5.0新特性
f80ce980-bcd9-4d2c-a19c-0978a125bd04.jpg

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

Elegant dark theme which shows confidence and high quality.

539cce83-09fc-4d77-9478-9edcfb83b7b6.jpg

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

3fe6c4e1-4051-4b1d-b917-1b0d114aa23a.jpg


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

ffd05b20-3bde-4ee1-b7d3-a148a0a2df50.jpg
e84cd541-ebe8-454a-8151-c173e885ad10.jpg


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

4a59d689-35c5-4c1b-9087-fb75bbe84999.jpg
更详细的请移步官网:http://littlevgl.com/basics

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

deea7166-3e0d-4344-b970-67f20c82a7de.jpg
新的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();。


  1. /**
  2. * Flush a color buffer
  3. * @param x1 left coordinate of the rectangle
  4. * @param x2 right coordinate of the rectangle
  5. * @param y1 top coordinate of the rectangle
  6. * @param y2 bottom coordinate of the rectangle
  7. * @param color_p pointer to an array of colors
  8. */
  9. static void tft_flush(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const lv_color_t * color_p)
  10. {
  11.     /*Return if the area is out the screen*/
  12.     if(x2 < 0) return;

  13.     if(y2 < 0) return;

  14.     if(x1 > TFT_HOR_RES - 1) return;

  15.     if(y1 > TFT_VER_RES - 1) return;

  16.     /*Truncate the area to the screen*/
  17.     int32_t act_x1 = x1 < 0 ? 0 : x1;
  18.     int32_t act_y1 = y1 < 0 ? 0 : y1;
  19.     int32_t act_x2 = x2 > TFT_HOR_RES - 1 ? TFT_HOR_RES - 1 : x2;
  20.     int32_t act_y2 = y2 > TFT_VER_RES - 1 ? TFT_VER_RES - 1 : y2;

  21.     uint32_t x;
  22.     uint32_t y;

  23.     /*Put the map to the remaining area*/
  24.     for(y = act_y1; y <= act_y2; y++)
  25.     {
  26.         for(x = act_x1; x <= act_x2; x++)
  27.         {
  28.             /*Your specific function comes here!*/
  29.             /*my_put_pixel(x, y, color_p->full);*/
  30.             BSP_LCD_DrawPixel(x, y,  ((color_p->full) | 0xFF000000));
  31.             color_p++;
  32.         }

  33.         color_p += x2 - act_x2;        /*Skip the parts out of the screen*/
  34.     }
  35.     lv_flush_ready();
  36. }
复制代码


首先测试下一个demo


IMG_0415.JPG


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

IMG_0413.JPG



IMG_0404.JPG

看下main函数

  1. int main(void)
  2. {

  3.     CPU_CACHE_Enable();
  4.     HAL_Init();
  5.     SystemClock_Config();
  6.     USART1_Init();
  7.     BSP_LCD_Init();
  8.     BSP_LCD_LayerDefaultInit(0, LCD_FB_START_ADDRESS);
  9.     BSP_LCD_SetTextColor(LCD_COLOR_RED);
  10.     BSP_LCD_Clear(LCD_COLOR_WHITE);
  11.     BSP_LCD_SetBackColor(LCD_COLOR_BLACK);

  12.     lv_init();
  13.     tft_init();
  14.     touchpad_init();
  15.     //可以使用下面的注释
  16.     //测试button
  17.     //button_test();
  18.    
  19.     //测试demo
  20.     //demo_create();
  21.    
  22.     //测试theme
  23.     lv_theme_t *th = lv_theme_alien_init(21, NULL);
  24.     lv_test_theme_1(th);
  25.    
  26.     while(1)
  27.     {
  28.         HAL_Delay(10);
  29.         lv_task_handler();

  30.     }
  31. }
复制代码




3、参考资料


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


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


测试代码:

LittlevGL-V5-STM32F69-DISCO.rar (6.01 MB, 下载次数: 2375)

评分

参与人数 1ST金币 +10 收起 理由
g921002 + 10 赞一个!

查看全部评分

回复

使用道具 举报

该用户从未签到

60

主题

2111

帖子

31

蝴蝶豆

版主

最后登录
2023-6-21
 楼主| 发表于 2018-12-2 17:05:00 | 显示全部楼层

开源GUI-littevGL应用教程 V0.1.pdf (3.14 MB, 下载次数: 511)
回复 支持 反对

使用道具 举报

该用户从未签到

47

主题

3456

帖子

30

蝴蝶豆

版主

最后登录
2022-12-25
发表于 2018-1-13 22:17:08 | 显示全部楼层
666学习了。。。
回复

使用道具 举报

该用户从未签到

64

主题

809

帖子

23

蝴蝶豆

实习版主

最后登录
2021-4-25
发表于 2018-1-13 22:51:35 | 显示全部楼层
回复

使用道具 举报

  • TA的每日心情
    开心
    2022-7-6 00:00
  • 签到天数: 1565 天

    [LV.Master]

    2

    主题

    3543

    帖子

    0

    蝴蝶豆

    论坛元老

    最后登录
    2022-7-6
    发表于 2018-1-14 03:32:44 | 显示全部楼层
    谢谢版主对此 GUI 的介绍。

    回复 支持 反对

    使用道具 举报

    该用户从未签到

    35

    主题

    458

    帖子

    93

    蝴蝶豆

    版主

    最后登录
    2020-9-9
    发表于 2018-1-14 10:15:51 | 显示全部楼层
    水果牛逼
    回复

    使用道具 举报

    该用户从未签到

    6

    主题

    1032

    帖子

    7

    蝴蝶豆

    金牌会员

    最后登录
    2022-2-6
    发表于 2018-1-14 13:14:36 | 显示全部楼层
    这个非常牛
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2018-2-6 09:20
  • 签到天数: 1 天

    [LV.1]初来乍到

    1182

    主题

    4967

    帖子

    1

    蝴蝶豆

    论坛元老

    最后登录
    2020-3-17
    发表于 2018-1-15 09:31:56 | 显示全部楼层
    厉害了大佬
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    25

    主题

    486

    帖子

    63

    蝴蝶豆

    金牌会员

    最后登录
    2021-5-12
    发表于 2018-1-15 10:11:35 | 显示全部楼层
    本帖最后由 shanji 于 2018-1-15 10:13 编辑

    风格漂亮。
    回复

    使用道具 举报

    该用户从未签到

    3

    主题

    1002

    帖子

    363

    蝴蝶豆

    版主

    最后登录
    2021-4-15
    发表于 2018-1-15 10:13:30 | 显示全部楼层
    我前天刚下载,确实不错。。。niubility!!!
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    25

    主题

    486

    帖子

    63

    蝴蝶豆

    金牌会员

    最后登录
    2021-5-12
    发表于 2018-1-15 10:24:23 | 显示全部楼层
    我准备弄到F429上玩玩,等着我啊
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 注册/登录

    本版积分规则

    关闭

    站长推荐上一条 /3 下一条

    Archiver|手机版|小黑屋|论坛-意法半导体STM32/STM8技术社区

    GMT+8, 2024-4-28 03:38 , Processed in 0.222842 second(s), 48 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2024, Tencent Cloud.

    快速回复 返回顶部 返回列表