( e1 E9 a. ^+ m1 a- ?
    推荐阅读最新的Littlevgl移植（更新时间:2018-1-13）：
  
    开源GUI  LittlevGL  V5.0版本移植      
, K& d1 w5 E* n8 j6 \1 [

LittlevGL 是一个开源免费的GUI，支持触摸屏操作，移植简单方便，开发者一直在不断完善更新。LittlevGL 自带了丰富的控件：窗口、按键、标签、list、图表等，还可以自定义控件；支持很多特效：透明、阴影、自动显示隐藏滚动条、界面切换动画、图标打开关闭动画、平滑的拖拽控件、分层显示、反锯齿等等。
  u" A' N! C; ]& x

7 Z3 B) r7 V1 l& P( }下面是我在STM32F769-DISCO上移植的演示模式的效果图片.

8 m  B0 D; `' u- F6 z( E3 [



6 r( ^6 |1 D' n& [主要控件可以通过下面的图片有个基本的了解：
4 i! t# z1 P; C3 `, N' O) Y& L

9 g0 j* D2 x+ l/ c! m
8 Z2 Y+ z4 l1 ?1、移植

LittlevGL 的移植非常简单，用户只需要提供systick、触摸屏、LCD显示接口即可。源码里面有3个文件用于分别添加这3个接口，具体如下：
& X0 W) V' X0 g( Q* N& s3 ?! w

& P" b' o' k0 B- t6 d也就是下面几个函数：

• 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
• 
    G1 S1 L$ [) P( r$ x* i( c( r

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

1. /**
   + X5 j0 O+ t! w' I' i/ R8 i% ]
2. * Get the elapsed milliseconds since start up
     `7 K; J# r  a' G& H' k$ u# j
3. * @return the elapsed milliseconds
   
4. */
   
5. uint32_t systick_get(void)
   
6. {
   
7.         return HAL_GetTick();
   0 e" z, B: ~' U& }; t4 i7 ~7 B
8. }
   7 I! [8 ~/ R  A5 ]1 c
9. /**
   : |/ d# J+ V8 H
10. * Get the elapsed milliseconds science a previous time stamp
    - k7 M1 }( Y$ P- J$ N7 E
11. * @param prev_tick a previous time stamp from 'systick_get'
    
12. * @return the elapsed milliseconds since 'prev_tick'
    ( H8 |5 g+ p8 N  F0 W; X! E/ w& N! U
13. */
    . `' ]3 n% w2 ^; o
14. uint32_t systick_elaps(uint32_t prev_tick)
    
15. {
    8 L' {8 G( ~4 }5 i/ Z  p, m: L9 y
16.         volatile uint32_t act_time = systick_get();
    
17. 
      K8 ]  ~0 ?* B' q$ e* X* j$ O
18.         /*If there is no overflow in sys_time
    
19.          simple subtract*/
    
20.         if(act_time >= prev_tick) {
    + P7 p2 X; C- D$ K3 o
21.                 prev_tick = act_time - prev_tick;
    
22.         } else {
    % K' L* m8 K- o) Y
23.                 prev_tick = UINT32_MAX - prev_tick + 1;
    
24.                 prev_tick += act_time;
    
25.         }
    : S; i8 m8 I9 ~7 s) c
26.         return prev_tick;
    
27. }

复制代码

b)提供触摸屏的函数，用于初始化触摸屏和返回触摸屏扫描结果
; Y4 g1 ]  n5 H& @  z1 l, x

1. /**
   1 t! |( M: P" f" }+ m1 I
2. * Initialize your input devices here
   
3. */
   $ [/ n" Q8 q  g6 B! P7 }
4. void indev_init(void)
   5 H1 J8 s: o3 \, D0 g$ T) s3 e
5. {
   
6.   BSP_TS_Init(DISP_HOR_RES, DISP_VER_RES);
   
7. }
   
8. 
   
9. /**
   9 Z, _# f. _4 E1 u
10. * Read an input device
    
11. * @param indev_id id of the input device to read
    2 S& _5 N# d! ~. y! G! C
12. * @param x put the x coordinate here
    3 l8 L' z! O9 ~' Q
13. * @param y put the y coordinate here
    9 g: L# H# ^$ y. q' P: ]% H/ I4 f
14. * @return true: the device is pressed, false: released
    
15. */
    , X1 _, Z! J4 ]1 U- z; X7 U
16. bool indev_get(uint8_t indev_id, int16_t * x, int16_t * y)
    - S& b8 W; s8 e; x. G* O1 O: C" Z
17. {
    . i& P% `7 `6 k
18.         if(indev_id != 0) {
    # D# i* B, u7 X
19.                 *x = 0;
    
20.                 *y = 0;
    8 r" S- F  p8 D( Y$ {( J
21.                 return false;
    
22.         }
    
23.         static int16_t last_x = 0;
    
24.         static int16_t last_y = 0;
    
25.         bool press;
    0 Q, H' ?" t2 c
26.         BSP_TS_GetState(&TS_State);
    4 ~- A2 W# {  A4 Q% I/ a1 ^" t2 X
27.         if(TS_State.touchDetected != 0) {
    
28.                 *x = TS_State.touchX[0];
    
29.                 *y = TS_State.touchY[0];
    
30.                 press = true;
    
31.         } else {
    
32.                 *x = last_x;
    # @6 C. w- Q: t* C8 S( u
33.                 *y = last_y;
    3 W) t) L2 b+ v0 U: |! b- @
34.                 press = false;
    
35.         }
    
36. 
    
37.         return press;
    
38. }

复制代码

c)LCD的移植分为几个函数，
% m2 k; W/ W3 O7 o' T+ l% W4 S
/ |6 j# P; ?$ ]2 H" L1)一个是用单一色填充矩形区域，这个实际调用的次数较小

6 E) d" f3 j8 Q/ N& ?

1. /**
   & P  w8 U: P/ n
2. * Fill a rectangular area with a color
   
3. * @param x1 left coordinate of the rectangle
   
4. * @param x2 right coordinate of the rectangle
   . L6 u2 j0 B0 M8 Z. w& T
5. * @param y1 top coordinate of the rectangle
   $ v9 }! b6 e$ a" a7 q2 S
6. * @param y2 bottom coordinate of the rectangle
   7 x3 B" L' {: m  T+ |- M. ]
7. * @param color fill color
   ( N- I2 y6 N0 W5 T8 W
8. */
   1 M3 U5 ~6 I1 w$ H- c
9. void disp_fill(int32_t x1, int32_t y1, int32_t x2, int32_t y2, color_t color)
   - Z$ H  J. @; n8 S
10. {
    
11.     /*Return if the area is out the screen*/
    
12.     if(x2 < 0) return;
    
13. 
    7 @; ]; d+ K  @# S
14.     if(y2 < 0) return;
    ' o% M9 V; E( y
15. 
    ) J5 n6 T; ~) T6 d% Y
16.     if(x1 > DISP_HOR_RES - 1) return;
    ( v3 Q5 Y! d) s+ S/ s: Z  Y; l0 P
17. 
    
18.     if(y1 > DISP_VER_RES - 1) return;
    ( i) k1 V! m# U7 o' s
19. 
    
20.     /*Truncate the area to the screen*/
    $ p9 Z% x: L0 Z# R
21.     int32_t act_x1 = x1 < 0 ? 0 : x1;
    
22.     int32_t act_y1 = y1 < 0 ? 0 : y1;
    - O/ P" m& s. e$ R& ?6 s
23.     int32_t act_x2 = x2 > DISP_HOR_RES - 1 ? DISP_HOR_RES - 1 : x2;
      K% i% X% f* L  X2 E, j
24.     int32_t act_y2 = y2 > DISP_VER_RES - 1 ? DISP_VER_RES - 1 : y2;
    
25. 
    3 I) i' [% O( k& Q& Z8 B8 u& f- W. D" k( C
26.     LCD_FillRectPart(act_x1, act_y1, act_x2 - act_x1 + 1, act_y2 - act_y1 + 1, ((color.full)));
    
27. }

复制代码

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

1. /**
   9 {& [; f5 Z! K% Z) M0 {
2. * Put a color map to a rectangular area
   " j% f; a6 y$ t2 C1 a9 J
3. * @param x1 left coordinate of the rectangle
   - f' K: A8 \' y1 X: }) {
4. * @param x2 right coordinate of the rectangle
   " m- b8 f4 D: `$ r8 V
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
   * G: w% g1 ~7 a6 G  ?# }
8. */
   
9. void disp_map(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const color_t * color_p)
   ( }$ x4 m3 ]( W4 k& H6 s5 Z
10. {
    5 D  D/ [1 r9 R5 e( x% f$ Y
11.     /*Return if the area is out the screen*/
    & v6 s& i- |# o
12.     if(x2 < 0) return;
    
13. 
    
14.     if(y2 < 0) return;
    2 [: g7 ~7 d6 q3 y+ w5 u3 ^/ n8 M
15. 
      P7 Y4 `8 L8 d1 S
16.     if(x1 > DISP_HOR_RES - 1) return;
    
17. 
    
18.     if(y1 > DISP_VER_RES - 1) return;
    ( \1 f) _, U5 w" L2 x% G
19. 
    # n! Q; c: b  w
20.     /*Truncate the area to the screen*/
    : O1 D5 }6 @4 B2 ]. m1 J+ Z8 y
21.     int32_t act_x1 = x1 < 0 ? 0 : x1;
    
22.     int32_t act_y1 = y1 < 0 ? 0 : y1;
    , g& L1 U' i" ~
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;
    " ?& b2 R3 O) _1 v
25. 
    
26. 
    ; v! r$ {9 p$ t0 {; _( _. {1 a6 J5 A
27.     uint32_t y;
    2 U6 \6 N# i* Q+ Y, h. s3 P
28. 
    ) G* b, e* z) I( N0 a
29.     for(y = act_y1; y <= act_y2; y++)
    
30.     {
    7 q' F) c1 l* S: u+ S( H! @& Q* H
31.         memcpy(&my_fb[y * DISP_HOR_RES + act_x1],
    
32.                color_p,
    , J( p4 `6 R+ u
33.                (act_x2 - act_x1 + 1) * sizeof(my_fb[0]));
    0 \' e" V* z+ ]  P' w
34.         color_p += x2 - x1 + 1;    /*Skip the parts out of the screen*/
    
35.     }
    
36. 
    
37. }

复制代码

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

1. /**
   
2. * Copy pixels to destination memory using opacity
   # b" b. ~: M4 Q% h% M7 g
3. * @param dest a memory address. Copy 'src' here.
     Z8 O6 l/ O5 ^, s6 U
4. * @param src pointer to pixel map. Copy it to 'dest'.
   
5. * @param length number of pixels in 'src'
   ! D8 C! F5 y& M. s/ D. @
6. * @param opa opacity (0, OPA_TRANSP: transparent ... 255, OPA_COVER, fully cover)
   
7. */
   1 J( q8 v& _* U3 ~
8. void disp_color_cpy(color_t * dest, const color_t * src, uint32_t length, opa_t opa)
   . D- u$ l9 S3 N" B/ a" m! O# J
9. {
   
10.     /*Wait for the previous operation*/
    
11.     HAL_DMA2D_PollForTransfer(&Dma2dHandle, 100);
    . V; O# b. b/ b
12. 
    4 M# n0 @2 F1 i# t5 n
13.     Dma2dHandle.LayerCfg[1].InputAlpha = opa;
    
14.     HAL_DMA2D_ConfigLayer(&Dma2dHandle, 1);
    
15.     HAL_DMA2D_BlendingStart(&Dma2dHandle, (uint32_t) src, (uint32_t) dest, (uint32_t)dest, length, 1);
    
16. }

复制代码

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

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

8 T7 s2 e* L% x1 O
6 R& w) \0 }4 _. h* v

" z7 }9 [  ?  c0 E1 h0 g0 P& r& ?
- ?; V4 R% ]: C$ m* `  m8 `将所有的文件添加到工程中后用keil编译可能会有一些错误和警告出现，但都很好解决。
2 O9 ~: l/ ]5 s$ ]
" H. T2 |" ]* \; E
2、运行效果

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


4 X, f6 E- v8 W3 `- H

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

: M& G% h( q1 {3 L2 s2 L

  ~: L3 V5 n! _% S1 U
3 b: A$ j( E% o7 A/ a2 q" j除此之外官网还有一个在STM32F429-DISOC上移植的例子，在youtube上可以观看，因为转换为了gif可能看起来不是很流畅，实际演示效果很不错。

8 ^* O1 S( a' B


. H' W) L* C! c6 |' P! ?下面是我在STM32F769-DISOC上面的移植，和linux下模拟运行的差不多。因为769-disco的分辨率很高，移植后我没有使用优化，所以可以看到画面切换有些闪烁。
, y# T# g' ]6 e. P% {2 J. O
6 k9 @# B" `/ K" G
5 T8 X, j6 v0 X1 Q5 D3、关于LittlevGL
& E+ c( [# j, x. Y  K& u
* U" q( f& ^5 {5 u' O" Z) O' d/ E' _    LittlevGL里面有个简单的时间片调度系统，刷新显示和触摸处理等任务会周期的被调用处理。LCD刷新采用了局部缓存刷新，这样能避免闪烁出现。LittlevGL目前只有一个开发者在业余时间维护更新，但是开发者热情很高，可以在github上看到更新很频繁，我测试的使用的V4.2版本，开发者正在开发4.3版本并加入了不少新的功能，有建议可以在github和作者讨论互动。
/ C9 F" [( r: g: H" k" q目前代码结构看上去有点乱，有人在也提到了这个问题，计划好像是在5.0版本引入新的代码组织结构，感兴趣的可以去github提意见，开发者很乐意沟通讨论。官网也有不少控件的使用介绍和例子参考。
/ F, B" g7 \& i# e
3 E% ~% {. \" ~
6 Q' j( H  u5 M. a
0 n) W) e9 ]3 F' q, j- S5 u- a
" }" Q& `$ Y4 r& w% {/ k

% g, g) M7 U8 R- r官网和github地址如下:
3 r/ I3 U9 w9 s
LittlevGL官网：http://www.gl.littlev.hu/
- T& t/ h- V4 S1 TLittlevGLgithub :http://github.com/littlevgl   和  http://github.com/littlevgl/lvgl
0 J9 P7 o" x: G$ z; t, @/ z6 G
下面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

  和众多开源的RTOS不一样，目前GUI开源的不是很多，虽然很多商用的GUI也很炫酷，但是我们没法知道具体效果的实现细节，也没法学习到这种能力，LittlevGL目前实现的一些特性和控件我认为是开源的GUI里面水平非常高的了。但是目前LittlevGL资料不是很多，只能通过阅读源码去学习和研究。
* U- u& A1 g4 b2 ]
) C$ }4 f) r' _( z! R
; t7 P6 ]4 Z0 X/ ^测试代码:
LittlevGL-STM32F769-DISCO.rar (4.72 MB, 下载次数: 867)

2017-9-7 22:50 上传

点击文件名下载附件
& a3 L( Y1 E! Z3 Z

- J6 U3 Z0 p* Y6 w, e: h

0 Q# Y: j/ q, ]9 B- s! C( I
! f  N" G  d& Z. L

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

看到一个别人分享的开源中文教程。
9 w/ E3 u% m* I2 f 开源GUI-littevGL应用教程 V0.1.pdf (3.14 MB, 下载次数: 497)

2018-12-2 17:03 上传

点击文件名下载附件
3 D! j# M* R+ o

ljt8015 发表于 2017-9-8 13:47
4 S' r4 d4 ^; N! U2 G7 fLittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：

; ~- F; m1 Y  o2 K& A* _. j5 ahttp://github.com/littlevgl/proj_pc

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

7 Y1 D; ?- G. h是的，没有限制，移植吧。

跟着大佬学习。。。

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

厉害厉害

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

这个不错，赞一个

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

学习新知识，快乐

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


% b' d7 Z  C- A如何模拟？  如何在linux中运行？
* C' m7 E3 Z, n& z
& Q% [! c0 D: e. M6 B" ?0 U

LittlevGL 相比 ucgui 的优势？

$ o; W& l% Z3 X# S+ N% L. a

文档很少

) \  Q9 \( r2 w4 H0 R6 Y2 z. j9 \

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

4 M4 B$ n. X7 }" M6 b0 V! M$ `" Y文档是很少，只能通过看代码学习了，如果感兴趣的话可以一起讨论。

感谢楼主，这个很好

好6啊