Skip to content

nopnop2002/esp-idf-web-form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

esp-idf-web-form

WEB Form example for ESP-IDF.
ESP-IDF contains a lot of example code, but there is no example to create FORM on the WEB and input data from FORM.
This project reads value from FORM on the WEB and save in the NVS area.
No library other than ESP-IDF is required to read the data from the WEB page.

I referred here.

Image

Software requiment

ESP-IDF V5.0 or later.
ESP-IDF V4.4 release branch reached EOL in July 2024.
ESP-IDF V5.1 is required when using ESP32-C6.

Installation

git clone https://github.com/nopnop2002/esp-idf-web-form
cd esp-idf-web-form
idf.py menuconfig
idf.py flash monitor

Configuration

Set the following items using menuconfig.

config-main config-app

Wifi Setting

config-wifi-1

You can use the mDNS hostname instead of the IP address.
config-wifi-2

You can use static IP.
config-wifi-3

HTTP Server Setting

config-http

How to use

Open your brouser, and put address in address bar.
You can use the mDNS hostname instead of the IP address.
Default mDNS name is esp32-server.local.
Input text/checkbox/radio/select and submit.
The read data is saved in the NVS area.
You can clear the NVS area with this command:

idf.py erase_flash

Image Image

HTML Header

HTML header is stored in html/head.html.
You can use your favorite CSS.

How to browse image data using built-in http server

Even if there are image files in SPIFFS, the esp-idf http server does not support this:

httpd_resp_sendstr_chunk(req, "<img src=\"/spiffs/picture.png\">");

You need to convert the image file to base64 string.

httpd_resp_sendstr_chunk(req, "<img src=\"data:image/png;base64,");
httpd_resp_sendstr_chunk(req, (char *)BASE64_ENCODE_STRING);
httpd_resp_sendstr_chunk(req, "\">");

Images in png format are stored in the image folder.
Images in base64 format are stored in the html folder.
I converted using the base64 command.

$ base64 image/ESP-IDF.png > html/ESP-IDF.txt

Reference

https://github.com/nopnop2002/esp-idf-pwm-slider

About

WEB Form example for ESP-IDF

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy