180 lines
4.6 KiB
Markdown
180 lines
4.6 KiB
Markdown
# 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) # 포트 번호 변경
|
|
```
|
|
|
|
## 라이선스
|
|
|
|
이 프로젝트는 교육 및 연구 목적으로 자유롭게 사용할 수 있습니다.
|