本文我們來實作可以進行互動的螢幕。怎麼個互動法？這次以兩種為例：

  • 透過 RFID ，刷卡感應後，讓本來循環播放 A 影片的螢幕，改為播放 B 影片。
  • 透過超聲波回聲判斷，人靠近（或手懸浮在感應區域）時，讓本來循環播放 A 影片的螢幕，改為播放 B 影片。

為了達到以上效果，我們這次需要的設備除了顯示器以外還需要：

  • 數位看板播放器（Digital Signage Players），此處我們選用 BrightSign 的 HD225。
  • 感應 RFID 並回傳訊號的傳感設備。此處我們不買現成產品，選用微控制器 ESP-WROOM-32 + RFID 傳感模塊 MFRC522 來土炮一個。
  • 感應超聲波並回傳訊號的傳感設備。此處我們也不買現成產品，選用微控制器 NodeMCU + 超聲波傳感模塊 HCSR04 來土炮一個。

RFID 互動螢幕

我們的邏輯很簡單：RFID 模塊感應讀取輸入，把 ID 傳入 ESP-WROOM-32 判斷，如果是我們要的 ID，則輸出高電平訊號。當 HD225 讀到高電平訊號傳入，觸發後續影像內容。

首先來搞定 RFID 的部分。我們 ESP-WROOM-32 使用 Arduino IDE 來進行編譯跟燒錄，所以有幾個前置準備事項：

  • 在 Preference 中的 Additional boards manager URLs 中填入 https://dl.espressif.com/dl/package_esp32_index.json
    brightsign6
  • Board Manager 搜尋 esp32，找到 esp32 by Espressif Systems，安裝它
    brightsign5
  • Board 我們選擇 ESP32 Dev Module
    brightsign3
  • Library 搜尋 MFRC522，找到 MFRC522 by GithubCommunity，安裝它

然後找出我們這顆控制器的腳位圖：

wroom-32

對照腳位，把 MFRC522 接上：

  • SCK 接入 GPIO18
  • MOSI 跟 MISO 分別接入 GPIO23、GPIO19
  • IRQ 我們此例用不到，不接
  • 3.3V 跟 GND 按圖接入
  • SDA 與 RST 可隨選

然後我們就可以開始編程了。程式內容請參考：

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
#include <SPI.h>
#include <MFRC522.h>

#define SS_PIN 5     // SDA
#define RST_PIN 15   // RST
#define LED 25

MFRC522 mfrc522(SS_PIN, RST_PIN);  // 建立 RFID 物件

void setup() {
  Serial.begin(9600);
  SPI.begin();              // 啟動 SPI
  mfrc522.PCD_Init();       // 初始化 RC522
  pinMode(LED, OUTPUT);
  Serial.println("Start reading!");
}

void loop() {
  // 檢查是否有新卡片
  if (!mfrc522.PICC_IsNewCardPresent()) return;
  // 檢查是否能讀到卡
  if (!mfrc522.PICC_ReadCardSerial()) return;

  String uidStr = "";
  for (byte i = 0; i < mfrc522.uid.size; i++) {
    if (mfrc522.uid.uidByte[i] < 0x10) uidStr += "0";  // 補0對齊
   uidStr += String(mfrc522.uid.uidByte[i], HEX);
  }
  uidStr.toUpperCase();  // 讓輸出一致是大寫

  Serial.print("卡片 UID：");
  Serial.println(uidStr);
  if(uidStr == "445A478A"){
    digitalWrite(LED, HIGH);
    delay(1000);
    digitalWrite(LED, LOW);
  }
  // 停用卡片
  mfrc522.PICC_HaltA();
  delay(500);
}

其中，LED 的腳位在接入 HD225 之前就是接著 LED 來進行測試。當 LED 點亮，就表示該腳位輸出了 3.3v 高電平。後來就懶得改變數名稱了，看得懂就好 :)

傳感器完成後，我們將該輸出腳位接到 HD225 的 GPIO 上。（為了這個需要，我們必須另外準備 pitch 為 3.5mm 的端子座。官方建議買 4 或 6 pin 的，因為 12 pin 會很難拆）除了輸出腳位以外，記得還要共地，所以 ESP 的 GND 也要接一條到 HD225 的 GND。

最後我們到 HD225 的控制後台 BrightAuthor:connected 進行設定。因為我把上述 LED 腳位接入 HD225 的第六 pin，根據對應，我們要設定 BUTTON 3。腳位請參考：

brightsign2

將 BUTTON 3 的 Trigger Event On Button 設定為 Down，就會在高電平的時候觸發該判斷。至於為什麼他要預設你的 GPIO 接的是按鈕，我也覺得這樣頗誤導人。

brightsign1

至此，設置完畢！

超聲波互動螢幕

一樣先捋一捋邏輯：超聲波模塊持續感應是否有物體靠近，當有東西靠近到足夠距離，請 NodeMCU 送出一個高電平訊號。當 HD225 讀到高電平訊號傳入，觸發後續影像內容。

首先來搞定超聲波測距的部分。我們 NodeMCU 一樣使用 Arduino IDE 來進行編譯跟燒錄，所以有幾個前置準備事項：

  • 在 Preference 中的 Additional boards manager URLs 中填入 http://arduino.esp8266.com/stable/package_esp8266com_index.json
  • Board Manager 安裝 esp8266 by ESP8266 community
  • Board 我們選擇 NodeMCU v1.0
  • Library 裝Bifrost.Arduino.Sensors.HCSR04

接線與程式部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#include <hcsr04.h>

#define TRIG_PIN D2
#define ECHO_PIN D1
#define LED D5

HCSR04 hcsr04(TRIG_PIN, ECHO_PIN, 20, 4000);

void setup(){
    Serial.begin(9600);
    pinMode(LED, OUTPUT);
}

void loop() {
  int distance = hcsr04.distanceInMillimeters();
	Serial.println(distance);
  if(distance<50){
    digitalWrite(LED, HIGH);
  }else{
    digitalWrite(LED, LOW);
  }

  delay(250);
}

其中的 LED 比照前例，一開始用 LED 測試，後來直接作為輸出，跟 HD225 溝通。

控制後台 BrightAuthor:connected 的設定跟前例的邏輯完全一樣，注意腳位不要搞錯就好。

以上！