這是一套結合網站、美編與硬體控制的全自動拍貼機，專為活動現場、展覽或自助服務設計，讓使用者能輕鬆拍照、選擇模板並立即列印成品。系統整合軟硬體，流程自動化，並支援多種互動功能。

運作流程

gitgub連結

🧩 系統原理與架構

本系統以 Python Flask 為後端主體，結合 Arduino 控制投幣與硬體訊號，並透過熱感應印表機完成現場列印。流程自動化，並以 ngrok 實現公網穿透，讓手機可即時上傳照片。

主要流程

  1. 投幣啟動：使用者投幣 40 元，投幣機將訊號傳給 Arduino，Arduino 透過序列埠（Serial）傳送 coin_ok 訊號給主機。
  2. QRCode 產生與列印：主機收到訊號後，產生唯一 Token 與專屬上傳網址，並生成 QRCode 票券（含說明、Logo、簽名等），自動列印並切紙。
  3. 照片上傳與模板選擇：使用者掃描 QRCode，進入網頁上傳照片並選擇拍貼模板，支援即時預覽與互動。
  4. 列印成品：完成後自動將美編照片傳送至印表機列印，現場立即取件。

🔌 技術整合

  • Flask 網站系統：提供照片上傳、模板選擇、即時預覽與互動介面。
  • 印表機控制：支援多台印表機（如 Xprinter、EPSON），可自動裁切。
  • Arduino 投幣與列印指令：硬體負責投幣偵測、列印流程控制與狀態回饋。
  • 多種主題模板 + 圖層疊加處理：支援多款拍貼模板，並可自訂圖層與特效。
  • 自動 QRCode 產生與票券設計：每次投幣自動產生專屬 QRCode，票券含說明、簽名、直橫排文字、Logo。
  • ngrok 公網穿透：自動啟動 ngrok，讓外部手機可連線上傳照片。
  • Token 防重複機制：每張票券唯一 Token，防止重複上傳與列印。
  • 多執行緒與序列通訊：背景監控硬體訊號，並確保 Token 持久化與執行緒安全。

🛠️ 系統架構

  • 前端：RWD 響應式網頁（HTML/CSS/JavaScript），支援手機掃描 QRCode 操作。
  • 後端：Python Flask，負責 API、圖片處理、列印指令下發。
  • 硬體：Arduino（投幣、訊號控制）、熱感應印表機、顯示模組。
  • 通訊：USB/Serial 連接 Arduino 與印表機，HTTP 通訊前後端，ngrok 公網穿透。

⚡ Arduino 與投幣機連接與偵測原理

  • 投幣機：將投幣訊號（為用上拉電阻完成脈衝接收）連接至 Arduino 的數位輸入腳位。
  • Arduino 程式：偵測到投幣訊號時，透過 Serial（如 COM7, 9600 baud）傳送 coin_ok 字串給主機。
  • 主機（Flask）：背景執行緒持續監控 Serial 埠，收到 coin_ok 後自動產生 QRCode 並列印，並可回傳狀態訊息給 Arduino。
  • 安全與防呆：主機會記錄已用 Token，防止重複上傳與列印，並於異常時自動復原。

連接示意圖

graph TD;
    A[投幣機] -- 投幣訊號 --> B(Arduino);
    B -- Serial (coin_ok) --> C[主機 (Flask)];
    C -- QRCode 產生與列印 --> D[熱感應印表機];
    D -- 列印完成 --> C;
    C -- 狀態回傳 --> B;
    B -- 控制訊號 --> A;

📂 主要檔案結構

.
├── app.py               # Flask 主程式
├── confing.py           # 主程式調取的設定
├── static/              # 前端網頁
│   ├── simulate_coin_page.html    # 管理員頁面
│   ├── upload.html       # 上傳照片頁面
├── templates/          #裡面放不同模板
├── qr_codes/            # 儲存產生的 QRCode 票券
├── uploads/             # 儲存上傳的照片

🚀 特色與未來規劃

  • 支援多模板、動態特效與自訂票券設計
  • 可以增加雲端備份與下載功能
  • 支援多語系介面
  • 優化列印速度與美編演算法
  • 增加現場狀態顯示與錯誤自動復原