メガネをオンライン化して光らせる #JavaScript

IoTLTで何度か身につけて喋ってる光るメガネの詳細の話をしたいと思います。

どんなものか

View this post on Instagram

登壇者メガネを全部これにしたいな笑 #iotlt

n0bisukeさん(@n0bisuke)がシェアした投稿 - 2018年10月月22日午前4時05分PDT

上のリンク先の動画を見てもらえればと思いますが、メガネが光ります。光り方をweb上から操作することができます

最大輝度にすると目からビーム！って感じになります

もうちょっとおとなしい説明動画はこちら

※クリックでyoutubeに飛びます

ソースコードはこちらで公開しています

IoTLTでは登壇した人にメガネを掛けてもらって、懇親会のときに誰が登壇したかわかるようになってます。

ウフルさんにピカピカメガネ登場#iotlt pic.twitter.com/61HhweU8Gt
— チャラ電Mitz (@CharaDenMitz) 2018年2月15日

それの説明で毎回こんな会話を聞くんですね

「IoTLTでは登壇者にメガネをかけてもらいます」
「この眼鏡はLEDが入ってIoTっぽい」

あれ、IoTのIってなんだったっけ？？　となったので、Iの入った光るメガネを作りました。

インターネット要素をどう入れようかなと思ったのですが、どうせならユーザー参加型のコンテンツを作りたいなと思ってたこともあり、ぽちぽちとボタンを押したら色が変わるようにしようと思いました。

となると、インターフェースをwebでつくって、サーバー立てて、そこでユーザーのコマンド受信して、それをマイコンに送って、マイコンが色を変えて・・・とたくさんあってめんどくさかったので、検索して3秒で見つけたnode.jsチャットシステムとobnizをつかって楽をしてます。

右側がチャットシステムで、ほぼそのまま使ってます。
そのチャットシステムのnode.js内で、特定のキーワードが出てきたらobnizに色を変えてねコマンドを送って、色を変えてます。

此処から先は登壇時に話せてない部分です。
メガネを作るにあたって、いくつか工夫しています

ひとつひとつ話したいと思います

公開しているソースコードを読んでもらえばわかりますが、glassesクラスを作ってます。つまり何が言いたいかと言うと、再利用ができるんです。

チャットから動く光るメガネ以外にも、もうすぐ登壇だよ！ってお知らせするメガネとか、#iotltのツイートに反応するメガネとか、そんなのも作れます（やるかどうかは未定）

この２つはweb上のUIの工夫ですね.

色変えるボタンを押しても変えたどうかってよくわからないじゃないですか。
こんな感じで、サーバーからのレスポンスを赤色にするようにしてます。

中身はとっても簡単で、「###obniz###」がメッセージの中に入ってたらそれはサーバーのメッセージと言う決めをして行ってます。

また、ワンクリックボタンですが、フロントのjsでボタンを押したら特定の内容をpostするコードを書いています。
なのでこのボタン以外でもふつーにチャットとして使ってもらって、その中でキーワードが出てきたら反応する　ということもできます。

見た目も重要なので、配線がぐちゃぐちゃにならないようにLEDの系統を２系統に分けてます今回使ったのはWS2812というLEDモジュールで、これは複数個あれば延長できるんですね。

なので頑張ればこの図のように４ピンしか使わずに全部つなぐことができます。

でもちょっとこれだと配線が汚くなるので、見た目重視でピンを贅沢に使って２系統でやってます

何度か登壇してわかったのですが、何よりもの問題はかけてる本人は色が変わってるかどうかわからないですね。
ちゃんと動作してるか毎回ヒヤヒヤしながら登壇してます笑

あとは大人数が同時にアクセスすると、それでも動作するのはすごいんですが、誰が操作したのか良くわからない問題もあります。

みんなに"obniz使ってる人ー？"って聞く代わりに、web上のアンケートにして、眼鏡でアンケート結果を表示みないなこととかすると楽しいかも？と企んでます