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

ESP8266 ( ESP-WROOM-02 )

こんばんは。

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

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

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

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

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

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

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

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

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

  • 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 では動作しません。

ESP-WROOM-02開発ボード
スイッチサイエンス(Switch Science)

ESPr Developer(ピンソケット実装済)
スイッチサイエンス(Switch Science)

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

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

スポンサーリンク

1.準備するもの

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

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

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

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

Wi-Fi ルーター(アクセスポイント)もできるだけ高スペックのものを使用してください。
私は、自宅のケーブルテレビ有線ルーターに、コンパクトで持ち運び便利な、Wi-Fi ホテル用ルーターを使ってます。
以下の製品は一世代前のものですが、ハードな通信をしなければ、これで意外とイケます。

もっと高速通信のものを使えば、良いかとも思うのですが、それだと 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形式ライブラリ のインストール方法

コメント

  1. john c mclean より:

    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

    • mgo-tec mgo-tec より:

      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.

  2. Kim hyung bae より:

    “オブジェの LED カラー を スマホ ブラウザ で WiFi リアルタイム コントロール してみた” これはSoftAP Modeでは動かないでしょうか?

    • mgo-tec mgo-tec より:

      Kim hyung bae さん

      記事をご覧いただき、ありがとうございます。

      このプログラムコードは随分昔に作ったもので、今ちゃんと動くかどうか怪しいです。
      プログラムコードを今見返すと、当時は未熟で、お恥ずかしい限りです。

      さて、SoftAP モードですが、

      ews.AP_Connect(ssid, password);

      というところを、以下に書き換えてみて下さい。

      ews.SoftAP_setup(ssid, password);

      ssid やパスワードは9文字以上に設定すれば良かったかと思います。

      ただ、softAPモードは速度が遅く、到達距離も短いです。
      以上、試してみて下さい。
      動くかどうか分かりませんけど。

タイトルとURLをコピーしました