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

記事公開日:2016年12月16日


スポンサーリンク

9.コンパイル書き込み、実行

では、Arduino IDEでコンパイル書き込みしてください。

書込み終了したら、即シリアルモニターを115200bpsで起動してください。
すると、ルーター(アクセスポイント)と接続できれば、そこにローカルIPアドレスが表示されると思います。

次に、スマホをWi-Fi接続して、Google Chrome などのブラウザを起動して、URLアドレス入力欄にそのローカルIPアドレスを入力すると動画のようにWebSocket接続されると思います。

接続されたら、以下のような画面になります。

colorpicker06.jpg


明るさ調節やスピード調節スライダーは、ESP8266 へ連続してデータが送信されるので、処理が追い付かず、たまにフリーズします。
それを防ぐために、Transfer Rate で送る秒数をミリセコンド単位で調節してください。

カラーピッカーはAndroid では下図の様になります。

colorpicker01.jpg


詳細表示をタッチすると下図の様になります。

colorpicker02.jpg


結構オモシロイように調節できますね。
iOS ではこんな感じになってしまいます。

colorpicker04.jpg


これはiOS 10.2 Safari ですが、テキスト数値ですね。
でも、value値はちゃんと反映されてます。
色を変えるには数値を入力しなければなりません。
iOS ではまだまだ対応が遅れているという状況でしょうか・・・。

Windows 10 ではこのようになります。

colorpicker03.jpg


これは情報量が多くて、とても使い易いです。
ちゃんとカラーコードも表示されてますし、Goodです。

10.まとめ

いかがでしょうか。
ちゃんと動作しましたでしょうか。
もし、不具合等あったらコメント等でご連絡いただけると幸いです。

これで、このオブジェでクリスマスや正月など、雰囲気に合わせてリアルタイムで色を変えることができました。
しかもスマホでできるというのがイイですね。
これからもっといろいろアイデアが広がりそうです。

しかし、この記事を書くのにエライ労力がかかります。
とても疲れてしまいました。

ではまた・・・。

(追伸:)
その他、最新記事では、ESP32 や M5Stack を使ってNeoPixelを Wi-Fi コントロールしたりしています。

M5Stackと NeoPixel で Art-Net DMX を使った LED エフェクト実験

ESP32 と NeoPixel フルカラー LED テープで Wi-Fi 卓上イルミネーションオブジェを作ってみた


スポンサーリンク


 

mgo-tec電子工作ブログ管理人おすすめ
Amazon.co.jp
M5Stack Basic
スイッチサイエンス
Amazon.co.jp
ESPr Developer 32
スイッチサイエンス(Switch Science)
Amazon.co.jp
Amazon.co.jp

「オブジェの 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.

コメントを残す

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

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