mirror of
https://github.com/jomjol/AI-on-the-edge-device.git
synced 2025-12-09 21:17:06 +03:00
updated OTA page, added progress counter, made async, removed reboot button
This commit is contained in:
CaCO3
@@ -375,7 +375,7 @@ esp_err_t handler_ota_update(httpd_req_t *req)
|
||||
}
|
||||
else
|
||||
{
|
||||
zw = "HTML Update Successfull! No reboot necessary.\n";
|
||||
zw = "Web Interface Update Successfull!\nNo reboot necessary.\n";
|
||||
httpd_resp_sendstr_chunk(req, zw.c_str());
|
||||
httpd_resp_sendstr_chunk(req, NULL);
|
||||
return ESP_OK;
|
||||
@@ -409,7 +409,7 @@ esp_err_t handler_ota_update(httpd_req_t *req)
|
||||
}
|
||||
|
||||
|
||||
std::string zw = "Update failed - no valid file specified (zip, bin, tfl, tlite)";
|
||||
std::string zw = "Update failed - no valid file specified (zip, bin, tfl, tlite)!";
|
||||
httpd_resp_sendstr_chunk(req, zw.c_str());
|
||||
httpd_resp_sendstr_chunk(req, NULL);
|
||||
return ESP_OK;
|
||||
@@ -427,7 +427,7 @@ esp_err_t handler_ota_update(httpd_req_t *req)
|
||||
delete_all_in_directory(out);
|
||||
|
||||
unzip(in, out+"/");
|
||||
zw = "HTML Update Successfull!\nNo reboot necessary";
|
||||
zw = "Web Interface Update Successfull!\nNo reboot necessary";
|
||||
httpd_resp_send(req, zw.c_str(), strlen(zw.c_str()));
|
||||
httpd_resp_sendstr_chunk(req, NULL);
|
||||
return ESP_OK;
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<title>OTA Update</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<script type="text/javascript" src="./gethost.js"></script>
|
||||
<style>
|
||||
h1 {font-size: 2em;}
|
||||
h2 {font-size: 1.5em;}
|
||||
@@ -54,20 +55,15 @@ web interface (<i><span style="font-family:monospace">html__*.zip</span></i>). H
|
||||
</tr>
|
||||
<tr>
|
||||
<p>
|
||||
<button class="button" id="doUpdate" type="button" onclick="upload()">Do upload and update<br>(incl. reboot - if needed)</button>
|
||||
<button class="button" id="doUpdate" type="button" onclick="prepareOnServer()">Do upload and update<br>(incl. reboot - if needed)</button>
|
||||
</p>
|
||||
</tr>
|
||||
<tr>
|
||||
<p>
|
||||
<h3><div id="status">Status: idle</div></h3>
|
||||
<h3><span id="status">Status: idle</span> <span id="progress"></span></h3>
|
||||
</p>
|
||||
</tr>
|
||||
</table>
|
||||
<h2>Reboot</h2>
|
||||
<button class="button" id="reboot" type="button" onclick="doReboot()">Manual reboot</button>
|
||||
<hr>
|
||||
|
||||
<script type="text/javascript" src="./gethost.js"></script>
|
||||
|
||||
|
||||
<script language="JavaScript">
|
||||
@@ -75,43 +71,24 @@ web interface (<i><span style="font-family:monospace">html__*.zip</span></i>). H
|
||||
var basepath = "http://192.168.178.26";
|
||||
|
||||
|
||||
/* Max size of an individual file. Make sure this
|
||||
* value is same as that set in server_file.c */
|
||||
var MAX_FILE_SIZE = 8000*1024;
|
||||
var MAX_FILE_SIZE_STR = "8MB";
|
||||
|
||||
var action_runtime = 0;
|
||||
var progressTimerHandle = null;
|
||||
|
||||
|
||||
function init(){
|
||||
basepath = getbasepath();
|
||||
|
||||
// document.getElementById("reboot").disabled = true;
|
||||
document.getElementById("doUpdate").disabled = true;
|
||||
}
|
||||
|
||||
function doUpdate() {
|
||||
if (confirm("Are you sure to update the firmware?")) {
|
||||
var stringota = "/ota?file=firmware.bin";
|
||||
document.getElementById("doUpdate").disabled = true;
|
||||
|
||||
var xhttp = new XMLHttpRequest();
|
||||
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (xhttp.readyState == 4) {
|
||||
if (xhttp.status == 200) {
|
||||
document.getElementById("reboot").disabled = false;
|
||||
alert("Flash successfull - Reboot necessary to make changes active.");
|
||||
/* keine Reaktion, damit sich das Dokument nicht ändert */
|
||||
} else if (xhttp.status == 0) {
|
||||
alert("Server closed the connection abruptly!");
|
||||
UpdatePage();
|
||||
} else {
|
||||
alert(xhttp.status + " Error!\n" + xhttp.responseText);
|
||||
UpdatePage();
|
||||
}
|
||||
}
|
||||
};
|
||||
xhttp.open("GET", stringota, true);
|
||||
xhttp.send();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function doReboot() {
|
||||
if (confirm("Are you sure you want to reboot the ESP32?")) {
|
||||
function doRebootAfterUpdate() {
|
||||
if (confirm("Update completed!\nThe ESP32 will reboot now!")) {
|
||||
var stringota = "/reboot";
|
||||
window.location = stringota;
|
||||
window.location.href = stringota;
|
||||
@@ -120,99 +97,122 @@ function doReboot() {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function setpath() {
|
||||
var nameneu = document.getElementById("newfile").value;
|
||||
nameneu = nameneu.split(/[\\\/]/).pop();
|
||||
document.getElementById("doUpdate").disabled = false;
|
||||
document.getElementById("status").innerText = "Status: file selected";
|
||||
document.getElementById("status").innerText = "Status: File selected";
|
||||
}
|
||||
|
||||
|
||||
function upload() {
|
||||
document.getElementById("reboot").disabled = true;
|
||||
function prepareOnServer() {
|
||||
var fileInput = document.getElementById("newfile").files;
|
||||
var nameneu = document.getElementById("newfile").value;
|
||||
filePath = nameneu.split(/[\\\/]/).pop();
|
||||
|
||||
if (fileInput.length == 0) {
|
||||
alert("No file selected!");
|
||||
return;
|
||||
} else if (filePath.length == 0) {
|
||||
alert("File path on server is not set!");
|
||||
return;
|
||||
} else if (filePath.length > 100) {
|
||||
alert("Filename is to long! Max 100 characters.");
|
||||
return;
|
||||
} else if (filePath.indexOf(' ') >= 0) {
|
||||
alert("File path on server cannot have spaces!");
|
||||
return;
|
||||
} else if (filePath[filePath.length-1] == '/') {
|
||||
alert("File name not specified after path!");
|
||||
return;
|
||||
} else if (fileInput[0].size > MAX_FILE_SIZE) {
|
||||
alert("File size must be less than " + MAX_FILE_SIZE_STR + "!");
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById("status").innerText = "Status: Preparations on ESP32";
|
||||
document.getElementById("doUpdate").disabled = true;
|
||||
|
||||
var xhttp = new XMLHttpRequest();
|
||||
|
||||
var nameneu = document.getElementById("newfile").value;
|
||||
filePath = nameneu.split(/[\\\/]/).pop();
|
||||
var upload_path = "/upload/firmware/" + filePath;
|
||||
var fileInput = document.getElementById("newfile").files;
|
||||
|
||||
/* first delete the old firmware */
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (xhttp.readyState == 4) {
|
||||
stopProgressTimer();
|
||||
if (xhttp.status == 200) {
|
||||
/* keine Reaktion, damit sich das Dokument nicht ändert */
|
||||
upload();
|
||||
} else if (xhttp.status == 0) {
|
||||
alert("Server closed the connection abruptly!");
|
||||
UpdatePage();
|
||||
document.getElementById("doUpdate").disabled = false;
|
||||
} else {
|
||||
alert(xhttp.status + " Error!\n" + xhttp.responseText);
|
||||
UpdatePage();
|
||||
document.getElementById("doUpdate").disabled = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
startProgressTimer("Server preparations...");
|
||||
|
||||
var _toDo = basepath + "/ota?delete=" + filePath;
|
||||
xhttp.open("GET", _toDo, false);
|
||||
xhttp.open("GET", _toDo, true);
|
||||
xhttp.send();
|
||||
/* ----------------------------- */
|
||||
}
|
||||
|
||||
|
||||
/* Max size of an individual file. Make sure this
|
||||
* value is same as that set in server_file.c */
|
||||
var MAX_FILE_SIZE = 8000*1024;
|
||||
var MAX_FILE_SIZE_STR = "8MB";
|
||||
|
||||
if (fileInput.length == 0) {
|
||||
alert("No file selected!");
|
||||
} else if (filePath.length == 0) {
|
||||
alert("File path on server is not set!");
|
||||
} else if (filePath.length > 100) {
|
||||
alert("Filename is to long! Max 100 characters.");
|
||||
} else if (filePath.indexOf(' ') >= 0) {
|
||||
alert("File path on server cannot have spaces!");
|
||||
} else if (filePath[filePath.length-1] == '/') {
|
||||
alert("File name not specified after path!");
|
||||
} else if (fileInput[0].size > MAX_FILE_SIZE) {
|
||||
alert("File size must be less than " + MAX_FILE_SIZE_STR + "!");
|
||||
} else {
|
||||
function upload() {
|
||||
document.getElementById("newfile").disabled = true;
|
||||
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (xhttp.readyState == 4) {
|
||||
stopProgressTimer();
|
||||
if (xhttp.status == 200) {
|
||||
// alert("Upload successfull!")
|
||||
// document.reload();
|
||||
document.getElementById("reboot").disabled = false;
|
||||
document.getElementById("doUpdate").disabled = false;
|
||||
extract();
|
||||
} else if (xhttp.status == 0) {
|
||||
alert("Server closed the connection abruptly!");
|
||||
UpdatePage();
|
||||
document.getElementById("doUpdate").disabled = false;
|
||||
} else {
|
||||
alert(xhttp.status + " Error!\n" + xhttp.responseText);
|
||||
UpdatePage();
|
||||
document.getElementById("doUpdate").disabled = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
startProgressTimer("Upload");
|
||||
|
||||
var fileInput = document.getElementById("newfile").files;
|
||||
var file = fileInput[0];
|
||||
xhttp.open("POST", upload_path, false);
|
||||
document.getElementById("status").innerText = "Status: uploading";
|
||||
var upload_path = "/upload/firmware/" + filePath;
|
||||
|
||||
xhttp.open("POST", upload_path, true);
|
||||
document.getElementById("status").innerText = "Status: Uploading (takes up to 30s)...";
|
||||
xhttp.send(file);
|
||||
}
|
||||
|
||||
|
||||
document.getElementById("status").innerText = "Status: processing on ESP32";
|
||||
function extract() {
|
||||
document.getElementById("status").innerText = "Status: Processing on ESP32 (takes up to 2 minutes)...";
|
||||
|
||||
var xhttp = new XMLHttpRequest();
|
||||
/* first delete the old firmware */
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (xhttp.readyState == 4) {
|
||||
stopProgressTimer();
|
||||
if (xhttp.status == 200) {
|
||||
document.getElementById("status").innerText = "Status: Update completed!";
|
||||
document.getElementById("doUpdate").disabled = true;
|
||||
document.getElementById("newfile").disabled = false;
|
||||
|
||||
if (xhttp.responseText.startsWith("reboot"))
|
||||
{
|
||||
doReboot();
|
||||
doRebootAfterUpdate();
|
||||
}
|
||||
else
|
||||
{
|
||||
@@ -227,20 +227,36 @@ function upload() {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
startProgressTimer("Extraction");
|
||||
|
||||
|
||||
var nameneu = document.getElementById("newfile").value;
|
||||
filePath = nameneu.split(/[\\\/]/).pop();
|
||||
var _toDo = basepath + "/ota?task=update&file=" + filePath;
|
||||
xhttp.open("GET", _toDo, false);
|
||||
xhttp.open("GET", _toDo, true);
|
||||
xhttp.send();
|
||||
}
|
||||
/* ----------------------------- */
|
||||
|
||||
document.getElementById("reboot").disabled = false;
|
||||
document.getElementById("doUpdate").disabled = true;
|
||||
document.getElementById("newfile").disabled = false;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
function startProgressTimer(step) {
|
||||
console.log(step + "...");
|
||||
document.getElementById('progress').innerHTML = "(0s)";
|
||||
action_runtime = 0;
|
||||
progressTimerHandle = setInterval(function() {
|
||||
action_runtime += 1;
|
||||
console.log("Progress: " + action_runtime + "s");
|
||||
document.getElementById('progress').innerHTML = "(" + action_runtime + "s)";
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
|
||||
function stopProgressTimer() {
|
||||
clearInterval(progressTimerHandle);
|
||||
document.getElementById('progress').innerHTML = "";
|
||||
}
|
||||
|
||||
|
||||
init();
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user