オブジェの LED カラー を スマホ ブラウザ で WiFi リアルタイム コントロール してみた

記事公開日:2016年12月16日
最終修正日:2017年10月9日

スポンサーリンク

こんばんは。

前回の記事では NeoPixel フルカラー LED とマイコンを使って、紙や光ファイバーで卓上オブジェを作りました。

今回は、更に一歩進んで、スマホのブラウザから、Wi-Fi の WebSocket 通信を使って、リアルタイムに色を変えたり、明るさを変えたり、回転スピードを調整したりしてみたいと思います。
要するに、ラジコンみたいな無線リモートコントロールをスマホでやってしまおうというものです。

まずは、ESPr Developer と NeoPixel Ring だけの以下の動画をご覧ください。

いかがでしょうか。
かなり、リアルタイムで色調整ができますね。

次に、前回の記事で作った光ファイバーオブジェを使うとこんな感じになります。

クリスマスやお正月でオブジェを作って、その場の雰囲気に合わせてカラーをスマホでリアルタイムに変えるっていう演出もできそうです。

これは、Webページ制作で使うHTMLタグのカラーピッカー(カラーコード抽出)を使用することで、意外と簡単に実現できました。
こんな感じのHTMLタグです。

<input type="color" value="#FF1234" >

ただ、このカラーピッカーはスマホやパソコンのオペレーティングシステム( OS )によって操作が異なるため、注意が必要です。
以下、ブラウザのHTML5 カラーピッカーの対応状況は以下の通りです。

  • Android 6.0.1  Google Chrome — ◎
  • Android 5.0.2  Google Chrome — ◎
  • Android 4.2.2  Google Chrome — ◎
  • Android 5.0.2  Firefox  — ×WebSocket すら接続できない
  • Windows 10 Google Chrome — ◎
  • Windows 10 Edge — ×WebSocket すら接続できない
  • iOS 10.2  Safari — △テキスト入力のみ

Web上ではこんな感じに表示されます。
↓これをクリックするとカラーピッカーが表示されます。

動画のように表示されなければ、そのブラウザは対応してません。
OSによるカラーピッカーの表示情況は最後の方に掲載してますので、ご覧ください。

動画でもあるように、Rotation OFF ボタンを押すとカラーピッカーボタンのValue値が更新され、色が変わります。
つまり、回転ストップした位置のLEDの現在色がブラウザに表示されるわけです。
今回の目玉の機能です。
我ながらなかなか画期的だと思いました。

これができれば、プログラムをいちいち書き換えないでも、リアルタイムに色が変えられるので、その場の雰囲気にスピーディーに合わせられますね。

ところで、前回前々回の記事でもお伝えしましたが、NeoPixel フルカラーLED は5V駆動です。
しかし、今回はスマホとWi-Fi通信するということで、スイッチサイエンスさんの ESPr Developer のみ使用します。
Arduino UNO では動作しません。

NeoPixel のロジック動作電圧範囲外なので、うまく動かないこともありえます。
そのことを十分ご理解した上で使ってみてください。

では、これについて順に説明していきます。

1.準備するもの

オブジェ側は前回の記事と全く同じですので、それを参照してください。
(今回はArduino UNO は使えませんのでご了承ください)

また、今回はそれに加えて、2.4GHz 無線LAN ( Wi-Fi ) ルーター環境と、操作するためのスマートフォンが必要です。

スマートフォンは出来るだけ最新機種で、高速CPU で、多くのメモリのある高スペックのものを使用してください。
OS はAndroid で、ブラウザはGoogle Chrome 推奨です。

ESP8266 チップの処理能力にも問題がありますが、通信環境も大きく影響します。
明るさ調整や、スピード調整のようなスライダーを使うと、データが連続送信されますので、通信トラフィックが混雑して、途中でフリーズする可能性があります。

Wi-Fi ルーター(アクセスポイント)もできるだけ高スペックのものを使用してください。
私は、自宅のケーブルテレビ有線ルーターに、コンパクトで持ち運び便利な、Wi-Fi ホテル用ルーターを使ってます。
以下の製品は一世代前のものですが、ハードな通信をしなければ、これで意外とイケます。
Amazon.co.jp
もっと高速通信のものを使えば、良いかとも思うのですが、それだと ESP-WROOM-02 ( ESP8266 )側の処理能力が追い付きませんので、これくらいがよろしいかと思ってます。

2.組み立て、接続等

前回の記事の4項目まで済ませておいてください。

また、Wi-Fi 環境を準備しておき、ルーターのSSID やパスワードは事前に設定しておいてください。

3.Arduino IDE 設定

Arduino IDE は必ず Arduino.cc ページのものを使用してください。
動作確認済みのバージョンは 1.6.13 ( 2016/12/15 時点 ) です。

そして、Arduino IDE には ESP8266ボードをインストールしておいてください。
インストール方法は以下のページを参照してください。

Arduino IDE に Staging(Stable)版ESP8266 ボードをインストールする方法

4.Arduino IDE へ SPIFFSファイルシステムインストール

SPIFFSファイルシステムとは、ESPr Developer ( ESP-WROOM-02, ESP8266 ) のフラッシュにHTMLファイルなどを保存できるようにするための、Arduino IDE 用の ESP8266 プラグインです。
これのインストール方法は以下のページを参照してください。

Arduino IDE に ESP8266 SPIFFS ファイルシステムアップローダーをインストールする方法

これで、ESPr Developer ( ESP-WROOM-02, ESP8266 ) には最大3MB までのユーザーデータを保存しておくことができます。

5.Adafruit NeoPixel ライブラリのインストール

Adafruit の NeoPixel ライブラリは以下のページを参照してインストールしておいてください。

NeoPixel と紙で フルカラー LED イルミネーション オブジェを作ってみた

6.EasyWebSocket_SPIFFS beta ver 1.48 をインストール

当方の自作ライブラリ、EasyWebSocket_SPIFFS をインストールします。
これは、Arduino IDEの ESP8266チップ用ライブラリで、スマホやPCのブラウザで双方向リアルタイム通信 ( WebSocket通信 ) を行うためのものです。

今回はバージョンアップして、Beta ver 1.48 となりました。
GitHub のこちらのページ にありますので、ZIPファイルをダウンロードしてください。

インストールする前に必ず行っていただきたいのは、以前にインストールした EasyWebSocket ライブラリは、フォルダごと削除して、アンインストールしておいてください。
Windows 10 ならば、ファイルパスは以下のようなところにあると思います。

C:\Users\xxxx\Documents\Arduino\libraries

xxxx はご自分のPCのユーザーネームです。

次に、ダウンロードしたZIPファイルをArduino IDE にインストールする方法は以下のページを参照してください。
ZIPファイルを簡単にインストールする方法があります。

GitHubにある ZIP形式ライブラリ のインストール方法

スポンサーリンク


mgo-tec電子工作 関連コンテンツ ( 広告含む )

投稿者:

mgo-tec

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

「オブジェの LED カラー を スマホ ブラウザ で WiFi リアルタイム コントロール してみた」への2件のフィードバック

  1. Hi,

    Do you do custom work?

    Really like the yahoo news wroom oled

    Do you sell them? Do you have them in English.

    I need about 100 boards with color OLED

    Thank you

    John

    1. Thank you very much for your very grateful comment.

      Unfortunately, I do not sell.
      About Yahoo news OLED, English version is also under consideration.
      If it can be done, I will inform you in this comment section.
      Code will be made public.
      Please wait for a while, I think that it will take some time.

コメントを残す

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

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