( d, A# f) S5 y4 c. o
: P% a# D6 u& y) y  q) m    推荐阅读最新的Littlevgl移植（更新时间:2018-1-13）：
  
    开源GUI  LittlevGL  V5.0版本移植      

" N; n) e" V) Z0 a4 [3 ~
LittlevGL 是一个开源免费的GUI，支持触摸屏操作，移植简单方便，开发者一直在不断完善更新。LittlevGL 自带了丰富的控件：窗口、按键、标签、list、图表等，还可以自定义控件；支持很多特效：透明、阴影、自动显示隐藏滚动条、界面切换动画、图标打开关闭动画、平滑的拖拽控件、分层显示、反锯齿等等。
! d& T" L" y7 o+ s! n5 g/ d
# a" a& {& f- h# W
0 L# ~. v" ]9 Z* e$ P- R& ]. T下面是我在STM32F769-DISCO上移植的演示模式的效果图片.



) _1 [: a2 R3 x5 O# m& W

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

5 s& l$ d* i7 T9 p5 B8 k

1、移植
7 o$ y/ X( s. q8 ]" F" R; ^+ ?; y8 P
LittlevGL 的移植非常简单，用户只需要提供systick、触摸屏、LCD显示接口即可。源码里面有3个文件用于分别添加这3个接口，具体如下：


9 Z: A& [9 W5 k% h也就是下面几个函数：
/ g/ P2 _: l3 ^) k% D( k6 k; j

• 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
• 
  

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

7 J- |% i9 a' n3 X6 \8 \

1. /**
   . U6 ~2 {) w4 R% ]
2. * Get the elapsed milliseconds since start up
   - ^5 s' b9 o( I$ w
3. * @return the elapsed milliseconds
   1 e' v" B5 l- j7 G3 z; S9 \) G
4. */
   / K) m' T9 `- t5 x3 T& t/ c
5. uint32_t systick_get(void)
   ) _/ h! C. w8 g' U6 J  X
6. {
   3 b& F2 _% i6 `% ]) ?* H
7.         return HAL_GetTick();
   $ S: W3 G" y/ C) G4 o
8. }
   6 k& P, d) B7 }# E8 ?
9. /**
   
10. * Get the elapsed milliseconds science a previous time stamp
    
11. * @param prev_tick a previous time stamp from 'systick_get'
    
12. * @return the elapsed milliseconds since 'prev_tick'
    5 ^$ {, @/ t/ B
13. */
    
14. uint32_t systick_elaps(uint32_t prev_tick)
    
15. {
    9 i# V2 L$ T: _8 X" O: y6 q/ \
16.         volatile uint32_t act_time = systick_get();
    , C4 O! V% D! m  H% i  |+ b
17. 
    % I3 {+ g$ ?# ~" f
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;
    0 ?: L  B& D  L! J3 o
22.         } else {
    
23.                 prev_tick = UINT32_MAX - prev_tick + 1;
    8 ^; M/ m* C) m
24.                 prev_tick += act_time;
    
25.         }
    ; w1 n. T. N; T! f4 \1 T8 j
26.         return prev_tick;
    
27. }

复制代码

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

1. /**
   1 R& v! w; J5 V' R  e
2. * Initialize your input devices here
   0 {* _. I$ j7 R# V8 g0 `+ J3 M' H
3. */
   ( T1 F6 O) u+ @0 n9 {7 S
4. void indev_init(void)
   0 u9 j+ ?) R+ e% v5 Z" a
5. {
   
6.   BSP_TS_Init(DISP_HOR_RES, DISP_VER_RES);
   
7. }
   
8. 
   ) l, e  s2 B' A' p, F
9. /**
   
10. * Read an input device
    - ~, `* ?# ~+ ^8 M3 r* W
11. * @param indev_id id of the input device to read
      P5 B( E; s0 q, N; M6 K. x! I
12. * @param x put the x coordinate here
    8 G* v7 }% A. a4 l
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)
    % {! v0 |4 @7 E: ~3 v' w  u
17. {
    % w, T. r9 a) s9 {! t3 U. m, |
18.         if(indev_id != 0) {
    
19.                 *x = 0;
    
20.                 *y = 0;
    ; e$ }, F6 i0 ^9 _+ g# U
21.                 return false;
    
22.         }
    
23.         static int16_t last_x = 0;
    ' X9 I* _* U, b7 a5 ~/ {! C( N
24.         static int16_t last_y = 0;
    
25.         bool press;
    
26.         BSP_TS_GetState(&TS_State);
    9 M9 t( ^' I4 R& n* h6 {4 g0 H
27.         if(TS_State.touchDetected != 0) {
    
28.                 *x = TS_State.touchX[0];
    
29.                 *y = TS_State.touchY[0];
    5 I' T$ z: c- f: ~5 E. K9 k
30.                 press = true;
    ( x5 W  E" d7 t& I& W
31.         } else {
    
32.                 *x = last_x;
    
33.                 *y = last_y;
    3 I& V/ F7 z2 C0 B2 A
34.                 press = false;
    ! a" F5 V4 A' w
35.         }
    9 Y+ V8 b& r! r* r& a& ?
36. 
    
37.         return press;
    " a( S; s. M+ U$ I* {) S) O
38. }

复制代码

c)LCD的移植分为几个函数，
: k/ U: @5 o1 V$ s- [  b0 a
1)一个是用单一色填充矩形区域，这个实际调用的次数较小

/ I3 ~' e8 R. t7 `, O* {' l" V

1. /**
   
2. * Fill a rectangular area with a color
   0 l9 L) G, ^) X* {$ d* {! B
3. * @param x1 left coordinate of the rectangle
   8 t* q9 j2 e9 }% }: D8 s
4. * @param x2 right coordinate of the rectangle
   
5. * @param y1 top coordinate of the rectangle
   ( g. a# k1 V6 y! U6 m7 m
6. * @param y2 bottom coordinate of the rectangle
   9 M$ K0 s8 @4 v
7. * @param color fill color
   2 e/ U9 t6 a; F
8. */
   
9. void disp_fill(int32_t x1, int32_t y1, int32_t x2, int32_t y2, color_t color)
   3 {& L! t% A( ]$ X  ]
10. {
    
11.     /*Return if the area is out the screen*/
    * r6 U) Q% g* A
12.     if(x2 < 0) return;
    
13. 
    
14.     if(y2 < 0) return;
    + W1 Z$ m3 P9 e. i. d7 ^
15. 
    
16.     if(x1 > DISP_HOR_RES - 1) return;
    5 Q% z4 x' M* T2 y4 o5 M8 ^/ o
17. 
    
18.     if(y1 > DISP_VER_RES - 1) return;
    
19. 
    
20.     /*Truncate the area to the screen*/
    - p) u2 q9 R6 R$ d( T: z/ n
21.     int32_t act_x1 = x1 < 0 ? 0 : x1;
    ' e/ i" c- M) }' B% {( ]
22.     int32_t act_y1 = y1 < 0 ? 0 : y1;
    1 {/ \* W# H4 d9 O
23.     int32_t act_x2 = x2 > DISP_HOR_RES - 1 ? DISP_HOR_RES - 1 : x2;
    " B6 T  {% S  u" M' |+ I
24.     int32_t act_y2 = y2 > DISP_VER_RES - 1 ? DISP_VER_RES - 1 : y2;
    
25. 
    7 l+ c, Y1 u3 O+ ]  [# R; Q' i+ L
26.     LCD_FillRectPart(act_x1, act_y1, act_x2 - act_x1 + 1, act_y2 - act_y1 + 1, ((color.full)));
    9 k  x6 d9 g# X  I9 E4 m3 d
27. }

复制代码

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

1. /**
   & i; d  z5 G; L) R
2. * Put a color map to a rectangular area
   ; m, s4 ^" R1 F% W. N
3. * @param x1 left coordinate of the rectangle
   
4. * @param x2 right coordinate of the rectangle
   2 @' ^- }% N# x7 a3 A, J6 Z+ c- l; L
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
   5 M4 L  h  a8 s
8. */
   + S* q; p1 x% {9 h
9. void disp_map(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const color_t * color_p)
   
10. {
    ' C7 c: e) m4 h  [& u6 t5 q
11.     /*Return if the area is out the screen*/
    
12.     if(x2 < 0) return;
    ( N/ G* h3 A, ]# }
13. 
    
14.     if(y2 < 0) return;
    / v; K& W" ~" d% S1 c$ {/ i2 k4 s) V# P
15. 
    
16.     if(x1 > DISP_HOR_RES - 1) return;
    
17. 
    ! A+ L) H: w$ C6 X/ G+ h- S9 H
18.     if(y1 > DISP_VER_RES - 1) return;
    6 @. u9 K5 w1 n* u
19. 
    4 ]3 Z6 v( h  L
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;
      F! |8 t/ G" I7 M0 f# O
23.     int32_t act_x2 = x2 > DISP_HOR_RES - 1 ? DISP_HOR_RES - 1 : x2;
    1 w, o* m2 y8 e1 a
24.     int32_t act_y2 = y2 > DISP_VER_RES - 1 ? DISP_VER_RES - 1 : y2;
    5 n' @0 h+ o8 Q. {
25. 
    % r% V$ ?) S5 h
26. 
    
27.     uint32_t y;
    . m* ]2 V* A4 @$ l% G) i- ]) R" @; Z, g7 R
28. 
    : N/ `+ y" P& w8 j% S% L+ r# c
29.     for(y = act_y1; y <= act_y2; y++)
    
30.     {
    % g( s' @8 j! X
31.         memcpy(&my_fb[y * DISP_HOR_RES + act_x1],
    
32.                color_p,
    " q; ~9 }+ Y0 ]: ^! {
33.                (act_x2 - act_x1 + 1) * sizeof(my_fb[0]));
    % j6 F: v' y3 A. O
34.         color_p += x2 - x1 + 1;    /*Skip the parts out of the screen*/
    - i* P' q% V3 D  f# I% L# r
35.     }
    
36. 
    
37. }

复制代码

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

1. /**
   . T8 ~/ e% s" P2 Z8 `8 R8 p: ]
2. * Copy pixels to destination memory using opacity
   ; L! |7 z2 x" n3 b; a
3. * @param dest a memory address. Copy 'src' here.
   
4. * @param src pointer to pixel map. Copy it to 'dest'.
   / [6 j' I: |6 ~. n  e5 ^
5. * @param length number of pixels in 'src'
   & J- p/ I# d( J! t/ ~7 r  a
6. * @param opa opacity (0, OPA_TRANSP: transparent ... 255, OPA_COVER, fully cover)
   5 o0 a- \9 z# w6 a
7. */
   
8. void disp_color_cpy(color_t * dest, const color_t * src, uint32_t length, opa_t opa)
   9 x, P0 J/ C* c, N
9. {
   ) ]7 l6 R6 c5 X' {+ F3 U
10.     /*Wait for the previous operation*/
    
11.     HAL_DMA2D_PollForTransfer(&Dma2dHandle, 100);
    8 m- G: s0 H' L! x/ V
12. 
    
13.     Dma2dHandle.LayerCfg[1].InputAlpha = opa;
    
14.     HAL_DMA2D_ConfigLayer(&Dma2dHandle, 1);
    1 g) E4 l; V8 o1 B
15.     HAL_DMA2D_BlendingStart(&Dma2dHandle, (uint32_t) src, (uint32_t) dest, (uint32_t)dest, length, 1);
    . ^3 Y9 o* W  u+ k2 {" ?
16. }

复制代码

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

添加到工程中后如下整体如下：
" e7 \' U( q: Q8 k8 @1 r" B& w


# Z% V8 X; N: w  y

; Y1 ^. \5 N# N5 n3 u; L( @8 C4 S; g6 V+ Z将所有的文件添加到工程中后用keil编译可能会有一些错误和警告出现，但都很好解决。
" h2 M4 L* E* ?4 K
1 x5 Y3 p* m/ G! q! f
7 K" v# E3 c# F8 V5 Z) i) \2、运行效果

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

5 u) P! [  C7 Y- J# C
8 G3 F! }/ B% v& M- K3 b

; A* _4 {0 I3 H6 |: qLittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：
/ @$ q- P$ Q! |4 b1 {0 g- L
/ E' }2 Y: V! N+ [! H
9 T; C+ [% M1 u/ `' j1 A7 g

9 w2 L7 n" s& \除此之外官网还有一个在STM32F429-DISOC上移植的例子，在youtube上可以观看，因为转换为了gif可能看起来不是很流畅，实际演示效果很不错。

- C0 @  H2 h0 u, d! @, P* l

  O7 P5 Y1 P% n% f  h, Q5 `" M7 |
下面是我在STM32F769-DISOC上面的移植，和linux下模拟运行的差不多。因为769-disco的分辨率很高，移植后我没有使用优化，所以可以看到画面切换有些闪烁。
( y* ^8 x2 |8 m0 ?, I

3、关于LittlevGL
: N4 F, V* D, K" L: K' h0 U  y
    LittlevGL里面有个简单的时间片调度系统，刷新显示和触摸处理等任务会周期的被调用处理。LCD刷新采用了局部缓存刷新，这样能避免闪烁出现。LittlevGL目前只有一个开发者在业余时间维护更新，但是开发者热情很高，可以在github上看到更新很频繁，我测试的使用的V4.2版本，开发者正在开发4.3版本并加入了不少新的功能，有建议可以在github和作者讨论互动。
7 b# n+ i& }! A! M2 P目前代码结构看上去有点乱，有人在也提到了这个问题，计划好像是在5.0版本引入新的代码组织结构，感兴趣的可以去github提意见，开发者很乐意沟通讨论。官网也有不少控件的使用介绍和例子参考。
7 r7 g+ I9 R5 M( g8 T! P
$ u" x- j6 e0 K8 D4 ?/ I0 X

0 ^; z' y* o5 i1 v8 E


# D+ Q, F( L, f& x% z" l1 Z官网和github地址如下:

LittlevGL官网：http://www.gl.littlev.hu/
! Q+ l$ ]7 p3 yLittlevGLgithub :http://github.com/littlevgl   和  http://github.com/littlevgl/lvgl
$ `1 ^* n4 ^1 q( Q! \- ^
4 i: L9 J5 H/ U8 ]' y! o7 K# ^下面2个视频是在PC Simulator (Linux)和F4-DICO上的移植演示可能需要科学的方式才能打开。
9 V, i0 R/ u. {* k8 SHow to Run Littlev Graphics Library in PC Simulator (Linux)：http://youtu.be/ZzLdct2ymvg
( ?% f* n0 c" dEmbedded GUI on STM32 Discovery with Littlev Free Graphics Library：http://youtu.be/DcJdK137WKM
. e/ d' ]+ s3 T! q( j. I
1 K' Q5 \8 b: b5 I5 Q) q: ]  和众多开源的RTOS不一样，目前GUI开源的不是很多，虽然很多商用的GUI也很炫酷，但是我们没法知道具体效果的实现细节，也没法学习到这种能力，LittlevGL目前实现的一些特性和控件我认为是开源的GUI里面水平非常高的了。但是目前LittlevGL资料不是很多，只能通过阅读源码去学习和研究。
/ M+ N9 O# E5 h) z: N! p4 O

* I' V3 C) [2 d* D  S) r测试代码:
! f. M$ o* c1 @$ F% p. s9 |: D LittlevGL-STM32F769-DISCO.rar (4.72 MB, 下载次数: 867)

2017-9-7 22:50 上传

点击文件名下载附件



7 a+ U% h2 f9 [: H) a0 i. S

+ W6 Y7 ^; V+ y5 N7 ]# p% p1 F

ioremap 发表于 2018-11-30 17:25
% v, @& `9 F% C  |4 l我遇到个大问题，求回复，空间没颜色的

看到一个别人分享的开源中文教程。
8 H' _  E" l9 `3 X- B 开源GUI-littevGL应用教程 V0.1.pdf (3.14 MB, 下载次数: 497)

2018-12-2 17:03 上传

点击文件名下载附件
1 A. k, X9 s3 B# T1 Z, P* f

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

http://github.com/littlevgl/proj_pc

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

5 n3 a0 K6 L% T; l是的，没有限制，移植吧。

跟着大佬学习。。。

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

厉害厉害

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

这个不错，赞一个

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

学习新知识，快乐

LittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：
& ]5 i3 X9 A5 r! w9 x/ X' {

) @- k: B8 P# M7 o$ P9 V! O* Z4 U如何模拟？  如何在linux中运行？

LittlevGL 相比 ucgui 的优势？

& a; ^% O. B: j文档很少
: d" n( i& d: U. E- F! T7 ~
; m( t* j/ N  R9 u, a# {# R9 R

ljt8015 发表于 2017-9-8 14:51
' g2 \  N6 C& @/ \) w5 W文档很少

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

感谢楼主，这个很好

好6啊