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

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

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

8 u! l7 _: E. e! Z( ~, F. S$ v4 L01调研, |- T6 Y1 S; ~8 X; M
! Z" x/ z4 ~% g( f% n
! ?( E0 p, q8 ?! B* {3 t7 c
# 在硬件方面5 q2 Z7 U2 e- W
9 f: q0 j" s+ L* _5 {5 U

8 K: B* d; o# q7 h4 V7 iMCU 的图像处理加速器DMA2D 中的调色板的颜色格式 , 支持 L8 格式的图层之间的渲染:: j4 f2 V. A8 |
2.png
+ b' c$ |' Z+ N) W' ?
# 从软件方面6 _' m, P% H( l* w

5 w; b+ a) s/ X7 x% O* U( r& v
7 @- w+ u4 [5 y8 m3 s
最新的 TouchGFX4.12.3 开始, 可以利用了 DMA2D 的调色板功能对图片的资源进行优化 .4 h1 D/ p, }. n; l- C7 `' Z7 c
) x$ A) J2 K" L* w% s9 V
# 比如下图(宽 x 高=200x200) 0 p( q! c4 N; Q5 `. F- s; s3 G) W6 q
% z8 {$ J4 _/ c' B2 P2 I$ _5 w5 B; i

% \8 `0 k5 J6 _3 d) g1. 这幅图是由 256 种颜色组成的.
$ X, h! o0 X! Z7 X2. 且每种颜色都针对图像进行了优化.
& z+ g- W" p4 ~1 P1 x! S5 k, I5 v) @3. 256 种索引颜色中的每一种都是 24 位颜色.+ b) p* a. j/ e7 I2 E
3.png
为了在 LCD 上显示这张图, TouchGFX Designer 在生成资源文件时,生成的资源文件大小:
8 u9 P2 ~2 C' [, r: g
, r  |; F* \6 d$ Q$ J/ a6 V
. }6 A8 q" o9 ^  c
1. L8_ARGB8888 :5 t0 e7 E' I9 {/ L8 P# Y8 v
200x200x1byte+256x4byte=41024bytes6 r0 p' U8 \1 l1 N4 {' q6 }
/ k- F7 W; ~, a- Q$ O. F$ P0 t. n5 z

/ y# l0 v" }9 w* B=>200x200 个 8bit 的颜色索引+256 个 32bit3 q; X. ?2 W' x) M( w
4.png

# j  ]/ p/ z  j: L0 N

) s: X; `. z; G2. ARGB8888 :
9 H6 `# P4 h$ ?9 s4 T! T! n) O2 D  |3 K200x200x4byte=160000bytes.
7 o: h8 p% q3 i=>200x200 个 32bit 的颜色/ m6 b- f$ t" L) a3 z
3 P! U, J* u. w# _0 M9 Z: H+ J
# L' K8 E* k8 k
在 TouchGFX 中使用 L8 Image ,只需要将 L8 的图片拖入到 TouchGFX Designer 中,然后在Image 页面中选择正确的格式 :
& \6 T: y) B4 b, X6 K+ o
5.png

* D1 l# \3 l4 W3 {  x注意 :如果图片超过 256 颜色,转换工具就会报错,因此可以使用图片工具(如
; Y5 ^+ ?' U: a, b/ N1 P' }# H( l6 G: z4 n  s9 F; t  w

7 l4 Y: h1 i% D9 y8 H, dpaint.net/imagemagick)将颜色数减少至少于 256 色 :
4 T4 X+ r; J1 u- u# C' T
( }: M" C0 r; }1 S
$ n! t9 U( ?2 \2 _4 m3 |9 U3 Y
Paint.net:+ f6 s3 y3 r7 t& k; }3 c! e
6.png
Image Magick (www.imagemagick.org):
$ ^8 K. T& K$ M2 U) P4 i
7.png
0 y# K5 k& y+ O8 c: M7 m: \
02结论
/ N4 n# h0 f) g6 {1 Y% |, J
6 G6 v. o8 r8 v- L- E! N
1 ^  y. |' g) {( U0 f; O
图像使用 L8 格式时占用的 flash 大小显著低于标准 24 位格式(RGB888)的原始图像。下表列出了这三种不同调色板格式的具体图像的 flash 使用情况(图片分辨率 200x200):
  l" ?+ {% J" }4 e3 u2 H
8.png
由于 TouchGFX 对于 L8 格式还可以支持 L8_ARGB8888,因此可以与 ARGB8888 等格式的图像进行混合渲染,因此特别适合作为图标等颜色数少但是素材丰富的应用.
5 x7 {. T; a+ _* Z; s) ]% ]2 j, `$ r
; ~* I1 e3 D3 Q! z
综上可以看出,采用 TouchGFX4.12.3+L8 格式 :* u+ J- V" K3 r7 K) a8 x, |

0 X, N# D: A- V7 ^! ]7 G
0 ~3 B, i8 b  z
1. 相比较 ARGB8888 像素格式, L8 大幅降低了资源文件的大小, 从而降低对存储芯片的需求 .
1 ^3 A/ y6 o1 p" @7 |2. 同时由于图片像素信息大幅减少,读写一张图片的速度也大大提高, 也提高了系统实时性能." G. |, {1 ^+ j8 [
/ {! r( a3 t: M4 L, g
03处理
6 m: p9 h2 @& `/ w) W0 p' J: a& J& M! m$ K4 e8 M  T2 H, ?, b5 X
因此我们建议客户选择使用 TouchGFX4.12.3+L8 的功能,通过重新优化部分资源文件,减少图片资源的存储空间来实现客户的 UI 效果,并且改善了系统的实时性能.1 m, z* `/ t9 [! I
9 d* n, c# P) H  h
赞 1 收藏 1 评论1 发布时间:2021-5-31 17:37

举报

1个回答
BEEE 回答时间:2021-9-14 21:08:25
学习8 Z7 s: T! p6 U. _

所属标签

相似技术帖

官网相关资源

关于
我们是谁
投资者关系
意法半导体可持续发展举措
创新与技术
意法半导体官网
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
官方最新发布
人形机器人运动控制、感知与智能配电
半导体创新技术与应用方向
EE架构与软件定义汽车
12V/48V 汽车智能配电(SPD)
区域控制单元(ZCU)与分区架构
关注我们
st-img 微信公众号
st-img 手机版