ESP32 SPIFFS 用 Easy WebSocket ライブラリを作ってみました

記事公開日:2018年1月11日
最終修正日:2018年9月26日
※GitHub の Arduino core for ESP32 のインストールは、
2018/03/05以降の最新版を使用してください。

こんばんは。

今回は以前から要望のあった、Arduino – ESP32 の SPIFFS 用 Easy WebSocket ライブラリをようやく作りました。
お待たせしました。

SDカード用はかなり前に作成していて、SPIFFSより高速読み取りで満足していたのですが、Arduino – ESP32 の SPIFFSアップローダーが抜群に調子良いので、これは SPIFFS をメインにいろいろ作った方が便利だろうなと思ったからです。

SDカードのものと使い方はそれほど変わりません。
ただ、WiFi multi なども使えるようにして、Wi-Fiアクセスポイント接続周りを自由に設定できるようにしました。

また、Arduino core for ESP32 のライブラリに標準装備されている、Mbed TLS ライブラリを使用して、外部shaファイル不要で WebSocket ハンドシェイクができるようになりました。
使い方は SD カードのものと変わりありません。
ただ、インストールされたライブラリフォルダ内に shaファイルが無くなっただけです。
私的にはこれは結構画期的なことで、これを進めていけば、いずれ WebSocket の SSL化もできそうな気がしています。
今年はそれが目標ですね。

WebSocket 通信は、ESP32 と ブラウザで通信できる、リアルタイム双方向同時通信プロトコルです。
残念ながら、ローカルエリアネットワーク内でしか操作できませんが、将来的に SSL化できるようになると、インターネットで遠隔リアルタイム双方向通信ができるかも知れません。
スマホアプリのBlynkを使えばそれはできますが、アプリを使わないでもブラウザで出来るという所が、自由度高くて魅力的ですよね。

ではまず、単純なLED調光するだけのサンプルスケッチを動作させた動画はこんな感じです。

これの使い方はmicro SD を使ったものと変わりありませんが、後述してあるソースコードを見て分かる通り、マルチタスクを使っています。

このサンプルスケッチに前回の記事の OLED SSD1331 の日本語文字スクロールを組み合わせると、こんなことができます。

いかがでしたでしょうか。

SPIFFS でフォントを読み込んでいる割にはスクロールがスムースですよね。
実はこれはフォントデータをグローバル変数へ全て一旦取り込んでいるから可能なのです。
その分、SRAMを消費してしまうので、あまり良い方法とは言えません。
でも、今回の目的は WebSocketライブラリが出来たヨ! という報告なのでご容赦ください。

また、途中でピクセルノイズが出ています。
実はこれの原因が未だ不明なのです。
解る方がいらっしゃったら教えてくださると助かります。

1文字スクロールする度にフォントを読み込む場合、スクロールをスムースにさせるためには、フォントデータを改良しないと無理です。
東雲フォントライブラリの計算式を見直して、計算が速くなるように修正しましたが、それほど効果は望めませんでした。
これは今後の課題ですね。
ということで、これの使い方をザッと説明します。

スポンサーリンク

推奨ブラウザについて

WebSocket 通信で推奨するブラウザは、Google Chrome です。

自作ライブラリでは、まだWebSocket をSSL化できていないので、Windows Edge はまず動作しませんのでご注意ください。

iOS の Safari でも動作しますが、最も使いやすいのは Google Chrome です。

スマホは最新の高速 CPU のものを使用してください。
古いスマホや古い Android OS では動作しない場合があります。

準備するもの

ESP32-WROOM-32 ( ESP32 ) 開発ボードは以下がお勧めです。

ESPr Developer 32 (スイッチサイエンス製)

これはピンヘッダが別売りなので、別途ハンダ付けが必要です。

USB電源の突入電流対策や保護機能が充実していてお勧めです。
もちろん、Amazon.co.jp以外のスイッチサイエンスウェブショップ直売もあります。

ESPr® Developer 32

その他、Espressif System純正の ESP32-DevKitC でもOKですが、Amazon.co.jpでは現在販売されていないようなので、秋月電子通商さんやマルツパーツさんをご利用ください。
マルツパーツさんで売っているものには CPU が Rev.1 のものがあるようです。

ESP32-DevKitC ESP-WROOM-32開発ボード

OLED SSD1331 SPI モジュール

96×64 pixel の小型フルカラー有機EL ( OLED ) で、ディスプレイドライバに SSD1331 を使用しているモジュールです。
SPIインターフェースのものを使います。
Amazon.co.jp では中国販売店しかなく、到着まで10日~2週間程度かかります。

砲弾型LED

3.3V用のLED で、使用電流が少ない一般的な砲弾型LED で良いです。
ESP32 の GPIO には最大 12mA しか流せないので、5mA程度で点灯するものが良いです。

電流制限抵抗またはCRD ( 定電流ダイオード )

ESP32 に過大電流を流さないようにする電流制限抵抗は、ご自分で適当な値のものを選んでください。
LED の色によっては、同じ抵抗値でも明るさが異なります。
一般的に100Ω~10kΩです。
特に、私の手持ちの緑色LED では、抵抗を100Ωにしないと、まともに光りませんでした。

ESP32 のGPIO に過大電流を流さない目的とするならば、10mA以下の CRD ( 定電流ダイオード )でもOKですが、明るさ調節が難しいです。

ブレッドボード、ジャンパーワイヤー、ピンヘッダ等

ブレッドボードは列が多いサンハヤトのSAD-101 をお勧めします。
他の物は列が少なくて、開発ボードをセットするだけで接続できるピンが無くなってしまいます。

ESPr Developer 32 を組み立てておく

ESPr Developer 32 はピンヘッダやピンソケットが別売りなので、別途購入してハンダ付けする必要があります。
以下の記事を参照してみてください。

ESPr Developer 32 ( スイッチサイエンス製 ) を使ってみました

では、次は接続方法やライブラリインストール方法を説明します。

スポンサーリンク

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

投稿者:

mgo-tec

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

「ESP32 SPIFFS 用 Easy WebSocket ライブラリを作ってみました」への5件のフィードバック

  1. ESP32 SPIFFS 用 Easy WebSocket ライブラリの公開有難う御座います。
    LEDリアルタイム調光スケッチと、有機EL SSD1331をリアルタイム制御スケッチ共に動作確認出来ました。
    全角文字のスクロール、スムーズな動作に感激です。SPIFFSのメモリサイズアップも問題なく出来ました。
    赤、青、緑のLED をスマホでリアルタイム調光もESP02にくらべ反応も早く感じます。
    私は家電の制御にSPIFFS 用 Easy WebSocketを利用してます。
    余談ですがIPアドレスは固定にて使用してます、スケッチの void setup(){ の
    次に、2行追加して モニターに表示されたIPアドレスに書き換えてます、XXXの部分
    WiFi.mode(WIFI_STA); // 無線LANをSTAモードに設定

    WiFi.config(IPAddress(XXX, XXX, XXX, XXX), IPAddress(XXX, XXX, XXX, 1), IPAddress(255, 255, 255, 0));
    動作確認テストのみなら必要ないかも
    いつも貴重なブログでに感謝してます、有難う御座いました。

    1. 太田さん

      こちらこそ、いつもブログご覧いただき、ありがとうございます。

      ちゃんと動いてくれてホッとしました。
      家電の制御に使っていただけるとは、感謝感謝です。

      固定IP で使ってらっしゃるんですね。
      やっぱり、アクセスポイントとのコネクションはユーザーが自由に設定出来た方が良いですね。

      もう ESP32 を使ってしまうと、私は ESP8266 には戻れなくなってしまいました。
      ESP32 の方がマルチタスクで動作できて、CPU も高速なので、WebSocket通信も確実に速いし、安定してますね。

      今年は WebSocket をいろいろ発展させていきたいと思っております。
      今後とも当ブログをよろしくお願いいたします。
      m(_ _)m

  2. mgo-tec 様

    いつも大変参考にさせていただいています。
    ESP32版 SPIFFS対応のwebsocket ライブラリの公開
    大変ありがたく思います。
    リアルタイム調光もうまく使うことができました。
    ただSPIFFS版ではcolor_pickerが実装されていませんが、
    SPIFFSではなにか技術的に使えなかったのでしょうか?

    機能的にはRGBのスライダーで調光できるので問題ないですが、
    ちょっと欲がでてしまいました。

    1. mkobaさん

      記事をご覧いただき、ありがとうございます。
      しばらく WebSocket を使っていなかったので、思い出すにちょっと時間がかかりました。

      実は、最近は M5Stack ばかり使っていて、M5Stack の場合は SPIFFS を使うよりも micro SD カードを使った方が圧倒的に処理が速いので、SPIFFS 版の EasyWebSocket を保守していなかったということが実情です。
      M5Stack に限らず、ESP32開発ボードでも同じで、micro SD カードの方が圧倒的に速いです。
      ですから、もう SPIFFS の保守を止めようかと思っていたくらいです。

      でも、mkobaさんからリクエストがあって、特に技術的に難しいこともなかったので、color_picker関数を追加しておきました。
      beta ver 1.61 です。

      https://github.com/mgo-tec/ESP32_SPIFFS_EasyWebSocket

      使い方は、以下の記事を参照してください。
      ただし、SDカード用ですが、使い方は同じです。

      M5stack ( ESP32 )電光掲示板をスマホでリアルタイムコントロールしてみた

  3. mgo-tec様

    昨日の今日で早速対応していただけるとは、感謝感激です。
    たしかにSDカードの方が早いのですが、SPIFFSはESP32単体で
    テストできるので、テスト段階では重宝するので使っています。

    ありがとうございました。

コメントを残す

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

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

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