前言
已逝的鳥山明畫家,曾畫出許多知名的漫畫作品,如《怪博士與機器娃娃》和《七龍珠》…等,而這些作品深深著影響著我們,並陪伴著我們長大,變成我們的童年回憶。
本篇文章,要在Arduino 首次接觸就上手的OLED螢幕中,重現鳥山明的經典作品。從基礎的圖像處理到數據轉換,到最終的OLED顯示技術,我們將一步步引導你完成這個有趣的項目。
如果是新手或初學者想要知道有關《Arduino首次接觸就上手》基本操作的相關文章,可以移駕到
| 撰寫/攝影 | 許鈺莨 | ||
| 時間 | 30分鐘 | 材料表
(購買) |
|
| 難度 | 2(滿分5) | ||
本文
第一步:網路上下載七龍珠經典圖片
1.圖片搜尋
筆者是以Google搜尋的圖片,請輸入:七龍珠孫悟空黑白圖片。圖片不一定是七龍珠啦~讀者也可以找到喜歡的圖。但請注意,關鍵字一定要有”黑白圖片”,因為《Arduino首次接觸就上手》的OLED是單色的模組,顯示會較清楚。

2.開啟圖像畫面及截圖
另外要注意的一點是,OLED模組像素為128×64,顯示為長方形,所以盡量找橫向顯示的圖,如果找直向顯示的圖,如:悟空的站立圖,之後顯示會變很扁,不過可以用圖片軟體來旋轉角度。
基於很多都是悟空的站立圖,所以筆者找到顯示DRAGONBALL圖片(下方紅框處),打算用截圖出來,但在這邊截圖會變成很小。

所以要顯示正常大小的圖形畫面,可對圖形按右鍵>複製圖片網址

再把網址貼上網址列,就可以還原圖片大小。

再來截圖,可以使用Windows內建的截圖功能,Home+Shift+S三鍵一起按就可以截圖。

如下圖所示。

第二步:改變圖像尺寸
1.使用小畫家
選檔案>開啟舊檔>開啟圖片


2.改變圖片尺寸
因OLED的尺寸為128×64個像素,所以必須要更改圖片像素的尺寸。
選常用>調整大小

然後選像素,水平欄位寫128,垂直欄位寫入64。另外,不要勾選維持外觀比例。

3.另存新檔
另存新檔成單色點陣圖
第三步:下載並安裝Image2Lcd軟體
1.下載並安裝Image2Lcd軟體
Image2Lcd是一款可將圖像轉換為LCD 顯示器格式的軟體,當然有很多種作法,只要最後可以轉換成 XBM 格式檔案即可。
下載Image2Lcd軟體 (請按我)

2.預覽圖像畫面
開啟圖片後,右側可以預覽圖片,有圖片旋轉及顏色反轉之功能。

3.保存為 XBM 格式檔案
【注意】這裡必須要把位元組內象素數據反序勾選起來,否則OLED的圖會很破碎,再選擇保存。

之後就會產生圖片的 XBM 格式了,再將當中的像素陣列程式寫入到Arduino程式碼當中即可。

第四步:使用Arduino IDE燒錄
要在OLED模組顯示圖形,必須要使用到U8g2lib.h的函式庫 (Hangeekduino 已有內建)。所以只能用Arduino IDE撰寫,而HanGeekduino圖形化的OLED積木程式中,採用的是U8x8lib.h的函式庫,此函式庫只能顯示文字,而不行繪製圖形。
1.開啟程式
路徑位置在HanGeekduino\BlocklyDuino3\arduino-1.8.5
再開啟arduino.exe即可。

開啟名為Arduino_OLED.ino程式,程式連結(請按我)

完整程式如下
[pastacode lang=”c” manual=”%23include%20%3CArduino.h%3E%0A%23include%20%3CU8g2lib.h%3E%0A%0A%2F%2F%20%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%AF%E7%A4%BA%E5%99%A8%0AU8G2_SSD1306_128X64_NONAME_F_HW_I2C%20u8g2(U8G2_R2%2C%20%2F*%20reset%3D*%2F%20U8X8_PIN_NONE)%3B%0A%0A%23define%20imgWidth%20128%0A%23define%20imgHeight%2064%0A%0A%2F%2F%E5%8F%AF%E4%BB%A5%E6%9B%BF%E6%8F%9B%E7%AC%AC13%E8%A1%8C~%E7%AC%AC76%E8%A1%8C%E7%9A%84%E9%99%A3%E5%88%97%E5%9C%96%E6%A1%88%0Astatic%20const%20unsigned%20char%20logo_bmp%5B%5D%20PROGMEM%20%3D%0A%7B%0A0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C%0A0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C%0A0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C%0A0X00%2C0X00%2C0X00%2C0X00%2C0X20%2C0X30%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C%0A0X00%2C0X00%2C0X00%2C0X00%2C0X50%2C0X50%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C%0A0X00%2C0X00%2C0X00%2C0X00%2C0X10%2C0X50%2C0X01%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C%0A0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X94%2C0X02%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C%0A0X00%2C0X00%2C0X00%2C0X00%2C0XA0%2C0X8A%2C0X02%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C%0A0X00%2C0X00%2C0X00%2C0X00%2C0X20%2C0X2A%2C0X02%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C%0A0X00%2C0X00%2C0X00%2C0X40%2C0X40%2C0X0B%2C0X02%2C0X06%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C%0A0X00%2C0X00%2C0X00%2C0XC0%2C0X0D%2C0X42%2C0X02%2C0X0C%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C%0A0X00%2C0X00%2C0X00%2C0X70%2C0XF7%2C0X90%2C0X0C%2C0X18%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C%0A0X80%2C0XFF%2C0X03%2C0XCC%2C0XAA%2C0XE3%2C0X11%2C0X30%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C%0A0XF0%2C0XFF%2C0X0F%2C0X92%2C0X48%2C0X05%2C0XF3%2C0X63%2C0X00%2C0X00%2C0X00%2C0X02%2C0X00%2C0X00%2C0X00%2C0X00%2C%0A0XF8%2C0X01%2C0XFE%2C0XF3%2C0XFF%2C0X39%2C0X09%2C0XC4%2C0X00%2C0X00%2C0X00%2C0X1F%2C0X00%2C0X00%2C0X00%2C0X00%2C%0A0X38%2C0X00%2C0X78%2C0X5C%2C0XD5%2C0XDF%2C0X55%2C0X84%2C0XFF%2C0X13%2C0X00%2C0X7B%2C0X00%2C0X0C%2C0X00%2C0X00%2C%0A0X18%2C0X00%2C0XF0%2C0XBB%2C0XFE%2C0XEF%2C0XBF%2C0X07%2C0X7E%2C0X27%2C0X00%2C0XC1%2C0X03%2C0X3C%2C0X00%2C0X00%2C%0A0X18%2C0X00%2C0X88%2C0XD7%2C0XFB%2C0XFF%2C0X3F%2C0X02%2C0X04%2C0X5E%2C0X01%2C0X01%2C0X07%2C0XF4%2C0X01%2C0X00%2C%0A0X18%2C0X00%2C0XE8%2C0X2D%2C0XB5%2C0XDF%2C0X2B%2C0X0A%2C0X1B%2C0XBA%2C0X03%2C0X01%2C0X0C%2C0X86%2C0X01%2C0X00%2C%0A0X18%2C0X00%2C0XA2%2C0XFB%2C0XFF%2C0X7F%2C0X02%2C0XEF%2C0X11%2C0X0C%2C0X81%2C0X01%2C0X18%2C0X86%2C0X01%2C0X00%2C%0A0X10%2C0X00%2C0X76%2C0X3F%2C0XF2%2C0XFF%2C0X03%2C0X21%2C0X35%2C0X5E%2C0X82%2C0X01%2C0X10%2C0X82%2C0X01%2C0X00%2C%0A0X10%2C0X00%2C0XDE%2C0X43%2C0X00%2C0XED%2C0X93%2C0X61%2C0X60%2C0X1A%2C0X9A%2C0X01%2C0XB0%2C0X83%2C0X00%2C0X00%2C%0A0X30%2C0X10%2C0XFD%2C0XC8%2C0X2D%2C0X06%2C0X63%2C0X3E%2C0X60%2C0X8C%2C0XE8%2C0X00%2C0X60%2C0X83%2C0X00%2C0X00%2C%0A0X30%2C0XF0%2C0XFF%2C0X70%2C0X80%2C0X07%2C0XE3%2C0XEF%2C0XE1%2C0X38%2C0X83%2C0X60%2C0X60%2C0X83%2C0X03%2C0X00%2C%0A0X30%2C0XF0%2C0X3F%2C0X0E%2C0X00%2C0X06%2C0X17%2C0XB0%2C0XFF%2C0X18%2C0XDE%2C0XE0%2C0XE1%2C0X83%2C0X07%2C0X00%2C%0A0X30%2C0X90%2C0X1F%2C0X18%2C0X00%2C0X02%2C0XD7%2C0XFF%2C0XE3%2C0XB8%2C0XFD%2C0XE0%2C0XC1%2C0XC1%2C0X7F%2C0X00%2C%0A0X20%2C0XB0%2C0X2B%2C0X19%2C0X00%2C0X03%2C0XC7%2C0X3F%2C0X80%2C0X8C%2C0XFA%2C0XF0%2C0XC1%2C0XC1%2C0X43%2C0X00%2C%0A0X20%2C0XB0%2C0XC7%2C0X18%2C0X00%2C0X03%2C0X87%2C0X27%2C0X80%2C0X07%2C0XDD%2C0XB0%2C0XC1%2C0XC1%2C0X41%2C0X00%2C%0A0X60%2C0XF0%2C0X47%2C0X10%2C0X00%2C0X01%2C0X1F%2C0X27%2C0X00%2C0X07%2C0X40%2C0XF0%2C0XC1%2C0XC1%2C0XC1%2C0X00%2C%0A0X60%2C0XE0%2C0X2F%2C0X90%2C0X01%2C0X01%2C0XAF%2C0X23%2C0X00%2C0X83%2C0X40%2C0XE0%2C0XE1%2C0XC1%2C0XC1%2C0X03%2C%0A0X60%2C0X60%2C0X21%2C0X70%2C0X87%2C0X11%2C0X86%2C0X23%2C0X02%2C0XBB%2C0X58%2C0X00%2C0XE0%2C0XE0%2C0X41%2C0X02%2C%0A0X60%2C0XE0%2C0X21%2C0X30%2C0X88%2C0X10%2C0X7E%2C0X33%2C0X02%2C0X96%2C0X53%2C0X00%2C0XA0%2C0XE0%2C0XC1%2C0X06%2C%0A0X60%2C0XE0%2C0X31%2C0X30%2C0X80%2C0XF0%2C0X7F%2C0XD3%2C0X0F%2C0X52%2C0X70%2C0X00%2C0XF0%2C0X20%2C0XC1%2C0X05%2C%0A0XE0%2C0XE1%2C0X3C%2C0X70%2C0XCF%2C0XF8%2C0X7F%2C0X9B%2C0X0F%2C0XFE%2C0X87%2C0X00%2C0XF0%2C0X21%2C0XC1%2C0X05%2C%0A0X20%2C0X61%2C0X30%2C0X70%2C0X59%2C0X3C%2C0XFA%2C0X8F%2C0X07%2C0XFE%2C0XDF%2C0X00%2C0XF8%2C0X21%2C0XC1%2C0X07%2C%0A0XA0%2C0XC1%2C0X38%2C0X70%2C0X73%2C0X3A%2C0XC2%2C0X03%2C0X07%2C0X3E%2C0X3C%2C0X01%2C0X18%2C0XF1%2C0XC1%2C0X0B%2C%0A0X40%2C0XC3%2C0X3F%2C0XF0%2C0X62%2C0X01%2C0X02%2C0X83%2C0X07%2C0X3E%2C0X6C%2C0X19%2C0X18%2C0XE3%2C0XC3%2C0X0B%2C%0A0X20%2C0XC3%2C0X38%2C0X30%2C0XA1%2C0X00%2C0X02%2C0X83%2C0X04%2C0X3E%2C0XFC%2C0X79%2C0X18%2C0X03%2C0XCF%2C0X0F%2C%0A0XA0%2C0XC1%2C0X18%2C0X30%2C0XA0%2C0X00%2C0X12%2C0X02%2C0X08%2C0X3A%2C0XFC%2C0X6C%2C0X14%2C0X02%2C0XCC%2C0X07%2C%0A0XA0%2C0XC3%2C0X1C%2C0XD0%2C0X31%2C0X00%2C0X7E%2C0X02%2C0X00%2C0X33%2C0XFC%2C0X4D%2C0X1A%2C0X02%2C0XCC%2C0X0F%2C%0A0X40%2C0XC2%2C0X1B%2C0X70%2C0X13%2C0X00%2C0XCE%2C0X06%2C0X00%2C0X31%2C0X6C%2C0XCD%2C0X19%2C0X02%2C0XCC%2C0X0F%2C%0A0X00%2C0X81%2C0X0C%2C0X58%2C0X12%2C0X02%2C0X86%2C0X05%2C0X80%2C0X21%2C0X7C%2C0X3F%2C0X14%2C0X06%2C0XC4%2C0X0F%2C%0A0X80%2C0X81%2C0X0F%2C0XD8%2C0X1B%2C0X3E%2C0X7E%2C0X0F%2C0X80%2C0X20%2C0XAC%2C0X3B%2C0X12%2C0X06%2C0XC4%2C0X1B%2C%0A0XA0%2C0X81%2C0X07%2C0XD8%2C0X09%2C0X3F%2C0XF6%2C0X1F%2C0XC0%2C0X00%2C0XFC%2C0X23%2C0X1C%2C0X0C%2C0XC4%2C0X3F%2C%0A0XA0%2C0X81%2C0X03%2C0X0C%2C0X38%2C0X3D%2C0XF6%2C0X3F%2C0X70%2C0X00%2C0XFC%2C0X76%2C0X0A%2C0X3C%2C0XC4%2C0X3F%2C%0A0XA0%2C0X01%2C0X00%2C0X0C%2C0XF8%2C0X2D%2C0X9E%2C0XFF%2C0X3F%2C0X00%2C0XEC%2C0XF5%2C0X2E%2C0XFC%2C0XC6%2C0X3F%2C%0A0XE0%2C0X03%2C0X00%2C0X06%2C0XE0%2C0X2D%2C0X1E%2C0XFF%2C0X1F%2C0X00%2C0XEC%2C0XE7%2C0X2C%2C0XCC%2C0XC7%2C0X37%2C%0A0XE0%2C0X03%2C0X00%2C0X06%2C0X30%2C0XEC%2C0X0F%2C0X0E%2C0X19%2C0X06%2C0XCC%2C0X6F%2C0X67%2C0X88%2C0XE3%2C0X37%2C%0A0XE0%2C0X03%2C0X00%2C0X03%2C0X38%2C0XCC%2C0X1F%2C0X38%2C0X19%2C0X04%2C0XCC%2C0X7F%2C0X63%2C0X08%2C0XF1%2C0X36%2C%0A0XE0%2C0X03%2C0X00%2C0X63%2C0X18%2C0X0F%2C0X3F%2C0X30%2C0X19%2C0X0C%2C0XD6%2C0XDF%2C0X23%2C0X08%2C0XB9%2C0X33%2C%0A0XE0%2C0X03%2C0X80%2C0X61%2C0X58%2C0X0F%2C0X7F%2C0X60%2C0X15%2C0X1C%2C0XF6%2C0XDF%2C0X01%2C0X18%2C0XB9%2C0X33%2C%0A0XC0%2C0X03%2C0XC0%2C0XE1%2C0XF0%2C0X1B%2C0XFE%2C0X20%2C0X13%2C0X1C%2C0X27%2C0XEF%2C0X00%2C0X98%2C0XFD%2C0X31%2C%0A0XC0%2C0X03%2C0XE0%2C0XF1%2C0XF0%2C0X1F%2C0XFC%2C0XA0%2C0X30%2C0XB4%2C0XA8%2C0XFF%2C0X00%2C0X90%2C0XF7%2C0X31%2C%0A0X00%2C0X07%2C0XF0%2C0XB1%2C0XF0%2C0X1F%2C0X00%2C0X30%2C0X30%2C0XE4%2C0XA3%2C0XFF%2C0X00%2C0XF0%2C0XF3%2C0X35%2C%0A0X00%2C0X06%2C0XBC%2C0XF0%2C0XB0%2C0X3F%2C0X00%2C0X10%2C0X30%2C0XE4%2C0X65%2C0XF7%2C0X00%2C0XB0%2C0XEE%2C0X3F%2C%0A0X00%2C0X06%2C0XCE%2C0XF0%2C0XF0%2C0X61%2C0X00%2C0X18%2C0X30%2C0X44%2C0XE6%2C0XFE%2C0X00%2C0X70%2C0X7F%2C0X1E%2C%0A0X00%2C0X06%2C0XE7%2C0XFF%2C0X61%2C0XE9%2C0X00%2C0X0C%2C0X30%2C0XCC%2C0XE1%2C0XFF%2C0XF0%2C0X60%2C0X3F%2C0X00%2C%0A0X00%2C0XC6%2C0X9F%2C0X9F%2C0X3F%2C0XC9%2C0X01%2C0X06%2C0XF0%2C0X8F%2C0XC7%2C0XFF%2C0XF0%2C0XE1%2C0X1F%2C0X00%2C%0A0X00%2C0XFC%2C0X01%2C0X99%2C0X7F%2C0XA9%2C0X83%2C0X03%2C0XF0%2C0X0F%2C0XC5%2C0XFB%2C0XF0%2C0XE1%2C0X1D%2C0X00%2C%0A0X00%2C0X7C%2C0X88%2C0X08%2C0X64%2C0X09%2C0XFF%2C0X01%2C0X00%2C0X00%2C0XF8%2C0XFF%2C0XDF%2C0XFF%2C0X0F%2C0X00%2C%0A0X00%2C0X1C%2C0X70%2C0X44%2C0X24%2C0X05%2C0X7C%2C0X00%2C0X00%2C0X00%2C0XE0%2C0XEB%2C0XBF%2C0XFF%2C0X07%2C0X00%2C%0A0X00%2C0X04%2C0X40%2C0X06%2C0X80%2C0X01%2C0X00%2C0X00%2C0X00%2C0X00%2C0XC0%2C0XB3%2C0X5F%2C0XF7%2C0X01%2C0X00%2C%0A0X00%2C0X00%2C0X80%2C0X23%2C0X42%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X80%2C0X43%2C0XFE%2C0X7F%2C0X00%2C0X00%2C%0A0X00%2C0X00%2C0X00%2C0X1C%2C0X11%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X00%2C0X21%2C0X0D%2C0X00%2C0X00%2C%0A%7D%3B%0A%0Avoid%20setup()%20%7B%0A%20%20u8g2.begin()%3B%0A%7D%0A%0Avoid%20loop()%20%7B%0A%20%20u8g2.clearBuffer()%3B%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%B8%85%E9%99%A4%E5%85%A7%E9%83%A8%E8%A8%98%E6%86%B6%E9%AB%94%0A%20%20u8g2.setFont(u8g2_font_ncenB08_tr)%3B%2F%2F%20%E8%A8%AD%E5%AE%9A%E5%AD%97%E5%9E%8B%0A%20%20u8g2.firstPage()%3B%0A%20%20do%20%7B%0A%20%20%20%20u8g2.drawXBMP(0%2C%200%2C%20imgWidth%2C%20imgHeight%2C%20logo_bmp)%3B%20%2F%2F%E7%B9%AA%E5%9C%96%0A%20%20%20%20%2F%2Fu8g2.drawStr(0%2C%2015%2C%20%22DRAGON%20BALL%20!%22)%3B%20%2F%2F%E8%BC%B8%E5%87%BA%E6%96%87%E5%AD%97%0A%20%20%7D%20while%20(%20u8g2.nextPage()%20)%3B%0A%20%20u8g2.sendBuffer()%3B%0A%20%20%0A%20%20delay(1000)%3B%0A%7D%0A%0A” message=”Arduino_OLED.ino” highlight=”13-76″ provider=”manual”/]
2.上傳程式
取代像素陣列程式,即下方黃色部份,並燒錄上傳至《Arduino首次接觸就上手》

實體效果
程式上傳完成後,就會看見圖示顯示在OLED上面。
結語
恭喜完成了在《Arduino首次接觸就上手》的OLED模組完成進階實作,這當中建議找黑白色的圖,成功完整顯示機率才比較高。其實,OLED模組不僅可以單純的顯示文字,透過這些步驟,還可以在OLED模組中顯示想要的圖案,是不是很棒呢?
未來還有更多《Arduino首次接觸就上手》的主題喔,敬請各位讀者期待,我們下次見!



