ESP32 webserver from SPIFFS
Posted: Mon Jan 10, 2022 11:50 am
Hello. I am learning about ESP32 WiFi and ability to create a webserver.
My wifi functions:
I have simply created an event when someone tries to connect to index page :
httpd_register_uri_handler(server, &index_page);
Then the below code is responsible for displaying html elements on the webserver.
I would like to know how can I keep my html files in SPIFFS instead of typing them in the .user_ctx.
Imagine I have placed index.html inside my SPIFFS and whenever the index page is executed, I want to display that html so the .user_ctx needs to read that html file. Could someone point me in the right direction what is the proper way of doing this?
My wifi functions:
Code: Select all
static esp_err_t index_page_handler(httpd_req_t *req)
{
esp_err_t error;
ESP_LOGI(TAG_WEBSERVER,"This is index page");
const char* resp_str = (const char*) req->user_ctx;
error = httpd_resp_send(req,resp_str,strlen(resp_str));
if(error !=ESP_OK){
ESP_LOGI(TAG_WEBSERVER,"Error %d while sending response \n",error);
}
else{
ESP_LOGI(TAG_WEBSERVER,"response sent sucesfully \n");
}
return error;
}
static const httpd_uri_t index_page = {
.uri = "/",
.method = HTTP_GET,
.handler = index_page_handler,
/* Let's pass response string in user
* context to demonstrate it's usage */
.user_ctx = "<!DOCTYPE html>\
<html>\
<body>\
<h2>ESP32 WIFI CREDENTIALS</h2>\
<form action=\"set_wifi.php\">\
<label for=\"fname\">SSID:</label><br>\
<input type=\"text\" id=\"fname\" name=\"fname\" value=\"Enter SSID here\"><br>\
<label for=\"lname\">Password:</label><br>\
<input type=\"text\" id=\"lname\" name=\"lname\" value=\"Enter Password here\"><br><br>\
<input type=\"submit\" value=\"Submit\">\
</form>\
<p>If you click the \"Submit\" button, the form-data will be sent to a page called \"/action_page.php\".</p>\
</body>\
</html>"
};
esp_err_t http_404_error_handler(httpd_req_t *req, httpd_err_code_t err)
{
/* For any other URI send 404 and close socket */
httpd_resp_send_err(req, HTTPD_404_NOT_FOUND, "Some 404 error message");
return ESP_FAIL;
}
static httpd_handle_t start_webserver(void)
{
httpd_handle_t server = NULL;
httpd_config_t config = HTTPD_DEFAULT_CONFIG();
config.lru_purge_enable = true;
// Start the httpd server
ESP_LOGI(TAG_WEBSERVER, "Starting server on port: '%d'", config.server_port);
if (httpd_start(&server, &config) == ESP_OK) {
// Set URI handlers
ESP_LOGI(TAG_WEBSERVER, "Registering URI handlers");
httpd_register_uri_handler(server, &index_page);
return server;
}
ESP_LOGI(TAG_WEBSERVER, "Error starting server!");
return NULL;
}
static void stop_webserver(httpd_handle_t server)
{
// Stop the httpd server
httpd_stop(server);
}
void disconnect_handler(void* arg, esp_event_base_t event_base,
int32_t event_id, void* event_data)
{
httpd_handle_t* server = (httpd_handle_t*) arg;
if (*server) {
ESP_LOGI(TAG_WEBSERVER, "Stopping webserver");
stop_webserver(*server);
*server = NULL;
}
}
void connect_handler(void* arg, esp_event_base_t event_base,
int32_t event_id, void* event_data)
{
httpd_handle_t* server = (httpd_handle_t*) arg;
if (*server == NULL) {
ESP_LOGI(TAG_WEBSERVER, "Starting webserver");
*server = start_webserver();
}
}
static void wifi_event_handler(void* arg, esp_event_base_t event_base,
int32_t event_id, void* event_data)
{
if (event_id == WIFI_EVENT_AP_STACONNECTED) {
wifi_event_ap_staconnected_t* event = (wifi_event_ap_staconnected_t*) event_data;
ESP_LOGI(TAG_WEBSERVER, "station "MACSTR" join, AID=%d",
MAC2STR(event->mac), event->aid);
} else if (event_id == WIFI_EVENT_AP_STADISCONNECTED) {
wifi_event_ap_stadisconnected_t* event = (wifi_event_ap_stadisconnected_t*) event_data;
ESP_LOGI(TAG_WEBSERVER, "station "MACSTR" leave, AID=%d",
MAC2STR(event->mac), event->aid);
}
}
I have simply created an event when someone tries to connect to index page :
httpd_register_uri_handler(server, &index_page);
Then the below code is responsible for displaying html elements on the webserver.
Code: Select all
static const httpd_uri_t index_page = {
.uri = "/",
.method = HTTP_GET,
.handler = index_page_handler,
/* Let's pass response string in user
* context to demonstrate it's usage */
.user_ctx = "<!DOCTYPE html>\
<html>\
<body>\
<h2>ESP32 WIFI CREDENTIALS</h2>\
<form action=\"set_wifi.php\">\
<label for=\"fname\">SSID:</label><br>\
<input type=\"text\" id=\"fname\" name=\"fname\" value=\"Enter SSID here\"><br>\
<label for=\"lname\">Password:</label><br>\
<input type=\"text\" id=\"lname\" name=\"lname\" value=\"Enter Password here\"><br><br>\
<input type=\"submit\" value=\"Submit\">\
</form>\
<p>If you click the \"Submit\" button, the form-data will be sent to a page called \"/action_page.php\".</p>\
</body>\
</html>"
};
I would like to know how can I keep my html files in SPIFFS instead of typing them in the .user_ctx.
Imagine I have placed index.html inside my SPIFFS and whenever the index page is executed, I want to display that html so the .user_ctx needs to read that html file. Could someone point me in the right direction what is the proper way of doing this?