LoginSignup
0
3

More than 1 year has passed since last update.

Web Serial APIでCO2センサーの値を読み込み

Posted at

新しいChrome(及びEdge)では、ブラウザが直接シリアルで会話できるということでシリアル通信のCO2センサーの値を取得してみました。
取りあえずなんとなく値をとるというだけであればトラブルはなく動きましたが安定稼働できるかはまだ不明です。

環境

  • CentOS7 + Chrome91 + MHZ19C/USBシリアル変換済み(これ
  • Debian(いくつ?) + Chrome91 + MHZ19C/USBシリアル変換済み
  • Windows10 + Chrome91 + MHZ19C/USBシリアル変換済み
  • Windows10 + Edge91 + MHZ19C/USBシリアル変換済み

(全て数分程度軽く流した程度)

MHZ19Cこんな感じにシリアル変換かませておけばOK。

動いているもの

実物

こちら

ポート選択

port = await navigator.serial.requestPort();

上記でPCのシリアルの選択ダイアログがでてくるのでブラウザ上で選択

開け閉め

await port.open({ baudRate: 9600 });
(略)
port.close();

な感じ。ブラウザ閉じたときとかきちんと解放されるのかな?ちょっと怪しいけどまだ調べられていない。(そのうち誰かがきっと教えてくれる。)

書き(送信)

        const writer = port.writable.getWriter();
        const data = new Uint8Array([255, 1, 134, 0, 0, 0, 0, 0, 121]);
        await writer.write(data);
        writer.releaseLock();

(なんか書いてて気づいた。全体ソースのwriter.releaseLock通らないときあるけど後でなおす)

受信

        reader = port.readable.getReader();
        const { value, done } = await reader.read();
        if (done) {
          reader.releaseLock();
        }
        document.getElementById("ppm").textContent = value[2] * 256 + value[3];

(readerの初期化も変なとこにいる。後で治す)

全体


<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>CO2Viewer Web by Epea</title>
</head>

<body>
  <h1>CO2Viewer Web by Epea</h1>
  <button onclick="startReading()">CO2センサー読み込み開始</button>
  <div id="ppm">0</div>ppm
  <script>
    async function readOnce(port){
      try {
        const writer = port.writable.getWriter();
        const data = new Uint8Array([255, 1, 134, 0, 0, 0, 0, 0, 121]);
        await writer.write(data);
        writer.releaseLock();

        reader = port.readable.getReader();
        const { value, done } = await reader.read();
        if (done) {
          reader.releaseLock();
        }
        document.getElementById("ppm").textContent = value[2] * 256 + value[3];
      } catch (error) {
        console.log("ERRORよ");
        console.log(error);
      } finally {
        console.log("finally");
        reader.releaseLock();
      }
    }

    async function startReading() {
      var reader;
      var port;
      try {
        console.log("startReading");
        port = await navigator.serial.requestPort();
        await port.open({ baudRate: 9600 });
        while (port.readable) {
          await readOnce(port);
          await new Promise(_ => setTimeout(_, 5000));
        }
      } catch (error) {
        console.log("ERRORよ");
        console.log(error);
      } finally {
        console.log("finally");
        port.close();
      }
    }
  </script>
</body>

</html>

補足

なお、WinsenのMHZシリーズなCO2センサーは同じリードコマンドなので他のモデルでも値は上記で取得できるはず。MHZ14は電力ちゃんとしないと値は不安定になるので電源付きのUSBハブがよいかもしれない。

参考

Web Serial API を最短の手順で試したくてやったこと(micro:bit を利用)

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3