How to change HTML content when ESP32 (M5Camera etc.) starts HTTP server.
Click here for English commentary and sample code.
前提
下記については説明を省略します。
- Arduino IDEでのESP32（M5Camera含む）の開発環境の構築
- C言語の基礎知識
解決する課題
- スケッチ例の「ESP32>Camera>CameraWebServer」を使用したときに表示されるHTMLを自由に変更したい！
変更前後のイメージ（Qiita風＆日本語化）
手順概要
- ベースとなるHTMLを用意する（初回のみ）
- 変更したいHTMLをGZIP形式に変換する
- GZIP形式のデータをコードに移植する
手順詳細
1. ベースとなるHTMLを用意する
- CameraWebServerのスケッチをロード
- シリアルモニタに表示されたアドレスにアクセス
- ブラウザでHTMLを保存
💡 最新のスケッチ例ではM5CameraのVersion.Bに対応しているのでオススメ
CameraWebServer.ino
//#define CAMERA_MODEL_WROVER_KIT // Has PSRAM
#define CAMERA_MODEL_M5STACK_V2_PSRAM // M5Camera version B Has PSRAM
2. 変更したいHTMLをGZIP形式に変換する
※ここではCyberChefというオンラインツールを利用します
1. CyberChef (HTML to GZIP)にアクセス
2. Input欄に変更したいHTMLを貼り付け
3. 右下のOutput欄をコピー
4. 「To Hex」と「Split」の右側の停止アイコンをクリック
5. Output欄のlengthをコピー
3. GZIP形式のデータをコードに移植する
- 「camera_index.h」の配列の値を先ほどのOutput欄のデータに置き換える
- 先頭のカンマを取り除いて、配列サイズを先ほどのlengthの値に置き換える
以上です。お疲れさまでした。
慣れれば変更には1分も掛からないと思います。
余談
CyberChefはGZIP圧縮だけでなく解凍もできる
- CyberChef (GZIP to HTML)にアクセス
- Input欄に「camera_index.h」の配列の値を貼り付け
- 右下のOutput欄にHTMLコードが表示される
※スケッチ例の「index_ov2640_html_gz[]」は何故かエラー
「index_ov3660_html_gz[]」の方は正しく出力されるのでバグっぽい
CyberChefのダウンロード版
速度が速くて快適ですが、オンライン版と異なる出力が出てきたので使っていません。