9wick
9wick.qrunch.io

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

2018/12/05に投稿
この投稿は別サイトからのクロス投稿です(クロス元:https://qiita.com/wicket/items/4...

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上のアンケートにして、眼鏡でアンケート結果を表示みないなこととかすると楽しいかも?と企んでます

関連記事

コメントはありません。
9wick
9wick.qrunch.io
フォロー
フォロワー
ブログを開設

クランチで技術ブログを
始めてみませんか?

この先は、クランチへのアカウント登録、及びログインが必要なページになります。

Markdownの書き方
見出し # 見出し(h1)
## 見出し(h2) , ### 見出し(h3) ...
リスト - 箇条書き
   - タブでインデント
番号付きリスト 1. テキスト
2. テキスト
改行 行末に半角スペース2つ
リンクの挿入 [タイトル](https://xxx.com)
引用 > テキスト
コード挿入 ```cpp:title
code
```
画像の挿入 ![代替テキスト](URL "タイトル")
太字 **テキスト**
斜体 *テキスト*
打消し線 ~~テキスト~~
水平線 ***
技術ブログを開設
ログイン