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. 입력란에 변경하려는 HTML을 붙여넣기
3. 오른쪽 하단의 Output 열 복사

4. 'To Hex'와 'Split' 오른쪽의 정지 아이콘을 클릭
5. Output 열의 length 복사

3. GZIP 형식의 데이터를 코드로 이식

「camera_index.h」의 배열의 값을 이전의 Output 란의 데이터로 옮겨놓는다.

첫 번째 쉼표를 제거하고 배열 크기를 이전 길이의 값으로 바꿉니다.

이상입니다. 수고하셨습니다.
익숙해지면 변경에는 1분도 걸리지 않는다고 생각합니다.

여담

CyberChef는 GZIP 압축뿐만 아니라 압축 해제도 가능

CyberChef (GZIP to HTML) 방문

입력 필드에 "camera_index.h"의 배열 값을 붙여 넣습니다.

오른쪽 하단의 Output 필드에 HTML 코드가 표시됩니다

※스케치 예의 「index_ov2640_html_gz[]」는 왜 에러
"index_ov3660_html_gz []"는 올바르게 출력되므로 버그 같은

CyberChef의 다운로드 버전

속도가 빠르고 편안하지만 온라인 버전과 다른 출력이 나왔기 때문에 사용하지 않습니다.