Raspberry Pi Pico筆記(12):SSD1306 LCD顯示線條/圖片(下)

上一篇實作繪製線條、顯示並移動文字,本篇將繼續瞭解如何在 SSD1306 顯示圖片。如要顯示圖片,會運用到 Micropython 的 framebuf 函式庫。該函式庫可以將程式代碼建立的位元圖圖像資料顯示在屏幕上。這個將圖片轉換為位元數值的程式是使用 img2bytearray.py 來產生,以下就來瞭解一下如何實作將影像圖片顯示在 SSD1306 顯示器上。

首先找一張要顯示的圖片(或自行繪製,儲存成 JPG 檔),我以 Hello 關鍵字來搜尋,選定一張圖片:
使用「小畫家」程式開啟圖片,並將圖片縮小成 128 x 64 大小的 JPG 檔。開啟檔案後,點選「調整大小」,選擇「像素」後,將水平及垂直設定為 128 及 64,按下「確定」後存檔。
Github 下載 img2bytearray 程式,點選下圖綠色按鈕「Code」,再按「Download ZIP」將程式打包下載。
下載後,解壓縮存放在硬碟目錄,我將檔案放在 D 槽根目錄,方便稍後使用命列視窗進入目錄及執行指令,執行以下指令產生圖片的位元碼資料:
D:\img2bytearray>python3 img2bytearray.py hello-3.jpg 128 64
使用 python3 來執行 img2bytearray.py 後面接著三個參數:第 1 個參數是檔案名稱,也就是稍早縮小圖片的檔案名,第 2,3 個參數是圖片的長與寬像素。執行時如果出現以下錯誤,表示需要安裝影像處理函式庫 PIL(Python Imaging Library)。
要安裝 PIL 影像處理函式庫,可執行以下指令:
pip install Pillow
安裝 PIL 後再次執行,如果沒有錯誤,會得到如下圖的結果:
從「b'」開始到結束的這段位元碼,可用滑鼠選取後,再按「Ctrl」+「C」複製下來,貼到程式中這一行:「TH = bytearray()」的刮號內。


[FrameBuffer功能]

影像處理使用 FrameBuffer 相關功能,其指令說明如下:
.framebuf.FrameBuffer
提供一個通用的圖片緩衝區功能,用於將建立的位元圖圖像,將其發送到顯示器上。
framebuf.FrameBuffer(buffer, width, height, format)
buffer: 是緩衝內容的存放區,必須足夠大以包含由FrameBuffer的寬度,高度和格式定義的每個像素。
width: 是 FrameBuffer 的寬度(以像素為單位)。
height: 是 FrameBuffer的高度(以像素為單位)。
format: 指定在 FrameBuffer 中使用的像素類型;可以是以下常數:
  • framebuf.MONO_VLSB: 單色(1位)顏色格式,字節中的位元被垂直映射,位 0 最靠近屏幕頂部,每個字節佔用 8 個垂直像素。
  • framebuf.MONO_HLSB: 單色(1位)顏色格式,字節中的位元是水平映射的。每個字節佔用8個水平像素,而第 7 位為最左側。
  • framebuf.MONO_HMSB: 單色(1位)顏色格式,字節中的位元是水平映射的。每個字節佔用8個水平像素,其中位 0 為最左邊。

[程式]

注意:下列程式 TH = bytearray(b'\x00\ ...\x00\x00'),刮號內要換成上述 img2bytearray.py 執行後的結果。
from machine import Pin, I2C
from ssd1306 import SSD1306_I2C
import framebuf
import utime 

i2c=I2C(0,sda=Pin(0), scl=Pin(1), freq=400000)
oled = SSD1306_I2C(128, 64, i2c)

while True:
   # 位元影像 
   TH = bytearray(b'\x00\ ...\x00\x00')   #省略中間的16進位碼

   fb = framebuf.FrameBuffer(TH,128,64, framebuf.MONO_HLSB)  # MONO_HLSB 為單色顯示,水平映射
   oled.fill(0)   #清除螢幕
   oled.blit(fb,0,0)   #在位置0,0顯示緩衝區的內容
   oled.show()    #顯示
   utime.sleep(2)
   oled.fill(0)
   
   for i in range(128,-128,-1):   #從右到左移動顯示
       oled.blit(fb,i,0)
       oled.show()

[結果]

[參考資料]

Share on Google Plus

0 Comments:

張貼留言