DS18B20 센서를 이용한 웹 기반 아두이노 온도계 만들기

부품 및 소모품

부품	수량
아두이노 UNO	1
아두이노용 PHPoC WiFi 쉴드 (PHPoC 쉴드로 대체 가능)	1
Adafruit DS18B20 온도 센서	1
4.7kΩ 저항 (Seeed)	1
열수축 튜브	1

프로젝트 개요

초보자인 경우 아두이노 WiFi 튜토리얼과 DS18B20 온도 센서 튜토리얼을 통해 WiFi와 센서 기초를 학습할 수 있습니다. 본 프로젝트는 PHPoC만 사용한 유사 프로젝트에서 확장되었습니다.

데모

웹 브라우저에서 실시간 온도 변화를 시각적으로 확인할 수 있습니다.

데이터 흐름

아두이노 → PHPoC WiFi 쉴드 → 웹 브라우저

아두이노가 센서에서 온도를 읽어 PHPoC WiFi 쉴드로 전송하면, 쉴드는 웹소켓을 통해 웹 브라우저로 데이터를 보냅니다. 자바스크립트 함수가 UI에서 온도 값을 시각화합니다.

참고: PHPoC 쉴드에는 아두이노에서 웹 브라우저로 데이터를 전달하는 내장 프로그램이 있으므로, 이에 대해 별도로 신경 쓸 필요가 없습니다.

필수 작업

PHPoC 쉴드 WiFi 정보 설정 (SSID 및 비밀번호)
PHPoC 쉴드에 새로운 웹 UI 업로드
아두이노 코드 작성

PHPoC 쉴드 WiFi 정보 설정

이 지침을 참조하세요.

PHPoC 쉴드에 웹 UI 업로드

PHPoC 소스 코드 remote_thermometer.php를 다운로드합니다 (코드 섹션 참조).
PHPoC 디버거를 사용해 이 지침에 따라 쉴드에 업로드합니다.

아두이노 코드 작성

다음 세 라이브러리 설치: PHPoC Library for Arduino, OneWire, Dallas Temperature
아두이노 코드 (코드 섹션 참조)를 아두이노에 업로드합니다.

테스트 방법

아두이노 IDE의 시리얼 버튼을 클릭해 IP 주소를 확인합니다.
웹 브라우저에서 https:// IP_주소_입력 /remote_thermometer.php로 접속합니다.
연결 버튼을 클릭하고 테스트합니다.

초보자를 위한 추천 아두이노 스타터 키트

아두이노 키트를 찾고 있다면 초보자를 위한 최고의 아두이노 키트를 참고하세요.

함수 레퍼런스

Serial.begin()
Serial.println()
delay()
millis()
for 루프
while 루프
if-else문
loop()
setup()
String.toInt()
String.substring()
String.indexOf()
String.remove()
String.equals()

코드

아두이노 코드

#include <OneWire.h>
#include <DallasTemperature.h>
#include "SPI.h"
#include "Phpoc.h"

// 데이터 선은 아두이노 8번 포트에 연결
OneWire oneWire(8);
DallasTemperature sensors(&oneWire);
PhpocServer server(80);
boolean alreadyConnected = false;

void setup() {
  Serial.begin(9600);
  while(!Serial);
  sensors.begin();
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  server.beginWebSocket("thermometer");
  Serial.print("WebSocket server address: ");
  Serial.println(Phpoc.localIP());
}

void loop() {
  // 클라이언트가 첫 바이트를 보내면 인사말 전송
  PhpocClient client = server.available();
  if (client) {
    sensors.requestTemperatures();
    float temp = sensors.getTempCByIndex(0);
    String txtMsg = String(temp) + "\r\n";
    char buf[txtMsg.length()];
    txtMsg.toCharArray(buf, txtMsg.length());
    server.write(buf, txtMsg.length());
    delay(300);
  }
}

remote_thermometer.php (웹 UI)

이 파일은 웹 사용자 인터페이스를 제공합니다. 설명된 지침에 따라 PHPoC WiFi 쉴드 또는 PHPoC 쉴드에 업로드하세요.

<!DOCTYPE html>
<html>
<head>
<title>Arduino - PHPoC Shield - Thermometer</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta charset="utf-8">
<style>
body { text-align: center; font-size: width/2pt; }
h1 { font-weight: bold; font-size: width/2pt; }
h2 { font-weight: bold; font-size: width/2pt; }
button { font-weight: bold; font-size: width/2pt; }
</style>
<script>
var canvas_width = 200, canvas_height = 450;
var ws;
var buffer = "";
function init() {
  var canvas = document.getElementById("remote");
  canvas.width = canvas_width;
  canvas.height = canvas_height;
  var ctx = canvas.getContext("2d");
  ctx.translate(canvas_width/2, canvas_height - 80);
  update_view(0);
}
function connect_onclick() {
  if(ws == null) {
    var ws_host_addr = "";
    if((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "[")) {
      ws_host_addr = ws_host_addr.replace(/[\[\]]/g, '');
      ws_host_addr = ws_host_addr.replace(/:/g, "-");
      ws_host_addr += ".ipv6-literal.net";
    }
    ws = new WebSocket("ws://" + ws_host_addr + "/thermometer", "text.phpoc");
    document.getElementById("ws_state").innerHTML = "CONNECTING";
    ws.onopen = ws_onopen;
    ws.onclose = ws_onclose;
    ws.onmessage = ws_onmessage;
  } else ws.close();
}
function ws_onopen() {
  document.getElementById("ws_state").innerHTML = "<font color='blue'>CONNECTED</font>";
  document.getElementById("bt_connect").innerHTML = "Disconnect";
  ws.send("B\r\n");
  update_view(0);
}
function ws_onclose() {
  document.getElementById("ws_state").innerHTML = "<font color='gray'>CLOSED</font>";
  document.getElementById("bt_connect").innerHTML = "Connect";
  ws.onopen = null;
  ws.onclose = null;
  ws.onmessage = null;
  ws = null;
  update_view(0);
}
function ws_onmessage(e_msg) {
  e_msg = e_msg || window.event;
  console.log(e_msg.data);
  update_view(parseFloat(e_msg.data));
}
function update_view(temp) {
  var canvas = document.getElementById("remote");
  var ctx = canvas.getContext("2d");
  var radius = 70;
  var offset = 5;
  var width = 45;
  var height = 330;
  ctx.clearRect(-canvas_width/2, -350, canvas_width, canvas_height);
  if(ws != null) {
    ctx.strokeStyle="blue";
    ctx.fillStyle="blue";
  } else {
    ctx.strokeStyle="Gray";
    ctx.fillStyle="Gray";
  }
  // 5도 단위 눈금
  var x = -width/2;
  ctx.lineWidth=2;
  for (var i = 0; i <= 100; i+=5) {
    var y = -(height - radius)*i/100 - radius - 5;
    ctx.beginPath();
    ctx.lineTo(x, y);
    ctx.lineTo(x - 20, y);
    ctx.stroke();
  }
  // 20도 단위 눈금 및 숫자
  ctx.lineWidth=5;
  for (var i = 0; i <= 100; i+=20) {
    var y = -(height - radius)*i/100 - radius - 5;
    ctx.beginPath();
    ctx.lineTo(x, y);
    ctx.lineTo(x - 25, y);
    ctx.stroke();
    ctx.font="20px Georgia";
    ctx.textBaseline="middle";
    ctx.textAlign="right";
    ctx.fillText(i.toString(), x - 35, y);
  }
  // 온도계 모양 그리기
  ctx.lineWidth=16;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.beginPath();
  ctx.rect(-width/2, -height, width, height);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
  ctx.stroke();
  // 배경 채우기
  ctx.fillStyle="#e6e6ff";
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fill();
  ctx.beginPath();
  ctx.rect(-width/2, -height, width, height);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
  ctx.fill();
  // 온도 값 표시
  if(ws != null) ctx.fillStyle="#ff1a1a";
  else ctx.fillStyle="Gray";
  ctx.beginPath();
  ctx.arc(0, 0, radius - offset, 0, 2 * Math.PI);
  ctx.fill();
  temp = Math.round(temp);
  var y = (height - radius)*temp/100.0 + radius + 5;
  ctx.beginPath();
  ctx.rect(-width/2 + offset, -y, width - 2*offset, y);
  ctx.fill();
  if(ws != null) {
    ctx.fillStyle="white";
    ctx.font="bold 34px Georgia";
    ctx.textBaseline="middle";
    ctx.textAlign="center";
    ctx.fillText(temp.toString() + "°C", 0, 0);
  }
}
window.onload = init;
</script>
</head>
<body>
<p>
<h1>Arduino - Web Thermometer</h1>
</p>
<canvas id="remote"></canvas>
<h2>
<p>WebSocket: <span id="ws_state">null</span></p>
<button id="bt_connect" type="button" onclick="connect_onclick();">Connect</button>
</h2>
</body>
</html>

회로도

PHPoC WiFi 쉴드 또는 PHPoC 쉴드를 아두이노 위에 적층합니다.
아래 이미지와 같이 배선합니다.

DS18B20 센서를 이용한 웹 기반 아두이노 온도계 만들기

EmoPot: 식물 건강을 시각화하는 스마트 화분 아두이노 메가 2560으로 구현한 4층 서비스 엘리베이터 제어 시스템

제조공정

3D 프린팅

자동화 제어 시스템

산업기술