使用L8圖像格式
從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進行圖像配置。
【來源】