Initial commit

web_UI/README.md

@@ -0,0 +1,179 @@
+# LoadCell 실시간 무게 측정 웹 GUI
+
+Arduino HX711 로드셀 데이터를 실시간으로 웹 브라우저에 그래프로 표시하는 애플리케이션입니다.
+
+## 시스템 구조
+
+```
+[Arduino + HX711] --시리얼--> [Python 서버] --WebSocket--> [웹 브라우저]
+                              (Flask + pyserial)        (Chart.js)
+```
+
+## 기능
+
+- 실시간 무게 데이터 그래프 표시
+- 현재 무게, 최대값, 평균값 통계
+- 영점 조절, 일시정지, 재시작 원격 제어
+- 시스템 로그 표시
+- 반응형 웹 디자인
+
+## 설치 방법
+
+### 1. Python 환경 설정
+
+Python 3.7 이상이 필요합니다.
+
+```bash
+# 가상환경 생성 (선택사항, 권장)
+python -m venv venv
+
+# 가상환경 활성화
+# Windows:
+venv\Scripts\activate
+# macOS/Linux:
+source venv/bin/activate
+
+# 필요한 패키지 설치
+pip install -r requirements.txt
+```
+
+### 2. Arduino 준비
+
+1. Arduino IDE에서 `LoadCellMeasure.ino` 파일을 Arduino에 업로드
+2. Arduino와 PC가 USB로 연결되어 있는지 확인
+3. Arduino IDE의 시리얼 모니터는 **닫아야 합니다** (포트 충돌 방지)
+
+## 실행 방법
+
+### 1. Python 서버 실행
+
+```bash
+cd web_gui
+python app.py
+```
+
+서버가 시작되면 다음과 같은 메시지가 표시됩니다:
+
+```
+Arduino 포트 발견: COM3
+시리얼 포트 연결 성공!
+
+=================================
+웹 서버 시작: http://localhost:5000
+=================================
+```
+
+### 2. 웹 브라우저로 접속
+
+브라우저에서 다음 주소로 접속:
+
+```
+http://localhost:5000
+```
+
+또는 같은 네트워크의 다른 기기에서:
+
+```
+http://[서버PC의IP주소]:5000
+```
+
+## 사용 방법
+
+### 웹 인터페이스 기능
+
+1. **실시간 그래프**: 최근 50개의 무게 데이터를 실시간으로 표시
+2. **현재 무게**: 현재 측정 중인 무게 값
+3. **통계**: 최대값과 평균값 자동 계산
+4. **제어 버튼**:
+   - **영점 조절**: 로드셀 위의 물건을 치우고 영점 재설정
+   - **일시정지**: 측정 일시 중지
+   - **재시작**: 측정 재개
+   - **그래프 초기화**: 그래프와 통계 데이터 초기화
+5. **시스템 로그**: Arduino와 서버의 메시지 표시
+
+### Arduino 시리얼 명령어
+
+웹 인터페이스 대신 Arduino IDE 시리얼 모니터에서도 제어 가능:
+
+- `c`: 영점 조절
+- `p`: 일시정지
+- `r`: 재시작
+- `+`: 측정 속도 빠르게
+- `-`: 측정 속도 느리게
+- `h`: 도움말
+
+## 프로젝트 구조
+
+```
+web_gui/
+├── app.py                  # Flask 백엔드 서버
+├── requirements.txt        # Python 패키지 목록
+├── templates/
+│   └── index.html         # 웹 프론트엔드
+└── README.md              # 이 파일
+```
+
+## 문제 해결
+
+### Arduino 포트를 찾을 수 없습니다
+
+1. Arduino가 USB로 연결되어 있는지 확인
+2. Arduino IDE에서 올바른 포트가 선택되어 있는지 확인
+3. 다른 프로그램(Arduino IDE 시리얼 모니터 등)이 포트를 사용 중인지 확인
+4. `app.py` 를 수정하여 포트를 수동으로 지정:
+
+```python
+# app.py 마지막 부분 수정
+port = "COM3"  # 또는 /dev/ttyUSB0 (Linux), /dev/cu.usbserial (macOS)
+```
+
+### 웹 페이지가 열리지 않습니다
+
+1. Python 서버가 정상적으로 실행 중인지 확인
+2. 방화벽이 5000 포트를 차단하고 있는지 확인
+3. 브라우저 캐시를 삭제하고 새로고침 (`Ctrl+F5`)
+
+### 데이터가 표시되지 않습니다
+
+1. Arduino 시리얼 모니터가 닫혀있는지 확인 (포트 충돌)
+2. Arduino가 제대로 작동하는지 Arduino IDE 시리얼 모니터로 먼저 확인
+3. 브라우저 개발자 도구(F12)의 Console 탭에서 에러 확인
+
+## 기술 스택
+
+### 백엔드
+- **Flask**: 웹 서버 프레임워크
+- **pyserial**: Arduino 시리얼 통신
+- **Flask-SocketIO**: 실시간 WebSocket 통신
+- **eventlet**: 비동기 서버 처리
+
+### 프론트엔드
+- **Chart.js**: 실시간 그래프 라이브러리
+- **Socket.IO**: 실시간 양방향 통신
+- **HTML/CSS/JavaScript**: 웹 인터페이스
+
+## 커스터마이징
+
+### 그래프 데이터 포인트 수 변경
+
+`templates/index.html` 파일에서:
+
+```javascript
+const maxDataPoints = 50; // 원하는 숫자로 변경
+```
+
+### 측정 간격 조절
+
+Arduino 코드의 `measureDelay` 변수 조절 또는 웹에서 `+`/`-` 키로 조절
+
+### 서버 포트 변경
+
+`app.py` 마지막 부분:
+
+```python
+socketio.run(app, host='0.0.0.0', port=5000, debug=False)  # 포트 번호 변경
+```
+
+## 라이선스
+
+이 프로젝트는 교육 및 연구 목적으로 자유롭게 사용할 수 있습니다.