SPI - 使用 LCD 熒幕印出圖案與文字

若您對SPI還不太熟悉，請參考 SPI介紹

材料準備

  • AmebaD [AMB21 / AMB22 / AMB23 / BW16] x 1

  • ILI9341 TFT LCD with SPI interface x 1

范例说明

手邊已測試過兩款ILI9341 TFT LCD with SPI interface，分別是

常見的ILI9341 TFT LCD with SPI interface有底下這些Pin腳

  • MOSI: 標準的USB Pin 腳

  • MISO: 標準的USB Pin 腳

  • SLK: 標準的USB Pin 腳

  • CS: 標準的USB Pin 腳

  • RESET: 拉Low再拉High可以重啟LCD, 詳細的重啟順序需要看LCD的規格

  • D/C: Data/Command, 這個Pin腳準位在Low的時候, 表示此時SPI傳送的都是命令, 而準位在High的時候表時傳送的都是資料

  • LED (or BL): 即背光, 需要有一定的亮度才可以看到螢幕內容，通常可用PWM控制，或直接接到VCC讓它100%發亮

  • VCC: 接到3 V或5V, 要參考規格

  • GND: 接到GND

AMB21 / AMB22 and QVGA TFT LCD 接線圖:

../../../../_images/image168.png

AMB23 and QVGA TFT LCD 接線圖:

../../../../_images/image1-14.png

BW16 and QVGA TFT LCD 接線圖:

../../../../_images/image1-34.png

BW16-TypeC and QVGA TFT LCD Wiring Diagram:

../../../../_images/image1-41.png

AMB21 /AMB22 and Adafruit 2.8” TFT LCD touch shield 接線圖:

備註

this shield model enables the backlight by default and pin 8 is not for backlight, and the VCC should be connected to 5V.

AMB21 /AMB22 and Adafruit 2.8” TFT LCD touch shield 接線圖:

../../../../_images/image264.png

AMB23 and Adafruit 2.8” TFT LCD Touch Shield 接線圖:

../../../../_images/image2-16.png

BW16 and Adafruit 2.8” TFT LCD Touch Shield 接線圖:

../../../../_images/image2-33.png

BW16-TypeC and Adafruit 2.8』』 TFT LCD touch shield Wiring Diagram:

../../../../_images/image2-42.png

Open the example, “Files” → “Examples” → “AmebaSPI” → “ILI9341_TFT_LCD_basic”

../../../../_images/image342.png

Compile and upload to Ameba, then press the reset button. Then you can see some display tests appear on the LCD screen, such as displaying different colors, drawing vertical and horizontal lines, drawing circles, etc.…

../../../../_images/image431.png

程式碼説明

  • RGB 16-bit

    ILI9341在繪圖時，使用的顏色代碼是RGB 16-bit, 與一般常見的RBG 24-bit差異是Red使用5 bit (原本的8 bits向右移3bits), Green使用6 bits(原本的8 bits向右移2bits), Blue使用5 bit(原本的8 bits向右移3bits)舉例來說，天空藍的RGB 24 bit為0x87CEFF，表示成二進位為：

    • Red: 0x87 = B10000111

    • Green: 0xCE = B11001110

    • Blue: 0xFF = B11111111

    轉成RGB 16 bit為

    • Red: B10000

    • Green: B110011

    • Blue: B11111

    最後將這些二進位數值接起來 B1000011001111111 = 0x867F

  • ILI9341 繪圖方式

    • 在繪圖前，需要下Command告訴它接下來要畫的矩形範圍, 接著再一個一個傳入2 byte的RGB 16 bits顏色代碼，ILI9341會一個一個pixel填入對應的顏色。

    • 畫1個pixel也需要設定範圍，只不過它的矩形長寬只有1個pixel

    • 因此畫垂直線或水平線要比畫斜線要快，因為垂直線或水平線只需要設定一次矩形範圍(長或寬為1個pixel)，但畫斜線則比較慢，因為實際上它畫了許多點，而每個點都要設定矩形範圍。

  • ILI9341 繪出文字

    • 在API裡，字型檔使用5×7的文字，但印出時是6×8的文字，其中右邊及下方都留白，這樣可以與下一個文字區分。底下是A的例子：

    ../../../../_images/image523.png

    • 如果是Font Size為2的情況，則裡面每個dot的大小為2×2的矩形。 Font Size為3則每個dot的大小為3×3的矩形，以此類推。

  • ILI9341 螢幕轉向

    • ILI9341提供0度、90度、180度、270度的螢幕轉向

    • 原本0度的width為240，height為320，轉向90度之後，width為320，height為240