← 컨트롤 화면발표용 문서 →

소스코드 받기

Digital Roomspray의 ESP32 펌웨어와 모바일 컨트롤 화면 전체 코드입니다. 팀원 누구든 받아서 본인 환경에서 빌드·실행할 수 있도록 설계되었습니다.

Full Source · 23 KB
digital-roomspray-source.zip
⬇ ZIP 다운로드
펌웨어(_firmware/) + 웹 컴포넌트(components/) + 셋업 README 포함. 빌드 캐시·node_modules는 제외되어 있습니다.

📦 포함된 파일

minjae/
├── README.md 전체 가이드
├── page.tsx 진입점
├── components/
│ ├── MobileControl.tsx 메인 컨트롤 UI
│ ├── HeartRateCamera.tsx 카메라 PPG 측정
│ └── HelpSheet.tsx 사용설명서 모달
└── _firmware/
├── README.md 펌웨어 빌드법
├── platformio.ini
└── src/main.cpp BLE Peripheral 단일 파일

① ESP32 펌웨어 빌드

PlatformIO CLI로 한 줄 빌드·업로드. VSCode 확장에 의존하지 않습니다.

brew install platformio
# 또는 Windows / Linux
pip install -U platformio
cd _firmware
pio run --target upload
pio device monitor   # 부팅 로그 확인

업로드 후 시리얼에 [BLE] ✅ Advertising as 'DigitalRoomspray'가 보이면 성공입니다.

② 웹 컨트롤 화면 띄우기

Next.js 16 (App Router) + React + Tailwind CSS 환경을 가정합니다. 본인 프로젝트에 components/ 폴더를 복사한 뒤 다음과 같이 라우트에 배치하세요.

'use client';
import MobileControl from './components/MobileControl';

export default function Page() {
  return <MobileControl />;
}
HTTPS 또는 localhost에서 접속해야 Web Bluetooth가 동작합니다. iOS Safari/Chrome은 미지원 — Chrome(데스크탑) 또는 Chrome(안드로이드)를 사용하세요.

③ 페어링 & 동작 확인

  1. 웹 페이지 하단 🔵 ESP32 연결 버튼 클릭
  2. 브라우저 팝업에서 DigitalRoomspray 선택 → 페어링
  3. 상단 인디케이터가 초록색 ● 으로 바뀌고 큰 심박수 옆에 ● LIVE 표시
  4. 분사 버튼 누르면 시리얼에 [CMD] mode=... ch=... fan=... 출력

📡 BLE 프로토콜 요약

Nordic UART Service UUID를 차용. 폰 → ESP32 명령은 다음 JSON 한 줄:
{
  "mode": "focus",
  "ch": 2,
  "fan": 204,
  "dur": 27,
  "hr": 72
}
ESP32는 1초마다 {hr, ch, t?, h?, aq?} 형태로 Notify를 보냅니다. 결선되지 않은 센서 필드는 생략됩니다(웹은 자동 감지).
학습/포트폴리오 용도로 자유롭게 사용 가능합니다.
NimBLE-Arduino · ArduinoJson · React · Next.js는 각자의 오픈소스 라이선스를 따릅니다.