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

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

[复制链接]
STMCU-管管 发布时间:2021-5-31 17:37
客户在使用 TouchGFX开发 GUI应用的时候, 需要很多的图片资源来呈现友好的人机交互功能, 因此外扩了一个 FLASH来存储图片资源. 在软件研发后期发现现有的 FLASH存储空间不够, 因此提出是否可以使用 TouchGFX来减少图片资源的存储空间且实现同样的 UI效果.
! @* |( @5 b2 l7 m, i" J
1.png
3 a: K: B1 D6 H6 n8 A
01调研
5 g( G& ]0 P* U1 B5 p5 q, Y, {0 P6 ]* t" j0 [6 f) _

, C  I1 x- s5 a. \# 在硬件方面
" A; |5 _" Y4 A
1 U- z* Q: n9 O$ y/ a3 {8 S9 u" P& B
7 K$ v8 f" g+ O
MCU 的图像处理加速器DMA2D 中的调色板的颜色格式 , 支持 L8 格式的图层之间的渲染:' v: }/ r, Q% y) }1 [4 T5 q( U% r
2.png
. n( K: {! d- ]
# 从软件方面
2 P/ r  l9 J& `6 T6 {. A6 n# `% B7 |0 v) _" s
' l0 e9 P0 h3 o8 c2 e
最新的 TouchGFX4.12.3 开始, 可以利用了 DMA2D 的调色板功能对图片的资源进行优化 .
9 n  y- \3 r5 A* ]/ y/ |; S  `8 D- k" U$ v
# 比如下图(宽 x 高=200x200)
+ g( Q* d8 V) N
9 k( v* N0 I' F" T# V

7 r6 x; Q7 d+ i! k) h7 B1. 这幅图是由 256 种颜色组成的.9 a% ?; ]# x! I: b( n; }( ^
2. 且每种颜色都针对图像进行了优化.
7 `) O0 C) @3 y1 j# [) _3. 256 种索引颜色中的每一种都是 24 位颜色.
, z) }& S/ B4 v$ y+ \
3.png
为了在 LCD 上显示这张图, TouchGFX Designer 在生成资源文件时,生成的资源文件大小:
5 v% v" _: C" |- z. r1 z
- a0 d+ ~  H$ z* u9 p$ V9 v

8 e  y+ s  G5 n0 A0 z( z1. L8_ARGB8888 :
/ Y- [: W2 P5 S( o2 U200x200x1byte+256x4byte=41024bytes
8 I& V6 D  Z8 d7 o3 s: ]5 a1 `( F0 z" P" r2 x

: Z% n" f- Y8 e8 R, S; }=>200x200 个 8bit 的颜色索引+256 个 32bit0 y$ ^/ P% ?$ u& c' \/ h
4.png

3 @' H; h* G. m. t) r) k+ c
4 ~6 x  ?2 {' R) g+ _6 o
2. ARGB8888 :7 @% Y/ `* {3 F0 G
200x200x4byte=160000bytes.
. E  C) S% Q  ?: r* c6 w3 l- Y=>200x200 个 32bit 的颜色  ?$ S& b4 K0 Z: G6 S! C- T# D. Y

$ T4 x5 j# {9 i' X2 E8 ]

4 p# \2 O# s& E. T2 v" h7 [: c在 TouchGFX 中使用 L8 Image ,只需要将 L8 的图片拖入到 TouchGFX Designer 中,然后在Image 页面中选择正确的格式 :
% l) h7 M3 G0 D4 V6 J
5.png
& D2 x% g9 R; g1 o1 a$ ^7 p+ ~
注意 :如果图片超过 256 颜色,转换工具就会报错,因此可以使用图片工具(如
7 A4 J1 q' A* A" M, \$ V
" {5 a1 t- m7 }2 {

" `. P  c! C$ F' Q  dpaint.net/imagemagick)将颜色数减少至少于 256 色 :* O1 l' h" l* e  o+ I
; n: x7 s# ^1 P* J0 ~9 h; U

4 p& k: k% r$ }: X) l# H) o+ P2 a Paint.net:& k5 N' P. a2 J& v; }
6.png
Image Magick (www.imagemagick.org):% ~7 U7 ]  a/ Z: D0 X3 ]. O4 e' m# h9 D
7.png
: y" j1 G- H- S) R1 B" ?3 d
02结论: a# ~6 Y/ A7 }7 G* ]& ]) `
( Z6 Y( n3 @5 x4 _. d: N
5 s2 {# J# {" j8 S
图像使用 L8 格式时占用的 flash 大小显著低于标准 24 位格式(RGB888)的原始图像。下表列出了这三种不同调色板格式的具体图像的 flash 使用情况(图片分辨率 200x200):
7 G* Z* j3 r, x, O
8.png
由于 TouchGFX 对于 L8 格式还可以支持 L8_ARGB8888,因此可以与 ARGB8888 等格式的图像进行混合渲染,因此特别适合作为图标等颜色数少但是素材丰富的应用.% w/ D- j! p6 D0 c3 M. c

9 P" J9 T! I( |5 d4 t

$ r5 d/ l2 F; C" H) |综上可以看出,采用 TouchGFX4.12.3+L8 格式 :
7 l+ ]7 t# `# V1 u* y* `& x( L  d( N( x

  K, c* Z6 A9 A9 m/ z, {1. 相比较 ARGB8888 像素格式, L8 大幅降低了资源文件的大小, 从而降低对存储芯片的需求 .7 n! W+ c! _5 _8 R' F/ }! V/ x
2. 同时由于图片像素信息大幅减少,读写一张图片的速度也大大提高, 也提高了系统实时性能.; T1 }- S2 {1 ]9 p) T) A
. [' ]- m: M: z9 h7 _( K
03处理! g) [- w. G# g* R
2 V( t. ^1 }7 f3 e- Y# W. R
因此我们建议客户选择使用 TouchGFX4.12.3+L8 的功能,通过重新优化部分资源文件,减少图片资源的存储空间来实现客户的 UI 效果,并且改善了系统的实时性能.
& R$ X! ^6 y6 P, V. t6 H. s4 m* ]5 [0 C- `% x# ~
1 收藏 1 评论1 发布时间:2021-5-31 17:37

举报

1个回答
BEEE 回答时间:2021-9-14 21:08:25
学习& ?) w. ?/ M! c; B. o" `; l2 e/ U

所属标签

相似分享

官网相关资源

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