# 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)  # 포트 번호 변경
```

## 라이선스

이 프로젝트는 교육 및 연구 목적으로 자유롭게 사용할 수 있습니다.