客户在使用 TouchGFX开发 GUI应用的时候, 需要很多的图片资源来呈现友好的人机交互功能, 因此外扩了一个 FLASH来存储图片资源. 在软件研发后期发现现有的 FLASH存储空间不够, 因此提出是否可以使用 TouchGFX来减少图片资源的存储空间且实现同样的 UI效果.

01调研


1 C& [! B7 B8 M3 q. i$ ^; R0 h- b" L! L# 在硬件方面
- H  k# i9 N7 o8 j! O3 F3 ^% nMCU 的图像处理加速器DMA2D 中的调色板的颜色格式 , 支持 L8 格式的图层之间的渲染：
; B% ~) M8 L. h0 g

2 D0 m2 i, m* _, F9 c4 a  r
8 N/ j; O0 N, j, _, j! _4 y# 从软件方面
最新的 TouchGFX4.12.3 开始, 可以利用了 DMA2D 的调色板功能对图片的资源进行优化 .
8 m7 z" h, k; X  d# R# R/ ^1 g( @
) `2 I" ^% l$ V& p, m; Z# 比如下图(宽 x 高=200x200)
. D$ v6 G5 u% z( F
* C8 ~; c% y# d: a
1. 这幅图是由 256 种颜色组成的.
; a7 ]9 S* u7 Z5 T  O/ t( _9 ~2. 且每种颜色都针对图像进行了优化.
3. 256 种索引颜色中的每一种都是 24 位颜色.

/ j7 v9 G) O$ \: @' [9 u- d4 v为了在 LCD 上显示这张图, TouchGFX Designer 在生成资源文件时,生成的资源文件大小:
& m+ q' }9 `5 V  l
& ]. t4 F* G/ T/ ?3 ^" y/ o
1. L8_ARGB8888 :
200x200x1byte+256x4byte=41024bytes
=>200x200 个 8bit 的颜色索引+256 个 32bit

2. ARGB8888 :
( `6 B6 O# Z8 D: C( J1 M5 @; D! K200x200x4byte=160000bytes.
9 w+ h6 t4 Y; X% K# i1 Y/ V=>200x200 个 32bit 的颜色
# \9 d$ ~0 n2 L3 j3 s, T
, \4 j( P4 u1 k- F5 O
在 TouchGFX 中使用 L8 Image ，只需要将 L8 的图片拖入到 TouchGFX Designer 中，然后在Image 页面中选择正确的格式 :
; T& S( a- F7 t8 V' ~! a3 p7 b

+ m& B$ v2 K6 z* j; v8 U$ ?7 u- Z
注意: 如果图片超过 256 颜色，转换工具就会报错，因此可以使用图片工具(如
1 `& w9 \2 }2 x1 I5 c+ {
. }3 D+ Y% W$ h4 }) R! D4 R8 ]
paint.net/imagemagick)将颜色数减少至少于 256 色 :
; {9 h( t" \6 m* x

Paint.net:

Image Magick (www.imagemagick.org):

% ]& i1 `, x( J! _; H. l
& c% F3 G" h+ ~7 `) T( \* ?02结论
# t' n$ P. Z* L* r/ ]/ H4 h/ W

$ \5 `4 x. H# ^2 i& D6 b* O( T* Z$ Q4 m图像使用 L8 格式时占用的 flash 大小显著低于标准 24 位格式(RGB888)的原始图像。下表列出了这三种不同调色板格式的具体图像的 flash 使用情况（图片分辨率 200x200）：

% `4 [9 P  \* \由于 TouchGFX 对于 L8 格式还可以支持 L8_ARGB8888，因此可以与 ARGB8888 等格式的图像进行混合渲染，因此特别适合作为图标等颜色数少但是素材丰富的应用.

: b" R; r+ x. w* m1 ~综上可以看出，采用 TouchGFX4.12.3+L8 格式 :


* }1 p# b3 H" Z0 u+ C1. 相比较 ARGB8888 像素格式, L8 大幅降低了资源文件的大小, 从而降低对存储芯片的需求 .
2. 同时由于图片像素信息大幅减少，读写一张图片的速度也大大提高, 也提高了系统实时性能.
! @+ D: r/ E+ z  r

) ?0 B$ I2 b9 {4 [; @03处理

$ M  z( X( \/ s4 f# k# s因此我们建议客户选择使用 TouchGFX4.12.3+L8 的功能，通过重新优化部分资源文件，减少图片资源的存储空间来实现客户的 UI 效果，并且改善了系统的实时性能.
4 H* j8 \5 X" j+ n  A( U

打卡，学习！