先日のヒーローズリーグにてメンターをしつつ、エキシビジョン発表枠でHoloLens1とobnizで触覚連動させたメモです。
obniz Hand のプロトタイプ
以前にobnizを手に装着するデバイスの実験はしていました。
これで実際にある程度イケるんじゃないかという感覚があったので今回発展させました。
やりたいこと
今回はHoloLensでデータ世界に触れると現実のobnizでGrove バイブレーションモーターが反応するという仕組みを作りました。
まずは実験
obnizでGrove バイブレーションモーターの動かす感覚をつかみます。
5本指で動くように準備。
実際動かしてみて、GND・VCCを律儀に引き出してしまうと、あっというまに、ポートを消費してしまうことがわかりました。
オリジナル基板を発注し基礎実装
GND・VCCを共有するために、調整します。
Fusion PCBに依頼します。
VCC・GNDは共有で、デジタル入出力だけに特化して、5つ同時に付けれる仕組み。
Groveコネクタを用意します。
はんだ付けします。
Grove バイブレーターとつないでいい感じです。
手袋に実装します
このあたりまで、春辺りから断続的に実装していました。
いよいよ、以前の obnizに複数のGrove Mech Keycap をつけて光り方やボタン感を検証したメモ をベースに手袋へ実装します。
結束バンドでobnizを手袋に装着。
指の部分のGrove バイブレーションモーターも結束バンドでいい具合に固定。
じゃじゃーん。
裏側もいい感じに、左手に装着できました。
obnizだけで単体で動く仕組みはざっくりこんな感じです。
html <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script> <script src="https://unpkg.com/obniz@2.1.0/obniz.js" crossorigin="anonymous"></script> </head> <body> <div id="obniz-debug"></div> <h1>obniz instant HTML</h1> <button id="on">ON</button> <button id="off">OFF</button> <div id="print"></div> <script> var obniz = new Obniz("OBNIZ_ID_HERE"); async function loopAction(){ console.log("loopAction"); obniz.io10.output(true); await obniz.wait(500); obniz.io9.output(true); await obniz.wait(500); obniz.io8.output(true); await obniz.wait(500); obniz.io7.output(true); await obniz.wait(500); obniz.io6.output(true); await obniz.wait(500); obniz.io10.output(false); await obniz.wait(500); obniz.io9.output(false); await obniz.wait(500); obniz.io8.output(false); await obniz.wait(500); obniz.io7.output(false); await obniz.wait(500); obniz.io6.output(false); await obniz.wait(500); console.log("end"); } obniz.onconnect = async function () { obniz.display.clear(); obniz.display.print("Hello Grove Hand"); obniz.io11.output(false); obniz.io5.output(true); obniz.switch.onchange = function(state) { $('#print').text(state); obniz.display.clear(); obniz.display.print(state); } $('#on').click(async function () { obniz.display.clear(); obniz.display.print("ON"); await loopAction(); }); $('#off').click(function () { obniz.display.clear(); obniz.display.print("OFF"); obniz.io10.output(false); obniz.io9.output(false); obniz.io8.output(false); obniz.io7.output(false); obniz.io6.output(false); }); } </script> </body> </html>
ここにさらにMQTTの仕組みを加えました。
いざ登壇
なかなか良さげな仕組みできた。明日持って行こう。 #obniz #seeedjp #seeed pic.twitter.com/Vd8SyKuiVT
— Tanaka Seigo (@1ft_seabass) September 14, 2019
ということで、メンターしながらなので当日は2時間も制作できませんでしたが、今までの積み重ねもあったので、ぎりぎりエキシビジョン発表枠で間に合いました。
タイトル。
ぶっつけ本番のデモ。
ここまでデモでやってみて、なぜか手袋をつけた手のほうでツマミ動作がうまく認識できず苦戦。あと絡み合った技術すぎて説明の難しさもありました。これは今度の課題です。
この時点では、結局手袋をつけてない手の方でHoloLens内のブロックを触ると、手袋が連動できるという形でしのぎました。
その後のタッチアンドトライでは、結構な方に触っていただきました。うれしい。
わーい。いただいた! #個人賞 #ヒーローズリーグ pic.twitter.com/or0szv79G0
— Tanaka Seigo (@1ft_seabass) September 15, 2019
うまくいかなかったくやしさはあるものの、いままで積み上げてきた技術を、ちゃんとつないでお伝えすることができて良かったです。
なぜ動作しなかったのかは検証して見えてきているので「obniz Hand(手袋)でHoloLens内のデータ空間を触ると振動で連動する」ということに近づけていきたいと思います!