【ツール】UFOSAをCSVではな<マウスと連動[専用無線アダプタ不要】 #JavaScript

初めまして、スケベなシステム開発をしたいmi2と申します。

@yotto_さまが開発してくださったWebBluetoothでUFOSAを制御する仕組みを使わせて頂いて、マウスと直感的に連動するウェブページつくりました。
専用無線アダプタも不要で、ササっとつくれてしまったので、webBluetoothすげええという話です。

操作方法などはブログで解説しているので、技術的に有益な情報だけメモ書きいたします。
https://mi2no.com/xwp/sa_msu/

BLE接続するとデバイスのオブジェクトが得られる

ブラウザの機能として備わっているrequestDeviceをawaitで実行してやるとdeviceが返ってきます。

  async function selectSa() {
    const device = await navigator.bluetooth.requestDevice({
      filters: [
        { services: [SA_SERVICE_UUID] }
      ]
    });
    return device;
  }

その得たオブジェクトに機器に設定されているルールに乗っ取って、バイトを書き込むと動きます。
※1バイト=8桁の2進数(例:0000 0010)=2桁の16進数(例:0x02)
UFOSAはNLS独自の企画で、
1バイト目
　・機器コード(UFOSAは、0x02)
2バイト目
　・固定（0x01）
　3バイト目
　・1桁が回転の向き、残り7桁がスピード（スピードは1～100）

const idByte = 0x02;
const directionAndSpeed = (direction << 7) | speed;
const value = new Uint8Array([idByte, 0x01, directionAndSpeed]);

仕組みの根本は、とにかく「このオブジェクトに3バイトを送り込むと動く」ということです。今回はマウスと連動させましたが、色々できそうですね。例えば、ブラウザゲームで、ナニが刺激されるのに合わせて３バイト書き込めば、それだけで連動になるので可能性無限大・・・！

遅延を防ぐ仕組みがついたsetSpeedSaが偉大

連続で命令がきて、キューに溜まると遅延してしまうので、溜めずに破棄されて最後にした命令が実行されます。
詳しくは、@yotto_さまの記事へ。

今回はマウスの動きに合わせてsetCsvが走るようにした

onmousemoveのたびに、座標に応じたスピードでsetSpeedSaをするだけ。
マウスの位置のX,Y座標を、操作範囲内の上から何％の位置にあるかという情報に置き換えて、setSpeedSaにぶち込みます

//マウス移動時
  document.onmousemove = onmousemove;
  onmousemove = function(e) {
    // マウスの位置のXY
    h_mouseXY.innerHTML = `マウス：x:` + e.pageX + `　y:` + e.pageY;
    // この瞬間の画面サイズ
    h_mouseXYSize.innerHTML = `（表示領域：x:` +  window.innerWidth + `　y:` + window.innerHeight+`）`;
    // 位置の％
    h_mouseXYPer.innerHTML = `位置の％：x:` + e.pageX/window.innerWidth*100 + `％　y:` + e.pageY/window.innerHeight*100　+　`％`;
    //paraをオブジェクトにする、これを渡せば動く
    let para=makeMauseXYPara(e.pageX,e.pageY);
    h_mouseXYPara.innerHTML = `位置パラ：x:` + para.direction + `　y:` +  para.speed;

    syncSetSpeedSa(para);
  }

  function makeMauseXYPara(x,y){
    const xPer=x/window.innerWidth*100;
    const yPer=y/window.innerHeight*100;
　　（略）
 }

簡単だったのに、およそ思った通りの挙動をしてくれてイイ感じ!

今後：動画を見ながらランダム操作できるようにする

一定の動きだと刺激になれやすいので、ランダムなんだけどリアルタイムで操作するっていうのをつくる、かもしれない。
UFOSAを使っている方々がどういった機能を欲しがっているのか調査中です。

本記事のアプリはこちら
https://mi2no.com/xwp/sa_msu/

それでは、また。