Pixel:Bit 教學(四)－如何將影像串流到 TFT ?

一、簡介

在 Pixel:Bit 教學(一)~(三) 中我們學會了如何使用 TFT 中顯示文字，或者是將影像透過 Web Server 的方式呈現在網頁上，在這個單元我們將進一步結合這兩項應用，改透過 TFT 顯示 Camera 影像畫面，過程中只需要幾個步驟就可以快速完成這個應用喔！

開始操作之前，請各位準備好以下的設備：

Pixel:Bit x1
Micro USB to USB Type-A 數據傳輸線 x1

二、硬體架構

本次應用的軟硬體架構圖如下圖所示，硬體方面 ESP32 結合 Camera 及 TFT，軟體方面需要指定 Camera 輸出影像為 Jpeg，並且透過 TJpg_Decoder Library 解碼並使用 DMA（直接記憶體存取，Direct Memory Access）SPI 寫入 TFT，透過 DMA 有兩個好處：一是可以節省 CPU 效能，二是因為減少了透過 CPU 調用，所以可以提高運行速度。

三、操作說明

1. 目標

本次應用要完成的目標是將讀取到的影像串流到 TFT 螢幕上，並且達到幾乎不延遲的效果。

2. 安裝 Library

在開始之前我們需要先安裝以下幾個 Library：

TJpg_Decoder（可從 Arduino IDE Library Manager 安裝）
LITTLEFS（從 Github 下載後放入 Arduino/Library 資料夾內）

3. 範例程式

開啟此次範例程式 01_CameraTFT/PixelBit_CameraTFT_ESP32，燒錄至 Pixel:Bit，成功後即可看到影像畫面即時串流到TFT螢幕上。

4. 程式說明

在初始化時我們需要將 Camera 輸出格式指定為 JPEG，並且因 TFT 解析度為 240×240，所以我們將 Camera 輸出的解析度設為同樣 240×240，這樣可以省去剪裁圖片的步驟，jpeg_quality 數值會影響到圖像輸出品質，數值越低品質越高；fb_count 則會決定 frame buffers 的數量，建議使用者可以依照我們提供的範例程式設定參數設定即可，如下圖所示：

接著我們需要設定解碼後的圖像縮小倍數，這裡因為我們的 TFT 及 Camera 輸出解析度相同，所以設定縮小倍數為 1（不縮小），之後使用 TFT_eSPI setSwapBytes 方法指定圖像渲染前需要將 RGB 轉成 BGR，這樣才能正確顯示顏色，最後設定 Jpeg 解碼完後要渲染到 TFT 的 Callback，如下圖所示：

在 Loop 函式裡首先依照以往使用 esp_camera_fb_get 的方法取得一張照片，並且檢查回傳值是否有效與圖片格式是否為 JPEG，接著使用 startWrite 方法將 TFT SPI CS Line 拉低以準備將資料送入 TFT，使用 TJpg_Decoder drawJpg 的方法將 JPEG 影像資料送入解碼，一旦解碼完畢後將為自動呼叫 Callback tft_output 函式透過 DMA SPI 將影像渲染到 TFT 上，最後使用 endWrite 的方法釋放 TFT SPI CS Line 讓給其他 SPI 介面使用。

四、小結

只要透過了解如何渲染 JPEG 到 TFT 上後就可以衍伸更多有趣應用，例如可以使用兩個 Pixel:Bit 透過 Wi-Fi 實現簡易視訊功能，或者是將網路上各種 JPEG 圖檔串流到 TFT 變成簡易的幻燈片應用，以上就是這次教學分享，下個單元我們要介紹「Edge Impulse 影像辨識實作」，有興趣的夥伴們請繼續關注我們喔！。