mirror of
https://github.com/ok-home/ota_ws_update.git
synced 2025-11-13 22:03:27 +03:00
reorder to ota_ws_update
This commit is contained in:
ok-home
275
source/ota_ws_update.html
Normal file
275
source/ota_ws_update.html
Normal file
@@ -0,0 +1,275 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<title>ОTA UPDATE</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<style>
|
||||
.column {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin: 2px;
|
||||
|
||||
}
|
||||
|
||||
.cl1 {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin: 2px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.cl01 {
|
||||
float: left;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.cl02 {
|
||||
float: left;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.hdr {
|
||||
float: left;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: white;
|
||||
background-color: blue;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.logstr {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="hdr">OTA UPDATE</div>
|
||||
|
||||
<div class="column">
|
||||
<button class="btn" id="goHome">Home Page</button>
|
||||
</div>
|
||||
<div id="rollback" style="display:none">
|
||||
<div class="column" >
|
||||
<button class="btn" id="otaVerifyApp">Click to confirm and commit OTA update</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button class="btn" id="otaRollback">Cancel OTA. Click to rollback update and restart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="update" style="display:block">
|
||||
<div class="cl1" style="display:none">
|
||||
<label class="cl01" for="otaFile">Select the new OTA firmware file</label>
|
||||
<input class="cl02" type="file" id="otaFile" placeholder="select file" onchange="readOtaFile(this)">
|
||||
</div>
|
||||
<div class="column" style="display:block" id="otaFileSelectVisible">
|
||||
<button class="btn" id="otaFileSelect" onclick="document.getElementById('otaFile').click()">File
|
||||
Select</button>
|
||||
</div>
|
||||
|
||||
<div class="column" style="display:none" id="otaStartVisible">
|
||||
<button class="btn" id="otaStartCancel">Start OTA update</button>
|
||||
</div>
|
||||
<div class="column" style="display:none" id="otaReStartVisible">
|
||||
<button class="btn" id="otaReStart">Reboot with new OTA firmware</button>
|
||||
</div>
|
||||
<div id="otaProgressVisible" style="display:none">
|
||||
<div class="cl1">
|
||||
<progress class="cl02" id="otaPogress" max=100 value=0>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
let otaData;
|
||||
let otaSetChunkSize = 0;
|
||||
let otaStartsegment = 0;
|
||||
let otaStarted = 0;
|
||||
|
||||
function readOtaFile(input) {
|
||||
let reader = new FileReader();
|
||||
let file = input.files[0];
|
||||
document.getElementById('otaFileSelect').innerHTML = "Selected firmware file: " + file.name;
|
||||
reader.readAsArrayBuffer(file);
|
||||
input.value = null;
|
||||
|
||||
reader.onload = function () {
|
||||
otaData = new Uint8Array(reader.result);
|
||||
// console.log(reader.result);
|
||||
// console.log(otaData.length);
|
||||
document.getElementById("otaStartVisible").style.display = "block";
|
||||
document.getElementById("otaProgressVisible").style.display = "none";
|
||||
document.getElementById("otaReStartVisible").style.display = "none";
|
||||
};
|
||||
|
||||
reader.onerror = function () {
|
||||
console.log(reader.error);
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<script>/*WIFI обновление*/
|
||||
document.getElementById("otaStartCancel").addEventListener("click", function (e) {
|
||||
if (otaData.length > 0 && otaStarted == 0) {
|
||||
|
||||
socket.send(JSON.stringify({ name: "otaSize", value: otaData.length }));
|
||||
//console.log(JSON.stringify({ name: "otaSize", value: otaData.length }));
|
||||
|
||||
otaStarted = 1;
|
||||
this.innerHTML = "Click to Cancel";
|
||||
document.getElementById("otaFileSelect").disabled = true;
|
||||
document.getElementById("otaProgressVisible").style.display = "block";
|
||||
document.getElementById("otaPogress").max = otaData.length;
|
||||
//tstReceive();
|
||||
}
|
||||
else {
|
||||
otaStarted = 0;
|
||||
//receiveWsData(JSON.stringify({ name: "otaCancel", value: "Cancel" }));
|
||||
socket.send(JSON.stringify({ name: "otaCancel", value: "Cancel" }));
|
||||
}
|
||||
|
||||
});
|
||||
document.getElementById("goHome").addEventListener("click", function (e) {
|
||||
//onclick="window.location.href = '/'"
|
||||
socket.close();
|
||||
window.location.href = '/';
|
||||
});
|
||||
document.getElementById("otaReStart").addEventListener("click", function (e) {
|
||||
socket.send(JSON.stringify({ name: "otaRestartEsp", value: "restart" }));
|
||||
//console.log(JSON.stringify({ name: "otaRestartEsp", value: "restart" }));
|
||||
});
|
||||
|
||||
/*
|
||||
function sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
async function tstReceive() {
|
||||
receiveWsData(JSON.stringify({ name: "otaSetChunkSize", value: 1024 }));
|
||||
while (otaStartsegment + otaSetChunkSize <= otaData.length && otaStarted == 1) {
|
||||
await sleep(1000);
|
||||
if (otaStarted == 1) {
|
||||
receiveWsData(JSON.stringify({ name: "otaGetChunk", value: otaStartsegment }));
|
||||
}
|
||||
otaStartsegment += otaSetChunkSize;
|
||||
}
|
||||
//console.log(otaStartsegment + " " + otaSetChunkSize + " " + otaData.length + " " + (otaData.length - otaStartsegment));
|
||||
if (otaStarted == 1) {
|
||||
receiveWsData(JSON.stringify({ name: "otaGetChunk", value: otaStartsegment }));
|
||||
receiveWsData(JSON.stringify({ name: "otaEnd", value: "OK" }));
|
||||
}
|
||||
}
|
||||
*/
|
||||
function receiveWsData(data) {
|
||||
try {
|
||||
let obj = JSON.parse(data);
|
||||
//console.log(data);
|
||||
switch (obj.name) {
|
||||
case "otaSetChunkSize":
|
||||
otaSetChunkSize = obj.value;
|
||||
break;
|
||||
case "otaGetChunk":
|
||||
let otaDataSend = otaData.subarray(obj.value, obj.value + otaSetChunkSize);
|
||||
document.getElementById("otaPogress").value = obj.value;
|
||||
document.getElementById("otaStartCancel").innerHTML = "Ota download. Size = " + otaData.length + " Segment = " + obj.value + " Click to Cancel";
|
||||
//console.log("sock send " + obj.value + " " + otaDataSend.length);
|
||||
socket.send(otaDataSend);
|
||||
break;
|
||||
case "otaEnd":
|
||||
otaStartsegment = 0;
|
||||
otaStarted = 0;
|
||||
document.getElementById("otaStartVisible").style.display = "none";
|
||||
document.getElementById("otaStartCancel").innerHTML = "Start OTA update";
|
||||
document.getElementById("otaPogress").value = otaData.length;
|
||||
document.getElementById("otaFileSelect").disabled = false;
|
||||
document.getElementById("otaReStartVisible").style.display = "block";
|
||||
document.getElementById("otaReStart").innerHTML = "The firmware is loaded. Click to reboot with new OTA firmware";
|
||||
document.getElementById("otaReStart").disabled = false;
|
||||
break;
|
||||
case "otaError":
|
||||
case "otaCancel":
|
||||
otaStartsegment = 0;
|
||||
otaStarted = 0;
|
||||
document.getElementById("otaStartVisible").style.display = "none";
|
||||
document.getElementById("otaStartCancel").innerHTML = "Start OTA update";
|
||||
document.getElementById("otaPogress").value = otaData.length;
|
||||
document.getElementById("otaFileSelect").disabled = false;
|
||||
document.getElementById("otaReStartVisible").style.display = "block";
|
||||
document.getElementById("otaReStart").innerHTML = "ОТА firmware download canceled " + obj.value;
|
||||
document.getElementById("otaReStart").disabled = true;
|
||||
break;
|
||||
case "otaCheckRollback":
|
||||
document.getElementById("rollback").style.display = "block";
|
||||
document.getElementById("update").style.display = "none";
|
||||
break;
|
||||
}
|
||||
}
|
||||
catch
|
||||
{
|
||||
console.log(data + " catch");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script> // rollback
|
||||
document.getElementById("otaVerifyApp").addEventListener("click", function (e) {
|
||||
socket.send(JSON.stringify({ name: "otaProcessRollback", value: "false" }));
|
||||
document.getElementById("rollback").style.display = "none";
|
||||
document.getElementById("update").style.display = "block";
|
||||
console.log(JSON.stringify({ name: "otaProcessRollback", value: "false" }));
|
||||
});
|
||||
|
||||
document.getElementById("otaRollback").addEventListener("click", function (e) {
|
||||
socket.send(JSON.stringify({ name: "otaProcessRollback", value: "true" }));
|
||||
document.getElementById("rollback").style.display = "none";
|
||||
document.getElementById("update").style.display = "block";
|
||||
console.log(JSON.stringify({ name: "otaProcessRollback", value: "true" }));
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script> // основной старт скрипта, открыть сокет
|
||||
// создать сокет по адресу
|
||||
let wsHostStr = "ws://" + document.location.host + document.location.pathname;
|
||||
wsHostStr += (document.location.pathname == '/') ? "ws" : "/ws";
|
||||
var socket = new WebSocket(wsHostStr);
|
||||
socket.binaryType = "arraybuffer";
|
||||
</script>
|
||||
|
||||
<script> // события WS
|
||||
socket.onopen = function () {
|
||||
console.log("connect");
|
||||
};
|
||||
socket.onclose = function (event) {
|
||||
console.log("close");
|
||||
};
|
||||
socket.onerror = function () {
|
||||
document.location.reload();
|
||||
console.log("error");
|
||||
};
|
||||
socket.onmessage = function (event) {
|
||||
receiveWsData(event.data);
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user