아두이노 우노 & WiFi 실드로 웹에서 실시간 온도 모니터링 - 시리얼 통신 활용

부품 및 소모품

부품	수량
Arduino UNO	1
PHPoC WiFi Shield 2 for Arduino	1
Adafruit DS18B20 방수 온도 센서	1
점퍼 와이어	1

프로젝트 개요

Serial.println(temperature)만으로 웹에 온도 전송 가능. 내장 웹 시리얼 플로터(Web Serial Plotter)로 웹 프로그래밍 없이 브라우저에서 온도 시각화.

초보자는 와이파이와 센서 기초 학습에 좋음: PHPoC 와이파이 튜토리얼, DS18B20 튜토리얼

시연

.

작동 원리

• 아두이노가 센서에서 온도 읽어 시리얼로 전송
• 모바일/PC 브라우저에서 웹 시리얼 플로터 접속
• 온도 데이터가 자동으로 웹으로 포워딩
• 웹에서 온도 그래프 시각화
• 기본적으로 아두이노 IDE 시리얼 플로터와 동일 작동. X축/Y축 제목, 온도 범위, 표시 샘플 수 등 커스터마이징은 설정 페이지에서 가능

단계별 지침

1. 배선

• PHPoC WiFi Shield 2 또는 PHPoC Shield 2를 아두이노에 장착
• 회로도 섹션 이미지 참조해 배선

2. 아두이노 코드 컴파일 및 업로드

"Arduino Code - Short Sampling Period" 코드 참조

3. 웹 시리얼 플로터 커스터마이징

• PHPoC WiFi Shield의 IP 주소를 브라우저에 입력해 웹 시리얼 플로터 접속

• "Setup" 링크 클릭해 커스터마이징 페이지로

• 위 이미지처럼 파라미터 설정 후 저장

4. 결과 확인

• Connect 버튼 클릭해 그래프 확인

장기간 온도 모니터링 (일/시간 단위)

샘플링 간격이 초 단위면 시리얼 출력만으로 충분. 하지만 일/시간 단위로 모니터링하려면 그래프 완성까지 기다릴 수 없음.

해결책: 아두이노에 최근 N개 샘플 저장(원형 큐)하고 자주 출력. 예: 100시간 분량 그래프(단위: 시간). 매시간 센서 읽어 큐(길이 100)에 저장. 매초 큐 전체(100개 데이터) 출력 → 100시간 기다리지 않고 최근 100시간 그래프 즉시 확인.

코드는 "Arduino Code - Long Sampling Period (daily, hourly...)" 참조.

초보자를 위한 최고의 아두이노 스타터 키트

초보자용 최고 아두이노 키트 보기

코드

아두이노 코드 - 짧은 샘플링 주기 (초 단위)

#include 
#include 
#include 

#define SAMPLE_INTERVAL 1000  // ms 단위

// 데이터 라인은 아두이노 8번 핀
OneWire oneWire(8);
DallasTemperature sensors(&oneWire);

unsigned long lastSampleTime;

void setup() {
  Serial.begin(9600);
  while(!Serial);  // 시리얼 준비 대기
  sensors.begin();
  Phpoc.begin();   // PHPoC 쉴드 초기화
  lastSampleTime = millis();
}

void loop() {
  if ((millis() - lastSampleTime) > SAMPLE_INTERVAL) {
    sensors.requestTemperatures();
    float temp = sensors.getTempCByIndex(0);
    Serial.println(temp);  // 시리얼로 온도 전송 → 웹으로 자동 포워딩
    lastSampleTime = millis();
  }
}

아두이노 코드 - 긴 샘플링 주기 (일/시간 단위)

#include 
#include 
#include 

#define UPDATE_INTERVAL 1000      // 웹 업데이트 주기 (ms)
#define SAMPLE_INTERVAL 60*60*1000 // 센서 샘플링 주기 (1시간)

// 데이터 라인은 아두이노 8번 핀
OneWire oneWire(8);
DallasTemperature sensors(&oneWire);

unsigned long lastSampleTime;
unsigned long lastUpdateTime;
float temps[100];  // 원형 큐: 최근 100개 샘플 저장
int index = 0;

void setup() {
  Serial.begin(9600);
  while(!Serial);
  sensors.begin();
  Phpoc.begin();
  lastSampleTime = millis();
  lastUpdateTime = millis();
  index = 0;
}

void loop() {
  // 1시간마다 센서 읽어 큐에 저장
  if ((millis() - lastSampleTime) > SAMPLE_INTERVAL) {
    sensors.requestTemperatures();
    float temp = sensors.getTempCByIndex(0);
    temps[index] = temp;
    index = (index + 1) % 100;
    lastSampleTime = millis();
  }
  
  // 1초마다 큐 전체 데이터 시리얼 출력 (최신순)
  if ((millis() - lastUpdateTime) > UPDATE_INTERVAL) {
    for (int i = 0; i < 100; i++) {
      Serial.println(temps[(index - i + 100) % 100]);
    }
    lastUpdateTime = millis();
  }
}

회로도

1. PHPoC WiFi Shield 2 또는 PHPoC Shield 2를 아두이노에 장착
2. 아래 이미지처럼 배선