系統目標
本系統以「看得見、揮得動、點得到」為設計核心，透過 web camera 擷取即時影像， 辨識手部關鍵點與手勢，將空中動作轉換為滑鼠移動、點擊、投影片切換、音量或參數調整、 以及動態簽名驗證等操作。
- 非接觸式操作，降低實體按鍵依賴
- 適合智慧教室、展示系統、醫療與公共設備介面
- 可整合 AI 視覺模型，擴充更多辨識功能
01
web_camera 無接觸虛擬人機介面 (Touchless HMI) 系統製作
系統特色
虛擬滑鼠
捏合點擊
揮手換頁
旋轉調參
空中簽名
響應式畫面
前端主頁採單頁式互動介面，搭配 CSS 自訂視覺風格與 JavaScript 事件控制， 讓報告內容不只是靜態文件，而是具有展示效果的資訊系統作品。
02
資訊專案結構說明
專案目錄
touchless-hmi/ ├─ index.html → 主介面與報告內容 ├─ styles.css → 自訂樣式、版面與動畫 ├─ app.js → 手勢互動邏輯與示範控制 └─ assets/ ├─ img/ → 圖示、流程圖、簡報圖片 └─ model/ → 手勢模型或設定檔（可擴充）
模組分工
index.html
負責頁面結構、報告章節、系統說明與互動區域。
styles.css
負責色彩設計、RWD 響應式排版、卡片、按鈕與視覺層次。
app.js
負責攝影機控制、虛擬游標、手勢狀態、簽名驗證與示範流程。
03
資訊系統環境圖 (UML) 與程式邏輯說明
系統環境圖（UML 示意）
程式邏輯流程
- 使用者啟動系統並允許瀏覽器使用攝影機。
- 系統持續擷取影像 frame，送入手勢辨識模組分析。
- 辨識出食指位置後，更新虛擬游標位置。
- 若偵測到大拇指與食指距離縮短，判定為捏合點擊。
- 若偵測到揮手方向，切換上一頁或下一頁投影片。
- 若偵測到手掌旋轉角度改變，調整音量或機器參數。
- 若進入簽名模式，記錄手部軌跡並進行註冊/驗證比對。
核心演算法說明
游標控制
將食指尖座標映射為畫面座標，經平滑化後驅動虛擬游標移動。
捏合點擊
計算食指尖與大拇指尖的距離，低於門檻值時觸發 click event。
旋轉調參
根據手掌傾斜角與移動方向，改變系統參數的增減。
空中簽名
擷取連續軌跡點，建立簽名樣板，驗證時比對路徑形狀與節奏。
04
全系統功能
虛擬滑鼠 / 鍵盤
透過食指移動控制游標，大拇指與食指捏合代表「點擊」，可模擬基本滑鼠操作。
空中手勢切換
左右揮手可切換簡報或頁面內容，適合課堂展示與無接觸投影操作。
旋轉手掌調整參數
藉由手掌傾斜角度與方向，調整音量、亮度或工控系統中的設備參數。
動態簽名驗證
使用者在空中揮動手部形成軌跡，系統可記錄簽名並做身份驗證。
05
互動示範區
Touchless HMI 主介面示範
待命中
空中簽名註冊 / 驗證（示意）
此區以滑鼠或手指在畫布上模擬空中簽名軌跡，展示註冊與驗證流程。
尚未進行簽名比對。
功能對應表
| 手勢 / 行為 | 辨識依據 | 對應動作 |
|---|---|---|
| 食指移動 | index finger tip 座標 | 更新虛擬游標 |
| 大拇指 + 食指捏合 | 距離閾值低於門檻 | 觸發 click |
| 揮手 | 水平位移方向與速度 | 切換投影片 |
| 手掌旋轉 | 手掌傾角變化 | 調整音量 / 參數 |
| 空中簽名 | 連續軌跡點序列 | 身份驗證 |
實作成果截圖
以下三張畫面依「主畫面 → 手部骨架追蹤 → 虛擬鍵盤輸入」流程平均排版呈現，讓整份報告閱讀時更直觀、也更容易對照各功能模組。
成果畫面 01
成果畫面 02
成果畫面 03
06
使用 AI 工具對話連結
AI 對話分享連結
本專案開發過程中使用 AI 工具協助進行系統規劃、版面設計、功能分析與 Trouble Shooting。 以下為本次作業實際使用的 ChatGPT 對話分享連結：
點擊上方連結可直接查看本作業相關的 AI 對話紀錄與協作過程。
AI 對話分享截圖
07
Trouble Shooting 與學習心得
Trouble Shooting
問題 1：攝影機無法啟動
原因可能為瀏覽器未授權、裝置被其他程式占用，或未在 HTTPS / localhost 環境下執行。
解法：確認瀏覽器權限、關閉其他攝影機程式，並使用 localhost 啟動專案。
問題 2：手勢辨識不穩定
光線不足、背景雜亂、手掌離鏡頭太遠，都可能導致 landmark 偵測不準。
解法：改善照明、讓手掌完整入鏡、降低背景干擾並加入平滑演算法。
問題 3：捏合點擊誤判
僅以單一距離判定容易在移動中誤觸。
解法：加入距離門檻 + 持續時間 + 冷卻時間的判斷機制。
問題 4：簽名驗證一致性不足
不同次簽名的速度、大小與角度差異會造成比對困難。
解法：將軌跡做正規化處理，並使用多次樣本建立簽名模板。
學習心得
透過本次作業，我理解到前端網頁不只是靜態頁面，也可以整合攝影機、AI 視覺辨識與互動控制， 建立更接近實務應用的人機介面系統。從規劃介面、設計邏輯，到思考實際辨識流程， 我學到如何把「手勢」轉換成「系統命令」，並思考系統穩定性與使用者體驗。
我也發現 Trouble Shooting 是完成專案非常重要的一部分，因為即使程式能執行， 若沒有處理光線、誤判、延遲與權限問題，系統仍然難以真正使用。 因此這次作業不只訓練我寫程式，更訓練我用系統分析的角度完成一個完整作品。