从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进行图像配置。

 

来源