8787影像故事:誰撿到這抹紅,520

作者: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的傳輸線做調當的調整。

造形設計(機構)

功能設計(電路、程式)

先依照下表及圖[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程式碼如下所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#include
#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: 鉅細靡遺地搜出以下資訊:

  1. Pixetto Studio附帶:存在 C:PixettoPixettoEditorarduino 下,版次為V1.8.9(在V1.1.0版的Pixtto Studio中)。
  2. 自行下載安裝:預設路徑為 C:Program Files (x86)Arduino ,我們目前安裝的版本為V1.8.10。
    • 匯入的外部函式庫會自動存到 C:UsersUserDocumentsArduinolibraries 。
  3. 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」修改為正確的顯示尺寸:

1
2
#define SSD1306_128_64
// #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()函數修改如下:

1
2
3
4
5
6
7
8
9
void showText(char text[]) {
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函式庫及修改輸出顯式後可得到如下的完整程式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
#include
#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)。

參考資料

  1. 六種授權條款
  2. Arduino 運用SSD1306 OLED 0.96吋 、0.91吋
  3. https://reurl.cc/1xGg7Y

(作者為本刊專欄作家,本文同步表於作者部落格,文章連結;責任編輯:林亮潔)

Author: Ted Lee

從工程師轉任中學教師,又為了捍衛教育理念,投身成為 STEAM 教育工作者,自稱「無可救藥的人文教育理想主義者」的李俊德(Ted Lee)。

Share This Post On

發表

跳至工具列