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

公開日:2018-12-05
最終更新:2018-12-05
※この記事は外部サイト(https://qiita.com/wicket/items/4c7dbfb280c...)からのクロス投稿です

IoTLT Advent Calendar 2018の5日目の記事です

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

どんなものか

View this post on Instagram

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

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

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

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

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

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

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

なぜ作ったのか

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

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

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

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

システム構成

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

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

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

工夫点

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

  • node.jsでglassesとchatのコードを分けてます
  • ただのチャットだと反応があったかわからないので、サーバー側でレスポンスを追加してます
  • チャット上のコマンドもポチッとワンクリックで押せるようにボタンを追加してます
  • 見た目も重要なので、配線がぐちゃぐちゃにならないようにLEDの系統を2系統に分けてます

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

それぞれの工夫点詳細

  • node.jsでglassesとchatのコードを分けてます

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

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

  • ただのチャットだと反応があったかわからないので、サーバー側でレスポンスを追加してます
  • チャット上のコマンドもポチッとワンクリックで押せるようにボタンを追加してます

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

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

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

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

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

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

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

## 課題点・今後

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

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

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

記事が少しでもいいなと思ったらクラップを送ってみよう!
36
+1
@9wick'の技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする