Arduino UNO + WiFiシールドで温度をWebリアルタイム表示 — シリアル出力だけでグラフ化

概要

PHPoC WiFi Shield 2 を Arduino UNO にスタックし、DS18B20 防水温度センサーで測定した温度を Serial.println() するだけで、ブラウザ上の「Web Serial Plotter」にリアルタイムグラフ表示させる方法を紹介します。Web プログラミング不要で、設定画面から X/Y 軸ラベル、温度範囲、表示サンプル数をカスタマイズ可能です。

必要なハードウェア

• Arduino UNO × 1
• PHPoC WiFi Shield 2（または PHPoC Shield 2）× 1
• DS18B20 温度センサー（防水プローブ型推奨）× 1
• ジャンパーワイヤー、ブレッドボード

配線

DS18B20：VDD→5V、GND→GND、DQ→デジタルピン 8（4.7 kΩ プルアップ必須）。PHPoC シールドを UNO に重ねるだけで WiFi 接続完了。

動作原理

1. Arduino が 1 秒ごとに温度を読み取り Serial.println(temp) で出力
2. PHPoC シールドがシリアルデータを TCP/WebSocket 経由でブラウザへ転送
3. ブラウザで https://<シールドのIPアドレス>/serial_plotter にアクセスし、グラフ表示
4. 「Setup」リンクから X 軸ラベル（Time）、Y 軸ラベル（Temperature °C）、範囲（例：-20〜50）、サンプル数（例：100）を設定・保存

スケッチ 1：短周期サンプリング（リアルタイム監視用）

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

#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();           // WiFi 接続・WebSocket サーバー起動
  lastSampleTime = millis();
}

void loop() {
  if (millis() - lastSampleTime > SAMPLE_INTERVAL) {
    sensors.requestTemperatures();
    float temp = sensors.getTempCByIndex(0);
    Serial.println(temp);  // これだけで Web へ転送される
    lastSampleTime = millis();
  }
}

スケッチ 2：長周期サンプリング（日次・時間単位ログの即時表示用）

1 時間ごとに測定し、最新 100 点をリングバッファに保存。毎秒全点を Serial.println() することで、100 時間分のグラフを待たずに表示できます。

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

#define UPDATE_INTERVAL 1000      // ms (グラフ更新間隔)
#define SAMPLE_INTERVAL 3600000UL // 1 時間 (3600*1000 ms)

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() {
  // 1 時間ごとにサンプリング
  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();
  }
}

Web Serial Plotter 設定例

• X Axis Title: Time
• Y Axis Title: Temperature (°C)
• Y Min: -20, Y Max: 50
• Max Samples: 100 (短周期) / 100 (長周期・リングバッファ全点)

応用・拡張

• 複数センサー（湿度、気圧等）をカンマ区切りで出力 → 複数系列グラフ化
• Deep Sleep で電池駆動化（送信間隔を長くし、平均消費電流低減）
• PHPoC シールドの Web アプリ機能で閾値アラート・メール通知追加
• HTTPS・認証付きダッシュボードへの発展

トラブルシューティング

• グラフが動かない → シールドの IP アドレス確認（シリアルモニタに表示）、ファイアウォール/ポート 80/443/8442 確認
• 温度が -127℃ → DS18B20 配線・プルアップ抵抗・アドレス確認
• WiFi 未接続 → Phpoc.begin() 戻り値確認、SSID/パスワード設定（シールド内蔵 Web 設定ページから）