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

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

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

- l  {% ^) o  S0 }* l01调研
9 O4 m" D9 G( x
8 G) _4 v! T) f/ r, P- ~0 V# N; l
7 P8 ~0 Y& k# t  G
# 在硬件方面( ~3 t  p) E5 k" }( [9 z

# Z! |( s3 W; k' d: P  _: V

4 O! n/ r0 `& f, K1 i2 t' L' ~" q! xMCU 的图像处理加速器DMA2D 中的调色板的颜色格式 , 支持 L8 格式的图层之间的渲染:
# S1 c3 e/ R8 a, D& j
2.png
! d% x: M; ]7 T; t  u
# 从软件方面: T4 j$ Y5 T. n" u
3 ]" q5 F0 r3 x! X7 a3 g
4 t( j$ P( ]. U. G; o
最新的 TouchGFX4.12.3 开始, 可以利用了 DMA2D 的调色板功能对图片的资源进行优化 .& d. q. w" l& `9 ~, n& O% }* {
# x+ T8 A& ?% W, v0 E- e& ^4 ?1 \& b
# 比如下图(宽 x 高=200x200) / l4 G7 l& ]0 V" ^" P$ H
0 D# Z  \. v- ]+ }5 ?; L. s' P% U

5 }/ [$ E% Y) e9 {# h1. 这幅图是由 256 种颜色组成的.1 r( g1 q' R1 \
2. 且每种颜色都针对图像进行了优化.
% B- {- m8 ?) L! r) K, G/ j* k7 ^  n3. 256 种索引颜色中的每一种都是 24 位颜色.
) _/ k+ S1 L; c5 n+ \
3.png
为了在 LCD 上显示这张图, TouchGFX Designer 在生成资源文件时,生成的资源文件大小:. o4 s) W0 C* B( V) c
0 z0 n4 |  D3 q1 a
7 g/ L3 P+ I/ L: r$ x# D
1. L8_ARGB8888 :
( F% B. H) s. P. G% l/ j1 J200x200x1byte+256x4byte=41024bytes% G6 E* @' C- ~8 N

3 @. W. O5 U2 i% Z$ C* N- o

% M4 C2 e& O/ N  y! J5 m=>200x200 个 8bit 的颜色索引+256 个 32bit, o2 [4 b' g' f2 V
4.png

4 y2 O- R2 H' x* Y  t7 B, A9 }

; P# L5 i# z% w# Z- c  ^2. ARGB8888 :
7 Q6 _0 ?6 |" i1 k" ?% B200x200x4byte=160000bytes.3 {+ u1 K, f, T, w) E  u
=>200x200 个 32bit 的颜色
( {% K! @; ]# g9 p( C7 u2 z: }7 A4 ]7 Y
, r$ i  p8 |, }. J$ Z
在 TouchGFX 中使用 L8 Image ,只需要将 L8 的图片拖入到 TouchGFX Designer 中,然后在Image 页面中选择正确的格式 :
+ g5 ?$ A# w% H3 l: c
5.png
( Z) _5 ?5 h- [
注意 :如果图片超过 256 颜色,转换工具就会报错,因此可以使用图片工具(如
! ]  y. N  m2 w7 u4 l+ [1 M5 }/ a& q$ W* Y2 H" d1 _
+ w9 a; m: g) J3 P
paint.net/imagemagick)将颜色数减少至少于 256 色 :
+ a1 Q# f1 M' E8 x6 g7 \
1 @* Q5 L3 L( o

+ P: F% K# h9 ~5 D# T' @7 H Paint.net:) u. y1 D. @0 ]( c4 o, P
6.png
Image Magick (www.imagemagick.org):4 t% ]* J+ o9 v0 V" h1 Z1 O
7.png
5 ]+ ^- Y# B( E- ~
02结论
" ]( E! [3 Y( F. g7 z
. y' u7 x( O: E, l4 H
; K. L+ T6 m: P* m! I
图像使用 L8 格式时占用的 flash 大小显著低于标准 24 位格式(RGB888)的原始图像。下表列出了这三种不同调色板格式的具体图像的 flash 使用情况(图片分辨率 200x200):
3 k2 V# t  Z1 ?
8.png
由于 TouchGFX 对于 L8 格式还可以支持 L8_ARGB8888,因此可以与 ARGB8888 等格式的图像进行混合渲染,因此特别适合作为图标等颜色数少但是素材丰富的应用.5 z# d; b8 c. X  j# k

7 u% p3 c0 z4 y& P2 n' r0 m" S1 u
/ T% _7 r7 g/ z. M8 S. n: }* o7 q
综上可以看出,采用 TouchGFX4.12.3+L8 格式 :+ l+ w" p1 I5 p* m
$ g; p) B. S( _3 y: A( P2 ?9 G

9 l# ]$ R! I2 r4 F1. 相比较 ARGB8888 像素格式, L8 大幅降低了资源文件的大小, 从而降低对存储芯片的需求 .4 V5 \0 t6 y* f0 d0 R0 N$ E* C* F! x
2. 同时由于图片像素信息大幅减少,读写一张图片的速度也大大提高, 也提高了系统实时性能.
2 d, a" B0 B; g5 c0 j5 w( C( K/ }4 t- O; H
03处理
7 _' D) ~" Z* {2 ?' x! M. L& j
7 P" V6 h  ^# P$ \0 v因此我们建议客户选择使用 TouchGFX4.12.3+L8 的功能,通过重新优化部分资源文件,减少图片资源的存储空间来实现客户的 UI 效果,并且改善了系统的实时性能.: g' F8 P) p) q8 H" T* s
, v% A. n' ^. I! ]# Y/ y7 H
1 收藏 1 评论1 发布时间:2021-5-31 17:37

举报

1个回答
BEEE 回答时间:2021-9-14 21:08:25
学习6 a# a! P( K& {3 e

所属标签

相似技术帖

官网相关资源

关于
我们是谁
投资者关系
意法半导体可持续发展举措
创新与技术
意法半导体官网
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
官方最新发布
STM32N6 AI生态系统
STM32MCU,MPU高性能GUI
ST ACEPACK电源模块
意法半导体生物传感器
STM32Cube扩展软件包
关注我们
st-img 微信公众号
st-img 手机版