讀書監督系統

Python 電腦視覺 + ESP32 TFT LCD 即時顯示

系統架構總覽

三種偵測狀態

Part 1
Python 程式說明

camera_project/test.py

Python 環境建置

安裝所需套件：

pip install opencv-python pyserial

Haar Cascade 偵測器

# 載入偵測器（OpenCV 內建路徑）
face_cascade = cv2.CascadeClassifier(
    cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')
eye_cascade  = cv2.CascadeClassifier(
    cv2.data.haarcascades + 'haarcascade_eye.xml')

偵測流程

人臉偵測

# 擷取畫面並轉灰階
ret, frame = cap.read()
gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

# 偵測人臉
faces = face_cascade.detectMultiScale(
    gray,
    scaleFactor=1.1,    # 每次縮小 10%，偵測不同大小的臉
    minNeighbors=5,     # 至少 5 個重疊區域才算偵測到
    minSize=(80, 80)    # 忽略太小的區域
)

眼睛偵測與狀態判斷

# 只取臉的上半部來偵測眼睛
eye_roi_gray = gray[y : y + h // 2, x : x + w]

eyes = eye_cascade.detectMultiScale(
    eye_roi_gray, scaleFactor=1.1,
    minNeighbors=5, minSize=(20, 20)
)

eyes_open = len(eyes) >= 1   # 偵測到至少 1 隻眼睛 → 睜眼

if eyes_open:
    status = "READING"         # 張眼 → 讀書中
elif closed_secs >= 3:
    status = "SLEEPING"        # 閉眼超過 3 秒 → 打瞌睡

累積讀書時間

study_seconds = 0
last_study_tick = None

# 在主迴圈中：
if status == "READING":
    if last_study_tick is None:
        last_study_tick = now           # 開始計時
    else:
        study_seconds += int(now - last_study_tick)
        last_study_tick = now           # 累積秒數
else:
    last_study_tick = None              # 非讀書狀態 → 暫停計時

Serial 通訊（Python 端）

import serial
import serial.tools.list_ports

# 自動偵測 ESP32 的 USB 序列埠
def find_esp32_port():
    keywords = ['usbserial', 'CP210', 'CH340']
    for p in serial.tools.list_ports.comports():
        if any(k.lower() in p.device.lower() for k in keywords):
            return p.device
    return None

# 連線（連不上也能繼續用，只是不顯示在螢幕上）
port = find_esp32_port()
esp32 = serial.Serial(port, 9600, timeout=1)

# 每秒傳送一次狀態
message = f'{status},{study_seconds}\n'
esp32.write(message.encode())

Part 2
Arduino IDE 使用

環境建置與燒錄設定

Arduino IDE 安裝

1. 到 arduino.cc/en/software 下載 Arduino IDE 2.x
2. 安裝完成後開啟 Arduino IDE
3. Mac 使用者可能需要安裝 USB 驅動（CH340 或 CP210x）

加入 ESP32 開發板支援

1. 開啟 Arduino IDE → 偏好設定（Mac: Cmd+,）
2. 在「額外開發板管理員網址」填入：

https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

3. 工具 → 開發板 → 開發板管理員
4. 搜尋 esp32，安裝 esp32 by Espressif Systems

安裝 TFT_eSPI 函式庫

1. Arduino IDE → 工具 → 程式庫管理員（或 Ctrl+Shift+I）
2. 搜尋 TFT_eSPI，安裝 by Bodmer
3. 關鍵步驟：將專案的 User_Setup.h 複製到函式庫資料夾

# 複製 User_Setup.h（覆蓋原檔）
cp camera_project/esp32/User_Setup.h \
   ~/Documents/Arduino/libraries/TFT_eSPI/User_Setup.h

:: 複製 User_Setup.h（覆蓋原檔）
copy camera_project\esp32\User_Setup.h ^
     Documents\Arduino\libraries\TFT_eSPI\User_Setup.h

User_Setup.h 重點

這個檔案告訴 TFT_eSPI 函式庫怎麼跟螢幕溝通：

// 驅動晶片 — ESP32-2432S028 使用 ILI9341
#define ILI9341_DRIVER

// 螢幕尺寸
#define TFT_WIDTH  240
#define TFT_HEIGHT 320

// SPI 腳位（ESP32-2432S028 內建接線，不可更改）
#define TFT_MOSI  13
#define TFT_SCLK  14
#define TFT_CS    15
#define TFT_DC     2
#define TFT_RST   -1    // 連到 EN，不需獨立腳位
#define TFT_BL    21    // 背光

燒錄到 ESP32

1. Arduino IDE 開啟 Arduino/study_monitor/study_monitor.ino
2. 工具 → 開發板 → 選擇 ESP32 Dev Module
3. 工具 → Port → 選擇 ESP32 的序列埠
   Mac: /dev/cu.usbserial-XXXX　Windows: COM3（依實際而定）
4. 工具 → Upload Speed → 921600
5. 按下 上傳 按鈕（→ 箭頭圖示）
6. 等待編譯 + 上傳完成，螢幕顯示 "Waiting for PC..."

Part 3
Arduino 程式碼

Arduino/study_monitor/study_monitor.ino

Arduino 程式架構

接收 Serial 資料

void loop() {
  // 格式：STATUS,seconds\n
  if (Serial.available()) {
    String data = Serial.readStringUntil('\n');
    data.trim();
    int comma = data.indexOf(',');
    if (comma > 0) {
      currentStatus = data.substring(0, comma);      // "READING"
      studySeconds  = data.substring(comma + 1).toInt(); // 125
      lastReceive   = millis();
    }
  }

  // 狀態改變 → 完整重繪
  if (currentStatus != prevStatus) {
    fullRedraw();
  }
  // 同狀態但秒數更新 → 局部更新（減少閃爍）
  else if (studySeconds != prevSeconds && currentStatus == "READING") {
    updateTimeOnly();
  }
}

READING 畫面 — 綠色主題

void drawReadingScreen() {
  drawHeader("Reading", C_DARKGREEN);     // 綠色橫幅

  // 大時鐘（使用 Font 7，最大字體）
  char timeBuf[12];
  formatTime(studySeconds, timeBuf);       // "12:34" 或 "1:23:45"
  tft.setTextColor(C_GREEN, C_BG);
  tft.drawString(timeBuf, x, 60, 7);

  drawCentered("Keep going!", 145, C_GRAY, 2);

  // 60 分鐘目標進度條
  drawProgressBar(studySeconds);
}

警告畫面 — 閃爍效果

// SLEEPING 和 AWAY 每 500ms 閃爍一次
if ((currentStatus == "SLEEPING" || currentStatus == "AWAY") &&
    millis() - blinkTimer > 500) {
  blinkTimer = millis();
  blinkOn = !blinkOn;       // 切換顯示/隱藏文字
  fullRedraw();
}

// 10 秒沒收到資料 → 自動回到等待畫面
if (lastReceive > 0 && millis() - lastReceive > 10000) {
  currentStatus = "WAIT";
}

目標進度條

#define GOAL_MIN 60    // 目標讀書 60 分鐘

void drawProgressBar(int seconds) {
  int goalSec  = GOAL_MIN * 60;
  int progress = constrain(seconds, 0, goalSec);
  int fillW    = (long)BAR_W * progress / goalSec;

  // 顏色隨進度改變
  uint16_t barColor =
    (progress < goalSec / 3)     ? C_ORANGE :    // 0~33%：橘色
    (progress < goalSec * 2 / 3) ? C_YELLOW :    // 33~66%：黃色
                                   C_GREEN;       // 66~100%：綠色

  tft.fillRect(BAR_X, BAR_Y, fillW, BAR_H, barColor);

  // 百分比文字
  int pct = (long)progress * 100 / goalSec;
  sprintf(pctBuf, "%d%%", pct);
}

實際操作步驟

1. 安裝 TFT_eSPI 函式庫，覆蓋 User_Setup.h
2. Arduino IDE 開啟 study_monitor.ino，燒錄到 ESP32
3. ESP32 螢幕顯示 "Waiting for PC..."
4. 終端機執行 python3 camera_project/test.py
5. Python 自動偵測 ESP32，開始傳送資料
6. ESP32 螢幕即時顯示讀書狀態與累積時間

專案檔案結構

張順捷/
├── camera_project/
│   ├── test.py                 ← Python 主程式（人臉偵測 + Serial 傳送）
│   └── esp32/
│       ├── User_Setup.h        ← TFT_eSPI 設定檔（必須覆蓋）
│       ├── serial_test.py      ← Serial 通訊測試（假資料）
│       └── display.ino         ← 舊版顯示程式（參考用）
│
├── Arduino/
│   └── study_monitor/
│       └── study_monitor.ino   ← ESP32 顯示程式（新版，本次新增）
│
└── requirements.txt            ← Python 套件清單

Thank You!

讀書監督系統 — 技術說明完畢