mirror of
https://github.com/ok-home/ota_ws_update.git
synced 2025-11-13 22:03:27 +03:00
.
This commit is contained in:
ok-home
244
main/ota_ws.html
Normal file
244
main/ota_ws.html
Normal file
@@ -0,0 +1,244 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<title>WiFi connect</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</div>
|
||||
|
||||
<div class="column">
|
||||
<button class="btn" id="goHome">На главную</button>
|
||||
</div>
|
||||
<div class="cl1" style="display:none">
|
||||
<label class="cl01" for="otaFile">Ota File Name</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">Ota Start</button>
|
||||
</div>
|
||||
<div class="column" style="display:none" id="otaReStartVisible">
|
||||
<button class="btn" id="otaReStart">Ota ReStart</button>
|
||||
</div>
|
||||
<div id="otaProgressVisible" style="display:none">
|
||||
<div class="cl1">
|
||||
<progress class="cl02" id="otaPogress" max=100 value=0>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
let otaData;
|
||||
let otaSetchunksSize = 0;
|
||||
let otaStartsegment = 0;
|
||||
let otaStarted = 0;
|
||||
|
||||
function readOtaFile(input) {
|
||||
let reader = new FileReader();
|
||||
let file = input.files[0];
|
||||
document.getElementById('otaFileSelect').innerHTML = "Selected 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", msg: otaData.length }));
|
||||
console.log(JSON.stringify({ name: "otasize", msg: 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", msg: "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", msg: "restart" }));
|
||||
console.log(JSON.stringify({ name: "otarestartesp", msg: "restart" }));
|
||||
});
|
||||
|
||||
//
|
||||
function sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
async function tstReceive() {
|
||||
receiveWsData(JSON.stringify({ name: "otaSetchunksSize", msg: 1024 }));
|
||||
while (otaStartsegment + otaSetchunksSize <= otaData.length && otaStarted == 1) {
|
||||
await sleep(1000);
|
||||
if(otaStarted == 1){
|
||||
receiveWsData(JSON.stringify({ name: "otaGetChunk", msg: otaStartsegment }));
|
||||
}
|
||||
otaStartsegment += otaSetchunksSize;
|
||||
}
|
||||
//console.log(otaStartsegment + " " + otaSetchunksSize + " " + otaData.length + " " + (otaData.length - otaStartsegment));
|
||||
if (otaStarted == 1) {
|
||||
receiveWsData(JSON.stringify({ name: "otaGetChunk", msg: otaStartsegment }));
|
||||
receiveWsData(JSON.stringify({ name: "otaEnd", msg: "OK" }));
|
||||
}
|
||||
}
|
||||
//
|
||||
function receiveWsData(data) {
|
||||
try {
|
||||
let obj = JSON.parse(data);
|
||||
console.log(data);
|
||||
switch (obj.name) {
|
||||
case "otaSetchunksSize":
|
||||
otaSetchunksSize = obj.msg;
|
||||
break;
|
||||
case "otaGetChunk":
|
||||
let otaDataSend = otaData.subarray(obj.msg, obj.msg + otaSetchunksSize);
|
||||
document.getElementById("otaPogress").value = obj.msg;
|
||||
document.getElementById("otaStartCancel").innerHTML = "Ota Transfer. Size = " + otaData.length + " Segment = " + obj.msg + " Click to Cancel";
|
||||
console.log("sock send " + obj.msg + " " + otaDataSend.length);
|
||||
//socket.send(otaDataSend);
|
||||
break;
|
||||
case "otaEnd":
|
||||
otaStartsegment = 0;
|
||||
otaStarted = 0;
|
||||
document.getElementById("otaStartVisible").style.display = "none";
|
||||
document.getElementById("otaStartCancel").innerHTML = "Ota Start";
|
||||
document.getElementById("otaPogress").value = otaData.length;
|
||||
document.getElementById("otaFileSelect").disabled = false;
|
||||
document.getElementById("otaReStartVisible").style.display = "block";
|
||||
document.getElementById("otaReStart").innerHTML = "Transfer Done Click to restart ESP";
|
||||
document.getElementById("otaReStart").disabled = false;
|
||||
break;
|
||||
case "otaError":
|
||||
case "otaCancel":
|
||||
otaStartsegment = 0;
|
||||
otaStarted = 0;
|
||||
document.getElementById("otaStartVisible").style.display = "none";
|
||||
document.getElementById("otaStartCancel").innerHTML = "Ota Start";
|
||||
document.getElementById("otaPogress").value = otaData.length;
|
||||
document.getElementById("otaFileSelect").disabled = false;
|
||||
document.getElementById("otaReStartVisible").style.display = "block";
|
||||
document.getElementById("otaReStart").innerHTML = "Transfer Cancel " + obj.msg;
|
||||
document.getElementById("otaReStart").disabled = true;
|
||||
}
|
||||
}
|
||||
catch
|
||||
{
|
||||
console.log(data + " catch");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script> // Прием, обработка и отправка данных в WS
|
||||
</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 () {
|
||||
console.log("error");
|
||||
};
|
||||
socket.onmessage = function (event) {
|
||||
receiveWsData(event.data);
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user