Arduino UNO + WiFi Shield: реальный график температуры в вебе через Serial

Компоненты

Arduino UNO	1 шт.
PHPoC WiFi Shield 2 (или PHPoC Shield 2)	1 шт.
DS18B20 (防水 температурный датчик)	1 шт.
Перемычки	1 набор

О проекте

Просто используйте Serial.println(temperature) — данные автоматически попадают в веб-интерфейс Web Serial Plotter (встроен в PHPoC Shield). Никакого веб-программирования! Идеально для начинающих: изучение WiFi, датчиков и сериального вывода.

Демонстрация

График температуры в браузере телефона/ПК в реальном времени.

Принцип работы

1. Arduino читает DS18B20 и шлёт значение в Serial.
2. PHPoC Shield пересылает Serial-данные в веб-сокет.
3. Открываете Web Serial Plotter по IP-адресу шилда — видите график.
4. По умолчанию работает как Serial Plotter в IDE. Настройте подписи осей, диапазон, число точек через страницу Setup.

Пошаговая инструкция

1. Сборка

• Установите PHPoC WiFi Shield 2 на Arduino.
• Подключите DS18B20: VCC→5V, GND→GND, DATA→D8 (через 4.7 кОм на VCC).

2. Загрузка кода (короткий период опроса)

#include 
#include 
#include 

#define SAMPLE_INTERVAL 1000 // мс
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();
  }
}

3. Настройка Web Serial Plotter

1. Узнайте IP шилда (через Serial Monitor или роутер).
2. Откройте в браузере: https:/// — откроется Plotter.
3. Нажмите «Setup» → задайте: X-axis: «Time (s)», Y-axis: «°C», Y-min: -20, Y-max: 50, Samples: 100 → Save.
4. Нажмите «Connect» — график начнёт рисоваться.

Мониторинг за длительные периоды (часы, дни)

Если опрос редкий (раз в час), нельзя ждать накопления точек. Решение: храним последние 100 измерений в кольцевом буфере на Arduino и каждую секунду выводим весь буфер в Serial. Plotter показывает историю за последние 100 часов без ожидания.

Код для длинного периода (опрос раз в час, обновление графика раз в секунду)

#include 
#include 
#include 

#define UPDATE_INTERVAL 1000      // мс (вывод в Serial)
#define SAMPLE_INTERVAL 60*60*1000 // 1 час (опрос датчика)

OneWire oneWire(8);
DallasTemperature sensors(&oneWire);
unsigned long lastSampleTime, lastUpdateTime;
float temps[100];
int index = 0;

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

void loop() {
  // Опрос датчика раз в час
  if (millis() - lastSampleTime > SAMPLE_INTERVAL) {
    sensors.requestTemperatures();
    temps[index] = sensors.getTempCByIndex(0);
    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();
  }
}

Лучший стартовый набор Arduino для новичка

Рекомендации по выбору набора — см. отдельную статью.

Схемы

1. Установите PHPoC WiFi Shield 2 на Arduino.
2. Подключите DS18B20 как на фото.