描述

上周我制作了一個電子相冊，可以放在辦公桌上展示一些照片。工作累了可以看看放松一下。以前我已經(jīng)實現(xiàn)了在 LCD 上顯示格式為 BMP 的圖片。現(xiàn)在我們使用手機或相機獲取的大多數(shù)圖片都是JPG格式的，無法在LCD上使用。

在本教程中，我想分享如何建立一個可以顯示JPG格式圖片的數(shù)字相冊。本教程將實現(xiàn)以下目標：

從 SD 卡讀取并顯示 JPG 格式的圖片。

自動或手動切換圖片。

硬件

ESP32 TFT LCD with Camera 模塊配備 320 x 240 LCD 顯示屏，使用 ili9341 驅(qū)動庫。板上裝有觸控芯片STMPE610，用于觸控。此外，板上還集成了 SD 卡模塊。

帶攝像頭模塊的 ESP32 TFT LCD 滿足我的所有需求，我無需尋找其他模塊。如果您有所有這些模塊來替換它，您就可以構(gòu)建自己的數(shù)字相冊。

Arduino IDE 設(shè)置

安裝 ESP32 開發(fā)板。

安裝 TFT_eSPI 庫。不要忘記根據(jù)您的硬件更新庫中的 UserSetup.h 文件。我將在下面列出您需要更新的代碼。

?

// Only define one driver, the other ones must be commented out
#define ILI9341_DRIVER
//#define ST7735_DRIVER      // Define additional parameters below for this display
//#define ILI9163_DRIVER     // Define additional parameters below for this display

?

?

#define TFT_MISO 12//19
#define TFT_MOSI 13//23
#define TFT_SCLK 14//18
#define TFT_CS   15  // Chip select control pin
#define TFT_DC   33// 2  // Data Command control pin
//#define TFT_RST  // 4  // Reset pin (could connect to RST pin)
#define TFT_RST  -1  // Set TFT_RST to -1 if display RESET is connected to ESP32 board RST

?

安裝 TJpg_Decode 庫來解碼 JPG。

安裝 Adafruit STMPE610 庫。

固件

獲取 SD 卡上的 JPG 圖片列表。

?

int get_pic_list(fs::FS &fs, const char *dirname, uint8_t levels, String wavlist[30])
file_num = get_pic_list(SD, "/", 0, file_list);

?

由于SPI管腳（SPI_SCLK/SPI_MISO/SPI_MOSI）是共用的，所以在使用SPI通訊時需要手動設(shè)置選擇信號，以保證通訊成功。表示當 SD 模塊的片選信號為 LOW 且其他片選信號為 HIGH 時，ESP32 通過 SPI 與 SD 模塊通信。

?

#define SPI_ON_TFT digitalWrite(TFT_CS, LOW)
#define SPI_OFF_TFT digitalWrite(TFT_CS, HIGH)
#define SPI_ON_SD digitalWrite(SD_CS, LOW)
#define SPI_OFF_SD digitalWrite(SD_CS, HIGH)
#define STMPE_ON digitalWrite(STMPE_CS, LOW)
#define STMPE_OFF digitalWrite(STMPE_CS, HIGH)

?

TJpg_Decoder.h庫提供了直接從SD卡中讀取JPG圖片數(shù)據(jù)并顯示在屏幕上的功能。

?

TJpgDec.drawSdJpg(0, 0, file_list[file_index].c_str());

?

獲取觸摸時屏幕的位置值。

?

if (touch.touched())
    {
        // read x & y & z;
        int pos[2] = {0, 0};
        delay(100);      // delay for SPI receive the data
        while (!touch.bufferEmpty())
        {
            touch.readData(&x, &y, &z);
            pos[0] = x * 240 / 4096;
            pos[1] = y * 320 / 4096;            
        }

?

準備圖片

?

我們通常使用手機或相機拍照。照片的尺寸比LCD大得多。當您直接使用 LCD 顯示這些圖片時，并沒有完全顯示整個圖片。我們需要提前使用圖像處理軟件，比如微軟系統(tǒng)上的繪圖工具，將圖片壓縮裁剪成320×240大小。

將準備好的圖片復(fù)制到 SD 卡中，并將 SD 卡插入模塊中。重啟模塊，一張數(shù)碼相冊就完成了。

觸摸屏幕的右半部分可切換到下一張圖片。

輕觸屏幕左半邊切換到最后一張圖片。

如果沒有觸摸，十秒后畫面會自動切換。

另外，我用網(wǎng)站把一些GIF圖片轉(zhuǎn)換成很多JPG圖片，和數(shù)字相冊一起播放。只需將ESP32設(shè)置為以非常快的速度切換圖像，LCD就會播放GIF圖片。雖然這種方法只能用于播放小尺寸的 GIF 圖像。

?

?