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

干货笔记 | 使用 TouchGFX4.12.3+L8 格式减少图片资源以提高性能

[复制链接]
STMCU-管管 发布时间:2021-5-31 17:37
客户在使用 TouchGFX开发 GUI应用的时候, 需要很多的图片资源来呈现友好的人机交互功能, 因此外扩了一个 FLASH来存储图片资源. 在软件研发后期发现现有的 FLASH存储空间不够, 因此提出是否可以使用 TouchGFX来减少图片资源的存储空间且实现同样的 UI效果.
- u! I5 O1 P# }# @3 f
1.png

4 v7 ^( |' V+ t0 N6 ~# v6 M. m2 R01调研
7 L: _/ Y( E' v0 F7 [. `
. d0 h1 i) P1 ^$ t! [2 D+ {

1 {, V% f8 G1 P' \# 在硬件方面
% t. l. _: a6 G8 v0 R2 \
) V, Q1 r7 k! E* u* j- \

: d8 S7 ^6 g+ B2 R8 h+ q& mMCU 的图像处理加速器DMA2D 中的调色板的颜色格式 , 支持 L8 格式的图层之间的渲染:
: |/ @% @7 B6 j' I
2.png
" \0 @/ F" m8 l* K% u8 O( @6 X
# 从软件方面
. _' W4 s! R% c0 I9 }+ Z. W7 S3 o: |  K$ E, L. A5 k
0 _' O& g7 C! h: l
最新的 TouchGFX4.12.3 开始, 可以利用了 DMA2D 的调色板功能对图片的资源进行优化 .( [, f  P7 m, v% F7 f

+ l9 d  Q+ h7 |( ?6 B# 比如下图(宽 x 高=200x200)
- a: r9 d5 u2 _3 k6 A. c7 c5 p' u8 p
: {1 @, b  y6 }9 K: ^* _1 ]
* V. V& @8 h% L6 D. c, k# T" g
1. 这幅图是由 256 种颜色组成的.
: i9 t3 A7 P: b" B1 n# w2. 且每种颜色都针对图像进行了优化.) M9 T( @% w0 L2 Z
3. 256 种索引颜色中的每一种都是 24 位颜色.! ^# h% a0 X0 U2 B4 H& ?
3.png
为了在 LCD 上显示这张图, TouchGFX Designer 在生成资源文件时,生成的资源文件大小:9 A4 Z1 h1 g& u
+ G1 \( Q( f, _+ W  Q

0 f: ^$ w; U0 I2 Z# _; Y1. L8_ARGB8888 :) k& @% S( b; I4 K. J) U5 \/ z
200x200x1byte+256x4byte=41024bytes3 u7 p# b8 N% I1 q" |% @

2 s( u9 q! D, R  w% ]! u
& Y: K( z: L3 [9 A) i
=>200x200 个 8bit 的颜色索引+256 个 32bit, p( a9 O+ l% B/ S% m- w
4.png

. b+ U9 ~' V' j; e

% c3 m5 N& i2 ]2. ARGB8888 :+ M3 P- D; s5 w# c
200x200x4byte=160000bytes.
! f- r0 t( ^) [" E7 p* H=>200x200 个 32bit 的颜色
3 H8 c" i6 G, \! c/ J1 @7 d9 }
- o6 q) i  Q6 l/ U% ?2 j
2 g6 b0 u1 v1 C2 H8 Y/ _) a
在 TouchGFX 中使用 L8 Image ,只需要将 L8 的图片拖入到 TouchGFX Designer 中,然后在Image 页面中选择正确的格式 :
& n( h# B/ R5 \) |- T: O  z& N9 A  K
5.png

' m: \7 @" M2 H. V注意 :如果图片超过 256 颜色,转换工具就会报错,因此可以使用图片工具(如
. I: h5 Y! P7 z! ^, x5 z: o% f( J5 H+ A5 r
+ ?, X7 }% C/ a% e0 D
paint.net/imagemagick)将颜色数减少至少于 256 色 :- j/ {) g0 F  e! e, M
2 k, \: D  A, t- O' w4 Q7 N; ~
  F7 b/ T& ]% `( E* x
Paint.net:  h6 _. E/ z+ l) X$ i8 j
6.png
Image Magick (www.imagemagick.org):$ c# z1 M% j+ `  f( X, [  ?7 s
7.png
4 X+ ~+ m+ }  G, M: b: |
02结论
9 p. Z: y4 u, B( ~7 a1 |! t0 o/ N4 S- ^2 C5 a1 D8 h/ _- c

5 d% }# v3 s( J3 {  C图像使用 L8 格式时占用的 flash 大小显著低于标准 24 位格式(RGB888)的原始图像。下表列出了这三种不同调色板格式的具体图像的 flash 使用情况(图片分辨率 200x200):& M: I5 h$ V& X* C( [; v4 u. n( s
8.png
由于 TouchGFX 对于 L8 格式还可以支持 L8_ARGB8888,因此可以与 ARGB8888 等格式的图像进行混合渲染,因此特别适合作为图标等颜色数少但是素材丰富的应用.6 E, e( W* j8 O+ [1 M

5 M$ o# }" U& t/ a: q1 h6 f
% A% K; q1 g; o& b/ f5 M% a
综上可以看出,采用 TouchGFX4.12.3+L8 格式 :
/ q) ~8 B* R3 S6 I6 `  i; |6 l8 G& }
; y8 U6 X5 {  o- l. G
1. 相比较 ARGB8888 像素格式, L8 大幅降低了资源文件的大小, 从而降低对存储芯片的需求 .
+ x. I, V9 u4 Z2. 同时由于图片像素信息大幅减少,读写一张图片的速度也大大提高, 也提高了系统实时性能.
/ X7 r: o- n* Z4 h0 \
" F( [- r$ d. b( d4 E& ^* v03处理; v5 q+ M* p( k0 k/ M/ K+ R

, S: ?; g0 v% M& }* i5 d8 X因此我们建议客户选择使用 TouchGFX4.12.3+L8 的功能,通过重新优化部分资源文件,减少图片资源的存储空间来实现客户的 UI 效果,并且改善了系统的实时性能.
- j" z" N4 `+ S' a5 [- S3 u" I1 s$ P
1 收藏 1 评论1 发布时间:2021-5-31 17:37

举报

1个回答
BEEE 回答时间:2021-9-14 21:08:25
学习6 Y8 w0 R; T: P. T- Y

所属标签

相似分享

官网相关资源

关于
我们是谁
投资者关系
意法半导体可持续发展举措
创新与技术
意法半导体官网
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
官方最新发布
STM32Cube扩展软件包
意法半导体边缘AI套件
ST - 理想汽车豪华SUV案例
ST意法半导体智能家居案例
STM32 ARM Cortex 32位微控制器
关注我们
st-img 微信公众号
st-img 手机版