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

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

[复制链接]
STMCU-管管 发布时间:2021-6-23 15:14
客户在使用 TouchGFX开发 GUI应用的时候, 需要很多的图片资源来呈现友好的人机交互功能, 因此外扩了一个 FLASH来存储图片资源. 在软件研发后期发现现有的 FLASH存储空间不够, 因此提出是否可以使用 TouchGFX来减少图片资源的存储空间且实现同样的 UI效果.
, I2 [. |5 V) V! S+ W+ l
21.png
9 C5 X; u! K- b. q% k
01调研
( |/ I7 f7 Z2 P, k$ D7 A$ ~# ?' S& J( I) p# o4 c7 K
$ t8 k! Q7 S6 `9 K: m) [
# 在硬件方面
1 z, j" b  s0 }" iMCU 的图像处理加速器DMA2D 中的调色板的颜色格式 , 支持 L8 格式的图层之间的渲染:
+ e8 i$ w: Y' {6 T' C4 v$ C
22.png
$ F8 z) q, v1 K. \+ @  E% ?- r2 j
4 P- ^- q: K7 d/ }/ W/ `+ D
# 从软件方面
6 x3 N9 C+ d3 k' b最新的 TouchGFX4.12.3 开始, 可以利用了 DMA2D 的调色板功能对图片的资源进行优化 .2 B) o! R4 \1 b; m; l7 N; X3 E

& Y, J# T! M% S6 X$ x( N# 比如下图(宽 x 高=200x200) " {, [( e5 b. N+ B: P

3 L6 `( P) I; Y. H6 s# ^6 X  G3 K7 T

2 D3 z  d+ m  u9 I5 H7 G1. 这幅图是由 256 种颜色组成的.' ?  R; {( O  m. P
2. 且每种颜色都针对图像进行了优化.
  c) ?; q, |# r5 R& k3. 256 种索引颜色中的每一种都是 24 位颜色.1 }; l/ T% k, L, l0 K5 f! U$ i' z+ Z' j
23.png

* Y6 }* F" h- M+ ]' H& M' x为了在 LCD 上显示这张图, TouchGFX Designer 在生成资源文件时,生成的资源文件大小:. u8 p% n: s: T% w( A

  h* @8 T9 M# U  m5 W5 T3 |% H/ E( S0 Z
) Q! x5 _! w. X4 x8 |  a4 |# b
1. L8_ARGB8888 :
5 V# {3 P9 S% V8 r6 H& @200x200x1byte+256x4byte=41024bytes: p8 }5 E) U  @; s2 n7 Z- o: O
=>200x200 个 8bit 的颜色索引+256 个 32bit
2 d$ k, x5 I4 D" I
24.png
# {+ a" {5 I: r/ `  A( O( p
2. ARGB8888 :, f' Y) i$ Z( z  }2 m9 D; p
200x200x4byte=160000bytes.
5 V6 H/ o/ V9 X' n! e5 m( m4 }! p=>200x200 个 32bit 的颜色# H% v5 m2 f2 k* t# n
; y) \) p9 s& {8 z

2 L) e) d6 |; G在 TouchGFX 中使用 L8 Image ,只需要将 L8 的图片拖入到 TouchGFX Designer 中,然后在Image 页面中选择正确的格式 :
& J8 n- @, V8 I; [
25.png

. u' N- W% A/ W6 G4 C8 q. w/ x$ a8 c9 M! K3 B8 T% p
注意: 如果图片超过 256 颜色,转换工具就会报错,因此可以使用图片工具(如
  L! T' j- ]; n4 b' |, A+ v; m, X& B) v+ B( v8 u, Y

- b) ?+ j) F# N$ j& epaint.net/imagemagick)将颜色数减少至少于 256 色 :
! s( o9 {5 k, @$ j. d7 N$ j+ K: L# `2 m( Q" }1 h- O
, P/ c) ~; C! @$ A8 A9 W
Paint.net:
; e! B# Q. Y& n& X- y
26.png

: g4 S' c- d$ u# @( R* @3 j" FImage Magick (www.imagemagick.org):
! P( S5 x2 Q8 D% Q$ F: }
27.png
; ^6 d6 v5 ?" u( U2 z: S3 R; e8 d
, c$ L3 f$ G- G' A/ U+ ?
02结论
1 y" u, ?1 u  @7 a# i8 _, k, n* k5 p5 _
# O; a* R2 }7 u. p$ c" H" J
图像使用 L8 格式时占用的 flash 大小显著低于标准 24 位格式(RGB888)的原始图像。下表列出了这三种不同调色板格式的具体图像的 flash 使用情况(图片分辨率 200x200):
) V9 V; p  n) L
28.png
- [7 J5 F; v; K0 @
由于 TouchGFX 对于 L8 格式还可以支持 L8_ARGB8888,因此可以与 ARGB8888 等格式的图像进行混合渲染,因此特别适合作为图标等颜色数少但是素材丰富的应用.: R' ?7 A( A5 D# x+ ]6 v. i8 i

* g8 p6 y% p7 K1 Q8 Z& O% [3 M4 e综上可以看出,采用 TouchGFX4.12.3+L8 格式 :
$ H6 Y7 w# e" K$ L! [
, ^+ Y: Y1 `6 w- H2 {7 o8 N
# O- e9 u; q2 N3 d1 t8 ~) }  x  G
1. 相比较 ARGB8888 像素格式, L8 大幅降低了资源文件的大小, 从而降低对存储芯片的需求 .
) x" {2 w, S, J2. 同时由于图片像素信息大幅减少,读写一张图片的速度也大大提高, 也提高了系统实时性能.& |- ]0 ^! F/ R! X
: O- U$ n* g8 I7 h; c
# M& u6 p& O  H1 d; d/ e* C
03处理
/ V2 Q3 x& B4 O* K1 f+ e* B) r' }2 W" m. U; G8 C2 u
因此我们建议客户选择使用 TouchGFX4.12.3+L8 的功能,通过重新优化部分资源文件,减少图片资源的存储空间来实现客户的 UI 效果,并且改善了系统的实时性能.8 I5 F0 c6 g, A* N
收藏 1 评论1 发布时间:2021-6-23 15:14

举报

1个回答
xudongqiang 回答时间:2021-9-7 15:26:07
打卡,学习!
) t5 H  @( |; Z0 {

所属标签

相似分享

官网相关资源

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