从TouchGFX 4.12.3开始
TouchGFX 4.12现在支持L8标准图像格式格式。
与ARGB8888等相比,L8格式的图像占用较少的闪存,并且绘制速度更快。
L8格式的图像由一个调色板和一个像素阵列组成:调色板最多列出256种不同的颜色,分别以16位格式RGB565、24位格式RGB888或32位格式ARGB8888指定。像素阵列由每个像素一个字节组成。该字节是调色板(颜色列表)的索引,指出像素的颜色。TouchGFX框架通过依次读取像素,查找调色板中的颜色并将其写入帧缓冲区来绘制L8图像。这会自动发生,并由STM32 Chrom ART硬件加速器加速。
8位至今 像素表示一张L8图像可以使用256种不同的颜色。另一个L8图像可以使用256种其他颜色,因为两个图像都有各自的调色板。
具有4 x 4像素的L8图像和具有4种颜色的调色板
像素每个为一个字节(8位)。因此,像素的大小是宽度x高度字节。调色板颜色可以是16位,24位或32位颜色。因此,每个颜色定义将占用2、3或4个字节。
如果帧缓冲区是16位(RGB565格式),则纯色图像应存储在L8_RGB565中。如果帧缓冲区是24位(RGB888),则L8图像必须以L8_RGB888格式存储。如果图像是透明的,则必须使用32位格式(ARGB8888):
格式 | 帧缓冲格式 | 支持透明像素 |
L8_RGB565 | 16位RGB565 | 没有 |
L8_RGB888 | 24位RGB888 | 没有 |
L8_ARGB8888 | 都 | 是 |
在此处阅读有关调色板图像格式的更多信息:https : //en.wikipedia.org/wiki/Indexed_color。
示例L8图像
这是典型的徽标图像。该图像仅使用16种不同的颜色:
具有16种24位颜色的200 x 200像素L8图像。
该图像的闪光尺寸明显低于标准24位格式(RGB888)的原始图像。下表列出了这三种不同调色板格式的具体图像的闪存使用情况:
格式 | 像素/字节大小 | 调色板的大小/字节 | 总大小/字节 | 减少百分比 |
RGB888 | 120,000 | 0 | 120,000 | -- |
L8_RGB565 | 40,000 | 32 | 40,032 | 66.6% |
L8_RGB888 | 40,000 | 48 | 40,048 | 66.6% |
L8_ARGB8888 | 40,000 | 64 | 40,064 | 66.6% |
我们看到尺寸减小非常大,并且在中等尺寸的图像上调色板的尺寸微不足道。
在TouchGFX中使用L8图像
在TouchGFX中使用L8图像格式非常容易。唯一要做的是配置图像转换器以将图像从PNG转换为L8格式。在这里,我们将经历整个过程:
在TouchGFX Designer中启动一个新项目。将您的图像复制到新项目中的assets / images文件夹中:
现在转到TouchGFX Designer,然后单击顶部栏中的“图像”选项卡并选择图像:
在窗口的右侧,选择图像格式L8_RGB888(此示例运行24位颜色)。
现在可以在画布上插入一个图像小部件(在这里我们在背景中插入了一个Box):
用户界面代码无需更改。由于我们在“图像”选项卡中所做的配置,图像转换器会转换PNG文件并生成L8格式的图像。
透明图像
如上所述,也可以将L8格式用于具有透明性的图像。
170 x 60像素的按钮图像(32位格式)ARGB8888
上图使用108种颜色(许多蓝色阴影)。该图像可以使用L8_ARGB8888格式。大小将大大降低:
格式 | 像素/字节大小 | 调色板的大小/字节 | 总大小/字节 | 减少百分比 |
ARGB888 | 40,800 | 0 | 40,800 | -- |
L8_ARGB8888 | 10,200 | 432 | 10,632 | 73.9% |
将图像转换为256色
许多图像使用超过256种颜色。这对于照片般逼真的图像或具有渐变的图像很常见。由于这些图像包含多种颜色,因此无法在TouchGFX Designer中直接将其转换为L8图像格式。
但是,在许多情况下,可以使用图像处理工具减少特定图像中使用的颜色数量,而不会降低大部分图像质量。
Paint.NET
最简单的方法是使用Paint.Net。打开原始图像,然后使用另存为将图像保存到另一个文件中。在“保存配置”对话框中,选择8位作为像素深度:
现在,在您的项目中使用新的PNG。切记在TouchGFX设计器的“图像”选项卡中选择L8_ARGB8888格式。阴影处理不佳,但是在许多情况下带有透明边缘的图标看起来不错。可以调整“透明度阈值”值,并且在某些情况下可以改善结果。
图像魔术
另一个合适的工具(有时会产生更好的L8图像)是Image Magick(可从www.imagemagick.org下载)。该工具可以从命令行转换图像。这使其适合在脚本中使用。要将clock_bg.png转换为最多使用256种颜色的图像,请使用以下命令:
为了比较,下面显示了三个图像(原始图像,使用Paint.Net的L8,使用Image Magick的L8):
中间时钟丢失了边框阴影中的细节。在这两种情况下,时钟背景的中心部分看起来都是可用的。
PNG文件中的颜色数
Image Magick还可以告诉您图像中使用了多少种颜色。使用此命令:
手动配置
也可以不使用TouchGFX Designer来选择图像格式。图像格式在项目根目录下的“ application.config”文件中指定:
{ “ image_configuration”:{ images“:{ ” Blue_Buttons_Round_Edge_small.png“:{ ” format“:” L8_ARGB8888“ } }, ” dither_algorithm“:” 2“, ” alpha_dither“:”是“, ” layout_rotation“:” 0“ , “ opaque_image_format”:“ RGB888”, “ nonopaque_image_format”:“ ARGB8888”, “ section”:“ ExtFlashSection”, “ extra_section”:“ ExtFlashSection” } }
“ image_configuration”下的“ images”部分指定单个图像的格式。如果此处未提及图像,则将以默认格式(opaque_image_format或nonopaque_image_format)生成图像。
我们建议尽可能使用TouchGFX Designer进行图像配置。
【来源】