5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Web Bluetooth API で toio を 6台同時に制御する

Last updated at Posted at 2021-04-25

toio の BLE経由での制御について、Node.js + noble を使ったプログラムを試しに作って、以下の記事を書きました。以下の記事の中でも、この記事のタイトルにある 6台同時制御をやっていたりします。

●あらためて noble でガジェットを扱う話に着手する: toio と micro:bit を複数混在させてスキャン、toio の複数制御(6台分) - Qiita
 https://qiita.com/youtoy/items/15a743d692f348327ff9

そして、上記の記事のプログラムを書いている時、ふと「以前、何度も使っていた Web Bluetooth API で toio を同時制御していた時、そのソースを改変して同時制御の台数を増やしても 3〜4台までしか扱えない状態だったけれど、あれは実装の問題では?」という考えが頭をよぎりました。

そして、以前から実装していた Web Bluetooth API を使った toio の複数台の処理のプログラムを書き直して、6台同時に動かせるかを試しました。結論から言うと、以下のように 6台同時制御に成功しました。

ちなみに、台数が 6台になってるのは、単純に自分が持っている台数が 6台だから、という理由です。

実装内容

ソースコード全体は、以下になります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Web Bluetooth API による複数同時接続</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.css"/>
  </head>
  <body>
    <section class="section">
      <div class="container">
        <h1 class="title">操作用ボタン</h1>
        <div class="buttons" style="margin-top: 1.5rem">
          <button class="button is-success is-light" type="button" onclick="onStartButtonClick()">接続</button>
          <button class="button is-info is-light" type="button" onclick="onButton02Click()">一斉動作</button>
        </div>
      </div>
    </section>

    <script>
      const TOIO_SERVICE_UUID = "10b20100-5b3b-4571-9508-cf3efcd7bbae";
      const MOTOR_CHARACTERISTIC_UUID = "10b20102-5b3b-4571-9508-cf3efcd7bbae";
      const motorBuf = new Uint8Array([0x02, 0x01, 0x01, 0x32, 0x02, 0x02, 0x32, 0x78,]);

      let myCharacteristics = [];

      async function onStartButtonClick() {
        let serviceUuid = TOIO_SERVICE_UUID;

        try {
          console.log("Requesting Bluetooth Device...");
          const device = await navigator.bluetooth.requestDevice({
            filters: [{ services: [serviceUuid] }],
          });
          console.log("Connecting to GATT Server...");
          const server = await device.gatt.connect();
          console.log("Getting Service...");
          const service = await server.getPrimaryService(serviceUuid);
          console.log("Getting Characteristic...");
          const characteristic = await service.getCharacteristic(
            MOTOR_CHARACTERISTIC_UUID
          );
          myCharacteristics.push(characteristic);
          console.log(myCharacteristics.length);
        } catch (error) {
          console.log("Argh! " + error);
        }
      }

      async function onButton02Click() {
        if (myCharacteristics.length !== 0) {
          for (const element of myCharacteristics) {
            console.log("write");
            await element.writeValue(motorBuf);
          }
        }
      }
    </script>
  </body>
</html>

HTML の部分はボタンを 2つ作っていて、接続処理用のものとモーター制御用のものです。
接続用ボタンは使い回しをする形で、1個を繰り返し使うことで 6台分の接続処理を行えます(1台ずつ手動でつないでいく流れ)。もう 1つのモーター制御用のボタンは、ボタンが押された時点でつながっている全ての toio のモーター制御を行います。

モーター制御用のバイナリデータは、toio の通信仕様のモーターの部分にある「時間指定付きモーター制御」を使っています。また、toio関連の UUID 2つも、以下の仕様に掲載されているものです。
 ●モーター · toio™コア キューブ 技術仕様
  https://toio.github.io/toio-spec/docs/assets/motor_cube_direction.svg

その他の部分は、過去に書いた記事でも使ったノウハウを利用しています。
 ●toio を Web Bluetooth API で制御(「通知・読み出し・書き込み」を行う) - Qiita
  https://qiita.com/youtoy/items/791905964d871ac987d6
 ●toio を音で制御してみた(Audio用の Teachable Machine でベルやタンバリンの音を機械学習) - Qiita
  https://qiita.com/youtoy/items/37f70bb4ce630e6cbd92

まとめ

Web Bluetooth API でも 6台同時に制御するというのができたので、Node.js実装のものとは違った活用法を見つけられればと思います。

【追記】 音の機械学習・機械学習による手の認識との組み合わせ

その後、Teachable Machine を使った音の機械学習と組み合わせたもの、MediaPipe Hands による手の認識と組み合わせたものを作ったりしました。

5
2
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
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?