LoadCell_Measure_Local/web_UI

LoadCell 실시간 무게 측정 웹 GUI

Arduino HX711 로드셀 데이터를 실시간으로 웹 브라우저에 그래프로 표시하는 애플리케이션입니다.

시스템 구조

[Arduino + HX711] --시리얼--> [Python 서버] --WebSocket--> [웹 브라우저]
                              (Flask + pyserial)        (Chart.js)

기능

• 실시간 무게 데이터 그래프 표시
• 현재 무게, 최대값, 평균값 통계
• 영점 조절, 일시정지, 재시작 원격 제어
• 시스템 로그 표시
• 반응형 웹 디자인

설치 방법

1. Python 환경 설정

Python 3.7 이상이 필요합니다.

# 프로젝트 루트에서 web_UI 폴더로 이동
cd web_UI

(# 가상환경 생성 (이미 venv 폴더가 있다면 건너뛰기))
(python -m venv venv)

# 가상환경 활성화
# Windows (Command Prompt):
venv\Scripts\activate

# Windows (PowerShell):
.\venv\Scripts\Activate.ps1

# macOS/Linux:
source venv/bin/activate

# 가상환경 활성화 확인 (프롬프트에 (venv) 표시됨)
# 필요한 패키지 설치
pip install -r requirements.txt

참고: 가상환경을 비활성화하려면 deactivate 명령어를 사용하세요.

---

2. Arduino 준비

1. Arduino IDE에서 LoadCellMeasure.ino 파일을 Arduino에 업로드
2. Arduino와 PC가 USB로 연결되어 있는지 확인
3. Arduino IDE의 시리얼 모니터는 닫아야 합니다 (포트 충돌 방지)

---

실행 방법

1. Python 서버 실행 (PowerShell)

# web_UI 폴더에서 가상환경이 활성화된 상태로 순서대로 실행
cd web_UI
.\venv\Scripts\Activate.ps1
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_UI/
├── app.py                      # Flask 백엔드 서버
├── requirements.txt            # Python 패키지 목록
├── venv/                       # Python 가상환경
├── templates/
│   └── loadcell_measure.html   # 웹 프론트엔드
└── README.md                   # 이 파일

문제 해결

Arduino 포트를 찾을 수 없습니다

1. Arduino가 USB로 연결되어 있는지 확인
2. Arduino IDE에서 올바른 포트가 선택되어 있는지 확인
3. 다른 프로그램(Arduino IDE 시리얼 모니터 등)이 포트를 사용 중인지 확인
4. app.py 를 수정하여 포트를 수동으로 지정:

# 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/loadcell_measure.html 파일에서:

const maxDataPoints = 50; // 원하는 숫자로 변경

측정 간격 조절

Arduino 코드의 measureDelay 변수 조절

서버 포트 변경

app.py 마지막 부분:

socketio.run(app, host='0.0.0.0', port=5000, debug=False)  # 포트 번호 변경