スマホのジャイロセンサーで I2C 8×8 LED matrix を WebSocketコントロールしてみた。

記事公開日:2015年12月17日
最終修正日:2018年9月26日

なかなか忙しくて、WebSocketライブラリをバージョンアップできてませんが、不意に通信遮断する原因が大分突き止められてきました。

ただ、今回は新たにスマホのジャイロセンサーでLEDマトリックスをコントロールできてしまいましたので、その報告をしたいと思います。ソースコードはまだアップできなくて申し訳ございません。

自作のWebSocket ライブラリを変更して、JavaScript でスマホのジャイロセンサー値を取得して ESP-WROOM-02 ( ESP8266 ) にI2C接続した 8×8 LED マトリックスをリアルタイム制御しました。

スポンサーリンク

ESP-WROOM-02 はいつものように スイッチサイエンスさんの開発ボードを使いました。
Amazon.co.jp さんで購入できますが、売れていて在庫切れの場合がありますのでご注意ください。


もちろん、スイッチサイエンスさんのウェブショップでも販売しております。

I2C 8×8 mini LED matrix は Adafruit さんのものを使用しました。


これのI2C制御方法は前回の記事を参照してください。かなりクセがあり、ハマります。

スマホは Android 4.4.2 最新版Google Chrome です。
通信環境は2.4GHz 100Mbps です。

動画はこんな感じです。

スマホを傾けただけでLEDマトリックスのドットが移動していってますよね。
WebSocket通信ができれば、スマホからジャイロセンサー値を取得することは意外と簡単でしたので、それをESP-WROOM-02 ( ESP8266 ) へ伝えるくらいで済みました。

これをライブラリ化しようと思ったのですが、なかなか難しく、やっぱりユーザーが自分でJavaScriptは組んでいった方が良いと思いました。
Canvas要素のグラフィックコントロールもライブラリ化はなかなか難しいので、諦めようかと思ってます。
ただ、その他をライブラリ化したおかげで、かなり自由度が高まりました。

余談ですが、HTML5 Canvas要素の使い方はネット情報でもある程度体得できますが、さらに確実に知識に入れるためには私はこの本を参考にしました。


電子書籍版もあるので、とても重宝しました。
JavaScriptだけでなく、Canvas要素の使い方も多く紹介されており、素晴らしいです。

WebSocket通信が不意にコネクション切断される原因は、スマホ側からのデータ送信トラフィックが多すぎてバッファオーバーフローしたり、不要な文字列を送信してしまったり、再接続したときに前のコネクションデータがバッファに残っていたりする場合が多いようです。
また、ネットワーク環境やスマホのスペックによって、データを受け取りきれなかったりすることもあります。
そうなると、WebSocketの規格では通信を切断する仕様になっているようです。
Errorイベントも発生しないんです。(それくらいは発生してくれてもいいのに・・・。)
それを避けるために、通信バッファを監視したり、送信を間引いたり、送信したデータは受信先で完全に受信し切る必要があることが分かってきました。
まだまだ勉強不足でした・・・。

この辺も踏まえて、近々EasyWebSocketライブラリをバージョンアップする予定です。

ということで、今回は単なる報告でした。
次回こそはライブラリバージョンアップか、このCanvas要素のソースコードをアップしたいと思ってます。

ではまた・・・。

スポンサーリンク

mgo-tec電子工作 関連コンテンツ ( 広告含む )
Amazon.co.jp 当ブログのおすすめ

投稿者:

mgo-tec

Arduino , ESP32 ( ESP-WROOM-32 ) , ESP8266 ( ESP-WROOM-02 )等を使って、主にスマホと連携した電子工作やプログラミング記事を書いてます。ライブラリも作ったりしてます。趣味、独学でやってますので、動作保証はしません。 電子回路やプログラミングの専門家ではありません。 畑違いの仕事をしていて、介護にドップリ浸かりそうな年配者です。 少しだけ電気の知識が必要な仕事なので、電気工事士や工事担任者等の資格は持っています。

コメントを残す

メールアドレスが公開されることはありません。

*画像の文字を入力してください。(スパム防止の為)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください