& K$ L! a. b7 P
- d) D! ^. l/ i- ^7 T. |* i    推荐阅读最新的Littlevgl移植（更新时间:2018-1-13）：
  
0 @: ^$ F, H+ e$ r5 J: x$ j    开源GUI  LittlevGL  V5.0版本移植      
1 R7 Z" ?- J7 {$ S

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


下面是我在STM32F769-DISCO上移植的演示模式的效果图片.
1 l, l% r  X' G7 r( p

+ R, H5 g) w$ I, b4 a


主要控件可以通过下面的图片有个基本的了解：
0 o' i* D; u$ N# s: J) n* ?1 O


1 G& G7 h1 V0 q! f- @1、移植

3 j. x9 P$ l/ @1 [1 t" B! OLittlevGL 的移植非常简单，用户只需要提供systick、触摸屏、LCD显示接口即可。源码里面有3个文件用于分别添加这3个接口，具体如下：
& ]: P! w6 i* p9 i( k' ^) `( }

也就是下面几个函数：
# P! R$ V1 o: n+ s; d+ ]4 W4 \3 u
& s/ @3 k' \9 N0 p; ~7 Z2 B/ 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库里面提供的

! Z$ V- H4 T0 C7 R9 l+ T0 g' q

1. /**
   % y' r7 Z2 a$ A- ]- _5 {/ d
2. * Get the elapsed milliseconds since start up
   6 a/ Q; V0 u' Y8 Q
3. * @return the elapsed milliseconds
   % S" e1 |# e# X* j, }( }
4. */
   
5. uint32_t systick_get(void)
   8 p2 d# f+ }/ I' W6 o# y
6. {
   
7.         return HAL_GetTick();
   9 D/ v+ d1 H; p$ T" c9 ?
8. }
   ( y: O, }% q. h; x
9. /**
   
10. * Get the elapsed milliseconds science a previous time stamp
    9 d% h. b6 a# p
11. * @param prev_tick a previous time stamp from 'systick_get'
    2 v5 L" X$ q9 h8 r' F. ^0 o
12. * @return the elapsed milliseconds since 'prev_tick'
    . B8 n+ u; k6 o/ f6 _
13. */
    # P1 d& i& p9 T+ Z
14. uint32_t systick_elaps(uint32_t prev_tick)
    
15. {
    
16.         volatile uint32_t act_time = systick_get();
    3 W9 s: r0 A; l! a) Q, @/ M
17. 
    
18.         /*If there is no overflow in sys_time
    8 U( N$ I$ R; Q4 Z+ _- C
19.          simple subtract*/
    
20.         if(act_time >= prev_tick) {
    
21.                 prev_tick = act_time - prev_tick;
    
22.         } else {
    1 ?) h' n- x% `4 u, z& S0 V
23.                 prev_tick = UINT32_MAX - prev_tick + 1;
    % |% O5 g7 t/ r* B1 Y7 X
24.                 prev_tick += act_time;
    % e5 r- I( J; ~. s
25.         }
    ( w6 h) c  |, ~  V
26.         return prev_tick;
    ( t4 A( x* y1 y) |; X; p6 d& q
27. }

复制代码

b)提供触摸屏的函数，用于初始化触摸屏和返回触摸屏扫描结果
5 W' r" T  v* K) x' L1 v% w

1. /**
   
2. * Initialize your input devices here
     Q: ^/ Y5 h. E8 g9 u* e6 R! r
3. */
   
4. void indev_init(void)
     H( e2 Z, `  D
5. {
   ; d# @+ T' B0 @% F
6.   BSP_TS_Init(DISP_HOR_RES, DISP_VER_RES);
     l% O% g6 |# P4 y
7. }
   , y) s6 }. O2 r
8. 
   
9. /**
   ( O% ^2 M  R" h9 b
10. * Read an input device
    
11. * @param indev_id id of the input device to read
    - O/ g6 |. H, F- y2 L- N8 C
12. * @param x put the x coordinate here
    ; d6 e; f7 Z+ ?% N( ]
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)
    7 @: _1 P+ A; `* m  W$ H0 U- D
17. {
    # L& a$ r- V6 b* V- |
18.         if(indev_id != 0) {
    ) }+ T+ o8 q5 f( K% W7 ?4 R
19.                 *x = 0;
    $ n! H  h' x; e7 h' w/ ^% _% g) W
20.                 *y = 0;
    ( c4 e( R6 }9 c( l8 O" M
21.                 return false;
    
22.         }
    
23.         static int16_t last_x = 0;
    
24.         static int16_t last_y = 0;
    
25.         bool press;
    
26.         BSP_TS_GetState(&TS_State);
    ; O% D! R% h/ C5 G3 Q
27.         if(TS_State.touchDetected != 0) {
    4 v$ z, @. V. J$ S6 G
28.                 *x = TS_State.touchX[0];
    
29.                 *y = TS_State.touchY[0];
    
30.                 press = true;
    
31.         } else {
    6 U: {  u, m" ?- n: |4 e5 Q
32.                 *x = last_x;
    9 E: t) S& T+ b4 ~0 n
33.                 *y = last_y;
    
34.                 press = false;
    " l& A# V! v9 i" C5 V
35.         }
    
36. 
    7 @  q+ F: x! I" q* K6 |( j
37.         return press;
    1 n* O7 ?* E' w2 ]
38. }

复制代码

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

% I, t; k( X9 V. _: I1)一个是用单一色填充矩形区域，这个实际调用的次数较小

1. /**
   
2. * Fill a rectangular area with a color
   
3. * @param x1 left coordinate of the rectangle
   
4. * @param x2 right coordinate of the rectangle
   % ~* e' O* z1 G7 r6 `& X- g
5. * @param y1 top coordinate of the rectangle
   
6. * @param y2 bottom coordinate of the rectangle
   
7. * @param color fill color
   ! h" L# d# Y0 R! k+ L8 Z# _
8. */
   * E, F+ t. f. f
9. void disp_fill(int32_t x1, int32_t y1, int32_t x2, int32_t y2, color_t color)
   . k# A; i/ z* r2 e+ z. o
10. {
    " i/ ~% h1 f$ U8 D
11.     /*Return if the area is out the screen*/
    
12.     if(x2 < 0) return;
    
13. 
    5 t7 F3 C- T" M) L0 c) C$ h
14.     if(y2 < 0) return;
    8 k6 h* t- U+ P/ e' E
15. 
    ' v1 o4 j* f4 I2 g0 j# O
16.     if(x1 > DISP_HOR_RES - 1) return;
    
17. 
    
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;
    . ^; S9 V5 w" f
22.     int32_t act_y1 = y1 < 0 ? 0 : y1;
    / H$ d: x7 R" W. ]+ ~2 s
23.     int32_t act_x2 = x2 > DISP_HOR_RES - 1 ? DISP_HOR_RES - 1 : x2;
    . Z% ^0 r, K' j4 o( y
24.     int32_t act_y2 = y2 > DISP_VER_RES - 1 ? DISP_VER_RES - 1 : y2;
    ' C6 i0 z/ }" b/ X
25. 
    9 d5 N- ?. n% W1 q( P
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. /**
   
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
   
6. * @param y2 bottom coordinate of the rectangle
   % [0 U1 a! I8 d( K/ f( A) h' |8 b
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)
   2 Y0 @/ C$ `8 {! K+ G$ U
10. {
    
11.     /*Return if the area is out the screen*/
    
12.     if(x2 < 0) return;
    
13. 
    9 r: j" Q+ v2 A4 a6 a. v8 {
14.     if(y2 < 0) return;
    
15. 
    ( j# e$ ?) H1 ^
16.     if(x1 > DISP_HOR_RES - 1) return;
    3 P! E6 o; ?! f  [, S- Y$ d
17. 
    , S$ f6 E+ K" c( J3 V" L& ^
18.     if(y1 > DISP_VER_RES - 1) return;
    
19. 
    % T  k6 ^1 {" q  [
20.     /*Truncate the area to the screen*/
    
21.     int32_t act_x1 = x1 < 0 ? 0 : x1;
    : P7 g( J. U" y0 @) ~2 L( Y
22.     int32_t act_y1 = y1 < 0 ? 0 : y1;
    0 `8 l& J7 W; r  N( D5 d% O
23.     int32_t act_x2 = x2 > DISP_HOR_RES - 1 ? DISP_HOR_RES - 1 : x2;
    2 q) ~. ]9 Y- ]% l6 d% E
24.     int32_t act_y2 = y2 > DISP_VER_RES - 1 ? DISP_VER_RES - 1 : y2;
    
25. 
    
26. 
    
27.     uint32_t y;
    * Q$ n% I5 X/ }, U3 O) b- q
28. 
    $ j8 f( W9 C/ x# p+ m% t: P
29.     for(y = act_y1; y <= act_y2; y++)
    7 D) @  r/ C+ C9 s- n
30.     {
    
31.         memcpy(&my_fb[y * DISP_HOR_RES + act_x1],
    - f+ |* M# T! z$ n
32.                color_p,
    % D" K' H* E! V8 }4 ~! f* c
33.                (act_x2 - act_x1 + 1) * sizeof(my_fb[0]));
    
34.         color_p += x2 - x1 + 1;    /*Skip the parts out of the screen*/
    - {7 m% d1 n+ n( @, e; T
35.     }
      x8 Y* S2 J- X4 G
36. 
    
37. }

复制代码

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

1. /**
   8 n) ~- V/ P# v. n7 A; F
2. * Copy pixels to destination memory using opacity
   
3. * @param dest a memory address. Copy 'src' here.
   # y; @& S; e% v9 S+ N  ^1 _
4. * @param src pointer to pixel map. Copy it to 'dest'.
   + R% t1 k8 U5 q' F8 I* D
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. {
   
10.     /*Wait for the previous operation*/
    
11.     HAL_DMA2D_PollForTransfer(&Dma2dHandle, 100);
    
12. 
    $ }+ ~. D1 s: l& t7 W" p& Y
13.     Dma2dHandle.LayerCfg[1].InputAlpha = opa;
    - V; v6 m0 ?8 |( x1 M+ ~
14.     HAL_DMA2D_ConfigLayer(&Dma2dHandle, 1);
    
15.     HAL_DMA2D_BlendingStart(&Dma2dHandle, (uint32_t) src, (uint32_t) dest, (uint32_t)dest, length, 1);
    ! c. I/ c* g+ W0 b6 R
16. }

复制代码

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

添加到工程中后如下整体如下：
2 M* q8 w  V0 ~. T
7 W2 r1 ^) b) P
% @3 b* Y" W6 X. U# l, R  Y

- A4 Y$ E& I* A& [7 b; \! W
+ ^7 n# X; x8 p, m9 C1 o, x6 o* d1 f将所有的文件添加到工程中后用keil编译可能会有一些错误和警告出现，但都很好解决。
/ o/ ~# w; o& j  L0 s0 [  s2 {3 c
3 A7 p% a' @+ m) ?
3 _' ~% m* |1 b8 P3 v8 i2 a2、运行效果

% X) ~7 x! D: L  _* O, RLittlevGL内置一个类似桌面系统的演示例子，通过打开相应的宏定义即可

) |" c# i' E" k

0 W+ a+ j# U7 b: e+ O  P1 O
9 K4 a8 X1 F+ I  X* j8 U( |' KLittlevGL有个桌面上模拟的工程，下面是论坛网友 @QianFan  在linux下运行官方例子的运行效果：
, @# }& M7 L/ L2 v7 b6 O
( J( u# K8 \( Z8 j4 }


3 A5 |2 I' i8 R- g' L# L除此之外官网还有一个在STM32F429-DISOC上移植的例子，在youtube上可以观看，因为转换为了gif可能看起来不是很流畅，实际演示效果很不错。
5 Q  @* ~- A* O
" R8 s% {, z4 q! G2 @- n0 O


下面是我在STM32F769-DISOC上面的移植，和linux下模拟运行的差不多。因为769-disco的分辨率很高，移植后我没有使用优化，所以可以看到画面切换有些闪烁。
1 b$ r3 {) @& w/ b( a$ U
" x" ?- O* t0 S. m  L2 u7 D* J6 W
3、关于LittlevGL

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

# r/ J1 W+ {" T# O  H8 d; F



" m3 `( O3 G) d0 p3 m( O9 n
官网和github地址如下:

LittlevGL官网：http://www.gl.littlev.hu/
LittlevGLgithub :http://github.com/littlevgl   和  http://github.com/littlevgl/lvgl
! G1 F) h2 l8 F( A
6 ^2 f2 G5 Z9 G7 X下面2个视频是在PC Simulator (Linux)和F4-DICO上的移植演示可能需要科学的方式才能打开。
How to Run Littlev Graphics Library in PC Simulator (Linux)：http://youtu.be/ZzLdct2ymvg
7 L" [4 f$ u- |6 \& ?7 ?Embedded GUI on STM32 Discovery with Littlev Free Graphics Library：http://youtu.be/DcJdK137WKM

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

7 \! f$ {- I& E
测试代码:
LittlevGL-STM32F769-DISCO.rar (4.72 MB, 下载次数: 867)

2017-9-7 22:50 上传

点击文件名下载附件


; I& {: s$ @* |7 ]: H! g% @: F$ S

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

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

2018-12-2 17:03 上传

点击文件名下载附件
# u; M) L5 H% F/ p

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

http://github.com/littlevgl/proj_pc

chen849928055 发表于 2018-7-23 16:10
9 P+ g: Y. \0 C3 T# `6 |) V! C7 i版主Littlevgl移植 没有硬件mcu的限制吧,只要mcu的ram,rom等硬件条件符合要求,就能跑起Littlevgl吧 ...

7 [9 X2 f0 l3 S' z, x0 w是的，没有限制，移植吧。

跟着大佬学习。。。

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

厉害厉害

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

这个不错，赞一个

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

学习新知识，快乐

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

+ ~& _. O' ^7 e8 i& Z( I
/ V4 q: F" n2 X$ H, z6 s如何模拟？  如何在linux中运行？
3 K# P: o: u6 b
( i$ Y" P3 O+ q3 W

LittlevGL 相比 ucgui 的优势？
) i9 h: @7 O7 n, \4 |  J' i
9 `0 D$ b( \+ Y* E' g! o

8 x* S2 ]9 i+ `5 L8 k1 A文档很少
6 }4 }# I1 R3 c' s4 }
# T& H7 B( F* G/ ^3 {

ljt8015 发表于 2017-9-8 14:51
9 Q9 r7 G" _# |; Z& R( X# O文档很少

3 k! [9 j) K* P+ E5 N文档是很少，只能通过看代码学习了，如果感兴趣的话可以一起讨论。

感谢楼主，这个很好

好6啊