マイクロビットで通信⑩【Web-serial-api+micro:bit+AFrame】第876回
このシリーズは，micro:bitとPCの間でデータ通信をいろいろとやっていこうと思っています． 今回からマイクロビットからの加速度データをA-Frameの立体モデルに反映するプログラムにチャレンジします。 参考にするサイトなどがないので、試行錯誤することになります。 早速今回も迷走気味です。 良く考えたら、グラフ表示不要なので、明日は、グラフ表示前のプログラムとの合体を試してみます。 是非、御覧ください。 ■チャプター 00:12 今撮影しているシリーズの説明 00:30 前回の振り返り 01:50 A-Frameの紹介 04:30 GithubでのJSプログラムの公開 07:00 本日のプログラムの解説スタート 17:00 合体したプログラムを実行して動作確認 20:00 本日のまとめとチャンネルの宣伝 ■本日のプログラム １）３）のプログラムとA-Frameのベースプログラムの合体（失敗作） https://tmdoi.github.io/website/js/serial/aframeMicrobit01.html ２）micro:bitに搭載しているプログラム（LED点滅付：0.3秒おきにXYZ方向の加速度を出力する） https://makecode.microbit.org/_PTegqvXPLEVx ３）Web Serial API を使って micro:bit からセンサーの値（XYZ）を読み取る＆リアルタイムなグラフ化 https://qiita.com/youtoy/items/6394a5570ddd54a2ce87 ４）【JavaScript 2020】 MQTT で受信したデータを Smoothie Charts（smoothie.js）以外でリアルタイムにグラフ化： Chart.js とプラグインを利用 https://qiita.com/youtoy/items/252f255c9d794bf3d964 ５）【JavaScript入門】sliceで文字列や配列(Array)を切り抜く方法まとめ https://www.sejuku.net/blog/25488 ◎受け取ったデータをWebブラウザのコンソールに表示する（HTML） https://tmdoi.github.io/website/js/serial/webApiInputV2.html ◎Web Serial API を使って micro:bit からセンサーの値を読み取る（途中段階まで） https://qiita.com/youtoy/items/9606c58369796a65f8f5 ◎Web Serial API を使った micro:bit への値の書き込み https://qiita.com/youtoy/items/f77dc205e817f31a4e18 ◎Web Serial API を最短の手順で試したくてやったこと（micro:bit を利用） https://qiita.com/youtoy/items/a0071a6d2ef7f6930d33 ◎ブラウザで使えるシリアル通信のコンソール https://googlechromelabs.github.io/serial-terminal/ ■関連サイト ◎かんたんマイコン教室チャンネルのトップページ https://www.youtube.com/channel/UC41qeaw-dXNdl0puKkXiuKA ◎BLT-UART通信の拡張機能の説明サイト https://github.com/microsoft/pxt/issues/4796 ◎micro:bit公式ホームページ https://microbit.org/ #microbit #web serial #uart #javascript #js #グラフ #chart.js #aframe
このシリーズは，micro:bitとPCの間でデータ通信をいろいろとやっていこうと思っています． 今回からマイクロビットからの加速度データをA-Frameの立体モデルに反映するプログラムにチャレンジします。 参考にするサイトなどがないので、試行錯誤することになります。 早速今回も迷走気味です。 良く考えたら、グラフ表示不要なので、明日は、グラフ表示前のプログラムとの合体を試してみます。 是非、御覧ください。 ■チャプター 00:12 今撮影しているシリーズの説明 00:30 前回の振り返り 01:50 A-Frameの紹介 04:30 GithubでのJSプログラムの公開 07:00 本日のプログラムの解説スタート 17:00 合体したプログラムを実行して動作確認 20:00 本日のまとめとチャンネルの宣伝 ■本日のプログラム １）３）のプログラムとA-Frameのベースプログラムの合体（失敗作） https://tmdoi.github.io/website/js/serial/aframeMicrobit01.html ２）micro:bitに搭載しているプログラム（LED点滅付：0.3秒おきにXYZ方向の加速度を出力する） https://makecode.microbit.org/_PTegqvXPLEVx ３）Web Serial API を使って micro:bit からセンサーの値（XYZ）を読み取る＆リアルタイムなグラフ化 https://qiita.com/youtoy/items/6394a5570ddd54a2ce87 ４）【JavaScript 2020】 MQTT で受信したデータを Smoothie Charts（smoothie.js）以外でリアルタイムにグラフ化： Chart.js とプラグインを利用 https://qiita.com/youtoy/items/252f255c9d794bf3d964 ５）【JavaScript入門】sliceで文字列や配列(Array)を切り抜く方法まとめ https://www.sejuku.net/blog/25488 ◎受け取ったデータをWebブラウザのコンソールに表示する（HTML） https://tmdoi.github.io/website/js/serial/webApiInputV2.html ◎Web Serial API を使って micro:bit からセンサーの値を読み取る（途中段階まで） https://qiita.com/youtoy/items/9606c58369796a65f8f5 ◎Web Serial API を使った micro:bit への値の書き込み https://qiita.com/youtoy/items/f77dc205e817f31a4e18 ◎Web Serial API を最短の手順で試したくてやったこと（micro:bit を利用） https://qiita.com/youtoy/items/a0071a6d2ef7f6930d33 ◎ブラウザで使えるシリアル通信のコンソール https://googlechromelabs.github.io/serial-terminal/ ■関連サイト ◎かんたんマイコン教室チャンネルのトップページ https://www.youtube.com/channel/UC41qeaw-dXNdl0puKkXiuKA ◎BLT-UART通信の拡張機能の説明サイト https://github.com/microsoft/pxt/issues/4796 ◎micro:bit公式ホームページ https://microbit.org/ #microbit #web serial #uart #javascript #js #グラフ #chart.js #aframe