推荐阅读最新的Littlevgl移植（更新时间:2018-1-13）：
) i1 S' s0 E+ f; J& B  
    开源GUI  LittlevGL  V5.0版本移植      
4 x, x1 F& _; P$ k' P0 ^5 E
8 S5 W" M3 f( P
" V$ ?1 W6 x! L: [$ iLittlevGL 是一个开源免费的GUI，支持触摸屏操作，移植简单方便，开发者一直在不断完善更新。LittlevGL 自带了丰富的控件：窗口、按键、标签、list、图表等，还可以自定义控件；支持很多特效：透明、阴影、自动显示隐藏滚动条、界面切换动画、图标打开关闭动画、平滑的拖拽控件、分层显示、反锯齿等等。
% Z# R! g7 Y3 P: m0 C
" C( `3 C& y$ ]
下面是我在STM32F769-DISCO上移植的演示模式的效果图片.
0 F7 d/ V8 r  {# F! Z


1 a$ S# T6 A! S$ A2 \0 u

主要控件可以通过下面的图片有个基本的了解：


6 E4 j' i. ?& I2 C! W5 ?
1、移植
' q- M4 h+ Q' z& B
' R, r# i/ `" @' }/ wLittlevGL 的移植非常简单，用户只需要提供systick、触摸屏、LCD显示接口即可。源码里面有3个文件用于分别添加这3个接口，具体如下：
5 u( l5 f: S& G. J. K
( B; p# R& y: f+ y0 s% R
也就是下面几个函数：
/ z' S+ K* Z' \0 R2 `0 m. P  P
, x' B3 h% V1 p, ?

• hal/disp disp_fill(x1, y1, x2, y2, color) to fill area with a color
• hal/disp disp_map(x1, y1, x2, y2, &color_array) copy a color map to an area
• hal/disp disp_color_cpy(dest, src, length, opa) copy pixel, optional for GPU
• hal/indev indev_get(id, &x, &y) get the x and y coordinates from an input device (e.g. touch pad)
• hal/systick systick_get() get a system tick with 1 ms resolution
• hal/systick systick_elapse(prev_time) get the elapsed milliseconds sience prev_time
• 
  4 j  b/ x* ?: o8 ]: w$ \

a)systick的移植直接使用的是HAL库里面提供的

. E- o5 t5 `# Q) H

1. /**
   ; n' |: W7 O3 ]8 v. x
2. * Get the elapsed milliseconds since start up
   
3. * @return the elapsed milliseconds
   
4. */
   
5. uint32_t systick_get(void)
   
6. {
   2 @" L$ w% a$ B* U% ^. x  l
7.         return HAL_GetTick();
   
8. }
   1 _8 `4 h2 _! Q. S
9. /**
   / M5 w8 l0 ~5 ^3 L' N0 W8 u
10. * Get the elapsed milliseconds science a previous time stamp
    # g6 |. a1 S! z4 O* S
11. * @param prev_tick a previous time stamp from 'systick_get'
    
12. * @return the elapsed milliseconds since 'prev_tick'
    2 P( H: z+ h! d; U4 P& Y0 z; ^
13. */
    
14. uint32_t systick_elaps(uint32_t prev_tick)
    , Q; O8 X0 j) k- l# n. |% Y" [
15. {
    / U9 h! l1 K3 _' |, Z! a% \
16.         volatile uint32_t act_time = systick_get();
    
17. 
    
18.         /*If there is no overflow in sys_time
    
19.          simple subtract*/
    
20.         if(act_time >= prev_tick) {
    
21.                 prev_tick = act_time - prev_tick;
    
22.         } else {
    
23.                 prev_tick = UINT32_MAX - prev_tick + 1;
      H% d# `! C5 ]3 F( C8 M
24.                 prev_tick += act_time;
    
25.         }
    
26.         return prev_tick;
    
27. }

复制代码

b)提供触摸屏的函数，用于初始化触摸屏和返回触摸屏扫描结果

1. /**
   : t  b0 L3 X4 g7 A2 F
2. * Initialize your input devices here
   
3. */
   - l  }0 @  G  Y+ ^% s
4. void indev_init(void)
   ( h/ i1 t; P+ M! N2 p3 X8 D
5. {
   
6.   BSP_TS_Init(DISP_HOR_RES, DISP_VER_RES);
   - U# }5 u5 c! e/ o$ S
7. }
   
8. 
   
9. /**
   " m, h. N1 J6 I6 ]; B5 g
10. * Read an input device
    1 H8 _; @- N/ H' x
11. * @param indev_id id of the input device to read
    
12. * @param x put the x coordinate here
    3 \0 q" r) v3 @( x2 X
13. * @param y put the y coordinate here
    
14. * @return true: the device is pressed, false: released
    
15. */
    
16. bool indev_get(uint8_t indev_id, int16_t * x, int16_t * y)
    
17. {
    " L0 |5 S4 F* I  r5 a3 T3 K7 k5 [
18.         if(indev_id != 0) {
    
19.                 *x = 0;
    6 {% a+ c9 A2 B  @
20.                 *y = 0;
    
21.                 return false;
    " ^; F( K, u3 \( C  |* h
22.         }
    : R$ J5 c1 X+ `, J/ j$ W& _6 P
23.         static int16_t last_x = 0;
    2 m. ^: T% u# e+ P
24.         static int16_t last_y = 0;
    
25.         bool press;
    
26.         BSP_TS_GetState(&TS_State);
    ! V& `* x8 l/ N5 r, |
27.         if(TS_State.touchDetected != 0) {
    
28.                 *x = TS_State.touchX[0];
    ) p5 P" T" @" J0 s- F3 v# u
29.                 *y = TS_State.touchY[0];
    
30.                 press = true;
    3 ^, ], }* t) e8 @- s5 L2 w
31.         } else {
    . G% e+ v7 Q  N; M1 N
32.                 *x = last_x;
    
33.                 *y = last_y;
    : W) x  o* B( E' k
34.                 press = false;
    1 u5 x% w" ], @6 |
35.         }
    
36. 
    
37.         return press;
    . l4 y/ Q' \' _1 V, ?* w
38. }

复制代码

c)LCD的移植分为几个函数，
# q" T5 j- T5 T3 S
1)一个是用单一色填充矩形区域，这个实际调用的次数较小
; C5 v: f% O2 q* s
. B7 y9 V4 p* v; T6 ]" e: H

1. /**
   * x6 B7 J) O/ ^$ O. N
2. * Fill a rectangular area with a color
   
3. * @param x1 left coordinate of the rectangle
   6 W1 C4 t. F( y" }
4. * @param x2 right coordinate of the rectangle
   + t4 l1 s5 R$ H5 Z8 g& a
5. * @param y1 top coordinate of the rectangle
   
6. * @param y2 bottom coordinate of the rectangle
   . [' b$ y9 y' t  n
7. * @param color fill color
   & I1 B1 [( d1 k
8. */
   ' c1 D/ h8 n3 s! l
9. void disp_fill(int32_t x1, int32_t y1, int32_t x2, int32_t y2, color_t color)
   
10. {
      Y: a. S' ~0 b5 b6 |9 z
11.     /*Return if the area is out the screen*/
    4 J+ V7 F! e9 `
12.     if(x2 < 0) return;
    ! u% }* @, }8 r* u  X# M
13. 
    
14.     if(y2 < 0) return;
    , \6 B6 F5 @  ^2 A  e
15. 
    . L3 m0 u$ F0 [) {* m: n
16.     if(x1 > DISP_HOR_RES - 1) return;
    
17. 
    ) G( G# t+ G* n: F% F5 @6 y
18.     if(y1 > DISP_VER_RES - 1) return;
    3 e; w" D/ s8 `
19. 
    
20.     /*Truncate the area to the screen*/
    
21.     int32_t act_x1 = x1 < 0 ? 0 : x1;
    
22.     int32_t act_y1 = y1 < 0 ? 0 : y1;
    
23.     int32_t act_x2 = x2 > DISP_HOR_RES - 1 ? DISP_HOR_RES - 1 : x2;
    ) Y; F- K- C* Z
24.     int32_t act_y2 = y2 > DISP_VER_RES - 1 ? DISP_VER_RES - 1 : y2;
    
25. 
    
26.     LCD_FillRectPart(act_x1, act_y1, act_x2 - act_x1 + 1, act_y2 - act_y1 + 1, ((color.full)));
    : ]) f- H7 @2 Z0 h- M6 Y& F8 m8 T
27. }

复制代码

2)这个是用一个颜色map填充一个矩形区域，这个主要用显示时局部刷新使用，是LCD显示调用的底层接口，使用非常频繁，如果需要优先显示速度，可以从这个函数入手，使用块内存复制或者DMA2D来实现。

1. /**
   4 p: `( S. {# b
2. * Put a color map to a rectangular area
   9 ~' A& X3 X! P6 R: W& E2 t
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. */
   ( s9 q$ N4 \* @1 r
9. void disp_map(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const color_t * color_p)
   # H& {: ^1 ?1 e
10. {
    9 ~$ o2 |% e1 E1 i: U0 I3 H, V
11.     /*Return if the area is out the screen*/
    
12.     if(x2 < 0) return;
    . Z" P' o7 F' W$ l
13. 
    
14.     if(y2 < 0) return;
    2 }( S2 y) C% D" z, c; T: G
15. 
    ( m' u( h& h/ Z& g5 E: J/ E
16.     if(x1 > DISP_HOR_RES - 1) return;
    
17. 
    
18.     if(y1 > DISP_VER_RES - 1) return;
    0 K( J, ^- u5 E- E
19. 
    
20.     /*Truncate the area to the screen*/
    
21.     int32_t act_x1 = x1 < 0 ? 0 : x1;
    
22.     int32_t act_y1 = y1 < 0 ? 0 : y1;
    
23.     int32_t act_x2 = x2 > DISP_HOR_RES - 1 ? DISP_HOR_RES - 1 : x2;
    9 F2 l' b6 n2 C$ y5 w  [5 ]' D
24.     int32_t act_y2 = y2 > DISP_VER_RES - 1 ? DISP_VER_RES - 1 : y2;
    
25. 
    
26. 
    9 P8 _5 K% }# B5 g; S' B& u
27.     uint32_t y;
    
28. 
    : Z9 E1 H5 W6 H
29.     for(y = act_y1; y <= act_y2; y++)
    
30.     {
    ' Y! K, f; P) {. B+ U. J) Y, t  Q; Y- S
31.         memcpy(&my_fb[y * DISP_HOR_RES + act_x1],
    
32.                color_p,
    3 e% z/ Z: @# t  ]7 N" e+ l! Q) t
33.                (act_x2 - act_x1 + 1) * sizeof(my_fb[0]));
    
34.         color_p += x2 - x1 + 1;    /*Skip the parts out of the screen*/
    
35.     }
    8 y" V( g* \  y. q  W) [
36. 
    
37. }

复制代码

3)硬件加速可选项打开后可以使用下面的函数复制加速填充复制内存

1. /**
   ( h" u. R5 k' }- j) J; v1 e
2. * Copy pixels to destination memory using opacity
   9 V, W  w( v( W# ]9 B" Y* d  L
3. * @param dest a memory address. Copy 'src' here.
   # D) H, R7 t9 b
4. * @param src pointer to pixel map. Copy it to 'dest'.
   
5. * @param length number of pixels in 'src'
   , X. l6 f, V- i9 o
6. * @param opa opacity (0, OPA_TRANSP: transparent ... 255, OPA_COVER, fully cover)
   ! m8 E" f  Q3 |) w
7. */
   $ P; }; z% j0 Y
8. void disp_color_cpy(color_t * dest, const color_t * src, uint32_t length, opa_t opa)
   , b0 D1 v( J9 ]+ M3 {
9. {
   - E2 Q6 j  |% k: j$ i* d
10.     /*Wait for the previous operation*/
    
11.     HAL_DMA2D_PollForTransfer(&Dma2dHandle, 100);
    , [6 j- a# x: U2 d& Q
12. 
    
13.     Dma2dHandle.LayerCfg[1].InputAlpha = opa;
    " c  X( {. i" ^3 @
14.     HAL_DMA2D_ConfigLayer(&Dma2dHandle, 1);
    3 ^9 V: V7 F( P. U# V
15.     HAL_DMA2D_BlendingStart(&Dma2dHandle, (uint32_t) src, (uint32_t) dest, (uint32_t)dest, length, 1);
    
16. }

复制代码

移植了上面接口之后基本问题就不大了，littlevgl 目前的代码结构有点乱，分为core、hal、misc 几个部分，我是分别建立一个文件夹然后把相应的文件全部添加到里面了，官网也没有详细的移植说明文档。所有的源码如下：
. e, G) Y0 f! u* }- U
添加到工程中后如下整体如下：

3 ~1 ]8 b! |& x" `. ?4 U+ Z
9 A" C1 p- o9 V. C: ^1 ?
) s5 Q/ C' H: ?7 F# M  F" D

将所有的文件添加到工程中后用keil编译可能会有一些错误和警告出现，但都很好解决。

3 P( h' ]& b# }" h( K5 `
2、运行效果

LittlevGL内置一个类似桌面系统的演示例子，通过打开相应的宏定义即可



1 x7 G5 w7 v; r& O- _% e8 F
2 l1 k; N& X& [' ^) ?LittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：
0 y9 \8 l' L: h; B



  B3 a/ U9 C# ~; l( o除此之外官网还有一个在STM32F429-DISOC上移植的例子，在youtube上可以观看，因为转换为了gif可能看起来不是很流畅，实际演示效果很不错。
+ D) ?9 m- \6 @3 T4 J
- W* @* d2 I& v5 K
$ M7 \# t% J* w! ^8 k
, [( [- J8 a8 Z$ }
3 [- D0 w- d( O下面是我在STM32F769-DISOC上面的移植，和linux下模拟运行的差不多。因为769-disco的分辨率很高，移植后我没有使用优化，所以可以看到画面切换有些闪烁。
5 B6 q& i8 ]" Z  o6 Y
6 h8 {2 S: j7 {7 `) \2 |) t1 M
3、关于LittlevGL

& ~& ]5 J' B6 Q  [    LittlevGL里面有个简单的时间片调度系统，刷新显示和触摸处理等任务会周期的被调用处理。LCD刷新采用了局部缓存刷新，这样能避免闪烁出现。LittlevGL目前只有一个开发者在业余时间维护更新，但是开发者热情很高，可以在github上看到更新很频繁，我测试的使用的V4.2版本，开发者正在开发4.3版本并加入了不少新的功能，有建议可以在github和作者讨论互动。
目前代码结构看上去有点乱，有人在也提到了这个问题，计划好像是在5.0版本引入新的代码组织结构，感兴趣的可以去github提意见，开发者很乐意沟通讨论。官网也有不少控件的使用介绍和例子参考。



3 `! u; K  g2 a& ?/ m4 U& B+ R) h+ p


" Z  _$ H$ x9 P+ I官网和github地址如下:

LittlevGL官网：http://www.gl.littlev.hu/
LittlevGLgithub :http://github.com/littlevgl   和  http://github.com/littlevgl/lvgl

/ T3 M9 h# c' B' }下面2个视频是在PC Simulator (Linux)和F4-DICO上的移植演示可能需要科学的方式才能打开。
How to Run Littlev Graphics Library in PC Simulator (Linux)：http://youtu.be/ZzLdct2ymvg
Embedded GUI on STM32 Discovery with Littlev Free Graphics Library：http://youtu.be/DcJdK137WKM
( ]' n6 {1 H+ R6 D
; Q6 k6 A9 m/ `+ F  和众多开源的RTOS不一样，目前GUI开源的不是很多，虽然很多商用的GUI也很炫酷，但是我们没法知道具体效果的实现细节，也没法学习到这种能力，LittlevGL目前实现的一些特性和控件我认为是开源的GUI里面水平非常高的了。但是目前LittlevGL资料不是很多，只能通过阅读源码去学习和研究。

' i* p" _% p: e: c
# @$ F7 r- M* M3 {7 Z/ ~5 k测试代码:
LittlevGL-STM32F769-DISCO.rar (4.72 MB, 下载次数: 867)

2017-9-7 22:50 上传

点击文件名下载附件
$ r6 m, b( Z! ^( r7 |( Y
! @% y+ X' Q! \8 n9 g5 w
: M# z# x. I5 {) y) m7 T* a7 H

8 z- j0 M, e" v  J- R8 M) f3 c* [
# Y$ D5 ^; I: U5 h; E

ioremap 发表于 2018-11-30 17:25
我遇到个大问题，求回复，空间没颜色的

' x& _4 b! F1 F8 W9 P  j2 h看到一个别人分享的开源中文教程。
) C1 a# l- S7 [! `; ]2 P 开源GUI-littevGL应用教程 V0.1.pdf (3.14 MB, 下载次数: 497)

2018-12-2 17:03 上传

点击文件名下载附件

ljt8015 发表于 2017-9-8 13:47
/ f. n, k; M8 n' u7 a( BLittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：

http://github.com/littlevgl/proj_pc
7 m! a# l* H5 ~

chen849928055 发表于 2018-7-23 16:10
版主Littlevgl移植 没有硬件mcu的限制吧,只要mcu的ram,rom等硬件条件符合要求,就能跑起Littlevgl吧 ...

是的，没有限制，移植吧。

跟着大佬学习。。。

wow。感觉真不错
7 o! l3 ]+ x9 K# i谢谢楼主分享

厉害厉害

现在的代码有点乱，图形界面依赖其他的misc，HAL等库。在github中提意见，将gui部分确实需要的部分集成到gui中，其余没用的部分剥离出去。

这个不错，赞一个

已经关注了一波。。。可以看看！！！！

学习新知识，快乐

LittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：


( U+ K, x* z/ V如何模拟？  如何在linux中运行？

9 N' V. Y% ~  N( h% E7 @0 U

LittlevGL 相比 ucgui 的优势？

. q8 g# A4 S4 s, O4 h

文档很少

! ^( r8 \8 ~, U7 K# O: X

ljt8015 发表于 2017-9-8 14:51
文档很少

: n: |1 G% d2 E文档是很少，只能通过看代码学习了，如果感兴趣的话可以一起讨论。

感谢楼主，这个很好

好6啊