1 c) `8 q! i* T! R% e
    推荐阅读最新的Littlevgl移植（更新时间:2018-1-13）：
  
* W* ~; W: x$ W1 F$ J7 b    开源GUI  LittlevGL  V5.0版本移植      
$ U* T( M% e  \3 k8 b

3 |4 R+ u- u% T% m! J5 ?. Z2 y* V/ \LittlevGL 是一个开源免费的GUI，支持触摸屏操作，移植简单方便，开发者一直在不断完善更新。LittlevGL 自带了丰富的控件：窗口、按键、标签、list、图表等，还可以自定义控件；支持很多特效：透明、阴影、自动显示隐藏滚动条、界面切换动画、图标打开关闭动画、平滑的拖拽控件、分层显示、反锯齿等等。


下面是我在STM32F769-DISCO上移植的演示模式的效果图片.
9 Y8 H5 U3 ~/ N/ s# I2 _% b; ]
% B$ d; z) i2 r, o9 j$ a



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

7 q# y2 f% w0 _, E+ E
7 r# {' B0 {9 ~% Y0 v! o* V
, b% D$ u2 F" [" m# a/ N3 ]- P2 K1、移植
8 P+ C1 h4 d7 z, j: E- x6 `/ Y: y
LittlevGL 的移植非常简单，用户只需要提供systick、触摸屏、LCD显示接口即可。源码里面有3个文件用于分别添加这3个接口，具体如下：
& [8 N7 Y4 e$ e) Z
& l& z) M7 n. R2 v
也就是下面几个函数：

• 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
• 
  9 w3 ~) g* E% O  u

a)systick的移植直接使用的是HAL库里面提供的
" W. C6 j# u; a4 N/ b; R/ Z' D1 S8 T" A' t/ F

1. /**
   
2. * Get the elapsed milliseconds since start up
   
3. * @return the elapsed milliseconds
   5 t# y) b6 {' \5 Q
4. */
   
5. uint32_t systick_get(void)
   
6. {
   
7.         return HAL_GetTick();
   
8. }
   
9. /**
   % L' P9 e& ~8 V9 M( a/ c
10. * Get the elapsed milliseconds science a previous time stamp
    . P+ H0 C' L6 f2 U
11. * @param prev_tick a previous time stamp from 'systick_get'
    
12. * @return the elapsed milliseconds since 'prev_tick'
    , z- o% g+ }6 S% X# {3 G
13. */
    6 D$ ?; B  G: n  b  u$ ]
14. uint32_t systick_elaps(uint32_t prev_tick)
    # t( h/ S0 R$ O  |! L
15. {
    / h% M& M# @9 T" W% x2 t" h
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;
      r! B& P7 G$ f1 E' [
22.         } else {
    : N, ]- T) @1 R! L9 n/ b  l
23.                 prev_tick = UINT32_MAX - prev_tick + 1;
    
24.                 prev_tick += act_time;
    
25.         }
    2 J& G2 A, S0 K* E
26.         return prev_tick;
    
27. }

复制代码

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

1. /**
   2 z- U* o: `3 [( C' E
2. * Initialize your input devices here
   
3. */
   
4. void indev_init(void)
   6 v% P) m% m& i) V9 }
5. {
   
6.   BSP_TS_Init(DISP_HOR_RES, DISP_VER_RES);
   ; S+ b( U* A+ T8 P: Z/ f5 c' |7 R
7. }
   7 |2 _1 T7 G- x& P5 U5 O8 c
8. 
   
9. /**
   4 C* H% l! @" p; q+ s% Q
10. * Read an input device
    9 Z, L& ]& U5 q3 a6 ^
11. * @param indev_id id of the input device to read
    
12. * @param x put the x coordinate here
    : S# Y5 R  I! ~5 M3 x$ `$ k
13. * @param y put the y coordinate here
    
14. * @return true: the device is pressed, false: released
    
15. */
    7 S7 \* G' l& H0 k
16. bool indev_get(uint8_t indev_id, int16_t * x, int16_t * y)
    4 I* W6 W7 i3 p& t9 F, y
17. {
    
18.         if(indev_id != 0) {
    
19.                 *x = 0;
    ( v; f3 G2 Z+ g# ]3 a) x7 [+ g2 L
20.                 *y = 0;
    
21.                 return false;
    $ q# T3 N- V6 W2 _
22.         }
    ' Z8 ]5 u5 {! S2 m! d' ^2 \; r
23.         static int16_t last_x = 0;
    1 Q) N; K; P* e6 X
24.         static int16_t last_y = 0;
    ( I& a( W  q- b* b' ^7 Q% w' d
25.         bool press;
    ) m' |# y! v& }9 k( H
26.         BSP_TS_GetState(&TS_State);
    
27.         if(TS_State.touchDetected != 0) {
    $ _" G/ C4 N+ g
28.                 *x = TS_State.touchX[0];
    
29.                 *y = TS_State.touchY[0];
    
30.                 press = true;
    
31.         } else {
    / k/ C& n. I0 Q8 F+ C
32.                 *x = last_x;
    
33.                 *y = last_y;
    
34.                 press = false;
    
35.         }
    
36. 
    , A$ y6 T: [: T) q7 R6 X
37.         return press;
    
38. }

复制代码

c)LCD的移植分为几个函数，
) d. V# w8 Q4 M+ ]. Z$ v& w+ H
1)一个是用单一色填充矩形区域，这个实际调用的次数较小

1. /**
   * E# i. S1 L" g8 W& C( B
2. * Fill a rectangular area with a color
   + P+ r0 k0 @* Q# g2 x; o
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 fill color
   3 }" j+ ?* g: Y4 ]: q
8. */
   
9. void disp_fill(int32_t x1, int32_t y1, int32_t x2, int32_t y2, color_t color)
   
10. {
    
11.     /*Return if the area is out the screen*/
    2 `! N: S+ L# L& O0 U
12.     if(x2 < 0) return;
    : w! i6 s3 w  {& |+ |
13. 
    
14.     if(y2 < 0) return;
    8 _, c6 C0 ?, i8 r2 y
15. 
    ) D2 v' v% S  g4 Q+ h
16.     if(x1 > DISP_HOR_RES - 1) return;
    
17. 
    7 j: t: w7 \8 c! v. P* Y! u
18.     if(y1 > DISP_VER_RES - 1) return;
    
19. 
    ' J5 ^' R7 G+ x( N! g6 c+ a5 f, k
20.     /*Truncate the area to the screen*/
    # m3 S  q- @0 {: X5 q
21.     int32_t act_x1 = x1 < 0 ? 0 : x1;
    7 ]  R" g$ \+ k5 n
22.     int32_t act_y1 = y1 < 0 ? 0 : y1;
    
23.     int32_t act_x2 = x2 > DISP_HOR_RES - 1 ? DISP_HOR_RES - 1 : x2;
    0 d2 n! n  g, h/ A: \
24.     int32_t act_y2 = y2 > DISP_VER_RES - 1 ? DISP_VER_RES - 1 : y2;
    " p; w* y" G$ R4 e& m8 k
25. 
    
26.     LCD_FillRectPart(act_x1, act_y1, act_x2 - act_x1 + 1, act_y2 - act_y1 + 1, ((color.full)));
    ) b0 R) y( i* ^- {; P. I
27. }

复制代码

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

1. /**
   
2. * Put a color map to a rectangular area
   # j; X4 x5 j& L1 P$ p
3. * @param x1 left coordinate of the rectangle
   
4. * @param x2 right coordinate of the rectangle
   
5. * @param y1 top coordinate of the rectangle
   5 a' E  U3 [9 G
6. * @param y2 bottom coordinate of the rectangle
   7 R4 H; F& R1 N& a6 ?/ X% F
7. * @param color_p pointer to an array of colors
   5 U. t+ G+ ]& \
8. */
   ' M, ?) O7 h9 T: V( L3 C
9. void disp_map(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const color_t * color_p)
   
10. {
    
11.     /*Return if the area is out the screen*/
    " \+ x2 v# r: _# h* Y( L
12.     if(x2 < 0) return;
    & ~5 s: U, H/ Y4 |; \2 {9 a2 C
13. 
    
14.     if(y2 < 0) return;
    
15. 
    
16.     if(x1 > DISP_HOR_RES - 1) return;
    / }3 |# D  h/ y+ E. ], K
17. 
    3 e5 v9 ]/ {# U1 I0 z1 D" n
18.     if(y1 > DISP_VER_RES - 1) return;
    $ j9 z; f2 |* G) G
19. 
    
20.     /*Truncate the area to the screen*/
    1 I, ~3 \; `/ X' ?% W
21.     int32_t act_x1 = x1 < 0 ? 0 : x1;
    7 _1 S" o6 O, k' o; w
22.     int32_t act_y1 = y1 < 0 ? 0 : y1;
    : N8 l6 r0 D8 d+ r( h
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.     {
    6 i6 q" p7 `$ O0 Z$ A8 B
31.         memcpy(&my_fb[y * DISP_HOR_RES + act_x1],
    
32.                color_p,
    2 Q+ ^7 f2 ?. a- n0 H4 G
33.                (act_x2 - act_x1 + 1) * sizeof(my_fb[0]));
    3 M* ]# a4 d% [1 }3 \
34.         color_p += x2 - x1 + 1;    /*Skip the parts out of the screen*/
    . ], m) s2 b, B
35.     }
    
36. 
    
37. }

复制代码

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

1. /**
   
2. * Copy pixels to destination memory using opacity
   
3. * @param dest a memory address. Copy 'src' here.
   
4. * @param src pointer to pixel map. Copy it to 'dest'.
   
5. * @param length number of pixels in 'src'
   " D: n7 m  x# q. `  N
6. * @param opa opacity (0, OPA_TRANSP: transparent ... 255, OPA_COVER, fully cover)
   4 u% r1 k, R2 M3 K" Z8 e, k
7. */
   
8. void disp_color_cpy(color_t * dest, const color_t * src, uint32_t length, opa_t opa)
   & J: ^4 p/ q% d$ Y
9. {
   
10.     /*Wait for the previous operation*/
    
11.     HAL_DMA2D_PollForTransfer(&Dma2dHandle, 100);
    
12. 
    , L. ?, M9 _' N9 e
13.     Dma2dHandle.LayerCfg[1].InputAlpha = opa;
    & i1 ]9 r4 p0 D8 {9 Y# V3 M/ T
14.     HAL_DMA2D_ConfigLayer(&Dma2dHandle, 1);
    ; b4 L2 ?  W- d& @+ G$ m
15.     HAL_DMA2D_BlendingStart(&Dma2dHandle, (uint32_t) src, (uint32_t) dest, (uint32_t)dest, length, 1);
    
16. }

复制代码

移植了上面接口之后基本问题就不大了，littlevgl 目前的代码结构有点乱，分为core、hal、misc 几个部分，我是分别建立一个文件夹然后把相应的文件全部添加到里面了，官网也没有详细的移植说明文档。所有的源码如下：
! Q* ~  X- M. r- B0 x' {, J
5 l; F2 O0 G: Y! j添加到工程中后如下整体如下：

& l  ~1 E/ k, |. X2 e
( E9 I1 S; w. ?! V* L
2 C2 F, k0 ^3 @# a: V( y4 H

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

" S0 b, e7 K  W* j% W/ V  L
2、运行效果

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


" S! Y$ t, j2 I1 S
0 x; ?# B# h* T8 E' ]8 ^# X
LittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：
9 F9 l) w  y# p) P5 G

5 e4 Q/ L; J8 f0 L

除此之外官网还有一个在STM32F429-DISOC上移植的例子，在youtube上可以观看，因为转换为了gif可能看起来不是很流畅，实际演示效果很不错。
: Z$ q4 `: P: [" R3 Z6 h& l) k
8 E+ [3 P2 \7 f& B2 w
% A, I! S. B. C2 i
7 u. q9 `% r/ ~! P9 @
+ I5 p# b2 O# s" R8 @! }2 C( _下面是我在STM32F769-DISOC上面的移植，和linux下模拟运行的差不多。因为769-disco的分辨率很高，移植后我没有使用优化，所以可以看到画面切换有些闪烁。


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

% L4 q" [$ D4 {: `! J/ a5 Y/ N

: L8 x; j, H( w( m
- v, I8 f5 g3 ~/ h" X- K, V
) V" v4 c: t* Y5 e: \/ R5 k
官网和github地址如下:
7 y, k  ~% a! |  [" D8 _
LittlevGL官网：http://www.gl.littlev.hu/
" k' S! v+ N; e5 W: [4 D5 W! s8 OLittlevGLgithub :http://github.com/littlevgl   和  http://github.com/littlevgl/lvgl

下面2个视频是在PC Simulator (Linux)和F4-DICO上的移植演示可能需要科学的方式才能打开。
How to Run Littlev Graphics Library in PC Simulator (Linux)：http://youtu.be/ZzLdct2ymvg
, x- q' I$ |. T) ~  JEmbedded GUI on STM32 Discovery with Littlev Free Graphics Library：http://youtu.be/DcJdK137WKM

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


- U# A# C/ A# b7 [1 h* j测试代码:
8 X% ~: j+ N' e$ \+ J LittlevGL-STM32F769-DISCO.rar (4.72 MB, 下载次数: 867)

2017-9-7 22:50 上传

点击文件名下载附件
; f7 I- P5 e/ Q( }1 x

6 r$ c$ L4 Z! M& |; j0 K6 C! d

: t5 }, g' A& T6 c& y& Q

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

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

2018-12-2 17:03 上传

点击文件名下载附件
0 b/ z2 }- ?4 o2 g" s

ljt8015 发表于 2017-9-8 13:47
9 a0 l: Z4 @! l9 t# w' rLittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：

  z6 L' H6 X. Z1 G6 thttp://github.com/littlevgl/proj_pc

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

) h3 a" _; m, h# T( C8 T1 ?是的，没有限制，移植吧。

跟着大佬学习。。。

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

厉害厉害

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

这个不错，赞一个

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

学习新知识，快乐

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


如何模拟？  如何在linux中运行？

4 k8 E. W; x( Q

LittlevGL 相比 ucgui 的优势？

文档很少
& q) p6 [0 r2 v; A
$ D! @# ?6 q& A- i% T$ G6 X! |# L

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

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

感谢楼主，这个很好

好6啊