こちらのシステムを、Web Serial API で制御します。
M5Stack Core2: シリアルで LED を制御
こちらのページを参考にしました。
Web Serial API＋ESP32(Arduino)研究 その1 シリアルコンソール
実行時の様子
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Web Serial API Console</title>
<script src="serial.js"></script>
</head>
<body>
<h1>Web Serial API Console</h1>
<button onclick="onConnectButtonClick()">Connect</button> 115200 Only
<br />
<input type="text" id="sendInput" />
<input type="button" value="Send" onclick="sendSerial();" />
<br />
<textarea cols="80" rows="16" id="outputArea" readonly></textarea>
<p>Oct/2/2022</p>
</body>
</html>
serial.js
// ---------------------------------------------------------------
// serial.js
//
// Oct/02/2022
// ---------------------------------------------------------------
let port;
// ---------------------------------------------------------------
async function onConnectButtonClick()
{
try {
port = await navigator.serial.requestPort();
await port.open({ baudRate: 115200 });
while (port.readable) {
const reader = port.readable.getReader();
try {
while (true) {
const { value, done } = await reader.read();
if (done) {
addSerial("Canceled\n");
break;
}
const inputValue = new TextDecoder().decode(value);
addSerial(inputValue);
}
} catch (error) {
addSerial("Error: Read" + error + "\n");
} finally {
reader.releaseLock();
}
}
} catch (error) {
addSerial("Error: Open" + error + "\n");
}
}
// ---------------------------------------------------------------
function addSerial(msg)
{
var textarea = document.getElementById('outputArea');
textarea.value += msg;
textarea.scrollTop = textarea.scrollHeight;
}
// ---------------------------------------------------------------
async function sendSerial()
{
var text = document.getElementById('sendInput').value;
document.getElementById('sendInput').value = "";
const encoder = new TextEncoder();
const writer = port.writable.getWriter();
await writer.write(encoder.encode(text + "\n"));
writer.releaseLock();
}
// ---------------------------------------------------------------
サーバーの起動
python -m http.server
$ python -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
127.0.0.1 - - [02/Oct/2022 10:46:38] "GET / HTTP/1.1" 304 -
127.0.0.1 - - [02/Oct/2022 10:46:38] "GET /serial.js HTTP/1.1" 304 -
ポートを選択します。
red と入れて、send をクリックします。
ネットワーク経由でのアクセス
テストした限り、
ネットワーク経由で、シリアルにはアクセスできませんでした。
機能したのは、サーバーとクライアントが同一マシーンにある時だけでした。
