作者：Ted Lee
前言
老皮的皮夾裡放有一封信，據說信中述說著一個美麗的動人故事，這個故事曾經被一位神仙姐姐傳唱過。在這8787主題課的最後一個單元裡，我們就以紅顏色、8787及其週邊硬體與盒子設計三個元素替老皮重譜一個屬於曾經的他的主題曲，就姑且把它喚做：8787的影像故事。
任務
老皮的女朋友小派的生日快到了。今年，小派想測試一下小彼特的彼特功練到哪個化境了，就故意以自己生日為由要考考他：「以小彼特、閃、小派三元素做出一個生日禮物。」大夥兒也幫幫忙一起破關吧！
（讓8787偵測到人臉後啟動快閃的七彩LED。）
材料清單
| 項目 | 品名 | 單位 | 數量 |
| 1 | VTS-8787視覺感測器 | 片 | 1 |
| 2 | micro USB傳輸線 | 條 | 1 |
| 3 | Grove – 4x公端杜邦線+母座 to Grove 4pin連接線 | 條 | 1 |
| 4 | Arduino Nano（FT232晶片） | 塊 | 1 |
| 5 | mini USB傳輸線 | 條 | 1 |
| 6 | 麵包板 | 塊 | 1 |
| 7 | SSD1306 OLED液晶面板（I2C、128*64、0.96″”、1602 LCD） | 顆 | 1 |
| 8 | 杜邦線（公母） | 條 | 4 |
- 如果讀者要將項目4的開發板換成Uno或其他Arduino版本，請自行將項目5的傳輸線做調當的調整。
造形設計（機構）
- 錦盒（https://reurl.cc/8GqojR）
- 盒（https://reurl.cc/b572lE）
- Logo的設計思考（https://reurl.cc/exX3d7）請參考禮物盒子（https://reurl.cc/ZObNQV）或小造型盒（https://reurl.cc/lVe49A）概念設計作品外觀
- 記得將8787及其相關電路的尺寸考量進去
功能設計（電路、程式）
先依照下表及圖[1] [2]接妥8787、Nano與快閃LED的連接線路。
| Nano | OLED | 8787 |
| D0 | 黃 | |
| A4 | SDA | 白 |
| A5 | SCL | |
| 5V | 紅 | |
| GND | 短腳（一） | 黑 |
圖1：接線圖
在Pixetto Utility上（圖2）選用人臉偵測功能，讓8787識別並套用之，詳細操作方法可參考拙著《使用VIA Pixetto視覺感測器的辨色功能》一文。
圖2：在Pixetto Utility上選用顏色偵測功能
接著，在Pixetto Junior上拉出圖3的積木程式的基本架構（稍後我們將手動加上OLED控制的Arduino程式碼）。這個程式的設計邏輯為開機時在setup()的ㄈ字形積木中先初始化接在D0和D1腳接上的8787。
接著，若8787「看見」紅色（在上一段選用Color Detection功能時會看見紅色物件會被綠框框出，並於左上顯示red(1)的綠字字樣）後就讓Nano板載在D13接腳上的LED閃爍0.3秒後關閉。否則，就將之熄滅。
圖3：Pixetto Junior的Blockly程式碼
圖3積木程式自動生成的Arduino程式碼如下所示。
#include
SmartSensor ss(0,1);
void setup() {
ss.begin();
pinMode(13, OUTPUT);
} //end of setup()
void loop() {
if (ss.isDetected()) {
// red color
if (ss.getTypeID() == 1) {
digitalWrite(13, HIGH);
delay(300);
}
} else {
digitalWrite(13, LOW);
} //end of if
} //end of loop()
匯入OLED的函式庫
如圖5，在Pixetto Studio附的Arduino IDE（預設的路徑為C:PixettoPixettoEditorarduino）中，依照《Arduino 運用SSD1306 OLED 0.96吋 、0.91吋》（https://reurl.cc/1xGg7Y）一文提到的方式，匯入（import）Adafruit SSD1306與Adafruit GFX Library兩隻函式庫（libraries），完成的結果如圖6所示。
圖5：Pixetto Studio V1.0.1內含有V1.8.9版rduino IDE
圖6：匯入OLED控制的相關函式庫
Arduino IDE的幾個藏身處（存放路徑）
在檔案總管下我們使用暴力法從 C: 鉅細靡遺地搜出以下資訊：
- Pixetto Studio附帶：存在 C:PixettoPixettoEditorarduino 下，版次為V1.8.9（在V1.1.0版的Pixtto Studio中）。
- 自行下載安裝：預設路徑為 C:Program Files (x86)Arduino ，我們目前安裝的版本為V1.8.10。
- 匯入的外部函式庫會自動存到 C:UsersUserDocumentsArduinolibraries 。
- Windows App版：安裝在 C:Program FilesWindowsAppsArduinoLLC.ArduinoIDE_1.8.33.0_x86__mdqgnx93n4wtt ，我們裝的版本是V1.8.12。
修改標頭檔
根據《0.96寸 藍色 白色 IIC通信 小OLED顯示屏模塊 51單片機》（https://reurl.cc/9ERZLa）一文，將路徑「C:UsersUserDocumentsArduinolibraries」下的「Adafruit_SSD1306.h」修改為正確的顯示尺寸：
// #define SSD1306_128_32
調整OLED輸出
參考《Coordinate System and Units》（https://reurl.cc/kdaVbr）內容說明，將《Arduino 運用SSD1306 OLED 0.96吋 、0.91吋》（https://reurl.cc/1xGg7Y）內的參考程式的testdrawstyles()函數修改如下：
display.clearDisplay();
display.setTextSize(5); // 設定文字大小
display.setTextColor(1); // 1:OLED預設的顏色(這個會依該OLED的顏色來決定)
display.setCursor(30,18); // 設定起始座標
display.print(text); // 要顯示的字串
display.display(); // 要有這行才會把文字顯示出來
//delay(1000);
}
加在一起
經過以上從Pixetto Junior自動生成程式架構、匯入Adafruit原廠的OLED函式庫及修改輸出顯式後可得到如下的完整程式：
#include
#include
#include
#include
#include
SmartSensor ss(0,1);
#define SCREEN_WIDTH 128 // OLED 寬度像素
#define SCREEN_HEIGHT 64 // OLED 高度像素
// 設定OLED
#define OLED_RESET 4 // Reset pin # (or -1 if sharing Arduino reset pin)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);
void setup() {
pinMode(13, OUTPUT);
digitalWrite(13, HIGH);
delay(500);
digitalWrite(13, LOW);
ss.begin();
// 偵測是否安裝好OLED了
if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { // 一般1306 OLED的位址都是0x3C
Serial.println(F("SSD1306 allocation failed"));
} //end of if
// 顯示Adafruit的LOGO，算是開機畫面
display.display();
delay(1000); // 停1秒
// 清除畫面
display.clearDisplay();
} //end of setup()
void loop() {
if (ss.isDetected()) {
if (ss.getTypeID() == 1) {
digitalWrite(13, HIGH);
showText("520");
//delay(300);
}
} else {
showText("");
display.display();
digitalWrite(13, LOW);
} //end of if
} //end of loop()
void showText(char text[]) {
display.clearDisplay();
display.setTextSize(5); // 設定文字大小
display.setTextColor(1); // 1:OLED預設的顏色(這個會依該OLED的顏色來決定)
display.setCursor(30, 18); // 設定起始座標
display.print(text); // 要顯示的字串
display.display(); // 要有這行才會把文字顯示出來
}// end of showText()
最後，我們在圖7的Pixetto Junior內選用
後就可以開開心心
了！
圖7：在Pixetto Junior內手動編輯Arduino程式碼上傳到Nano
本單元的操作影片如下所示。
教學活動設計
加掛一個MP3播放器模組（https://reurl.cc/E7o5XA），使得8787看到紅色後可以一邊播放《Whoever Finds This , I Love You》一邊在OLED顯示歌詞（https://reurl.cc/Kk01MR），或一段話、一個點陣圖（https://reurl.cc/ZOWLXV）。
參考資料
（作者為本刊專欄作家，本文同步表於作者部落格，文章連結；責任編輯：林亮潔）
- 用GenAI生成連連看樣板 - 2025/05/15
- 細談「春仔產生器」的專案拆解 - 2025/04/17
- 用生成式AI打造「春仔」產生器 - 2025/03/12
訂閱MakerPRO知識充電報
與40000位開發者一同掌握科技創新的技術資訊！
