ESP-IDFを使ってみる

httpサーバー

esp-idfには多数のサンプルが有りますが、こちらにhttpサーバーのサンプルが有ります。
アプリにhttpサーバーを組み込んでおくと、ブラウザーで処理結果を確認することができます。

こちらに telnetクライアントのサンプルを公開しています。
telnetの標準出力をビルトインのhttpサーバーで見ることができます。

こちらにesp-idfのカメラコンポーネントが公開されています。
ESP32-CAMボードで簡単に写真を撮ることができます。
このコンポーネントを利用したファームをいくつか公開していますが、
キャプチャーした画像をビルトインのhttpサーバーで見ることができます。

esp-idfのhttpサーバーでは以下のタグが動きません。

<img src=\"/spiffs/picture.jpg\"
              width=\"128\" height=\"128\">

spiffs上にあるイメージファイルを表示する場合、イメージファイルを一旦BASE64文字列に変換し、
BASE64文字列を出力する必要が有ります。
Mbed TLSライブラリを使えば、JPEGやPNGなどのバイナリーファイルをBASE64形式の文字列に変換することができます。

<img
              src=\"data:image/png;base64,BASE64_ENCODE_STRING\"
              width=\"128\" height=\"128\">

こちらに GPIOをWEBで操作するファームを公開しています。
アイコンはBASE64に変換したテキストファイルをSPIFFSに格納し、HTTPサーバーはBASE64の文字列を出力しています。
アイコンをPNG形式でSPIFFSに格納し、ファームの中でPNGフォーマットをBASE64の文字列に変換しても、それほどパフォーマンスは変わりませんでした。

こちらにESP-IDFで利用できるWebSocketのコンポーネントが公開されています。
通常のHTTPサーバーは、ブラウザーからのアクションに応じて、サーバーが応答を返しますが、WebSocketを使うと、
非同期にサーバー側からブラウザーへデーターを送信することが出来るようになります。
これによりブラウザーは、コンソールの様にリアルタイムで表示内容を変えることができます。
さらに、ブラウザー側にリアルタイムのチャートライブラリを組み込むことで、リアルタイムチャートを簡単に作ることができます。
このコンポーネントを利用してリアルタイムでグラフを表示するサンプルをこちらで公開しています。

続く．．．