ブラウザ(JavaScript)でマイクロビットとBLE!(2)

IoT

こんにちは、ECF Techブログ
担当 Michiです。

はじめに

今回はマイクロビットとブラウザ(JavaScript)を使ったBLE接続の第2弾です。前回はマイクロビット側でAまたはBボタンが押されたことをブラウザ側で検知するプログラムを紹介しました。

今回はブラウザからのアクションにより、マイクロビットのLEDを光らせるプログラミングをご紹介します。前回との大きな違いは前回がマイクロビットからの情報の読み取りであったのに対し、今回はマイクロビットへの情報の書き込みになる点です。

記事の概要と想定読者

本記事では動作が確認できた。というサンプルプログラムの提供がメインとなります。BLE(Bluetooth Low Energy)の基本的な内容については、こちらをご覧ください。

また、サンプル内のコードにコメントを記載する形で説明をさせて頂いています。後半に一部解説を記載しておりますが、全体としてはJavaScriptの基本的なコードが読める方が対象になっております。

プログラムの内容

完成画面と操作

それでは早速行きましょう。完成すると、下のような画面ができます。

操作概要

  • 「接続」をクリックでマイクロビットと接続
  • マイクロビットのLED画面を模したチェックボックス
  • 「LED表示」をクリックでチェックボックスの並びと同じようにライトが光る
  • テキストボックスに文字列(半角英数字)を入力し、「文字列表示」をクリックするとその文字列を表示。最大20バイト文まで
  • 「BLE切断」をクリックでマイクロビットとのコネクションを切断

プログラムはこちらになります。

解説

ポイントは108行目からのshowMatrixメソッドです。
Web Bluetoothでは接続している機器にデータを書き込む場合、コード内にあるwriteValueメソッドを使います。このwriteValueメソッドはArrayBufferオブジェクトのデータを受け取ることになっているのでそれを用意しています。

また、ArrayBufferの操作にはDataViewというオブジェクトが必要なので、その関連づけがされています。

このwriteValueメソッドで書き込むのは5バイトです。各バイトは上から順に各LEDと対応しており、下位5ビットの値に基づいて、LEDが光ります(下の図のとおり)。

showTextメソッドはシンプルで、ArrayBufferへ変換してくれるメソッドを呼び出すだけです。

マイクロビット側のプログラムはこちらになります。

動作確認

マイクロビットとブラウザをBLEでつなぐ方法については、こちらからご確認ください。

おわりに

本日はここまでとさせていただきます。最後までご覧いただきありがとうございました。

前回に引き続き、Web(JavaScript)とマイクロビットのBLE接続をご紹介させて頂きました。引き続き色んなサンプルを作っていければと思っていますので、ぜひまたご覧ください。


合同会社イー・シー・エフでは、子ども向けプログラミングなどの教育講座を実施しています。プログラミング教室の案内や教育教材の情報は、下記よりご確認ください。

ECFエデュケーション
キッズも大人も。沖縄からITのマナビを応援します
タイトルとURLをコピーしました