Merge pull request #4 from iris-starry/main

feat: 아두이노와 연결

app.py

@@ -1,8 +1,12 @@
-from flask import Flask, render_template
-import json
+from flask import Flask, render_template, request
+import serial
+import time
 
 app = Flask(__name__)
 
+# 시리얼 포트 설정 (Windows의 경우 'COM3', 'COM4' 등, Linux의 경우 '/dev/ttyUSB0', '/dev/ttyACM0' 등)
+ser = serial.Serial('COM3', 9600)
+
 @app.route('/')
 def render_index():
     return render_template('index.html')
@@ -31,5 +35,11 @@ def render_ending():
 def render_credit():
     return render_template('credit.html')
 
+@app.route('/trigger', methods=['POST'])
+def trigger_relay():
+    # Arduino에 신호를 보냅니다.
+    ser.write(b'1')  # '1'이라는 신호를 보냅니다. Arduino에서 이 신호를 감지하도록 설정
+    return {'status': 'success'}
+
 if __name__ == '__main__':
-    app.run()
+    app.run()

static/js/progress.js

@@ -3,7 +3,6 @@ const urlParams = new URLSearchParams(queryString);
 const type = urlParams.get('type');
 const isSuccess = Boolean(urlParams.get('isSuccess'));
 
-
 const potionImg = document.querySelector('.potion-img');
 const progress = document.querySelector('.progress');
 const label = document.querySelector('.label');
@@ -23,19 +22,32 @@ const updateProgress = setInterval(() => {
     if (progressValue > 100) progressValue = 100;
     progress.innerHTML = progressValue + "%";
 
-
-    if (progressValue === 100) stopPreogress();
+    if (progressValue === 100) stopProgress();
 }, 1000);
 
-const stopPreogress = () => {
-    label.innerHTML = '추출 완료!'
-    progress.innerHTML = '디스펜서에서 나오는 물약을 마시고, 이미지를 클릭하세요.'
+const stopProgress = () => {
+    label.innerHTML = '추출 완료!';
+    progress.innerHTML = '디스펜서에서 나오는 물약을 마시고, 이미지를 클릭하세요.';
     clearInterval(updateProgress);
+
+    // progress가 100%가 되었을 때 서버에 신호를 보냅니다.
+    fetch('/trigger', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({trigger: true})
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log(data.status); // 성공 메시지 출력
+    })
+    .catch(error => console.error('Error:', error));
 }
 
 potionImg.addEventListener('click', () => {
     // 100%가 아닐 땐 클릭이벤트 없음
     if (progressValue !== 100) return;
 
     window.open(`/ending?type=${type}&isSuccess=${isSuccess}`, '_top');
-})
+});