Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@youtoy

Web Serial API を使って micro:bit からセンサーの値を読み取る(途中段階まで)

これまで、以下の 2つの記事を書いた際に使った「Web Serial API」。

まだ、シリアル通信での値の読み取りを実装できてなかったので、それを試します。

micro:bit 側のプログラムを準備する

シリアル通信で Webサイト側へ値を書き出すためのプログラムを作ります。
Microsoft MakeCode for micro:bit を使い、以下のプログラムを micro:bit に書き込みます。

マイクロビットのプログラム(書き出し).jpg

実装した処理は非常に単純で、micro:bit の加速度センサーの X の値を、一定に時間間隔でひたすらシリアル通信で書き出すというものです。

Web Serial API の仕様を見てみる

Web Serial API を使った micro:bit への値の書き込みを試した記事と同様に、以下の仕様を見つつ必要そうな部分を取り出していきます。

●Web Serial API
 https://wicg.github.io/serial/

接続処理

この部分は、Web Serial API を使った micro:bit への値の書き込みを試した記事と同じになるため、そちらの記載をご覧ください。

読み取り処理

読み取り処理の部分は「4.5 readable attribute」の「EXAMPLE 4」の部分を使うと良さそうです。

▼ EXAMPLE 4 の該当部分
事例4.jpg

上記を元にしたプログラムを動かして value の中身をコンソールに書き出すと、データがバイナリになっているため、以下のようにデコードの処理を入れました。

const inputValue = new TextDecoder().decode(value);

Web Serial API による読み取り処理を実装する

それでは、上記の内容をふまえて、HTML+JavaScript で Web Serial API の接続・読み取り処理を実装していきます。

コピペして簡単に使えるように、ファイルは分けずにワンソースでプログラムを書きました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Web Serial(Read)</title>
  </head>

  <body>
    <h1>Web Serial(Read)</h1>
    <button onclick="onStartButtonClick()">接続</button>

    <script>
      async function onStartButtonClick() {
        try {
          const 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) {
                  console.log("Canceled");
                  break;
                }
                const inputValue = new TextDecoder().decode(value);
                console.log(inputValue);
              }
            } catch (error) {
              console.log("Error: Read");
              console.log(error);
            } finally {
              reader.releaseLock();
            }
          }
        } catch (error) {
          console.log("Error: Open");
          console.log(error);
        }
      }
    </script>
  </body>
</html>

実際に動かしてみる

これまで書いた記事と同様に、Web Serial API がデフォルトで使える Chrome のベータ版 release 89(2021年2月9日時点)で試します。

そして、以下のようにセンサーの値を読み取って、コンソールに出力することができました。
ただし、これまでの内容では未完成です(この後に補足します)。

対応できてないこと ← その後、解決しました

今回、対応がまだできてない事項があります。
それは、以下の部分です。
↑ その後、解決しました(詳細は以下の記事で)

●Web Serial API を使って micro:bit からセンサーの値(XYZ)を読み取る&リアルタイムなグラフ化 - Qiita
 https://qiita.com/youtoy/items/6394a5570ddd54a2ce87

今回の未対応部分.jpg

どういう内容かというと、1行分ずつ書き出されたデータを読み込む時、理想的には書き出された単位で(1行ずつ)読み出せると扱いやすいですが、今の実装だとそのようにはならない、というものです。そのため、読み取ったデータをまとめて、改行部分で区切って扱う処理(上記の画像内で書かれている内容)が必要なのですが、それがまだ実装できてません。

具体的に生じる問題として、今の実装だと以下のような事が起こります。
以下の画像は、micro:bit をほぼ静止させた状態で値を出力させている状態のものです。

読み取りで起こっている問題.jpg

このように、出力された 3桁の負の値が、途中の部分で分割された状態で読み込まれることがあります。
この件については、別途、対応できればと思っています。

↓このあたりを見ると良いかな。
●GoogleChromeLabs/serial-terminal: Demo application for the Serial API.
 https://github.com/GoogleChromeLabs/serial-terminal

余談

Node.js で Node Serialport を使う場合だと、こんな感じでサクッと処理できたりするんだけど...

const parser = port.pipe(new Readline({ delimiter: '\r\n' }))
parser.on('data', console.log)

●Readline Parser | Node Serialport
 https://serialport.io/docs/api-parser-readline/

Readline_Parser___Node_Serialport.jpg

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
youtoy
プライベートでの活動で、ビジュアルプログラミング・IoT・ロボットトイを扱う技術コミュニティを単独・共同で主催したり、登壇をしたりしています。Qiitaの記事で書いていることは、このプライベートでの活動に関することです。また、普段は通信会社の研究所で働いていて、ガジェットが大好きです。
kddi
KDDIは、通信を中心に周辺ビジネスを拡大する「通信とライフデザインの融合」をより一層推進し、国内はもとよりグローバルにおいても、5G/IoT時代における新たな価値創造を実現し、お客さまの期待を超える新たな体験価値の提供を追求してまいります。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?