9 y+ h5 b4 [% a
- V  C. E% N- g* O- o; |0 x+ J4 d    推荐阅读最新的Littlevgl移植（更新时间:2018-1-13）：
8 r8 W/ g( Z  x  
    开源GUI  LittlevGL  V5.0版本移植      


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


# |- g( T6 Z) r下面是我在STM32F769-DISCO上移植的演示模式的效果图片.

& X; F+ T+ z/ X# }) g6 d
8 P, s- d' a2 V- I

4 g# P+ S7 Y' t, @- N
, H; R$ ~( G( J" B* X  c主要控件可以通过下面的图片有个基本的了解：

3 b8 C7 f, A3 G7 L4 ^; I" R0 z

1、移植
* n  Y$ D; w5 K' }3 [$ k* d' K9 x
LittlevGL 的移植非常简单，用户只需要提供systick、触摸屏、LCD显示接口即可。源码里面有3个文件用于分别添加这3个接口，具体如下：


* X6 y& W; g: Q  [) n也就是下面几个函数：

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

' y3 ~% M- P1 d, V5 ~4 Q2 Q  x

1. /**
   1 N5 g" d$ b1 B% D7 R* e
2. * Get the elapsed milliseconds since start up
   1 p/ Q1 _; A% H- x) q$ |; g  ^
3. * @return the elapsed milliseconds
   
4. */
   ; o- j$ T+ z& E: d: p) I
5. uint32_t systick_get(void)
   & Z$ \0 ^' |% w% v$ h0 f
6. {
   
7.         return HAL_GetTick();
   ) K/ q* `9 k( z2 \
8. }
   
9. /**
   $ k) l- N" y. @! K6 G
10. * Get the elapsed milliseconds science a previous time stamp
    
11. * @param prev_tick a previous time stamp from 'systick_get'
    ! S  F2 A& C* e
12. * @return the elapsed milliseconds since 'prev_tick'
    
13. */
    
14. uint32_t systick_elaps(uint32_t prev_tick)
    4 g  e+ h6 N: Z& A
15. {
    5 x3 _/ v0 P. a1 z
16.         volatile uint32_t act_time = systick_get();
    & L2 v4 {4 [  {- Y% {0 @+ @6 D
17. 
    4 Y: l* s" i& y! k" r, ~- a# g% p
18.         /*If there is no overflow in sys_time
    , ^* E) M% i7 \2 s/ q/ F
19.          simple subtract*/
    # k& e' \* J: J# k3 e3 A" j
20.         if(act_time >= prev_tick) {
    
21.                 prev_tick = act_time - prev_tick;
    
22.         } else {
    
23.                 prev_tick = UINT32_MAX - prev_tick + 1;
    2 i$ n& ^, V/ T, O+ w* s! _
24.                 prev_tick += act_time;
      v/ G3 Q! \9 L: ?
25.         }
    
26.         return prev_tick;
    5 y7 N; a" c$ ?- Y; \5 s
27. }

复制代码

b)提供触摸屏的函数，用于初始化触摸屏和返回触摸屏扫描结果
. A( G+ B6 H, p' }* q5 e8 B7 B# C

1. /**
   / p2 {9 m9 f" g0 }" b. D% ]
2. * Initialize your input devices here
   1 c9 l' J( a* I* ^$ x- U3 y( ?
3. */
   : E; i! }# i; [
4. void indev_init(void)
   , e* f1 f9 N9 H$ q' l0 b- v
5. {
   
6.   BSP_TS_Init(DISP_HOR_RES, DISP_VER_RES);
   : x8 L8 E, x) ^- i- g
7. }
   
8. 
   7 j( _" K) c# y
9. /**
   ) J& Q' m. @6 G# @0 ]
10. * Read an input device
    
11. * @param indev_id id of the input device to read
    2 N- E, U3 Y2 e/ y5 v
12. * @param x put the x coordinate here
    + o8 A' P+ E: A& `. f* ^
13. * @param y put the y coordinate here
    " y5 @8 ?; n% r( Y& a+ I
14. * @return true: the device is pressed, false: released
    
15. */
    
16. bool indev_get(uint8_t indev_id, int16_t * x, int16_t * y)
    4 O5 Y3 I( i, D$ y) y3 T+ r
17. {
    
18.         if(indev_id != 0) {
    
19.                 *x = 0;
    
20.                 *y = 0;
    
21.                 return false;
    
22.         }
    ) z8 k( L+ f/ A/ H. U* k* C7 M, n
23.         static int16_t last_x = 0;
    ' D- ~4 ]& h% K7 g: Y+ l
24.         static int16_t last_y = 0;
    ) ?# c5 d$ _4 {/ T; \
25.         bool press;
    
26.         BSP_TS_GetState(&TS_State);
    " Y0 Z3 z+ y1 `4 J3 [/ n, h
27.         if(TS_State.touchDetected != 0) {
    4 j" D; B5 [+ x
28.                 *x = TS_State.touchX[0];
    
29.                 *y = TS_State.touchY[0];
    
30.                 press = true;
    $ Q; \2 ]7 G8 T4 z( ~
31.         } else {
    
32.                 *x = last_x;
    ( y2 {5 L8 m; P& d" A: M
33.                 *y = last_y;
    
34.                 press = false;
    
35.         }
    
36. 
    
37.         return press;
    
38. }

复制代码

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

8 I4 ^' {  h3 ~. [5 D. o1)一个是用单一色填充矩形区域，这个实际调用的次数较小
: E0 _0 k1 F; V$ x! j
& y, b) r2 O* Y5 G) f' T' s

1. /**
   & ^9 {5 T" o& e$ Q
2. * Fill a rectangular area with a color
   
3. * @param x1 left coordinate of the rectangle
   ; j4 H, I6 v+ h% |9 ^. ^: ^/ g/ x
4. * @param x2 right coordinate of the rectangle
   ! E6 G. y- }# A7 |# I
5. * @param y1 top coordinate of the rectangle
   
6. * @param y2 bottom coordinate of the rectangle
   ; k* M( C5 w% _0 Y0 @0 Y  X  @
7. * @param color fill color
   
8. */
   # G0 @( n- v: `; i3 C' d
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*/
    
12.     if(x2 < 0) return;
    
13. 
    & V$ k2 }+ ]) c7 F1 o7 `
14.     if(y2 < 0) return;
      f* t: s3 v% e/ V
15. 
    
16.     if(x1 > DISP_HOR_RES - 1) return;
    
17. 
    
18.     if(y1 > DISP_VER_RES - 1) return;
    . A4 c: Z. o+ s2 s$ `
19. 
      L* G& q! S6 g+ i% \
20.     /*Truncate the area to the screen*/
    4 V' b( n$ r- a6 H( g
21.     int32_t act_x1 = x1 < 0 ? 0 : x1;
    . n$ Z4 v( n  ^  t/ l9 i( `
22.     int32_t act_y1 = y1 < 0 ? 0 : y1;
    9 A7 s% L3 L& Q7 `+ H
23.     int32_t act_x2 = x2 > DISP_HOR_RES - 1 ? DISP_HOR_RES - 1 : x2;
    % D( u. M. y. o: L8 o% f
24.     int32_t act_y2 = y2 > DISP_VER_RES - 1 ? DISP_VER_RES - 1 : y2;
    2 T2 D$ J/ D6 @' l5 i8 A1 O
25. 
    . }4 F! H- |. i# A2 a
26.     LCD_FillRectPart(act_x1, act_y1, act_x2 - act_x1 + 1, act_y2 - act_y1 + 1, ((color.full)));
    
27. }

复制代码

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

1. /**
   3 g8 `4 f1 @1 A
2. * Put a color map to a rectangular area
   
3. * @param x1 left coordinate of the rectangle
   
4. * @param x2 right coordinate of the rectangle
   
5. * @param y1 top coordinate of the rectangle
   / \$ f2 r# m6 A0 o; ~% ]5 E$ X& b
6. * @param y2 bottom coordinate of the rectangle
     `7 r! |3 g  ?& F
7. * @param color_p pointer to an array of colors
   * y. |4 C/ \* x5 R' |& h
8. */
   
9. void disp_map(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const color_t * color_p)
   
10. {
    ) `/ i' i. K1 P3 ?( D
11.     /*Return if the area is out the screen*/
    
12.     if(x2 < 0) return;
    & H1 a  f- P. H: K* }$ y0 E
13. 
    " Z7 i$ [( I$ r
14.     if(y2 < 0) return;
    & w0 P! z% _* m% Q/ w, i# _7 `
15. 
    ! C$ f+ i5 |, v0 t9 \' d4 @! s" g
16.     if(x1 > DISP_HOR_RES - 1) return;
    1 {8 \- Q3 y3 T2 z
17. 
    " |# a; N4 Y" L
18.     if(y1 > DISP_VER_RES - 1) return;
    
19. 
    
20.     /*Truncate the area to the screen*/
    
21.     int32_t act_x1 = x1 < 0 ? 0 : x1;
    : ~! A# j  o3 O* q$ U' E
22.     int32_t act_y1 = y1 < 0 ? 0 : y1;
    : H9 @0 e" A$ Y$ V( M+ r7 b9 b2 a2 C
23.     int32_t act_x2 = x2 > DISP_HOR_RES - 1 ? DISP_HOR_RES - 1 : x2;
    : m, Z. i/ Z! P, y+ T
24.     int32_t act_y2 = y2 > DISP_VER_RES - 1 ? DISP_VER_RES - 1 : y2;
    0 h2 W" g; _  Y) Y8 C4 O
25. 
    
26. 
    . X+ [1 h# H! h% |0 [
27.     uint32_t y;
    
28. 
    5 L8 A" r% S$ e7 s
29.     for(y = act_y1; y <= act_y2; y++)
    
30.     {
    
31.         memcpy(&my_fb[y * DISP_HOR_RES + act_x1],
    
32.                color_p,
    
33.                (act_x2 - act_x1 + 1) * sizeof(my_fb[0]));
    ' H8 b# q6 w1 Y
34.         color_p += x2 - x1 + 1;    /*Skip the parts out of the screen*/
    ( J' Q7 v7 p; K2 p4 F
35.     }
    
36. 
    6 `$ F: Y% A* @' k5 j0 y4 Y$ H" p
37. }

复制代码

3)硬件加速可选项打开后可以使用下面的函数复制加速填充复制内存
* e, s# W/ l6 G$ n! a

1. /**
   
2. * Copy pixels to destination memory using opacity
   
3. * @param dest a memory address. Copy 'src' here.
   4 b7 k# E" `, O: B' H
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. {
   3 S+ S# Q3 |# t" Z6 d8 b- V5 e. I; A
10.     /*Wait for the previous operation*/
    
11.     HAL_DMA2D_PollForTransfer(&Dma2dHandle, 100);
    % K, {  u# Z1 _) x5 J1 `& l* b
12. 
    
13.     Dma2dHandle.LayerCfg[1].InputAlpha = opa;
    / \, U* M& l* L5 r- t4 [
14.     HAL_DMA2D_ConfigLayer(&Dma2dHandle, 1);
    % C8 P+ C! I3 F( B( N3 Z2 d! {
15.     HAL_DMA2D_BlendingStart(&Dma2dHandle, (uint32_t) src, (uint32_t) dest, (uint32_t)dest, length, 1);
    
16. }

复制代码

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

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

/ w7 ~; B3 l2 r6 [7 n

: x# m$ U8 m2 M" B5 f
* i7 V) e' ^2 X! |( L' I
将所有的文件添加到工程中后用keil编译可能会有一些错误和警告出现，但都很好解决。
. ?/ i) J( D6 N& U2 F% z2 S2 t" {' T
  _) o% r9 R6 P- O
2、运行效果

) r2 g$ }( x7 z9 @+ j- N7 sLittlevGL内置一个类似桌面系统的演示例子，通过打开相应的宏定义即可

4 j  q; d9 \: S
& r. G' r9 \: W; ^1 _% J
$ w! e  i+ D/ k8 d/ |# E
. Z9 m2 D# S. bLittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：




1 k! H) Q- S3 B1 p& X除此之外官网还有一个在STM32F429-DISOC上移植的例子，在youtube上可以观看，因为转换为了gif可能看起来不是很流畅，实际演示效果很不错。
; e5 b$ l5 C0 I! w6 L

1 y/ @& f% U8 e; f) p

- ~; C' m5 ?  k下面是我在STM32F769-DISOC上面的移植，和linux下模拟运行的差不多。因为769-disco的分辨率很高，移植后我没有使用优化，所以可以看到画面切换有些闪烁。
, T5 k2 B/ m( y$ j" n2 o/ |
6 |# Q$ R8 Z' z/ G
( r# g. T) z6 s/ {5 S4 h3、关于LittlevGL

! @7 ^6 S# G( G! z# L, A& C    LittlevGL里面有个简单的时间片调度系统，刷新显示和触摸处理等任务会周期的被调用处理。LCD刷新采用了局部缓存刷新，这样能避免闪烁出现。LittlevGL目前只有一个开发者在业余时间维护更新，但是开发者热情很高，可以在github上看到更新很频繁，我测试的使用的V4.2版本，开发者正在开发4.3版本并加入了不少新的功能，有建议可以在github和作者讨论互动。
目前代码结构看上去有点乱，有人在也提到了这个问题，计划好像是在5.0版本引入新的代码组织结构，感兴趣的可以去github提意见，开发者很乐意沟通讨论。官网也有不少控件的使用介绍和例子参考。
5 ^( C/ O  p7 t+ {
& y- a; O4 `: j2 w  K) T2 n1 b& o

4 b0 ]3 e2 M; B1 T


4 h1 w: h- O/ ]5 R" k0 \9 B. U& B官网和github地址如下:

4 i3 j3 Y0 T' x; [3 zLittlevGL官网：http://www.gl.littlev.hu/
0 T; b' O# }- s' U4 bLittlevGLgithub :http://github.com/littlevgl   和  http://github.com/littlevgl/lvgl
" y1 [8 ~' @1 S- u- ?
下面2个视频是在PC Simulator (Linux)和F4-DICO上的移植演示可能需要科学的方式才能打开。
0 B0 b# }1 g, `  v: \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

# O- F( D, q% N- {; n5 e& g. j* V  和众多开源的RTOS不一样，目前GUI开源的不是很多，虽然很多商用的GUI也很炫酷，但是我们没法知道具体效果的实现细节，也没法学习到这种能力，LittlevGL目前实现的一些特性和控件我认为是开源的GUI里面水平非常高的了。但是目前LittlevGL资料不是很多，只能通过阅读源码去学习和研究。


2 [1 A7 K0 ]' y( r测试代码:
* k7 G) R, W: }" P' j# A5 X LittlevGL-STM32F769-DISCO.rar (4.72 MB, 下载次数: 867)

2017-9-7 22:50 上传

点击文件名下载附件

9 [3 g2 q8 _" L8 c4 x- e

5 V8 p0 l2 T0 C2 Z( Y
' t- V* a, S' e* T9 R4 e! i: i

ioremap 发表于 2018-11-30 17:25
- D1 ]/ m( {) q% ?我遇到个大问题，求回复，空间没颜色的

6 b  z! l8 s( s看到一个别人分享的开源中文教程。
9 ?. q  s* J" j% x1 B 开源GUI-littevGL应用教程 V0.1.pdf (3.14 MB, 下载次数: 497)

2018-12-2 17:03 上传

点击文件名下载附件
- m9 Z% k8 f" [+ s

ljt8015 发表于 2017-9-8 13:47
7 ~8 U8 M2 d$ B# z/ i5 CLittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：

; w, M# r$ Y" X7 _http://github.com/littlevgl/proj_pc

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

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

跟着大佬学习。。。

wow。感觉真不错
* V, s7 G5 S) M9 F谢谢楼主分享

厉害厉害

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

这个不错，赞一个

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

学习新知识，快乐

LittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：
; Q6 G9 X0 \. f1 e1 j& k7 w! o+ [7 B

如何模拟？  如何在linux中运行？
3 o. J, b4 K( Q; ^2 _
( |4 G, E$ O) L1 k

LittlevGL 相比 ucgui 的优势？
! r4 a4 A1 X  Y# v+ h- Y! m
$ s. c, Z/ U6 Y

文档很少

ljt8015 发表于 2017-9-8 14:51
" h7 Y2 K' ^' V文档很少

, z6 ]# S8 F2 e5 q# z3 q文档是很少，只能通过看代码学习了，如果感兴趣的话可以一起讨论。

感谢楼主，这个很好

好6啊