$ m# g. J1 ?# ?4 ~    推荐阅读最新的Littlevgl移植（更新时间:2018-1-13）：
  
! S8 P- J, W3 Z5 i/ H4 h# t) N7 Q: S% [    开源GUI  LittlevGL  V5.0版本移植      

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

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


% c+ u8 N+ R& s& z- u! g0 C
& ?: {* K# a+ h

主要控件可以通过下面的图片有个基本的了解：
, H$ t) }+ L. V- {3 q# k) P


% j: x0 ]$ ~4 e( |  O1、移植

LittlevGL 的移植非常简单，用户只需要提供systick、触摸屏、LCD显示接口即可。源码里面有3个文件用于分别添加这3个接口，具体如下：
* m3 a( A! ~" b% |  ]9 G

也就是下面几个函数：
$ N# g% Y! m; }: H) ^

• 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
• 
  % q1 w. v1 [  R- \. x

a)systick的移植直接使用的是HAL库里面提供的
, U% d+ [6 b. Z" `3 h) p. C
" E  S6 E" |+ O4 t9 P* n( V

1. /**
   
2. * Get the elapsed milliseconds since start up
   
3. * @return the elapsed milliseconds
   
4. */
   7 z) C6 P. v' M" b
5. uint32_t systick_get(void)
   
6. {
   
7.         return HAL_GetTick();
   2 k% V, v0 q& r) A
8. }
   
9. /**
   
10. * Get the elapsed milliseconds science a previous time stamp
    $ D8 W8 E  }$ ?7 j9 J
11. * @param prev_tick a previous time stamp from 'systick_get'
    9 H' i" Z; v0 B+ X' Y( `+ s/ A5 W3 z
12. * @return the elapsed milliseconds since 'prev_tick'
    ) \  r! |- o% b' y4 K- c4 G" {
13. */
    / K7 i/ v/ O# D) E
14. uint32_t systick_elaps(uint32_t prev_tick)
    
15. {
    
16.         volatile uint32_t act_time = systick_get();
    & P  W" Y! o# M4 I/ e) N
17. 
    7 R: n0 O3 Q* h/ a6 e( S
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;
    
22.         } else {
    
23.                 prev_tick = UINT32_MAX - prev_tick + 1;
    
24.                 prev_tick += act_time;
    9 b- F; l7 @# h) k. O! I  R
25.         }
    
26.         return prev_tick;
    
27. }

复制代码

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

1. /**
   
2. * Initialize your input devices here
   
3. */
   4 ~. ]/ L- i  W7 n7 }& q. t; ^
4. void indev_init(void)
   / ?  N4 Y+ r! J0 x9 H8 q
5. {
   
6.   BSP_TS_Init(DISP_HOR_RES, DISP_VER_RES);
   
7. }
   
8. 
   
9. /**
   
10. * Read an input device
    
11. * @param indev_id id of the input device to read
    # d# S2 K! _) I2 b6 s" v4 Z
12. * @param x put the x coordinate here
    
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)
    
17. {
    - U* J* I$ K$ m0 |0 _
18.         if(indev_id != 0) {
    
19.                 *x = 0;
    # M/ ~& I! Y9 h; T4 U: `) h3 ^
20.                 *y = 0;
    ! D) Q3 X) |2 E% u& b* T7 V0 U
21.                 return false;
    
22.         }
    
23.         static int16_t last_x = 0;
      U7 O" _$ r; @
24.         static int16_t last_y = 0;
    4 \) x, `$ \% A  t
25.         bool press;
    
26.         BSP_TS_GetState(&TS_State);
    
27.         if(TS_State.touchDetected != 0) {
    
28.                 *x = TS_State.touchX[0];
    
29.                 *y = TS_State.touchY[0];
    
30.                 press = true;
    3 ?+ [4 i- j' d% `+ N! t! C: [- v
31.         } else {
    - N% p  z# D. W$ @- q; w
32.                 *x = last_x;
    1 y$ {9 ]" T' f) K8 P
33.                 *y = last_y;
    
34.                 press = false;
    0 J) ~9 f1 v8 X# E  Q! v. C* C
35.         }
    
36. 
    8 O5 l" J0 q8 g% @0 ]2 ?6 j6 y! Z
37.         return press;
    # J! x6 Y' K/ b8 f- Q8 Z& F1 g/ N1 b
38. }

复制代码

c)LCD的移植分为几个函数，
8 X" g, e4 h6 D5 T+ m3 Q
4 w2 P6 A' e( a2 v6 Z1)一个是用单一色填充矩形区域，这个实际调用的次数较小

' X+ P- m/ `" [  s# F/ L: I* E! `

1. /**
   
2. * Fill a rectangular area with a color
   : k" r7 Y8 C, S( Z3 L
3. * @param x1 left coordinate of the rectangle
   / ]9 Y; ^; U7 j9 h$ e& Q  X6 H- D" H
4. * @param x2 right coordinate of the rectangle
   3 z( T! Z8 ?3 `
5. * @param y1 top coordinate of the rectangle
   ) N! h5 [$ W( ^. E" W- z' u
6. * @param y2 bottom coordinate of the rectangle
   - X/ ~& l2 r1 n, a8 z8 k6 h
7. * @param color fill color
   
8. */
   - G7 x9 o' S% I' q# y4 Q
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;
    1 `2 H# T1 F! ?- I- R
13. 
    5 C* }; H6 S/ m& W8 h$ U# r. A
14.     if(y2 < 0) return;
    . S: i/ i- \# k3 A2 e* }6 U  D
15. 
    7 {) R  K, \( E) N- }. z
16.     if(x1 > DISP_HOR_RES - 1) return;
    . J7 z2 L7 l5 N7 J1 y2 _9 d3 |' c5 H
17. 
    
18.     if(y1 > DISP_VER_RES - 1) return;
    4 y( ?0 u7 t- i) r
19. 
    . D' {7 O$ |' a# j4 d5 A
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;
    / K! t; V) k: L& j+ ~
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. 
    - ^# |, m5 _& k* c# s
26.     LCD_FillRectPart(act_x1, act_y1, act_x2 - act_x1 + 1, act_y2 - act_y1 + 1, ((color.full)));
    8 q1 j2 X. }% i+ d3 x+ T
27. }

复制代码

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

1. /**
   $ k# D7 y( `6 `$ d& O
2. * Put a color map to a rectangular area
   
3. * @param x1 left coordinate of the rectangle
   ( ^& E, U- R' L, v- u4 c: B
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_p pointer to an array of colors
   ( s$ o) ~: y' g- r" Y2 J5 C' Q" P
8. */
   
9. void disp_map(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const color_t * color_p)
   
10. {
    4 n# o6 z5 O3 P! A
11.     /*Return if the area is out the screen*/
    
12.     if(x2 < 0) return;
    4 ~5 p6 [* _! q; w1 a. [
13. 
    * K4 U' w5 h0 ~. `* q+ {8 B
14.     if(y2 < 0) return;
    
15. 
    + w* G5 a6 J* V
16.     if(x1 > DISP_HOR_RES - 1) return;
    7 N& r/ ~: _5 z6 \" d) m
17. 
    1 Y8 ~7 d; E, v! X: c' P
18.     if(y1 > DISP_VER_RES - 1) return;
    
19. 
    . n& _+ m3 ?/ v
20.     /*Truncate the area to the screen*/
    , a- b: [; }6 D2 o
21.     int32_t act_x1 = x1 < 0 ? 0 : x1;
    
22.     int32_t act_y1 = y1 < 0 ? 0 : y1;
    0 P3 `4 P& B, |6 H/ {
23.     int32_t act_x2 = x2 > DISP_HOR_RES - 1 ? DISP_HOR_RES - 1 : x2;
    5 A  m, Y2 Q7 d  S
24.     int32_t act_y2 = y2 > DISP_VER_RES - 1 ? DISP_VER_RES - 1 : y2;
    ' f$ p- F1 }" p
25. 
    
26. 
    
27.     uint32_t y;
    3 Y( u1 U% N* o) _* `3 {
28. 
    
29.     for(y = act_y1; y <= act_y2; y++)
    
30.     {
    . @+ o# e7 ?3 w
31.         memcpy(&my_fb[y * DISP_HOR_RES + act_x1],
    6 a( X$ t  S* F9 X9 J" i
32.                color_p,
    1 d( H; ^2 z9 u6 B! h
33.                (act_x2 - act_x1 + 1) * sizeof(my_fb[0]));
    
34.         color_p += x2 - x1 + 1;    /*Skip the parts out of the screen*/
    3 b& f. F! X  z% D$ [
35.     }
    6 e' x2 p4 ?9 l; \: X5 h, M; S) U
36. 
    3 X: o3 q% @. d( w5 }& A7 x1 l) F
37. }

复制代码

3)硬件加速可选项打开后可以使用下面的函数复制加速填充复制内存
4 J1 h4 z  j. E) Z6 i# c. S

1. /**
   , U, X! ~+ w# {1 e1 M& Y) f
2. * Copy pixels to destination memory using opacity
   3 o' |3 H' q- H6 Z
3. * @param dest a memory address. Copy 'src' here.
   $ |1 A" t6 U+ N8 k1 X' J3 }+ L
4. * @param src pointer to pixel map. Copy it to 'dest'.
   ) e. C" |5 a$ c# y3 F
5. * @param length number of pixels in 'src'
   5 v0 i% k, O$ r, {6 y1 c' j
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. {
   
10.     /*Wait for the previous operation*/
    8 j; s- A' p1 T% J
11.     HAL_DMA2D_PollForTransfer(&Dma2dHandle, 100);
    ' Y0 _/ {: i9 A- f/ u( `+ Z
12. 
    
13.     Dma2dHandle.LayerCfg[1].InputAlpha = opa;
    : a/ d2 T" f/ ?/ q
14.     HAL_DMA2D_ConfigLayer(&Dma2dHandle, 1);
    & w- V% P: e0 e0 N7 S. v/ M
15.     HAL_DMA2D_BlendingStart(&Dma2dHandle, (uint32_t) src, (uint32_t) dest, (uint32_t)dest, length, 1);
    % J1 a2 q7 y' j& k: x
16. }

复制代码

移植了上面接口之后基本问题就不大了，littlevgl 目前的代码结构有点乱，分为core、hal、misc 几个部分，我是分别建立一个文件夹然后把相应的文件全部添加到里面了，官网也没有详细的移植说明文档。所有的源码如下：
" j, v! \5 U  e7 @! ]" h
+ k& \; S' ~% y0 I' d7 p添加到工程中后如下整体如下：

8 o; [/ ]2 \1 \" J

& O9 c' d8 u- m- E$ h9 j! V
9 D# Z6 `* o0 W/ a' m
8 o9 |2 R  H& }% S2 ^将所有的文件添加到工程中后用keil编译可能会有一些错误和警告出现，但都很好解决。

$ r( {" p8 J$ }/ E9 \( e
! S( m' I* y; I3 N8 d3 ^( v( h2、运行效果
, ?! G" M) b7 ~( N9 v% W' [
LittlevGL内置一个类似桌面系统的演示例子，通过打开相应的宏定义即可

; D1 _: H! s9 j; q* [& i# j$ H. q6 z
! w$ W! l  p+ g( |, G4 v

8 d8 _7 a9 L+ A  x. d7 [& HLittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：


& \, ]! T, B) G% _
* F5 o" f6 x! C) c- T4 ?
除此之外官网还有一个在STM32F429-DISOC上移植的例子，在youtube上可以观看，因为转换为了gif可能看起来不是很流畅，实际演示效果很不错。
3 \8 }5 J6 G' ~9 b/ @2 j1 a! c' a
' f. K" Z3 F9 A4 L$ N* h! w8 G$ ?8 Q
& w9 ?0 i, \! o+ D% C0 z

下面是我在STM32F769-DISOC上面的移植，和linux下模拟运行的差不多。因为769-disco的分辨率很高，移植后我没有使用优化，所以可以看到画面切换有些闪烁。
5 n( z) b: p3 F9 C; f
7 j. g3 z5 j; z  v7 x
1 }8 a$ Y& |- P3 r: A3、关于LittlevGL

3 ~. l; i, A# g( V* H$ Y    LittlevGL里面有个简单的时间片调度系统，刷新显示和触摸处理等任务会周期的被调用处理。LCD刷新采用了局部缓存刷新，这样能避免闪烁出现。LittlevGL目前只有一个开发者在业余时间维护更新，但是开发者热情很高，可以在github上看到更新很频繁，我测试的使用的V4.2版本，开发者正在开发4.3版本并加入了不少新的功能，有建议可以在github和作者讨论互动。
目前代码结构看上去有点乱，有人在也提到了这个问题，计划好像是在5.0版本引入新的代码组织结构，感兴趣的可以去github提意见，开发者很乐意沟通讨论。官网也有不少控件的使用介绍和例子参考。
! e6 R: u$ H" I: }: h4 U  @
2 C7 o6 O  b. F- U+ R
# w6 P$ _2 [. W; \0 E* ^# a2 ?9 }

0 U1 d7 J  p5 O# P% Y

. L$ \5 L8 Q$ M/ X+ `5 r官网和github地址如下:
! }# O" u+ I0 z& f
* s" W3 C$ \7 U. XLittlevGL官网：http://www.gl.littlev.hu/
LittlevGLgithub :http://github.com/littlevgl   和  http://github.com/littlevgl/lvgl
: @- Y1 f. |, [) w) D) `* h$ I
& n3 |5 O% a" L* i  o2 C. B下面2个视频是在PC Simulator (Linux)和F4-DICO上的移植演示可能需要科学的方式才能打开。
! g6 C2 x4 @: _. ~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

& H$ ^; g" u, _" t& U9 K9 U' p  和众多开源的RTOS不一样，目前GUI开源的不是很多，虽然很多商用的GUI也很炫酷，但是我们没法知道具体效果的实现细节，也没法学习到这种能力，LittlevGL目前实现的一些特性和控件我认为是开源的GUI里面水平非常高的了。但是目前LittlevGL资料不是很多，只能通过阅读源码去学习和研究。
7 ^, T2 H- o3 A+ g- h
7 A! k+ w3 y5 p6 T7 {# X/ @' O7 a
/ y8 W# ]% W$ A% t测试代码:
LittlevGL-STM32F769-DISCO.rar (4.72 MB, 下载次数: 867)

2017-9-7 22:50 上传

点击文件名下载附件
: E" V: }' k1 b0 P2 S  x
) D) ^+ `+ [3 b8 C3 i+ \
- T1 b8 H3 A! y( g9 j9 M

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

9 N; X7 H& t4 [7 X4 ?4 m看到一个别人分享的开源中文教程。
3 }9 t+ D- e. T  l 开源GUI-littevGL应用教程 V0.1.pdf (3.14 MB, 下载次数: 497)

2018-12-2 17:03 上传

点击文件名下载附件

ljt8015 发表于 2017-9-8 13:47
8 Z9 w7 u) P# g( W- T% F. qLittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：

# o# C/ q( s8 t+ _+ o6 f9 U3 E/ R2 Khttp://github.com/littlevgl/proj_pc
% w; E/ O; Q8 f

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

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

跟着大佬学习。。。

wow。感觉真不错
3 }" @1 d, E% K$ _3 h/ m+ X谢谢楼主分享

厉害厉害

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

这个不错，赞一个

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

学习新知识，快乐

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

. ~4 N9 s0 }1 k+ C+ \
. o5 Z( s9 W& R8 A. K1 {如何模拟？  如何在linux中运行？
+ m3 P1 q5 j& K. X9 T/ M7 S$ t/ Q3 W
8 I: N/ h  a. z) F2 u

LittlevGL 相比 ucgui 的优势？

4 g5 [1 y- g/ B文档很少
5 P. x0 P( v% }5 ]# h

ljt8015 发表于 2017-9-8 14:51
9 W3 w2 W# L7 r9 ~文档很少

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

感谢楼主，这个很好

好6啊