Arduino UNO + WiFi 盾板：串口实时推送温度到网页绘图

元器件与物料清单

项目简介

仅用 Serial.println(temperature) 即可将温度经网络实时推送到网页。利用 PHPoC Shield 内置的 Web Serial Plotter，零 Web 编程即可在手机/电脑浏览器查看实时温度曲线。

适合初学者学习 WiFi 通讯和 DS18B20 温度传感器。

演示效果

网页实时绘制温度曲线，支持缩放、平移。

工作原理

1. Arduino 读取 DS18B20 温度，通过 Serial.println() 发送
2. 浏览器访问 PHPoC WiFi Shield IP 地址打开 Web Serial Plotter
3. 温度数据自动转发到网页
4. 网页实时绘制曲线
5. 默认模式同 Arduino IDE 串口绘图器，可通过设置页自定义：X/Y 轴标题、温度范围、显示样本数等

分步指引

1. 硬件接线

• 将 PHPoC WiFi Shield 2 堆叠在 Arduino UNO 上
• 按原理图连接 DS18B20 (数据线接 D8，上拉 4.7kΩ)

2. 编译上传 Arduino 代码

见下方"短周期采样代码"

3. 自定义 Web Serial Plotter

• 浏览器输入 PHPoC Shield IP 地址
• 点击 "Setup" 进入设置页
• 配置参数并保存

4. 查看结果

• 点击 Connect 按钮查看实时曲线

长周期监测 (每小时/每日采样)

秒级采样直接打印即可。但若要监测 100 小时趋势，不能等 100 小时才看到完整图。

解决方案： Arduino 端维护循环队列存储最近 N 个采样值，高频(如每秒)批量打印队列内容。Web 端即可立即显示完整历史曲线。

示例：1 小时采样一次，队列长度 100，每秒打印 100 个数据点，瞬间呈现 100 小时趋势。代码见"长周期采样代码"。

新手推荐套件

参考《最适合新手的 Arduino 入门套件》

代码

短周期采样代码 (秒级)

#include 
#include 
#include 

#define SAMPLE_INTERVAL 1000 // ms

OneWire oneWire(8);
DallasTemperature sensors(&oneWire);
unsigned long lastSampleTime;

void setup() {
  Serial.begin(9600);
  while(!Serial);
  sensors.begin();
  Phpoc.begin();
  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小时采样一次

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();
}

void loop() {
  // 采样存入队列
  if ((millis() - lastSampleTime) > SAMPLE_INTERVAL) {
    sensors.requestTemperatures();
    float temp = sensors.getTempCByIndex(0);
    temps[index] = temp;
    index = (index + 1) % 100;
    lastSampleTime = millis();
  }
  
  // 高频批量推送队列数据到网页
  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 堆叠在 Arduino UNO 上
2. 按下图接线 DS18B20