拍貼機系統 P!X 印一下

2025-07-26

專案

1.5k 詞

0 瀏覽次數

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

運作流程

GitHub 連結

🧩 系統原理與架構

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

主要流程

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

🔌 技術整合

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 主程式
├── config.py            # 主程式設定
├── static/              # 前端網頁
│   ├── simulate_coin_page.html    # 管理端頁面
│   ├── upload.html       # 上傳照片頁面
├── templates/           # 模板圖層
├── qr_codes/            # QRCode 票券
├── uploads/             # 上傳照片

🚀 特色與未來規劃

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

現場圖片

標籤