Fix upload page to split html
This commit is contained in:
@ -21,8 +21,47 @@
|
||||
|
||||
static const char *TAG = "OTA_SERVER";
|
||||
|
||||
// HTML page for OTA update
|
||||
static const char *ota_html =
|
||||
// Server handle
|
||||
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>"
|
||||
"<html>"
|
||||
"<head>"
|
||||
@ -49,11 +88,22 @@ static const char *ota_html =
|
||||
"</head>"
|
||||
"<body>"
|
||||
"<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'>"
|
||||
"<strong>Current Version:</strong> <span id='version'>%s</span><br>"
|
||||
"<strong>Free Space:</strong> <span id='free-space'>%u KB</span>"
|
||||
"</div>"
|
||||
"<strong>Free Space:</strong> <span id='free-space'>%lu KB</span>"
|
||||
"</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'>"
|
||||
"<p>Drag and drop firmware file here or click to select</p>"
|
||||
"<input type='file' id='file' accept='.bin'>"
|
||||
@ -62,10 +112,15 @@ static const char *ota_html =
|
||||
"</div>"
|
||||
"<button class='btn' id='upload-btn' onclick='uploadFirmware()' disabled>Upload Firmware</button>"
|
||||
"<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 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>"
|
||||
"console.log('OTA page loaded');"
|
||||
"let selectedFile = null;"
|
||||
@ -77,7 +132,6 @@ static const char *ota_html =
|
||||
"const statusDiv = document.getElementById('status');"
|
||||
"const fileInfo = document.getElementById('file-info');"
|
||||
""
|
||||
"// File input change handler"
|
||||
"fileInput.addEventListener('change', function(e) {"
|
||||
" console.log('File input changed', e.target.files);"
|
||||
" if (e.target.files.length > 0) {"
|
||||
@ -85,7 +139,6 @@ static const char *ota_html =
|
||||
" }"
|
||||
"});"
|
||||
""
|
||||
"// Drag and drop handlers"
|
||||
"uploadArea.addEventListener('dragover', function(e) {"
|
||||
" e.preventDefault();"
|
||||
" uploadArea.classList.add('dragover');"
|
||||
@ -142,8 +195,8 @@ static const char *ota_html =
|
||||
" xhr.upload.addEventListener('progress', function(e) {"
|
||||
" if (e.lengthComputable) {"
|
||||
" const percent = Math.round((e.loaded / e.total) * 100);"
|
||||
" progressBar.style.width = percent + '%%';"
|
||||
" progressBar.textContent = percent + '%%';"
|
||||
" progressBar.style.width = percent + '%';"
|
||||
" progressBar.textContent = percent + '%';"
|
||||
" console.log('Upload progress:', percent);"
|
||||
" }"
|
||||
" });"
|
||||
@ -172,56 +225,11 @@ static const char *ota_html =
|
||||
"</body>"
|
||||
"</html>";
|
||||
|
||||
// Server handle
|
||||
static httpd_handle_t s_server = NULL;
|
||||
httpd_resp_send_chunk(req, html_part4, strlen(html_part4));
|
||||
|
||||
// OTA state
|
||||
static ota_state_t s_ota_state = OTA_STATE_IDLE;
|
||||
// Send final chunk to complete response
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user