你的浏览器版本过低,可能导致网站不能正常访问!
为了你能正常使用网站功能,请使用这些浏览器。

开源GUI LittlevGL V5.0版本移植  

[复制链接]
creep 发布时间:2018-1-13 18:42
本帖最后由 creep 于 2018-1-13 19:17 编辑 - b( b4 f' f  F0 ~. Q

* a$ l. m* }, Z8 H             最近看到越来越多的小伙伴在讨论littlevgl,这说明这个开源GUI正在被更多的人了解和使用,最近littlevgl正式推出了V5.0版本,完善了整个代码架构和一些API及函数的命名,重新设计了移植的接口方式,添加了众多的控件及可更换主题等功能。我之前在STM32F769-DISCO 上移植了V4.2版本,下面的移植使用最新的V5.0版本的源码。
1 @! v( [0 H( s: s3 t( `$ M
$ M+ [' K; \/ O1 B1 Y$ Q! Z
. v# e- }) j, q" b. `) }
                                  IMG_0407.JPG
: m% |( G- g' ?# i: n
* S  w( ]6 {, I1 [  y6 L% X

5 z0 \- S! a) q6 V* y% `1、V5.0新特性- S1 Y0 V6 ?$ [/ r2 K% n9 m
f80ce980-bcd9-4d2c-a19c-0978a125bd04.jpg 5 O: `- B4 V4 T' Q6 {2 S
1 m& p. ]6 @8 r' O! k  f/ t$ f8 i( h
源码提供了各种内置主题可以选择比如下面的黑色主题% X/ J  n' v7 ]. K3 D

  X$ S3 z8 D3 i' S7 EElegant dark theme which shows confidence and high quality.

) Z/ F1 S2 S% S8 q3 b 539cce83-09fc-4d77-9478-9edcfb83b7b6.jpg 3 x6 d) {" Y; q& _; B- N
( U- {* f" X% Z5 ~
下面的是Android's material design风格主题" a3 P. h  ^1 ^6 P# F+ X* h' F' K

: J1 M5 J5 O6 O! ?- C! O. D! u 3fe6c4e1-4051-4b1d-b917-1b0d114aa23a.jpg
1 I8 @' w) m3 K! `. u  a( Z% s& R$ u1 g% m& d4 B& Q8 F

9 P" \0 Z& l5 Z3 |+ d2 j: Z更多主题可以到官网查看:http://littlevgl.com/themes
  t: }0 \3 D, {9 wUnicode support、Symbol fonts 支持" a, S0 f9 @9 z0 o" @% ~2 c

8 U' v( S" U% e6 C4 A# l. m ffd05b20-3bde-4ee1-b7d3-a148a0a2df50.jpg 8 o3 O! F$ y( u* r# v- F; F
e84cd541-ebe8-454a-8151-c173e885ad10.jpg 9 X4 L# s3 B; n) _+ L- w; X
7 e0 ~% R2 r3 m2 G2 K

/ F. W7 `7 r" c/ {" Q5.0版本也增加了一些新的的控件:http://littlevgl.com/object-types% g' M% O* d: U: i8 n

# r5 \4 W4 F' H2 Y. B8 u 4a59d689-35c5-4c1b-9087-fb75bbe84999.jpg $ \: Z; r# q7 w7 ]+ H( Q* H
更详细的请移步官网:http://littlevgl.com/basics4 X& H# W0 G; N. @6 y
6 w! l( X* {' o1 w: J. o
2、移植9 h! K. k) O+ \
官网给出的移植要求如下,littlevgl 的移植性很高,基本不需要单片机外部资源。
/ H. w/ N/ W! s, L% L/ F. K
4 @) j" m2 k$ X" S
deea7166-3e0d-4344-b970-67f20c82a7de.jpg
8 q& [6 y6 |7 L4 C: g. M- R9 l" \& L' I新的5.0版本的移植接口采用了函数注册的方式,Display interface、Input device interface、Tick interface ,只要实现这3个简单的接口就可以8 ?0 ?# X- G' }: q
简单的跑起来littlevgl,接口的移植的详细的说明可以参考:http://littlevgl.com/porting; W7 {! w3 i3 ]+ z$ _# N
, d1 h5 ~) M( T% J9 t
其中需要注意的Display interface,为了优化显示,可以使用2个Virtual Display buffers (VDB)并行的rendering and flushing。作者的移植例子使用的是DMA中断在进行background flushing。我移植的时候为了简单就直接使用的单缓冲,然后手动调用lv_flush_ready();。
) v& V: i$ B! q+ P6 r: c8 U7 Y( q% \8 S8 y+ ~7 [! b
  M2 F) Q8 P) F
  1. /**
    / X- H$ \* t! ^+ U. F2 [: |# {
  2. * Flush a color buffer( U* x: Q! d& G. U
  3. * @param x1 left coordinate of the rectangle3 o9 T4 |. X. J6 [: j- K4 H0 e) w
  4. * @param x2 right coordinate of the rectangle
      Z& q% c+ Q7 B9 q# o: M9 }# B1 U
  5. * @param y1 top coordinate of the rectangle/ a3 E3 j$ f7 j, r' z; b5 o- E  r& ~
  6. * @param y2 bottom coordinate of the rectangle
    ( ]5 b1 k: R9 [7 v( S* M, u( [/ z
  7. * @param color_p pointer to an array of colors1 z" {- }+ i9 n$ D* _+ `
  8. */* Z& f6 X( @8 ^( z5 v$ l
  9. static void tft_flush(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const lv_color_t * color_p)
    2 ]2 g9 ?3 a4 ?; K) w6 M0 }
  10. {/ \( v% k# v( `5 _
  11.     /*Return if the area is out the screen*/) t0 n5 B/ E+ F7 r* i0 I
  12.     if(x2 < 0) return;
    , w# q5 F3 _* W3 f1 E

  13. 8 {5 I# l0 _% o) ]$ |0 W4 s- z
  14.     if(y2 < 0) return;
    8 ]9 j  i5 q  x$ R% \
  15. , \% R  `. p( {
  16.     if(x1 > TFT_HOR_RES - 1) return;
    $ u9 Q. ?4 O/ o0 e# e9 |/ u
  17. 8 P% x% e6 w% N; L3 T( {6 L, z
  18.     if(y1 > TFT_VER_RES - 1) return;0 R1 B- I& k; \3 ]
  19. 3 K; a2 v4 S1 @3 Z1 p! j
  20.     /*Truncate the area to the screen*/! I1 u; e1 T. _5 T
  21.     int32_t act_x1 = x1 < 0 ? 0 : x1;
    ! v$ B6 l! _+ X+ d" H/ n- Z
  22.     int32_t act_y1 = y1 < 0 ? 0 : y1;) ~" z9 X; F& A; ~1 I# [
  23.     int32_t act_x2 = x2 > TFT_HOR_RES - 1 ? TFT_HOR_RES - 1 : x2;( ]3 P$ o$ c) U( G
  24.     int32_t act_y2 = y2 > TFT_VER_RES - 1 ? TFT_VER_RES - 1 : y2;
    0 Z; E. A& C7 C

  25. , z0 c+ H* {1 |4 b* b
  26.     uint32_t x;
    9 P6 q. Y0 D- ~: R6 ?4 O2 u4 r
  27.     uint32_t y;- \) ~3 e% q8 N* \# g( b% F6 _
  28. % b5 L7 V7 o, ^' z: j$ j
  29.     /*Put the map to the remaining area*/
    ' r6 X& O3 U' S: _5 l
  30.     for(y = act_y1; y <= act_y2; y++)" p& `3 r! B* ^
  31.     {
    $ S+ }$ s7 N0 Y
  32.         for(x = act_x1; x <= act_x2; x++)0 E0 q  v) J8 K& A4 z, i% w; q
  33.         {
    8 m  V- z/ V) ], K$ W" O* Z! Q2 `
  34.             /*Your specific function comes here!*/
    ' \7 E+ n7 G: h# z$ ?* m, ]: Z1 z
  35.             /*my_put_pixel(x, y, color_p->full);*/- R3 Q; Q, T" g* A) Z# ], Y
  36.             BSP_LCD_DrawPixel(x, y,  ((color_p->full) | 0xFF000000));2 j' o. B2 D. a* V5 U
  37.             color_p++;( ~1 I5 u  W9 F' ~; k. K
  38.         }
    5 \9 p9 V& Z, x: ^; C2 N) w  D$ T

  39. 9 X/ D2 n8 J" |  ~  R7 a3 ]" |
  40.         color_p += x2 - act_x2;        /*Skip the parts out of the screen*/
    2 S6 Y( r. t+ Q( x
  41.     }
    1 M8 [% m5 ~/ W* g; d3 q
  42.     lv_flush_ready();
    ! n% ]0 S; D. D. ]8 m( `1 j8 ]
  43. }
复制代码

8 o! A# @' H  i
4 C4 d0 I6 |) O0 U2 V首先测试下一个demo
; t' `4 g  M( o) W
* c* N+ X5 N$ ~# Q; L) j
% W: c; _0 _' c! a IMG_0415.JPG 5 d: P, h4 `5 \6 d: N$ m) W2 Z' H

" n, [8 a$ v5 s" V- c' H- @9 l6 W% ^: U# c* y
然后测试下内置的主题换肤
( l% n. M; ^( D% I: e1 T7 ?) {7 k: b! o( n1 W! b# ]8 V9 v. _
IMG_0413.JPG

8 f: H2 E8 L4 ]4 V3 C- h1 ~7 L
2 P* y/ S, I" ~# `. g# E& j4 Z- k

$ L& r, e! a+ z1 T IMG_0404.JPG
' S+ X3 S# ?$ }! M: Q1 h; ?
# \4 Y/ m$ N( {, Y- ]: }: q
看下main函数
, B9 \; R. ~+ V, a7 p* T& d
  1. int main(void)
    . \" z/ L9 {/ ^! ]3 ]
  2. {( `) s9 s( b+ \5 q8 v2 Y

  3. 7 }+ Q& Y1 Z$ u
  4.     CPU_CACHE_Enable();
    3 h( ]4 x/ n, e5 Z5 t) ^3 z2 [! ^3 h
  5.     HAL_Init();$ ~' ~3 v, n  n/ }. J6 U
  6.     SystemClock_Config();
    # B1 A' v, f/ \( A! j
  7.     USART1_Init();
    - \0 t! _( x, K$ G  R
  8.     BSP_LCD_Init();, g$ |4 ~. ^) b9 R9 Y
  9.     BSP_LCD_LayerDefaultInit(0, LCD_FB_START_ADDRESS);' `) V+ \! l2 \5 p( }8 U, t9 @
  10.     BSP_LCD_SetTextColor(LCD_COLOR_RED);3 A5 t9 @- r* _) C2 x( x
  11.     BSP_LCD_Clear(LCD_COLOR_WHITE);
    ! x) M5 G* F* z
  12.     BSP_LCD_SetBackColor(LCD_COLOR_BLACK);
    9 D& f2 P" w# H3 \, q, v0 U( L& K

  13. " U8 \" D5 J! b) K: [( H% k; h% z
  14.     lv_init();+ ^+ ]) B0 K7 p$ q* L! [( U) E
  15.     tft_init();( ?: }2 @" S7 k3 b
  16.     touchpad_init();
    ! U0 [  E5 C( Q
  17.     //可以使用下面的注释
    - V9 G3 A7 V! F
  18.     //测试button* f8 x3 K. ]1 Q8 Z3 @4 t
  19.     //button_test();
    - ?; q- ~& y3 d  y8 j' F; D
  20.    
    8 c/ g8 n1 v9 f8 [* g
  21.     //测试demo2 b& C6 |" _" ?
  22.     //demo_create();$ }. W) g& F4 H4 E: o' p# t# ~7 {
  23.    
    ' G; q; T8 R# W
  24.     //测试theme, r2 B. m2 l4 W" H+ _3 g
  25.     lv_theme_t *th = lv_theme_alien_init(21, NULL);
    % l/ a; p% u. q4 C7 S0 O! w
  26.     lv_test_theme_1(th);5 W# }9 ?" {1 l- J
  27.     ! @4 R* A& d3 T, F4 l# O
  28.     while(1)( `9 q0 n$ o+ d5 k
  29.     {6 f* R5 w6 g' A8 J! c
  30.         HAL_Delay(10);
    ) G+ E0 v/ h2 c/ {" W! w4 y8 f" \
  31.         lv_task_handler();; r, P" d1 z9 |
  32. & w0 e9 I4 g& b8 \$ t
  33.     }
    ' r! G" o* a: G5 \
  34. }
复制代码
8 T& v+ m" O6 C# Y0 B* q

. x6 Y# M1 V) k9 b6 _
2 ~! C" B5 X8 v. V
( m; n7 }9 \# s  Q% A+ T
3、参考资料
3 R; L+ V% s' G$ k. |. q4 y
% q; ?/ `' v6 _1 j
7 H! j  c6 h$ ?" J: w7 n2 ]% [2 R
  参考资料要推荐的官网的详细的说明和各种控件的使用说明及代码实例,还有就是作者在github上提供了PC模拟器以及各种控件和入门的代码可以参考,最后要感谢作者无私的开源精神!
4 ~4 u: w1 w( ?8 U; D8 J: J2 d! T4 [8 K6 N# M0 @

( N4 p) o/ f# }  n* m7 `. D+ [官网:http://littlevgl.com/
* a& Y$ G3 C3 J! Ipc_simulator:http://github.com/littlevgl/pc_simulator
/ z9 s0 m0 ?9 ]2 X! X4 tlv_examples:http://github.com/littlevgl/lv_examples! O1 v+ j  S  Q  y1 i& ]2 ?

& |& S. d; i* p* ^) ~; B- C/ E* ?/ G
* [% H( M, A4 ]$ Y' W
测试代码:

4 q- x" `$ C$ @, ?4 X: N$ S; n
LittlevGL-V5-STM32F69-DISCO.rar (6.01 MB, 下载次数: 2319)

评分

参与人数 1 ST金币 +10 收起 理由
g921002 + 10 赞一个!

查看全部评分

1 收藏 20 评论49 发布时间:2018-1-13 18:42

举报

49个回答
creep 最优答案 回答时间:2018-12-2 17:05:00

0 D1 }0 d; ^1 m( P; w: { 开源GUI-littevGL应用教程 V0.1.pdf (3.14 MB, 下载次数: 499)
damiaa 回答时间:2018-5-17 08:40:08
6 t  G  ?) J8 E9 r0 Y5 ^
% U% D; _. {1 E4 q& S$ d3 c8 j1 a
MIT许可证之名源自麻省理工学院(Massachusetts Institute of Technology, MIT),又称「X条款」(X License)或「X11条款」(X11 License)5 K8 E9 O5 ]3 y8 d& O5 O1 x9 Z  n$ \
* r" D0 V# N; I
MIT内容与三条款BSD许可证(3-clause BSD license)内容颇为近似,但是赋予软体被授权人更大的权利与更少的限制。+ |8 w- Z7 e4 p4 n

% m1 M( B1 s! C  g+ N被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软体及软体的副本。0 S3 w$ G6 j# \) b1 y# W

+ s6 i& L, A, u) Z- C( k被授权人可根据程式的需要修改授权条款为适当的内容。( D& R# `  p5 G2 p7 s
3 h0 q! K6 S2 u  u! P( X; N
在软件和软件的所有副本中都必须包含版权声明和许可声明。* @/ t" B! J+ Q# G7 A2 I0 z

1 z9 _1 Q! N5 B+ T. E此授权条款并非属copyleft的自由软体授权条款,允许在自由/开放源码软体或非自由软体(proprietary software)所使用。
5 L8 ?( Q0 N! r  H) a
& N! L, G, a1 ~# ]; w0 }此亦为MIT与BSD(The BSD license, 3-clause BSD license)本质上不同处。- l/ y1 |) T! V4 ?) M5 w, l

& j% r8 W- J- C& fMIT条款可与其他授权条款并存。另外,MIT条款也是自由软体基金会(FSF)所认可的自由软体授权条款,与GPL相容。
creep 回答时间:2018-1-19 11:45:46
jinyi7016 发表于 2018-1-19 10:48
4 C. L  s" F5 u, ?6 L哪个开源协议?

  `$ u) @: P  r; {( G               
TLLED 回答时间:2018-5-17 08:33:21
学习下                  
Paderboy 回答时间:2018-1-13 22:17:08
666学习了。。。
Stm32McuLover 回答时间:2018-1-13 22:51:35
xyz.543 回答时间:2018-1-14 03:32:44
谢谢版主对此 GUI 的介绍。
. z) P! ^. I, [2 `
. O, @( e" t8 l6 _) O: O
Inc_brza 回答时间:2018-1-14 10:15:51
水果牛逼
leo121_3006061 回答时间:2018-1-14 13:14:36
这个非常牛
zero99 回答时间:2018-1-15 09:31:56
厉害了大佬
shanji 回答时间:2018-1-15 10:11:35
本帖最后由 shanji 于 2018-1-15 10:13 编辑
6 `: e6 o/ o" e# l$ ^% D
5 j) g, L: g; `) R$ ^风格漂亮。
MrJiu 回答时间:2018-1-15 10:13:30
我前天刚下载,确实不错。。。niubility!!!
shanji 回答时间:2018-1-15 10:24:23
我准备弄到F429上玩玩,等着我啊
creep 回答时间:2018-1-15 10:43:32
shanji 发表于 2018-1-15 10:24
4 b  ~  A2 \2 X' S/ z我准备弄到F429上玩玩,等着我啊

2 w" S/ R+ l% c8 k: ]' p好呀,一起耍!
风子 回答时间:2018-1-15 13:57:34
这个UI看起来很漂亮
我爱下载 回答时间:2018-1-19 08:19:35
学习一下,谢谢推荐
jinyi7016 回答时间:2018-1-19 10:48:21
哪个开源协议?
1234下一页
关于意法半导体
我们是谁
投资者关系
意法半导体可持续发展举措
创新和工艺
招聘信息
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
关注我们
st-img 微信公众号
st-img 手机版