- W, i9 x1 {, l1 L+ h
7 u5 V! s, H# O. ?8 G/ u    推荐阅读最新的Littlevgl移植（更新时间:2018-1-13）：
3 A0 {: ?+ C- t- M2 Q, J* w  
. W. L& m0 v$ v9 x    开源GUI  LittlevGL  V5.0版本移植      
2 Q) p% ~# Y5 ~) j% p  N
  Q" f. {3 V* W: f2 V" Q
6 s6 l. i  b) M7 TLittlevGL 是一个开源免费的GUI，支持触摸屏操作，移植简单方便，开发者一直在不断完善更新。LittlevGL 自带了丰富的控件：窗口、按键、标签、list、图表等，还可以自定义控件；支持很多特效：透明、阴影、自动显示隐藏滚动条、界面切换动画、图标打开关闭动画、平滑的拖拽控件、分层显示、反锯齿等等。


下面是我在STM32F769-DISCO上移植的演示模式的效果图片.

  g. s7 p) T" W% ?


( X, `; Q1 y' j0 q9 U
主要控件可以通过下面的图片有个基本的了解：



1、移植

LittlevGL 的移植非常简单，用户只需要提供systick、触摸屏、LCD显示接口即可。源码里面有3个文件用于分别添加这3个接口，具体如下：
6 f  T% K& J" b" }4 Z3 d% ?2 c- Q3 B6 G" a
* m& j1 ?- u# }! d, ]2 ^. W
: I3 P4 ]0 H+ ~% p也就是下面几个函数：
# D+ ~' y: K* }1 o. j) u8 N
1 M1 r! b" L  O, H+ S

• 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库里面提供的

5 C% {$ }/ N- L

1. /**
   - C& E4 Z; W! B
2. * Get the elapsed milliseconds since start up
   
3. * @return the elapsed milliseconds
   " z. v. x5 J0 l! Z1 j
4. */
   : a+ }- q* K6 u, a* k- A2 f7 K
5. uint32_t systick_get(void)
   " z- R! J; d: g' P( k
6. {
   
7.         return HAL_GetTick();
   
8. }
   
9. /**
   
10. * Get the elapsed milliseconds science a previous time stamp
    
11. * @param prev_tick a previous time stamp from 'systick_get'
    ; b# u4 v! R. K5 j0 {) j" [
12. * @return the elapsed milliseconds since 'prev_tick'
    6 c4 C/ D: V: F( x* ^' u
13. */
    
14. uint32_t systick_elaps(uint32_t prev_tick)
    + G2 R! W9 O) \' E' T" G
15. {
    
16.         volatile uint32_t act_time = systick_get();
    
17. 
    
18.         /*If there is no overflow in sys_time
    . d* z5 B) ]: x( o) S) q, C7 P: o; ?
19.          simple subtract*/
    9 S; ]9 ^: ~( m# J: L# {( P: l0 C0 g# I7 r
20.         if(act_time >= prev_tick) {
    + i/ J: `( b- U0 q# u) ^2 d
21.                 prev_tick = act_time - prev_tick;
    
22.         } else {
    
23.                 prev_tick = UINT32_MAX - prev_tick + 1;
    
24.                 prev_tick += act_time;
    3 D- ^5 f: O6 n9 u0 t! \& L
25.         }
    
26.         return prev_tick;
    
27. }

复制代码

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

1. /**
   
2. * Initialize your input devices here
   ) R, Y2 A% v0 c* a. t
3. */
   + `. j# a# q6 r1 k
4. void indev_init(void)
   
5. {
   
6.   BSP_TS_Init(DISP_HOR_RES, DISP_VER_RES);
   ; [( ~# Z3 ]* z* u; O4 N1 \
7. }
   ! e6 U8 U4 Y. O  M1 b# s/ `: Q6 ~
8. 
   . g* X0 p3 B+ E
9. /**
   
10. * Read an input device
    $ r8 X3 q5 Z2 Z/ h$ ~" X. Z
11. * @param indev_id id of the input device to read
    * r  `9 z/ N0 k. B2 {
12. * @param x put the x coordinate here
    
13. * @param y put the y coordinate here
    , q* Z+ U( B  D' v# @3 J, P2 g0 \
14. * @return true: the device is pressed, false: released
    / B! g' j! E( J& T7 f+ }1 p
15. */
    
16. bool indev_get(uint8_t indev_id, int16_t * x, int16_t * y)
    
17. {
    
18.         if(indev_id != 0) {
    3 H8 i1 m- [3 _$ j" d
19.                 *x = 0;
    ( ^+ J8 N8 t- L8 z
20.                 *y = 0;
    9 D2 z# K, |1 u" r
21.                 return false;
    & [! o4 u' C" m  F' e
22.         }
    
23.         static int16_t last_x = 0;
    ' X5 z2 Q4 ^5 k
24.         static int16_t last_y = 0;
    4 z5 \; Q: _2 Z4 p
25.         bool press;
    - e8 o% [" h# O/ j
26.         BSP_TS_GetState(&TS_State);
    
27.         if(TS_State.touchDetected != 0) {
    
28.                 *x = TS_State.touchX[0];
    6 i% k! E) j1 H7 M5 ?9 R5 [4 ]" u
29.                 *y = TS_State.touchY[0];
    
30.                 press = true;
    
31.         } else {
    
32.                 *x = last_x;
    * A$ T4 Y$ G  n! I3 |+ X6 e& f
33.                 *y = last_y;
    # _& b- H: _* d7 C: M5 ]
34.                 press = false;
    
35.         }
    
36. 
    ( o4 r/ a8 D1 x- [( i
37.         return press;
    ; M! J% `# L6 B$ U9 m5 R$ d
38. }

复制代码

c)LCD的移植分为几个函数，

* O3 Y6 R: y2 A7 e2 q1)一个是用单一色填充矩形区域，这个实际调用的次数较小
/ s2 d1 y4 D/ X( @9 s! I

1. /**
   2 y4 K0 F1 V) y# {0 S( x7 ?0 l4 V9 F- r
2. * Fill a rectangular area with a color
   
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
     F6 a2 k7 `9 X+ o
7. * @param color fill color
   $ E  |7 |# m/ i6 ~3 ~2 m
8. */
   
9. void disp_fill(int32_t x1, int32_t y1, int32_t x2, int32_t y2, color_t color)
   
10. {
    ) f% Q# D/ l$ p0 J
11.     /*Return if the area is out the screen*/
    + G. g0 D2 e0 R9 N
12.     if(x2 < 0) return;
    $ b2 H" }% r$ d' `" ~* q
13. 
    
14.     if(y2 < 0) return;
    1 g, y3 l( K0 g
15. 
      ~, ]- M/ d0 l/ H% R
16.     if(x1 > DISP_HOR_RES - 1) return;
    
17. 
    
18.     if(y1 > DISP_VER_RES - 1) return;
    4 [+ f" ^0 j. P) L" V3 C
19. 
    2 j! S8 P. m$ i: U
20.     /*Truncate the area to the screen*/
    
21.     int32_t act_x1 = x1 < 0 ? 0 : x1;
    8 k& Y3 m: c, S) E2 R
22.     int32_t act_y1 = y1 < 0 ? 0 : y1;
    . z8 H) r6 O! g! F+ R2 \; Y
23.     int32_t act_x2 = x2 > DISP_HOR_RES - 1 ? DISP_HOR_RES - 1 : x2;
    * n: [2 \! x8 m2 j
24.     int32_t act_y2 = y2 > DISP_VER_RES - 1 ? DISP_VER_RES - 1 : y2;
    " Y& _, Q; R' h
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来实现。
1 b, T. m  Z2 y7 Q% e& v: f

1. /**
   * y8 D: X4 L/ v& g" j% E) ^
2. * Put a color map to a rectangular area
   
3. * @param x1 left coordinate of the rectangle
   8 N$ Q3 r7 S$ }! q: y
4. * @param x2 right coordinate of the rectangle
   
5. * @param y1 top coordinate of the rectangle
   : z" Q1 ~3 q7 {: W3 [
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)
   ' b% p, L, x/ @0 V6 X0 Y! c* l, P% o
10. {
    
11.     /*Return if the area is out the screen*/
    " c, t3 ]" K7 g! A5 ?3 k  J7 `
12.     if(x2 < 0) return;
    
13. 
    
14.     if(y2 < 0) return;
    
15. 
    
16.     if(x1 > DISP_HOR_RES - 1) return;
    
17. 
    ) q7 g) a8 B+ `; r% M
18.     if(y1 > DISP_VER_RES - 1) return;
    
19. 
    . @8 d) t1 f" ]; U
20.     /*Truncate the area to the screen*/
    
21.     int32_t act_x1 = x1 < 0 ? 0 : x1;
    , ]- ^9 L1 W' J. k  S9 P1 j
22.     int32_t act_y1 = y1 < 0 ? 0 : y1;
    
23.     int32_t act_x2 = x2 > DISP_HOR_RES - 1 ? DISP_HOR_RES - 1 : x2;
    / \$ A) P/ d, U6 h9 y
24.     int32_t act_y2 = y2 > DISP_VER_RES - 1 ? DISP_VER_RES - 1 : y2;
    3 K! o# Q2 i2 t4 A& O4 y; U) F
25. 
    4 U; F1 [! S* ]2 H- V. Q4 |9 \
26. 
    * o) g8 Z, W* }4 I- ?; v
27.     uint32_t y;
    ) Q, d# g7 r( ?
28. 
    
29.     for(y = act_y1; y <= act_y2; y++)
    
30.     {
    / \9 x3 K6 z8 L9 g" }
31.         memcpy(&my_fb[y * DISP_HOR_RES + act_x1],
    * u0 \- H4 B- ^* F# T0 Y* [
32.                color_p,
    4 Z! N' f1 Q$ O
33.                (act_x2 - act_x1 + 1) * sizeof(my_fb[0]));
    
34.         color_p += x2 - x1 + 1;    /*Skip the parts out of the screen*/
    
35.     }
    
36. 
    
37. }

复制代码

3)硬件加速可选项打开后可以使用下面的函数复制加速填充复制内存
6 c3 R% g' e; C' }) i

1. /**
   3 s6 S1 S* d# D% i. J
2. * Copy pixels to destination memory using opacity
   
3. * @param dest a memory address. Copy 'src' here.
   2 K, \6 B+ R+ C% H, z+ R
4. * @param src pointer to pixel map. Copy it to 'dest'.
   ; s" P. m1 ^5 q) g# `! p. p; [
5. * @param length number of pixels in 'src'
   5 J$ Q4 V7 q  \- t6 e0 |' f0 ~
6. * @param opa opacity (0, OPA_TRANSP: transparent ... 255, OPA_COVER, fully cover)
   
7. */
   - e3 v# P% H% C9 U: |! I3 v
8. void disp_color_cpy(color_t * dest, const color_t * src, uint32_t length, opa_t opa)
   + N, i5 G; B, f. z- f8 U+ K
9. {
   7 N9 I& Q: A( L. q* K, \; n
10.     /*Wait for the previous operation*/
    
11.     HAL_DMA2D_PollForTransfer(&Dma2dHandle, 100);
    ) W2 r9 F" }1 |
12. 
    1 K7 k( O, U( Q: l# b% ]
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 几个部分，我是分别建立一个文件夹然后把相应的文件全部添加到里面了，官网也没有详细的移植说明文档。所有的源码如下：

2 o& }5 r; S; R' q添加到工程中后如下整体如下：
5 t2 z1 Y0 k. q3 p$ p2 W



/ J% f0 E8 R9 B1 U$ |: `9 b* K9 j
: j& S3 w( G% y1 m将所有的文件添加到工程中后用keil编译可能会有一些错误和警告出现，但都很好解决。
( d+ `- A" V1 l4 E' H5 H

2、运行效果
3 o* W- ~; e& D* ?- V! s! N4 V
LittlevGL内置一个类似桌面系统的演示例子，通过打开相应的宏定义即可
, E, a8 f+ Q$ r1 Y2 g" A/ Z1 a, F


1 N0 W$ _" x8 ]; ?- V
LittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：
# @; c, N& h0 B" F

$ o0 y5 B& W* S/ a8 M; P

1 P' x0 s/ g% Y# w1 V1 n除此之外官网还有一个在STM32F429-DISOC上移植的例子，在youtube上可以观看，因为转换为了gif可能看起来不是很流畅，实际演示效果很不错。

+ R: N4 _! t/ Z( q# ]' a( X


下面是我在STM32F769-DISOC上面的移植，和linux下模拟运行的差不多。因为769-disco的分辨率很高，移植后我没有使用优化，所以可以看到画面切换有些闪烁。
) D' {" s& ~( z% B+ d0 I

3、关于LittlevGL

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




$ d# @" u! z) A' j8 }

官网和github地址如下:
* f" V/ k. o4 `6 s7 O
LittlevGL官网：http://www.gl.littlev.hu/
LittlevGLgithub :http://github.com/littlevgl   和  http://github.com/littlevgl/lvgl
5 p# R' `9 x3 `/ {1 c0 `
下面2个视频是在PC Simulator (Linux)和F4-DICO上的移植演示可能需要科学的方式才能打开。
How to Run Littlev Graphics Library in PC Simulator (Linux)：http://youtu.be/ZzLdct2ymvg
6 ?# U, ^* `* F( {Embedded GUI on STM32 Discovery with Littlev Free Graphics Library：http://youtu.be/DcJdK137WKM

) n1 V4 P1 V2 |/ s1 y  和众多开源的RTOS不一样，目前GUI开源的不是很多，虽然很多商用的GUI也很炫酷，但是我们没法知道具体效果的实现细节，也没法学习到这种能力，LittlevGL目前实现的一些特性和控件我认为是开源的GUI里面水平非常高的了。但是目前LittlevGL资料不是很多，只能通过阅读源码去学习和研究。

# ]( C  M( r# X- F$ ]5 c
测试代码:
LittlevGL-STM32F769-DISCO.rar (4.72 MB, 下载次数: 867)

2017-9-7 22:50 上传

点击文件名下载附件
- N2 R' Z, M, y- \; f) k, ~

  @0 @. T+ ^& }! R) F

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

看到一个别人分享的开源中文教程。
开源GUI-littevGL应用教程 V0.1.pdf (3.14 MB, 下载次数: 497)

2018-12-2 17:03 上传

点击文件名下载附件
  P. u2 p) {# h& D7 O) P# c" U% o

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

http://github.com/littlevgl/proj_pc

chen849928055 发表于 2018-7-23 16:10
" `$ U% ^- Q0 O+ }, p: v' ~版主Littlevgl移植 没有硬件mcu的限制吧,只要mcu的ram,rom等硬件条件符合要求,就能跑起Littlevgl吧 ...

) `) N7 W" y4 |9 X3 O是的，没有限制，移植吧。

跟着大佬学习。。。

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

厉害厉害

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

这个不错，赞一个

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

学习新知识，快乐

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

1 v0 d3 |* d% V7 ~; V9 v& Q: W
如何模拟？  如何在linux中运行？
' i  w6 l) X  F" Q: z  u

LittlevGL 相比 ucgui 的优势？
8 F. G  j/ k2 @: s8 T# @

. T$ m9 [' D! |文档很少

ljt8015 发表于 2017-9-8 14:51
. }. S+ c  K/ N9 w5 g. u文档很少

- X" l: r- b; Z9 f4 \: R文档是很少，只能通过看代码学习了，如果感兴趣的话可以一起讨论。

感谢楼主，这个很好

好6啊