Arduino - 通过串口向 Web 发送温度

关于这个项目

只需使用 Serial.println(temperature)，我们就可以通过网络发送温度。使用内置的网络串行绘图仪，我们可以在没有网络编程的情况下在网络上可视化温度。

如果您是初学者，可以在Arduino-Wifi和Arduino-DS18B20温度传感器教程中了解wifi和传感器

演示

.

工作原理

• Arduino 从传感器读取温度值并通过串口发送
• 从手机或 PC 上的浏览​​器访问 Web Serial Plotter
• 温度会自动转发到 Web。
• Web 在 Web 上可视化温度
• 默认情况下，Web 串行绘图仪的工作方式与 Arduino IDE 上的串行绘图仪相同。我们需要自定义添加X轴标题、Y轴标题、温度范围以及显示数据样本的数量。这可以通过设置页面完成。

分步说明

1.接线

• 在 Arduino 上堆叠 PHPoC Wifi Shield 2 或 PHPoC Shield 2
• 在原理图部分中像图像一样接线

2.编译和上传 Arduino 代码

请参阅“Arduino 代码 - 短采样周期”中的代码

3.自定义网络串行绘图仪

• 通过输入 PHPoC WiFi Shield 的 IP 地址访问 Web Serial Plotter

• 点击“设置”链接到自定义页面

• 如上自定义参数并保存

4.结果

• 点击连接按钮查看结果

长时间监测温度

如果温度以小间隔（例如秒）采样，我们只需要将温度值打印到Serial，因为我们可以等待查看图表。

如果我们想每天或每小时监测温度会怎样？我们迫不及待地想看到所有图表。

解决方案 ：我们将最后一次采样温度的数量存储在Arduino上并经常打印出来。

例如，我们想在 100 小时内在图表上看到温度显示。单位是小时。我们需要每小时从传感器读取数据，将其存储在一个循环队列中（队列长度为 100）。每一秒，我们都会打印出所有 100 个样本数据。因此，我们无需等待 100 小时即可看到最近 100 小时的温度图。

您可以在“Arduino Code - Long Sampling Period”中看到代码

适合初学者的最佳 Arduino 入门套件

查看适合初学者的最佳 Arduino 套件

代码

• Arduino 代码 - 短采样周期
• Arduino 代码 - 长采样周期（每天、每小时...）

Arduino 代码 - 短采样周期Arduino

#include #include #include #define SAMPLE_INTERVAL 1000 // in ms // 数据线插入 ArduinoOneWire oneWire(8);DallasTemperature 的端口 8传感器(&oneWire);unsigned long lastSampleTime;void setup() { Serial.begin(9600);而（！串行）；传感器开始（）； Phpoc.begin(); lastSampleTime =millis();}void loop() { if((millis() - lastSampleTime)> SAMPLE_INTERVAL) { sensor.requestTemperatures();浮动温度=sensors.getTempCByIndex(0); Serial.println(temp); lastSampleTime =毫秒（）； }}

Arduino 代码 - 长采样周期（每天、每小时...）Arduino

#include #include #include #define UPDATE_INTERVAL 1000 // in ms#define SAMPLE_INTERVAL 60*60*1000 // 1 小时 // 数据线插入进入 ArduinoOneWire oneWire(8) 上的端口 8；DallasTemperature 传感器(&oneWire)；unsigned long lastSampleTime；unsigned long lastUpdateTime；float temps[100]；int index；void setup() { Serial.begin(9600);而（！串行）；传感器开始（）； Phpoc.begin(); lastSampleTime =毫秒（）； lastUpdateTime =毫秒（）； index =0;}void loop() { if((millis() - lastSampleTime)> SAMPLE_INTERVAL) { sensor.requestTemperatures();浮动温度=sensors.getTempCByIndex(0);温度 [索引] =温度；指数 =(指数 + 1) % 100; lastSampleTime =毫秒（）； } if((millis() - lastUpdateTime)> UPDATE_INTERVAL) { for(int i =0; i <100; i++) { Serial.println(temps[(index - i + 100)%100]); } lastUpdateTime =毫秒（）； }}

示意图