【シリアル通信〜基礎編】Arduino UnoとWeb Serial APIでブラウザ直通シリアル通信を利用する
※ 当ページには【広告/PR】を含む場合があります。
2021/11/30
以前、ラズパイとArduino間でUSBを接続し、シリアル通信を手っ取り早くラズパイの組み込みコマンドから操作してみました。
やり方としてこれはこれで良いのですが、最近のブラウザでは
今回は、ArduinoとWeb Serial API対応のブラウサを直接繋いで、シリアル通信できるかを軽く試してみたいと思います。
Arduino側の実装
今回はArduino側から一定時間で１文字を発信させるだけのプログラムを使います。
char data = 'a';
void setup() {
//👇シリアルのボーレートは9600bpsにする
Serial.begin(9600);
delay(200);
}
void loop() {
//👇１秒おきにハードウェアシリアルでPC側へ文字を送信
Serial.println(data);
delay(1000);
}
なおArduinoをPCで繋ぐ場合、ArduinoのUSB(ハードウェア)シリアルとして、物理ピン(RX:0ピン/TX:1ピン)が自動で使用されます。
ひとまずこれをArduino側に書き込んで、１秒間隔で
「a」DTRをハード的に無効化する
シリアル通信でやりとりするハードウェアの組み合わせによっては、このDTR信号の有り無しが厄介な問題になります。
そこでブラウザ側にリセット信号が伝わらないように、例えば以下のように適当な容量(~0.1μF)のコンデンサを
RESET-GND
これでArudino側からのDTRは送信されることはなくなり、不慮のWeb Serial API側の切断エラーが起こるのを防ぐことができます。
HTMLファイルを実装
Web Serial API
見ての通りで、WindowsOSではEdge、その他のOS環境ではChromeを使うと良いでしょう。
今回手元で確認したChromeブラウザは以下のバージョンになっています。
なお、バージョン88以前のChromeでも試験的にWeb Serial APIを使うことが可能です。
アドレスバーに、
chrome://flags[Experimental Web Platform features] > [Enable]デモ版でサクッとシリアルを試す
自分で一から実装する前に、以下のサイトをChromeで開いてWeb Serial APIのお試しサイトを使ってArduinoにアクセスできるか確かめてみましょう。
Arduinoの接続を確認した上で、送信されてきた文字がブラウザ上に表示されるか確かめてみます。
ちゃんと、文字を受け取っていることが確認できました！
スクリプトの自作
さきほどのデモ版のリソース置き場は
Typescriptベースですが、ソースコードを眺めると実装例の参考になるかも知れません。
より詳しい説明は
さっそく以下、Arduinoに接続・切断するだけのHTMLページを作ります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Web Serial API - Reading Test</title>
</head>
<body>
<h3>はじめてのWeb Serial API｜読込テスト</h3>
<button onclick="startSerial()">接続</button>
<button onclick="stopSerial()">切断</button>
<script>
let stopFlag = false;
async function startSerial() {
try {
console.log("INFO: 接続が確立しました");
stopFlag = false;
const port = await navigator.serial.requestPort();
await port.open({ baudRate: 9600 });
while (port.readable) {
const reader = port.readable.getReader();
try {
while (!stopFlag) {
const { value, done } = await reader.read();
if (done) {
console.log("INFO: 読込モード終了");
break;
}
//👇生データはバイナリなので、ユニコード文字へデコード
const inputValue = new TextDecoder().decode(value);
console.log(inputValue);
}
} catch (error) {
console.log("ERROR: 読み出し失敗");
console.log(error);
} finally {
reader.releaseLock();
await port.close();
console.log("INFO: 接続を切断しました");
}
}
} catch (error) {
console.log("ERRORR: ポートが開けません");
console.log(error);
}
}
function stopSerial() {
stopFlag = true;
}
</script>
</body>
</html>
動作テスト
さきほどのhtmlファイルを直接Chromeで開きます。
ArduinoにUSB接続し、実際に使用した様子は以下のようになりました。
まとめ
以上、今回は一部のブラウザで解禁となったWeb Serial APIの機能を使って、はじめてArduino Unoでシリアル通信を試みる際のポイントを中心に解説してきました。
これまでシリアル通信するためのプログラムは、主にC++のようなネイティブアプリのイメージが強かったのですが、もうブラウザだけで何でも出来る時代がすぐそこまで来ているのをヒシヒシと感じました。