基于 DS18B20 传感器的 Arduino 网络温度计制作指南

所需元件与物料

项目简介

如果你是初学者，可以先了解 Arduino 的 WiFi 与传感器基础教程：WiFi 与 Arduino、DS18B20 温度传感器教程。我之前也做过一个仅使用 PHPoC 的类似项目。

演示效果

完成后可通过网页实时查看温度数据，界面包含连接按钮与温度可视化图表。

数据流向

Arduino → PHPoC WiFi Shield → 网页浏览器

Arduino 从传感器读取温度并发送给 PHPoC WiFi Shield，后者通过 WebSocket 将数据推送至网页前端，JavaScript 负责在 UI 上绘制温度计样式的可视化图表。

注意： PHPoC Shield 内置了将 Arduino 数据转发至浏览器的程序，无需我们额外编写网络通信代码。

主要任务

• 为 PHPoC Shield 配置 WiFi 信息 (SSID 与密码)
• 将 Web UI 代码上传至 PHPoC Shield
• 编写并上传 Arduino 代码

配置 PHPoC Shield WiFi

请参考 官方配置指引 完成 WiFi 设置。

上传 Web UI 至 PHPoC Shield

• 下载代码区提供的 remote_thermometer.php
• 使用 PHPoC Debugger 按 此教程 上传至 Shield

编写 Arduino 代码

• 安装三个库：PHPoC Library for Arduino、OneWire、DallasTemperature
• 将代码区提供的 Arduino 代码上传至开发板

测试步骤

• 打开 Arduino IDE 串口监视器，记录显示的 IP 地址
• 在浏览器输入 https:///remote_thermometer.php
• 点击 "Connect" 按钮即可开始实时监测

新手推荐套件

如果你在寻找 Arduino 入门套件，可参考 最适合初学者的 Arduino 套件。

函数参考

• Serial.begin()
• Serial.println()
• delay()
• millis()
• for / while / if-else 循环与判断
• loop() / setup()
• String 相关方法：toInt(), substring(), indexOf(), remove(), equals()

核心代码

Arduino 代码

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

// 数据线连接 Arduino D8
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 (Web 前端)

<!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, h2, button { font-weight: bold; font-size: width/2pt; }
</style>
<script>
var canvas_width = 200, canvas_height = 450;
var ws, 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, '').replace(/:/g, "-") + ".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 = ws.onclose = 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"), ctx = canvas.getContext("2d");
  var radius = 70, offset = 5, width = 45, height = 330;
  ctx.clearRect(-canvas_width/2, -350, canvas_width, canvas_height);
  ctx.strokeStyle = ctx.fillStyle = (ws != null) ? "blue" : "Gray";
  // 绘制刻度、温度计主体、液柱及数值...
  // (完整绘图代码见原文，此处省略以节省篇幅)
}
window.onload = init;
</script>
</head>
<body>
<h1>Arduino - Web Thermometer</h1>
<canvas id="remote"></canvas>
<h2>WebSocket: <span id="ws_state">null</span> <button id="bt_connect" onclick="connect_onclick()">Connect</button></h2>
</body>
</html>

接线原理图

1. 将 PHPoC WiFi Shield (或 PHPoC Shield) 堆叠在 Arduino UNO 上
2. 按下图连接 DS18B20 传感器：数据线接 D8，电源接 5V/GND，数据线与 5V 间接 4.7kΩ 上拉电阻