$ H+ s+ ]: X5 w( F( `" J( K; r0 o: A
    推荐阅读最新的Littlevgl移植（更新时间:2018-1-13）：
7 Q3 ?# P4 u' C  
/ `' u: c7 z. i+ h' r7 H: O; n    开源GUI  LittlevGL  V5.0版本移植      
2 |; N$ C; @1 j

4 m9 x* g9 q+ jLittlevGL 是一个开源免费的GUI，支持触摸屏操作，移植简单方便，开发者一直在不断完善更新。LittlevGL 自带了丰富的控件：窗口、按键、标签、list、图表等，还可以自定义控件；支持很多特效：透明、阴影、自动显示隐藏滚动条、界面切换动画、图标打开关闭动画、平滑的拖拽控件、分层显示、反锯齿等等。
  Y) Y3 d! d( o  P" X4 T

下面是我在STM32F769-DISCO上移植的演示模式的效果图片.
. l' h, s3 ?  }, }# _4 H9 f) ~
  x2 j9 e9 A( E  }" v4 M



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

; D# E" |, Y; }3 L. w

; P& f! `( ^! f- Q. ], [4 j1、移植
+ T# [0 m1 |1 D$ z  G# J
+ z4 H9 t' m2 y- `& \LittlevGL 的移植非常简单，用户只需要提供systick、触摸屏、LCD显示接口即可。源码里面有3个文件用于分别添加这3个接口，具体如下：


, S% O) m" Y6 n8 n; C$ e$ ]也就是下面几个函数：

5 r2 f, b. x0 p6 U

• 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
• 
  ) d$ u0 Z4 C( C0 P6 R

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

! o; S! W/ X, ]! V: \

1. /**
   
2. * Get the elapsed milliseconds since start up
   
3. * @return the elapsed milliseconds
   $ ]4 J/ f( |5 Y* o) R6 j5 H
4. */
   
5. uint32_t systick_get(void)
   
6. {
   
7.         return HAL_GetTick();
   2 D7 l2 x1 i4 y+ B, s
8. }
   
9. /**
   1 |! c+ X( |& a; n
10. * Get the elapsed milliseconds science a previous time stamp
    
11. * @param prev_tick a previous time stamp from 'systick_get'
    * j  o3 X: s8 @  i
12. * @return the elapsed milliseconds since 'prev_tick'
    
13. */
    
14. uint32_t systick_elaps(uint32_t prev_tick)
    5 g" x# Z; c7 U1 b' \8 h
15. {
    
16.         volatile uint32_t act_time = systick_get();
    . K4 u5 |- q: a7 [
17. 
    8 _/ j$ u( ~: s! m7 E
18.         /*If there is no overflow in sys_time
    - @& Y2 ~9 H% U
19.          simple subtract*/
    
20.         if(act_time >= prev_tick) {
    
21.                 prev_tick = act_time - prev_tick;
    
22.         } else {
    5 Z& d# }$ p. y9 Z8 n7 Q, l" [7 i
23.                 prev_tick = UINT32_MAX - prev_tick + 1;
    ! b0 ?, v3 S3 @$ C% j
24.                 prev_tick += act_time;
    1 b$ G$ N. D; e7 @
25.         }
    
26.         return prev_tick;
    5 x( Z1 l' J/ S# A+ r! C- @
27. }

复制代码

b)提供触摸屏的函数，用于初始化触摸屏和返回触摸屏扫描结果
7 {4 C' ~% h" `- D7 d  Q6 s4 }

1. /**
   
2. * Initialize your input devices here
   % ]0 F! G5 Z# K7 K$ ]1 b- U0 u+ Y
3. */
   ( N) ?* I9 T4 k" i
4. void indev_init(void)
   3 p: X/ [" P& }3 F
5. {
   
6.   BSP_TS_Init(DISP_HOR_RES, DISP_VER_RES);
   8 z, r  A. \6 Q6 X9 g
7. }
   & v" L; ?# G% u$ T7 l7 W) J( e6 E4 P
8. 
   
9. /**
   ( t: [; Y' t6 x! I
10. * Read an input device
    
11. * @param indev_id id of the input device to read
    5 k# W9 b" g0 G6 D* K. O
12. * @param x put the x coordinate here
    
13. * @param y put the y coordinate here
    
14. * @return true: the device is pressed, false: released
    & I4 v6 Z" {' b$ r- P4 V/ ]- m- X
15. */
    3 x4 u; }8 y5 x0 R
16. bool indev_get(uint8_t indev_id, int16_t * x, int16_t * y)
    . q1 p; t7 O1 \1 y+ T
17. {
    ; D/ H: t9 ], R% z* i7 d0 d
18.         if(indev_id != 0) {
    
19.                 *x = 0;
    : a4 @( w/ h% Q$ H; d6 x$ @9 }( C
20.                 *y = 0;
    
21.                 return false;
    * ~- G' S8 E$ R: i8 f' M
22.         }
    
23.         static int16_t last_x = 0;
    % U/ q7 ^, W% E
24.         static int16_t last_y = 0;
    3 n1 s$ t, C. W: m3 ]" p
25.         bool press;
    1 f7 n5 j8 d8 d5 o' U
26.         BSP_TS_GetState(&TS_State);
    ( Z3 f% \$ e- R8 X
27.         if(TS_State.touchDetected != 0) {
    6 H: p% I* C- N" `, E
28.                 *x = TS_State.touchX[0];
    
29.                 *y = TS_State.touchY[0];
    & T1 |9 p6 m5 ^2 B$ b1 y
30.                 press = true;
    
31.         } else {
    1 ~: d5 F) s; j2 S/ S
32.                 *x = last_x;
    1 v# X4 R$ ]1 j* {
33.                 *y = last_y;
    
34.                 press = false;
    ( y* p8 r% v7 c( e
35.         }
    
36. 
    7 |7 V9 J2 a9 I8 z  q6 h7 z
37.         return press;
    ) |: v; h* f) ^& S. t
38. }

复制代码

c)LCD的移植分为几个函数，
4 {/ l$ l2 o3 V4 }) o5 E
1)一个是用单一色填充矩形区域，这个实际调用的次数较小

1. /**
   
2. * Fill a rectangular area with a color
   
3. * @param x1 left coordinate of the rectangle
   
4. * @param x2 right coordinate of the rectangle
   4 B+ ~5 @& Y- U- `& r
5. * @param y1 top coordinate of the rectangle
   / v% }# s' C9 N" T- {
6. * @param y2 bottom coordinate of the rectangle
   
7. * @param color fill color
   
8. */
   1 g% Z) I2 B: a, A+ N/ \+ L
9. void disp_fill(int32_t x1, int32_t y1, int32_t x2, int32_t y2, color_t color)
   $ L' I9 T  ^) j& A3 P( \( p# r
10. {
    4 [) S$ i8 u, _6 ]' q
11.     /*Return if the area is out the screen*/
    / j, K: [' y0 B& V
12.     if(x2 < 0) return;
    , j5 u- m# o1 U5 K* a! ?7 P, R! v# q
13. 
    
14.     if(y2 < 0) return;
    # J, v2 W8 Y. P' \2 ]9 O1 E9 d
15. 
    
16.     if(x1 > DISP_HOR_RES - 1) return;
    
17. 
    ' U) x2 e8 a5 A1 k6 X- [- E
18.     if(y1 > DISP_VER_RES - 1) return;
    0 i5 B) @  u6 }* e* C" F: Z
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;
    ; ]3 \8 r  l+ G, A
24.     int32_t act_y2 = y2 > DISP_VER_RES - 1 ? DISP_VER_RES - 1 : y2;
    . ]" t. \' N& \6 n5 L- c
25. 
    
26.     LCD_FillRectPart(act_x1, act_y1, act_x2 - act_x1 + 1, act_y2 - act_y1 + 1, ((color.full)));
    
27. }

复制代码

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

1. /**
   
2. * Put a color map to a rectangular area
   . }8 ^# z, M/ J" M2 Y
3. * @param x1 left coordinate of the rectangle
   3 Q% V# o$ G5 e+ o4 }9 F& P
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. void disp_map(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const color_t * color_p)
   $ u0 i. l! J! s* t- @
10. {
    
11.     /*Return if the area is out the screen*/
    " O" `0 ~; Z6 e; F' d
12.     if(x2 < 0) return;
    6 J' ?$ s* Z, }4 i7 y) A
13. 
    9 N. n+ q' T: h4 F7 _# z
14.     if(y2 < 0) return;
    
15. 
    
16.     if(x1 > DISP_HOR_RES - 1) return;
    4 M% e6 K3 t6 ~' H3 u% I1 p
17. 
    $ e% `0 c6 i  J8 @  e9 V6 W- y
18.     if(y1 > DISP_VER_RES - 1) return;
    ! Q' ~; t" {2 P% k0 I3 R% N8 X* B
19. 
    & J1 T! O% k: `1 X! x
20.     /*Truncate the area to the screen*/
    4 j# [8 Q+ C+ o8 Y, g& v9 k
21.     int32_t act_x1 = x1 < 0 ? 0 : x1;
    2 _; S& d$ o- i% V. O
22.     int32_t act_y1 = y1 < 0 ? 0 : y1;
    
23.     int32_t act_x2 = x2 > DISP_HOR_RES - 1 ? DISP_HOR_RES - 1 : x2;
    
24.     int32_t act_y2 = y2 > DISP_VER_RES - 1 ? DISP_VER_RES - 1 : y2;
    
25. 
    
26. 
    
27.     uint32_t y;
    
28. 
    
29.     for(y = act_y1; y <= act_y2; y++)
    
30.     {
    
31.         memcpy(&my_fb[y * DISP_HOR_RES + act_x1],
    1 X( r+ E% }: U! X5 j1 P5 M+ j+ A
32.                color_p,
    ' \' F9 e, w6 ]8 }
33.                (act_x2 - act_x1 + 1) * sizeof(my_fb[0]));
    7 ]! j4 N/ L+ k) c! q7 H7 v
34.         color_p += x2 - x1 + 1;    /*Skip the parts out of the screen*/
    / w+ {8 D& A7 }0 L
35.     }
    ; I3 q8 K8 D- u/ N7 [4 s
36. 
    
37. }

复制代码

3)硬件加速可选项打开后可以使用下面的函数复制加速填充复制内存
3 c4 |3 F) t6 L! A4 y" U" w3 p

1. /**
   
2. * Copy pixels to destination memory using opacity
   
3. * @param dest a memory address. Copy 'src' here.
   , D% W4 J' J  p0 ~) |7 [# I
4. * @param src pointer to pixel map. Copy it to 'dest'.
   
5. * @param length number of pixels in 'src'
   
6. * @param opa opacity (0, OPA_TRANSP: transparent ... 255, OPA_COVER, fully cover)
   
7. */
   
8. void disp_color_cpy(color_t * dest, const color_t * src, uint32_t length, opa_t opa)
   9 l8 I: B( R4 G
9. {
   
10.     /*Wait for the previous operation*/
    8 w( l+ ?8 h. w! `1 f
11.     HAL_DMA2D_PollForTransfer(&Dma2dHandle, 100);
    . N7 Y, d4 N& Z
12. 
    2 @5 @1 r* r4 T5 x; t7 r2 `
13.     Dma2dHandle.LayerCfg[1].InputAlpha = opa;
    8 V. I! {. w# W- L: d
14.     HAL_DMA2D_ConfigLayer(&Dma2dHandle, 1);
    
15.     HAL_DMA2D_BlendingStart(&Dma2dHandle, (uint32_t) src, (uint32_t) dest, (uint32_t)dest, length, 1);
    0 u( h% @# i& L4 B: |9 P' H0 s
16. }

复制代码

移植了上面接口之后基本问题就不大了，littlevgl 目前的代码结构有点乱，分为core、hal、misc 几个部分，我是分别建立一个文件夹然后把相应的文件全部添加到里面了，官网也没有详细的移植说明文档。所有的源码如下：

添加到工程中后如下整体如下：



- Y- [+ A' y8 s# l& O6 j( k0 w! Q
. d: C' ]9 E. V" ?/ n& K
/ W4 l, Q3 E$ z将所有的文件添加到工程中后用keil编译可能会有一些错误和警告出现，但都很好解决。


0 w" q3 \. r) Y! ?6 v2、运行效果

LittlevGL内置一个类似桌面系统的演示例子，通过打开相应的宏定义即可
) L, {, X* Z9 I

' g2 N9 U# f, }+ q$ K  Z

+ V% l% A- c! j0 Z/ Y3 V  fLittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：

3 W, T4 J7 d8 T3 ]. _


除此之外官网还有一个在STM32F429-DISOC上移植的例子，在youtube上可以观看，因为转换为了gif可能看起来不是很流畅，实际演示效果很不错。
% Z* i5 W; M! h6 g& T. F0 J

0 K# c5 {% x- `: w" C3 B/ ~; f% h
& b8 k; S+ k! |! o
5 q7 o5 M' f3 r6 c2 o下面是我在STM32F769-DISOC上面的移植，和linux下模拟运行的差不多。因为769-disco的分辨率很高，移植后我没有使用优化，所以可以看到画面切换有些闪烁。
& [/ o$ |% T) d. g/ d8 i
5 J. ?& p1 B6 [. y9 }
3、关于LittlevGL

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


% b. ]0 }* t: x


, G/ [( I1 r' v" O" D+ A
官网和github地址如下:

! o: W" o( i: M6 J/ W2 m$ {  ?LittlevGL官网：http://www.gl.littlev.hu/
$ J# W/ T' ^5 D# l1 p/ d. D% oLittlevGLgithub :http://github.com/littlevgl   和  http://github.com/littlevgl/lvgl
$ p4 o8 N% @- X5 e6 t
5 k8 m4 {$ [% q下面2个视频是在PC Simulator (Linux)和F4-DICO上的移植演示可能需要科学的方式才能打开。
; F) v' {4 i' n( g' I" f/ \How to Run Littlev Graphics Library in PC Simulator (Linux)：http://youtu.be/ZzLdct2ymvg
3 K# R2 p) @3 a! w+ D2 kEmbedded GUI on STM32 Discovery with Littlev Free Graphics Library：http://youtu.be/DcJdK137WKM

  和众多开源的RTOS不一样，目前GUI开源的不是很多，虽然很多商用的GUI也很炫酷，但是我们没法知道具体效果的实现细节，也没法学习到这种能力，LittlevGL目前实现的一些特性和控件我认为是开源的GUI里面水平非常高的了。但是目前LittlevGL资料不是很多，只能通过阅读源码去学习和研究。
0 G) u( A8 o1 q; E% Z1 Y- [# N3 X3 T

3 L) g0 Y. ~3 d测试代码:
) F  }9 N) z* d! M6 e LittlevGL-STM32F769-DISCO.rar (4.72 MB, 下载次数: 867)

2017-9-7 22:50 上传

点击文件名下载附件
& i- }+ _* X2 j0 b

/ L& _# M: r  O% {& y. i

$ v4 R% B/ ^7 C

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

/ r" J. ]. O3 Z2 {( o* t) o看到一个别人分享的开源中文教程。
开源GUI-littevGL应用教程 V0.1.pdf (3.14 MB, 下载次数: 497)

2018-12-2 17:03 上传

点击文件名下载附件
% G5 W) _$ h" R: I/ @+ M) k# @

ljt8015 发表于 2017-9-8 13:47
LittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：

http://github.com/littlevgl/proj_pc

chen849928055 发表于 2018-7-23 16:10
- \$ K7 j( O: J, @$ I, M8 x1 t版主Littlevgl移植 没有硬件mcu的限制吧,只要mcu的ram,rom等硬件条件符合要求,就能跑起Littlevgl吧 ...

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

跟着大佬学习。。。

wow。感觉真不错
谢谢楼主分享

厉害厉害

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

这个不错，赞一个

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

学习新知识，快乐

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

- [" ~+ M& O( u& b0 \# @0 h0 Z
1 w* n& H6 s0 f, h$ K6 @* B/ N4 d6 K如何模拟？  如何在linux中运行？

LittlevGL 相比 ucgui 的优势？
( M. f6 G3 L' S4 M# J" v) u

/ u1 ?  y6 z3 D! H" e) n, i文档很少
( M' }9 p. x. r3 [- W0 U' H
8 i) P1 G: t9 W0 D

ljt8015 发表于 2017-9-8 14:51
' I9 b3 f) w2 |/ @& N2 I文档很少

文档是很少，只能通过看代码学习了，如果感兴趣的话可以一起讨论。

感谢楼主，这个很好

好6啊