從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種其他顏色,因為兩個圖像都有各自的調色板。

L83.png
具有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種不同的顏色:

image16.png

具有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文件夾中:

2019_10_07_11_33_38_C_TouchGFXProjectsDocumentation_L8Test_assets_images.png

現在轉到TouchGFX Designer,然后單擊頂部欄中的“圖像”選項卡並選擇圖像:

2019-10-07_11_35_55-L8Test.png

在窗口的右側,選擇圖像格式L8_RGB888(此示例運行24位顏色)。

現在可以在畫布上插入一個圖像小部件(在這里我們在背景中插入了一個Box):

2019-10-07_11_38_22-L8Test.png

用戶界面代碼無需更改。由於我們在“圖像”選項卡中所做的配置,圖像轉換器會轉換PNG文件並生成L8格式的圖像。

透明圖像

如上所述,也可以將L8格式用於具有透明性的圖像。

Blue_Buttons_Round_Edge_small.png

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位作為像素深度:

2019-10-07_15_14_08-Save_Configuration.png

現在,在您的項目中使用新的PNG。切記在TouchGFX設計器的“圖像”選項卡中選擇L8_ARGB8888格式。陰影處理不佳,但是在許多情況下帶有透明邊緣的圖標看起來不錯。可以調整“透明度閾值”值,並且在某些情況下可以改善結果。

圖像魔術

另一個合適的工具(有時會產生更好的L8圖像)是Image Magick(可從www.imagemagick.org下載)。該工具可以從命令行轉換圖像。這使其適合在腳本中使用。要將clock_bg.png轉換為最多使用256種顏色的圖像,請使用以下命令:

2019-10-07_15_21_00-MINGW32__c_TouchGFXProjectsDocumentation_L8Test_assets_images.png

為了比較,下面顯示了三個圖像(原始圖像,使用Paint.Net的L8,使用Image Magick的L8):

L8images.png

中間時鍾丟失了邊框陰影中的細節。在這兩種情況下,時鍾背景的中心部分看起來都是可用的。

PNG文件中的顏色數

Image Magick還可以告訴您圖像中使用了多少種顏色。使用此命令:

2019-10-08_13_07_52-MINGW32__c_TouchGFXProjectsDocumentation_L8Test_assets_images.png

手動配置

也可以不使用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進行圖像配置。

 

來源