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

ESP32 ( ESP-WROOM-32 )

接続する

Easy WebSocket の LED 点灯のみのサンプルスケッチを使う場合の接続方法は以下の通りです。
これは、ESPr Developer 32 の場合です。

ESP32-DevKitC の場合も GPIO番号は同じです。

フルカラー OLED SSD1331 を使った場合は以下の通りです。

Arduino IDE の設定および SPIFFS 設定

※2018/01/18頃更新された、GitHub の Arduino core for ESP32 のインストールはしない方が賢明です。
SPIFFSファイルシステムが上手く動作してくれません。
2017/12/19 バージョンは正常動作しています。

事前に以下の設定を済ませておいてください。

●Arduino core for ESP32 のインストールおよび設定
Arduino core for the ESP32 のインストール方法

●SPIFFSアップローダープラグインのインストール
ESP-WROOM-32 ( ESP32 ) SPIFFS アップローダープラグインの使い方

●SPIFFS メモリサイズアップする
ESP-WROOM-32 ( ESP32 ) SPIFFS メモリサイズを大きくする方法

自作ライブラリのダウンロードおよびインストール

私が作った Arduino IDE 用ライブラリをインストールしてください。
Arduino IDE は 1.8.5 で動作確認しております。

ただし、古いライブラリは必ずフォルダごと削除してからインストールしてください
Windows 10 の場合、Arduino IDE デフォルト状態では、ライブラリは以下のパスに保存されています。

C:\Users\ユーザー名\Documents\Arduino\libraries

また、GitHub の ZIPファイルを直接 Arduino IDE にインストールする方法は以下の記事を参照してください。

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

ESP32_SPIFFS_EasyWebSocket

今回新しくリリースしましたが、ESP32_SD_EasyWebSocket 1.51から移植したので、それを引き継いで現在beta ver 1.60 となっています。

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

ESP32_SSD1331

現在、beta ver 1.71になっています。
1.70 と違う所は、スクロールをリセットする引数をクラス関数にセットしています。

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

ESP32_SPIFFS_ShinonomeFNT

現在、beta ver 1.3 になっています。
フォントアドレスを計算する式を見直し、ほんの少し速度が速くなっています。

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

ESP32_SPIFFS_UTF8toSJIS

現在、beta ver 1.2 になっています。
テーブルアドレスを計算する式を見直しました。

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

日本語フォントファイルの準備

フリーの 16×16 pixel 日本語フォント、東雲フォントと、UTF8→Shift_JIS コード変換テーブルファイルが必要です。
東雲フォントについては当ブログで何度も紹介していますので、以下の記事を参照してください。
ダウンロード先も以下の記事にあります。

ESP32 で 日本語漢字フォント をカラー OLED に表示させ、4行同時スクロール

必要なファイルは以下の3つです。

●Utf8Sjis.tbl
●shnmk16.bdf
●shnm8x16.bdf (※ファイル名の最後の ”r” を削除したもの)

WebSocket通信用 HTML ファイルおよびフォントファイルをアップロード

ブラウザとWebSocket 通信を行うためには、Javascript で書かれた Websocket通信用設定コードが必要です。
それを HTML ヘッダに記述する必要があります。
そのファイルは、自作ライブラリのサンプルスケッチ内に分割して置いてあります。

まず、Arduino IDE を起動し、下図の様にESP32_SPIFFS_EasyWebSocket ライブラリのサンプルスケッチ
ESP32_SPIFFS_EasyWebSocket_LED_Sample01
を開きます。

開いたら、下図の様に名前を付けて一旦保存しておきます。

保存したら、Arduino IDE とは別に、保存したスケッチフォルダをエクスプローラーで開きます。

その中に data フォルダが保存されていると思いますので、それを開きます。

dataフォルダの中に EWS (EasyWebSocket)フォルダがありますので、それを開きます。

すると、下図の様に、HTML ヘッダ分割ファイル等が入っているのが確認できると思います。
今回は、spiffs_01.txt ファイルは不要ですので、削除してしまっても構いません。

では、次に、Easy WebSocket を使って、OLED SSD1331 に日本語フォントを表示させてリアルタイムコントロールしたい場合について説明します。

一つ上のフォルダに戻って、EWS フォルダのある所に font フォルダを新規に作成しておきます。

その中に、前回の記事で使用した東雲フォントファイル半角と全角、UTF8Sjis 変換テーブルファイルをコピーしておきます。

上記の様にわざわざフォルダを作らなくても、dataフォルダ内に放り込んでおけば良いのですが、後々いろいろな種類のファイルをアップロードしたい時に、このようにフォルダ分けして置く方が便利だと思います。

そうしたら、下図の様に Arduino IDE の ESP32 SPIFFS ファイルアップローダープラグインを使って、ESP-WROOM-32 のフラッシュへアップロードします。
この時、Flash Size が “4MB (32Mb)” に選択されていることの確認を忘れないでください

では、次はソースコードの説明をしていきます。

コメント

  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));
    動作確認テストのみなら必要ないかも
    いつも貴重なブログでに感謝してます、有難う御座いました。

    • mgo-tec mgo-tec より:

      太田さん

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

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

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

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

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

  2. mkoba より:

    mgo-tec 様

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

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

    • mgo-tec mgo-tec より:

      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単体で
    テストできるので、テスト段階では重宝するので使っています。

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

  4. インカマスゴリラ より:

    初めまして!最近arduinoを触りだしていて色々と参考にしています。少しだけ質問があり、書かせていただきます。
    void loop 内のif(ret_str != “_close”){の記述なんですが、”_close”の送っている場所などは何処に記述がありますか?
    もし、何か送っている場所が何処に書いているのか、また何故”_close”なのか教えてくだされば幸いです。
    arduinoで色々と出来るのが楽しいです。これからも頑張って下さい!

    • mgo-tec mgo-tec より:

      インカマスゴリラさん

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

      この記事はもう3年近く前のもので、今自分のこのコードを見返すと、とっても恥ずかしいほどの素人プログラミングだったんだと落胆しております。
      とにかく、私は独学でプログラミングしているので、あまり参考にしない方が良いと思います。

      さて、_close のことですが、これは私の自作ライブラリESP32_SPIFFS_EasyWebSocket の ESP32_SD_EasyWebSocket.cpp というファイルに記述していますので参照してみてください。
      EWS_ESP32CharReceiveという関数のところです。

      また、この記事のソースコードでは95行目のところで、スマホからクローズコマンドが送られて来たら、EWS_ESP32CharReceive関数で”_close”という文字列を返します。

      とにかくこの記事のコードやライブラリはかなり未熟な時に書いているので、多々無駄があります。
      それに命名規則やコーディング規約もメチャメチャなのでご容赦ください。
      それに、その当時は動いたけど、今のArduino core for the ESP32では動かないことも有り得ますのでご了承いただければと思います。

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