stephen/ota_template
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Fix upload page to split html

Browse Source
This commit is contained in:
stephen
2025-07-17 18:21:34 -06:00
parent c163389160
commit c4db3cbadc
1 changed files with 171 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
main/ota_server.c
View File

@ -21,8 +21,47 @@
static const char *TAG = "OTA_SERVER"; static const char *TAG = "OTA_SERVER";
// HTML page for OTA update // Server handle
static const char *ota_html = static httpd_handle_t s_server = NULL;
// OTA state
static ota_state_t s_ota_state = OTA_STATE_IDLE;
// Progress callback
static ota_progress_callback_t s_progress_callback = NULL;
// Version string
static char s_version[32] = "1.0.0";
// OTA handle
static esp_ota_handle_t s_ota_handle = 0;
static const esp_partition_t *s_update_partition = NULL;
static int s_binary_file_length = 0;
static bool s_ota_ongoing = false;
static esp_err_t index_handler(httpd_req_t *req)
{
const esp_partition_t *running = esp_ota_get_running_partition();
uint32_t free_space = 0;
// Calculate free OTA space
esp_partition_iterator_t it = esp_partition_find(ESP_PARTITION_TYPE_APP, ESP_PARTITION_SUBTYPE_ANY, NULL);
while (it != NULL) {
const esp_partition_t *p = esp_partition_get(it);
if (p != running && p->subtype >= ESP_PARTITION_SUBTYPE_APP_OTA_0 &&
p->subtype <= ESP_PARTITION_SUBTYPE_APP_OTA_15) {
free_space = p->size;
break;
}
it = esp_partition_next(it);
}
esp_partition_iterator_release(it);
// Send response in chunks
httpd_resp_set_type(req, "text/html");
// Part 1: HTML head and styles
const char *html_part1 =
"<!DOCTYPE html>" "<!DOCTYPE html>"
"<html>" "<html>"
"<head>" "<head>"
@ -49,11 +88,22 @@ static const char *ota_html =
"</head>" "</head>"
"<body>" "<body>"
"<div class='container'>" "<div class='container'>"
"<h1>ESP32 OTA Update</h1>" "<h1>ESP32 OTA Update</h1>";
httpd_resp_send_chunk(req, html_part1, strlen(html_part1));
// Part 2: Info section with dynamic content
char info_buf[256];
snprintf(info_buf, sizeof(info_buf),
"<div class='info'>" "<div class='info'>"
"<strong>Current Version:</strong> <span id='version'>%s</span><br>" "<strong>Current Version:</strong> <span id='version'>%s</span><br>"
"<strong>Free Space:</strong> <span id='free-space'>%u KB</span>" "<strong>Free Space:</strong> <span id='free-space'>%lu KB</span>"
"</div>" "</div>", s_version, (unsigned long)(free_space / 1024));
httpd_resp_send_chunk(req, info_buf, strlen(info_buf));
// Part 3: Upload area
const char *html_part3 =
"<div class='upload-area' id='upload-area'>" "<div class='upload-area' id='upload-area'>"
"<p>Drag and drop firmware file here or click to select</p>" "<p>Drag and drop firmware file here or click to select</p>"
"<input type='file' id='file' accept='.bin'>" "<input type='file' id='file' accept='.bin'>"
@ -62,10 +112,15 @@ static const char *ota_html =
"</div>" "</div>"
"<button class='btn' id='upload-btn' onclick='uploadFirmware()' disabled>Upload Firmware</button>" "<button class='btn' id='upload-btn' onclick='uploadFirmware()' disabled>Upload Firmware</button>"
"<div class='progress' id='progress'>" "<div class='progress' id='progress'>"
"<div class='progress-bar' id='progress-bar'>0%%</div>" "<div class='progress-bar' id='progress-bar'>0%</div>"
"</div>" "</div>"
"<div class='status' id='status'></div>" "<div class='status' id='status'></div>"
"</div>" "</div>";
httpd_resp_send_chunk(req, html_part3, strlen(html_part3));
// Part 4: JavaScript
const char *html_part4 =
"<script>" "<script>"
"console.log('OTA page loaded');" "console.log('OTA page loaded');"
"let selectedFile = null;" "let selectedFile = null;"
@ -77,7 +132,6 @@ static const char *ota_html =
"const statusDiv = document.getElementById('status');" "const statusDiv = document.getElementById('status');"
"const fileInfo = document.getElementById('file-info');" "const fileInfo = document.getElementById('file-info');"
"" ""
"// File input change handler"
"fileInput.addEventListener('change', function(e) {" "fileInput.addEventListener('change', function(e) {"
" console.log('File input changed', e.target.files);" " console.log('File input changed', e.target.files);"
" if (e.target.files.length > 0) {" " if (e.target.files.length > 0) {"
@ -85,7 +139,6 @@ static const char *ota_html =
" }" " }"
"});" "});"
"" ""
"// Drag and drop handlers"
"uploadArea.addEventListener('dragover', function(e) {" "uploadArea.addEventListener('dragover', function(e) {"
" e.preventDefault();" " e.preventDefault();"
" uploadArea.classList.add('dragover');" " uploadArea.classList.add('dragover');"
@ -142,8 +195,8 @@ static const char *ota_html =
" xhr.upload.addEventListener('progress', function(e) {" " xhr.upload.addEventListener('progress', function(e) {"
" if (e.lengthComputable) {" " if (e.lengthComputable) {"
" const percent = Math.round((e.loaded / e.total) * 100);" " const percent = Math.round((e.loaded / e.total) * 100);"
" progressBar.style.width = percent + '%%';" " progressBar.style.width = percent + '%';"
" progressBar.textContent = percent + '%%';" " progressBar.textContent = percent + '%';"
" console.log('Upload progress:', percent);" " console.log('Upload progress:', percent);"
" }" " }"
" });" " });"
@ -172,56 +225,11 @@ static const char *ota_html =
"</body>" "</body>"
"</html>"; "</html>";
// Server handle httpd_resp_send_chunk(req, html_part4, strlen(html_part4));
static httpd_handle_t s_server = NULL;
// OTA state // Send final chunk to complete response
static ota_state_t s_ota_state = OTA_STATE_IDLE; httpd_resp_send_chunk(req, NULL, 0);
// Progress callback
static ota_progress_callback_t s_progress_callback = NULL;
// Version string
static char s_version[32] = "1.0.0";
// OTA handle
static esp_ota_handle_t s_ota_handle = 0;
static const esp_partition_t *s_update_partition = NULL;
static int s_binary_file_length = 0;
static bool s_ota_ongoing = false;
static esp_err_t index_handler(httpd_req_t *req)
{
const esp_partition_t *running = esp_ota_get_running_partition();
uint32_t free_space = 0;
// Calculate free OTA space
esp_partition_iterator_t it = esp_partition_find(ESP_PARTITION_TYPE_APP, ESP_PARTITION_SUBTYPE_ANY, NULL);
while (it != NULL) {
const esp_partition_t *p = esp_partition_get(it);
if (p != running && p->subtype >= ESP_PARTITION_SUBTYPE_APP_OTA_0 &&
p->subtype <= ESP_PARTITION_SUBTYPE_APP_OTA_15) {
free_space = p->size;
break;
}
it = esp_partition_next(it);
}
esp_partition_iterator_release(it);
// Allocate buffer for response
size_t response_size = strlen(ota_html) + 64;
char *response = malloc(response_size);
if (!response) {
httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Memory allocation failed");
return ESP_FAIL;
}
snprintf(response, response_size, ota_html, s_version, free_space / 1024);
httpd_resp_set_type(req, "text/html");
httpd_resp_send(req, response, strlen(response));
free(response);
return ESP_OK; return ESP_OK;
} }