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

こんばんは。

前回の記事では 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上ではこんな感じに表示されます。
↓これをクリックするとカラーピッカーが表示されます。

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

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

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

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

ESP-WROOM-02開発ボード

スイッチサイエンス(Switch Science)

ESPr Developer(ピンソケット実装済)

スイッチサイエンス(Switch Science)

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

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

１．準備するもの

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

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

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

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

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

バッファロー BUFFALO USB 無線LAN親機 single_band 11ac/n/a/g/b 433/150Mbps トラベルルーターホワイト WMR-433W2-WH【iPhone13メーカー動作確認済み】

バッファロー

￥3,980（2024/11/21 23:01時点）

もっと高速通信のものを使えば、良いかとも思うのですが、それだと ESP-WROOM-02 ( ESP8266 )側の処理能力が追い付きませんので、これくらいがよろしいかと思ってます。

２．組み立て、接続等

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

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

３．Arduino IDE 設定

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

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

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

４．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 までのユーザーデータを保存しておくことができます。

５．Adafruit NeoPixel ライブラリのインストール

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

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

６．EasyWebSocket_SPIFFS beta ver 1.48 をインストール

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

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

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

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

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

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

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

john c mclean より:

2017年1月7日 1:37 AM

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 より:
  
  2017年1月7日 8:03 PM
  
  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.
  
  返信
Kim hyung bae より:

2020年5月30日 3:56 PM

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

返信
- mgo-tec より:
  
  2020年5月30日 8:28 PM
  Kim hyung bae さん
  
  記事をご覧いただき、ありがとうございます。
  
  このプログラムコードは随分昔に作ったもので、今ちゃんと動くかどうか怪しいです。
  プログラムコードを今見返すと、当時は未熟で、お恥ずかしい限りです。
  
  さて、SoftAP モードですが、
```
ews.AP_Connect(ssid, password);
```
  というところを、以下に書き換えてみて下さい。
```
ews.SoftAP_setup(ssid, password);
```
  ssid やパスワードは９文字以上に設定すれば良かったかと思います。
  
  ただ、softAPモードは速度が遅く、到達距離も短いです。
  以上、試してみて下さい。
  動くかどうか分かりませんけど。
  返信