% |9 p3 M, n) Z( \" ^, p: B- _
0 A  P) d" H3 \) s5 d* l             最近看到越来越多的小伙伴在讨论littlevgl，这说明这个开源GUI正在被更多的人了解和使用，最近littlevgl正式推出了V5.0版本，完善了整个代码架构和一些API及函数的命名，重新设计了移植的接口方式，添加了众多的控件及可更换主题等功能。我之前在STM32F769-DISCO 上移植了V4.2版本，下面的移植使用最新的V5.0版本的源码。


                                 


5 i0 F0 `3 ~% \" p) l& c0 p6 U1、V5.0新特性
  T/ I, ?6 X6 q3 J
0 y$ x$ h( @+ A( |
0 g$ S& i! O1 Z& q. M  J( a. _3 l源码提供了各种内置主题可以选择比如下面的黑色主题
, X5 ]" F- q% C
- I" q2 f9 R  V% uElegant dark theme which shows confidence and high quality.
0 G5 C2 p' m* n+ ]

下面的是Android's material design风格主题
; s; k5 T6 M- w- V) C6 F0 G% @' P& O% \* Z0 E
. H2 N; H: S0 v8 m

$ y# g! t8 b+ u% g* q5 Z
更多主题可以到官网查看：http://littlevgl.com/themes
Unicode support、Symbol fonts 支持

! m( q$ [  E/ p& c' {4 C3 r
/ [" p% q! d, J, U5 t- s8 T


/ q8 x) J, _" ~0 v' U5.0版本也增加了一些新的的控件：http://littlevgl.com/object-types

) o% |% q% _2 Z. Y- M/ `
. D) a# N& p  J更详细的请移步官网：http://littlevgl.com/basics
8 c- h+ T# p$ T7 A/ P: }! b8 r- W: N
2、移植
' P7 A1 S4 n9 r$ n2 |* m官网给出的移植要求如下，littlevgl 的移植性很高，基本不需要单片机外部资源。

" I; K4 @- n' k2 e9 O* L
% I- z4 L. B2 c) c2 n/ G- ?新的5.0版本的移植接口采用了函数注册的方式，Display interface、Input device interface、Tick interface ，只要实现这3个简单的接口就可以
$ R, _9 V3 r+ Z: d7 n& w: J简单的跑起来littlevgl,接口的移植的详细的说明可以参考:http://littlevgl.com/porting

( e' `7 f3 z6 @9 b* V4 X) [其中需要注意的Display interface，为了优化显示，可以使用2个Virtual Display buffers (VDB)并行的rendering and flushing。作者的移植例子使用的是DMA中断在进行background flushing。我移植的时候为了简单就直接使用的单缓冲，然后手动调用lv_flush_ready();。

3 y4 l5 w1 ?9 ^0 s9 {/ ]% ^" H
' M- ]: s. b! i5 r

1. /**
   
2. * Flush a color buffer
   - x5 p' e" V8 C) \( G# x+ p
3. * @param x1 left coordinate of the rectangle
   
4. * @param x2 right coordinate of the rectangle
   1 ?/ q. Y& e3 q/ B; m* S
5. * @param y1 top coordinate of the rectangle
   
6. * @param y2 bottom coordinate of the rectangle
   5 r# j$ X& L" k" G/ `4 l' e
7. * @param color_p pointer to an array of colors
   9 m$ R. \9 O+ w. A; b/ Q
8. */
   : w$ T+ w/ k; G) a9 w7 |
9. static void tft_flush(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const lv_color_t * color_p)
   7 Z" ~+ m. n  t/ H1 R8 [& m5 g
10. {
    + C/ s+ T3 |3 i( J# i9 g
11.     /*Return if the area is out the screen*/
    % y9 e5 z$ i# h: |9 P, O
12.     if(x2 < 0) return;
    
13. 
    6 Q( N9 q& d7 {
14.     if(y2 < 0) return;
    5 j# A1 C/ n' A. X5 B* }4 [
15. 
    , ^' }5 W2 \' O# Z
16.     if(x1 > TFT_HOR_RES - 1) return;
    - L3 O$ ]' J* w( }$ M2 F1 M
17. 
    
18.     if(y1 > TFT_VER_RES - 1) return;
    
19. 
    ; I! }  k" G8 _
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;
    6 u- U# a8 ~9 r
23.     int32_t act_x2 = x2 > TFT_HOR_RES - 1 ? TFT_HOR_RES - 1 : x2;
    
24.     int32_t act_y2 = y2 > TFT_VER_RES - 1 ? TFT_VER_RES - 1 : y2;
    
25. 
    7 V" |& t8 S. ^" M* u! ^, F
26.     uint32_t x;
    
27.     uint32_t y;
    
28. 
    4 u, p) r  ]; e9 D7 w8 }2 K- {
29.     /*Put the map to the remaining area*/
    0 f3 h* d- g6 G; [  S' ~1 W8 B
30.     for(y = act_y1; y <= act_y2; y++)
    
31.     {
    ' ]' L  V! z/ J9 @) }5 c/ H- L
32.         for(x = act_x1; x <= act_x2; x++)
    
33.         {
    ! _0 Q$ h1 d. h7 D- d5 U; z
34.             /*Your specific function comes here!*/
    6 H5 m; s+ t0 H- W) V. U
35.             /*my_put_pixel(x, y, color_p->full);*/
    : i$ M  P0 O" w' y; [
36.             BSP_LCD_DrawPixel(x, y,  ((color_p->full) | 0xFF000000));
    
37.             color_p++;
    ! V, }3 x1 l; ~8 E$ N0 c, x; L" r, T
38.         }
    
39. 
    ; k; M  r, w: Z1 d2 S% V
40.         color_p += x2 - act_x2;        /*Skip the parts out of the screen*/
    % Q. y/ q5 ^7 w+ e+ w( w, @
41.     }
    ) C5 ~* B0 l( Z3 ~6 t
42.     lv_flush_ready();
    ' x# d& M! p% \8 c5 ]$ }
43. }

复制代码

# V: ]) F" i0 m& B
3 H/ Y# d8 r" A  ~9 ^6 {6 I+ c首先测试下一个demo


1 z" W7 ~7 Q% l8 x- W

; t% |1 }- C/ O  F% v
) z" g& G4 k  ~" |4 o  V然后测试下内置的主题换肤

' ?" Q* ?: u" s$ v

9 o0 [" N; V% i0 {8 P! X

/ J# e, ]9 t: `' R% V" J
" ~1 f& w* o" X" y; w1 A看下main函数

1. int main(void)
   5 \' t. f3 l2 E
2. {
   
3. 
   9 J' n- j1 E- P- c/ k" @
4.     CPU_CACHE_Enable();
   , k  d; c* N2 m! ~0 y) V2 }
5.     HAL_Init();
   1 f& i: h' {0 @. i9 i8 P. F7 I' t9 L3 D; U
6.     SystemClock_Config();
   
7.     USART1_Init();
     ?' ~2 ~6 m* I9 M7 f; p  |8 W
8.     BSP_LCD_Init();
   
9.     BSP_LCD_LayerDefaultInit(0, LCD_FB_START_ADDRESS);
   " U/ y& Q' X7 M  @( t
10.     BSP_LCD_SetTextColor(LCD_COLOR_RED);
    
11.     BSP_LCD_Clear(LCD_COLOR_WHITE);
    2 O- f* Q/ K  s
12.     BSP_LCD_SetBackColor(LCD_COLOR_BLACK);
    2 {& y9 O3 R+ X0 l" }. w
13. 
    
14.     lv_init();
    2 J6 q7 ~9 [" k$ o$ N( e. k! H
15.     tft_init();
    
16.     touchpad_init();
    
17.     //可以使用下面的注释
    
18.     //测试button
    ( \: t" w, q' @/ p
19.     //button_test();
    
20.    
    : V/ V6 T( I9 R
21.     //测试demo
    2 \, J1 v  ~0 d$ @# Z. A
22.     //demo_create();
    2 W6 H' N7 ?+ K. g1 [% L/ K* @) F
23.    
    , @1 t/ D7 p# `% O+ Q6 e3 g1 Q# T
24.     //测试theme
    
25.     lv_theme_t *th = lv_theme_alien_init(21, NULL);
    
26.     lv_test_theme_1(th);
    4 M( m8 e5 M: V7 G5 f9 Q+ U
27.    
    2 H( x0 }  ^4 ~
28.     while(1)
    
29.     {
    3 i( M8 O# w; [- `# s
30.         HAL_Delay(10);
    . P) p) Q$ A, O7 ^
31.         lv_task_handler();
    
32. 
    0 K+ H7 |3 f( o- q. t  X9 {1 q  Y5 y
33.     }
    , ]! M4 g3 O; c  f3 B
34. }

复制代码

6 e" V; e1 u$ X# @
# I" _6 z+ \. p9 g) l" ]# P' R

) ?$ x: i% {/ P$ h: _3、参考资料

+ l( n" A/ D6 ]- W. @
  参考资料要推荐的官网的详细的说明和各种控件的使用说明及代码实例，还有就是作者在github上提供了PC模拟器以及各种控件和入门的代码可以参考，最后要感谢作者无私的开源精神！
9 J  [4 p1 c5 h% r" L! F

/ c: B+ W% `+ p, Y/ H0 c官网：http://littlevgl.com/
2 l6 k3 }* |# ?5 O1 I$ V' Npc_simulator：http://github.com/littlevgl/pc_simulator
lv_examples：http://github.com/littlevgl/lv_examples

' u/ z' f1 [# f: ]+ {% p) E
测试代码：
" ~% c4 x. m; J LittlevGL-V5-STM32F69-DISCO.rar (6.01 MB, 下载次数: 2319)

2018-1-13 18:39 上传

点击文件名下载附件
; u7 ^5 T: N- x; I5 w
! ?" @; w" E( \" V! ]$ m
$ e9 z0 m! j6 D7 x( \) Z相关阅读，littlevgl V4.2移植
开源GUI  LittlevGL 移植
# V0 L. U7 _3 ~; y

! k6 a* B) |( ^' ^6 i+ p# S 开源GUI-littevGL应用教程 V0.1.pdf (3.14 MB, 下载次数: 499)

2018-12-2 17:04 上传

点击文件名下载附件

4 ?! f- J$ L  u8 b/ a
( E# a& f( [6 K" P. mMIT许可证之名源自麻省理工学院（Massachusetts Institute of Technology, MIT），又称「X条款」（X License）或「X11条款」（X11 License）

' K  u7 F5 o8 ]0 M# u# k0 iMIT内容与三条款BSD许可证（3-clause BSD license）内容颇为近似，但是赋予软体被授权人更大的权利与更少的限制。
) H. F/ Q/ o5 X1 w) J; J( z
5 K4 B- B  p0 ~) r9 W被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软体及软体的副本。

* o/ t! X; Q% {* ^% A" P" ]被授权人可根据程式的需要修改授权条款为适当的内容。

在软件和软件的所有副本中都必须包含版权声明和许可声明。
( f9 K1 r6 {7 U! o: x& M+ K2 J
此授权条款并非属copyleft的自由软体授权条款，允许在自由/开放源码软体或非自由软体（proprietary software）所使用。
  t# s1 C. D' V) Y
2 M" |( Y) ]  `此亦为MIT与BSD（The BSD license, 3-clause BSD license）本质上不同处。
" o$ y* b1 _+ _5 j# B2 t
MIT条款可与其他授权条款并存。另外，MIT条款也是自由软体基金会（FSF）所认可的自由软体授权条款，与GPL相容。

jinyi7016 发表于 2018-1-19 10:48
+ S7 H6 j8 G6 j/ S. Y2 w6 e哪个开源协议？

               

学习下                  

666学习了。。。

谢谢版主对此 GUI 的介绍。

; j: c' y+ I; B4 Q  ?, ?2 y

水果牛逼

这个非常牛

厉害了大佬

# r! q5 R1 L9 T3 J. t风格漂亮。

我前天刚下载，确实不错。。。niubility！！！

我准备弄到F429上玩玩，等着我啊

shanji 发表于 2018-1-15 10:24
我准备弄到F429上玩玩，等着我啊

, z8 z  d" C6 ~6 u8 n3 U! m! n% e/ M: ~好呀，一起耍！

这个UI看起来很漂亮

学习一下，谢谢推荐

哪个开源协议？