1000m タイムトライアルサイト 構築(4)

(プログラムの中身)

 サンプルプログラムの中身を見てみると、noifications.jsにある

function handleNotifications(event) {
let value = event.target.value;
let a = [];
// Convert raw data bytes to hex values just for the sake of showing something.
// In the "real" world, you'd use data.getUint8, data.getUint16 or even
// TextDecoder to process raw data bytes.
for (let i = 0; i < value.byteLength; i++) {
a.push('0x' + ('00' + value.getUint8(i).toString(16)).slice(-2));
}
log('> ' + a.join(' '));
}

が、”0x01 0x75 0x02 0x00 0x00 0xfc 0xd5”等のデータを読み取る部分であることがわかる。ここを書き直して、ホイールの回転数と時間を計算して出力するようにしてやれば、WEBブラウザで動くスピードメーターのホームページが出来上がるというわけだ。

 handleNotificationsという関数は、

myCharacteristic.addEventListener('characteristicvaluechanged',
handleNotifications);

という呼び出し方をしているので、characteristicのvalueがchangeしたら、すなわちセンサーからの通知(notifications)が行われる毎に、何度も呼び出されるような関数であるようだ。

 というような研究を重ねつつ、canvas要素やjavascriptによるカメラ操作(これはびっくりした。WEBサイトでカメラ操作できるとは・・・でも考えてみたら、すでにWEB会議でも使ってた)なども勉強しながら、2週間くらいかかって、ようやくでっち上げたのがこのサイト。なんとか動いているけれど不安定、不安定なのがコードによるものなのか、センサー側の問題なのか良くわからない。あちこちのサンプルプログラムの切り貼りなので、中身はもう少し整理しないと、自分でもコードが読みにくい。たぶん、不必要にグローバル変数多用していると思います。

ribblecrmo.web.fc2.com

 最初は、githubでサイトを立ち上げようと思って試してみたけれど、javascriptが使えないことがわかって断念。無料でjavascriptを使ったサイトが立ち上げられるところを探して、fc2にたどり着いた次第。ヘンな広告が出るのはご容赦。

 使い方は次のページで。