Arduino Webオシロスコープ – 高度なトリガー機能付き、6チャンネル、Webブラウザで動作

部品と用品

部品	数量	備考
Arduino UNO	1
PHPoC Shield for Arduino	1	内蔵Webサーバー機能付き
ジャンパーワイヤー	1

このプロジェクトについて

初心者の方は、ArduinoとWiFiについてさらに学べます。

デモ

（動作デモは元記事を参照）

主な機能

• 6チャンネル対応（A0〜A5）
• シングル/マルチトリガー対応
• トリガーモード選択：立ち下がり、立ち上がり、両エッジ
• トリガーレベル設定可能
• Webノブで時間軸（時間/目盛）を調整
• 各チャンネルの電圧軸（電圧/目盛）をWebノブで調整
• 各チャンネルの表示オフセットをWebノブで調整
• タップ/クリックで設定エリアの表示/非表示切替
• クロスプラットフォーム対応：Windows、Linux、iOS、Androidなど、Webブラウザがあれば動作

ユーザーインターフェース

仕組み

Webオシロスコープは、PHPoCの「Web Serial Monitor」をベースにしています。まずWeb Serial Monitorの仕組みを説明します。

PHPoC Shieldには「Web Serial Monitor」という組み込みWebアプリがあります。Arduino IDEのシリアルモニターに似ていますが、違いは：

• Arduino IDE シリアルモニター： USBケーブル経由でArduinoのTXピンからデータを読み取り。
• PHPoC Shield Web Serial Monitor： インターネット経由でArduinoのTXピンからデータを読み取り。

詳細：PHPoC ShieldはSPIでArduinoと通信。ユーザーがブラウザでWeb Serial Monitorにアクセスすると、ページ読み込み後にWebSocket接続をPHPoC Shieldに確立。PHPoC ShieldはArduinoにスタックされているため、ArduinoのTXピンからデータを取得し、WebSocket経由でブラウザのWeb Serial Monitorに送信。ブラウザ側でデータを受信・表示します。これによりPCだけでなく、スマホなどブラウザ搭載デバイスからもデータを見られます。

ではWebオシロスコープの仕組みです。

Web Serial Monitorと同様ですが、最後の「表示」部分が異なります。生データを表示する代わりに、グラフとして可視化。さらにUI調整機能とトリガー機能を追加しています。

Arduinoから送信されるデータ形式

ArduinoはADCピン（A0〜A5）からデータを読み取り、タイムスタンプ（マイクロ秒）も取得。ADC値を電圧に変換し、以下のフォーマットでシリアルポートに出力します：

1. 最初にタイムスタンプ、その後にスペースまたは「\t」文字。
2. 続いて各チャンネルの電圧データ。チャンネル間はスペースまたは「\t」で区切り。
3. 最後に改行文字。

注意： 最大6チャンネルですが、1〜3チャンネルのみ送信することも可能です。

ソースコード

ソースコードは2部構成：

• Arduinoコード（WebOscilloscope.ino）
• Webアプリコード（oscilloscope.php）：UIコード。PHPoC Shieldにアップロードする必要あり（手順は別途）

使い方

PCやスマホのブラウザで以下にアクセス：

https://IPアドレスを置換/oscilloscope.php

信号測定方法：2本のワイヤーを用意。1本をGND、もう1本をArduinoの任意のアナログピン（A0〜A5）に接続。これらを測定したい信号ポイントに接続します。

6チャンネル使うには6本のGND線が必要ですが、ArduinoのGNDピンは2つしかありません。以下のようにしてGNDを拡張しています。

初心者向けおすすめArduinoスターターキット

Arduinoキットをお探しなら、「初心者向けベストArduinoキット」をご覧ください。

関数リファレンス

• Serial.begin()
• Serial.println()
• delay()
• millis()
• for文
• while文
• if-else文
• loop()
• setup()
• String.toInt()
• String.substring()
• String.indexOf()
• String.remove()
• String.equals()

コード

WebOscilloscope.ino Arduino

#include <SPI.h>
#include <Phpoc.h>

#define AREF 5.0
#define ADC_MAX 1023.0
float ratio = AREF / ADC_MAX;

void setup() {
  Serial.begin(115200);
  Phpoc.begin();
}

void loop() {
  unsigned long time_a = micros();
  float voltageChannel0 = analogRead(A0) * ratio;
  float voltageChannel1 = analogRead(A1) * ratio;
  float voltageChannel2 = analogRead(A2) * ratio;
  float voltageChannel3 = analogRead(A3) * ratio;
  float voltageChannel4 = analogRead(A4) * ratio;
  float voltageChannel5 = analogRead(A5) * ratio;

  Serial.print(time_a);
  Serial.print(" ");
  Serial.print(voltageChannel0);
  Serial.print(" ");
  Serial.print(voltageChannel1);
  Serial.print(" ");
  Serial.print(voltageChannel2);
  Serial.print(" ");
  // Serial.print(voltageChannel3);
  // Serial.print(" ");
  Serial.print(voltageChannel4);
  Serial.print(" ");
  Serial.println(voltageChannel5);
}

oscilloscope.php PHP

Webアプリケーションコード（長いため主要部分のみ掲載。全文は元記事参照）。

<!DOCTYPE html>
<html>
<head>
<title>PHPoC Shield - Web Oscilloscope for Arduino</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  /* CSSスタイル定義 */
</style>
<script>
  // JavaScript: WebSocket通信、グラフ描画、ノブ操作、トリガー処理等
</script>
</head>
<body onresize="canvas_resize()">
  <div class="graph_container" id="graph_container">
    <canvas id="graph"></canvas>
  </div>
  <div class="setting_container" id="setting_container">
    <!-- チャンネル選択、トリガー設定、モード選択、ノブ等のUI -->
  </div>
</body>
</html>

回路図