ESP32_ChinaDieselHeater_Con.../data/update.html

192 lines
6.8 KiB
HTML
Raw Normal View History

2019-07-11 08:55:31 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<style>
body { font-family: Arial, Helvetica, sans-serif; }
th { text-align: left; }
.throb { animation: throbber 1s linear infinite; }
@keyframes throbber { 50% { opacity: 0; } }
</style>
<script>
// globals
var sendSize;
var ws;
var CRCTable = new Uint16Array([
0X0000, 0XC0C1, 0XC181, 0X0140, 0XC301, 0X03C0, 0X0280, 0XC241,
0XC601, 0X06C0, 0X0780, 0XC741, 0X0500, 0XC5C1, 0XC481, 0X0440,
0XCC01, 0X0CC0, 0X0D80, 0XCD41, 0X0F00, 0XCFC1, 0XCE81, 0X0E40,
0X0A00, 0XCAC1, 0XCB81, 0X0B40, 0XC901, 0X09C0, 0X0880, 0XC841,
0XD801, 0X18C0, 0X1980, 0XD941, 0X1B00, 0XDBC1, 0XDA81, 0X1A40,
0X1E00, 0XDEC1, 0XDF81, 0X1F40, 0XDD01, 0X1DC0, 0X1C80, 0XDC41,
0X1400, 0XD4C1, 0XD581, 0X1540, 0XD701, 0X17C0, 0X1680, 0XD641,
0XD201, 0X12C0, 0X1380, 0XD341, 0X1100, 0XD1C1, 0XD081, 0X1040,
0XF001, 0X30C0, 0X3180, 0XF141, 0X3300, 0XF3C1, 0XF281, 0X3240,
0X3600, 0XF6C1, 0XF781, 0X3740, 0XF501, 0X35C0, 0X3480, 0XF441,
0X3C00, 0XFCC1, 0XFD81, 0X3D40, 0XFF01, 0X3FC0, 0X3E80, 0XFE41,
0XFA01, 0X3AC0, 0X3B80, 0XFB41, 0X3900, 0XF9C1, 0XF881, 0X3840,
0X2800, 0XE8C1, 0XE981, 0X2940, 0XEB01, 0X2BC0, 0X2A80, 0XEA41,
0XEE01, 0X2EC0, 0X2F80, 0XEF41, 0X2D00, 0XEDC1, 0XEC81, 0X2C40,
0XE401, 0X24C0, 0X2580, 0XE541, 0X2700, 0XE7C1, 0XE681, 0X2640,
0X2200, 0XE2C1, 0XE381, 0X2340, 0XE101, 0X21C0, 0X2080, 0XE041,
0XA001, 0X60C0, 0X6180, 0XA141, 0X6300, 0XA3C1, 0XA281, 0X6240,
0X6600, 0XA6C1, 0XA781, 0X6740, 0XA501, 0X65C0, 0X6480, 0XA441,
0X6C00, 0XACC1, 0XAD81, 0X6D40, 0XAF01, 0X6FC0, 0X6E80, 0XAE41,
0XAA01, 0X6AC0, 0X6B80, 0XAB41, 0X6900, 0XA9C1, 0XA881, 0X6840,
0X7800, 0XB8C1, 0XB981, 0X7940, 0XBB01, 0X7BC0, 0X7A80, 0XBA41,
0XBE01, 0X7EC0, 0X7F80, 0XBF41, 0X7D00, 0XBDC1, 0XBC81, 0X7C40,
0XB401, 0X74C0, 0X7580, 0XB541, 0X7700, 0XB7C1, 0XB681, 0X7640,
0X7200, 0XB2C1, 0XB381, 0X7340, 0XB101, 0X71C0, 0X7080, 0XB041,
0X5000, 0X90C1, 0X9181, 0X5140, 0X9301, 0X53C0, 0X5280, 0X9241,
0X9601, 0X56C0, 0X5780, 0X9741, 0X5500, 0X95C1, 0X9481, 0X5440,
0X9C01, 0X5CC0, 0X5D80, 0X9D41, 0X5F00, 0X9FC1, 0X9E81, 0X5E40,
0X5A00, 0X9AC1, 0X9B81, 0X5B40, 0X9901, 0X59C0, 0X5880, 0X9841,
0X8801, 0X48C0, 0X4980, 0X8941, 0X4B00, 0X8BC1, 0X8A81, 0X4A40,
0X4E00, 0X8EC1, 0X8F81, 0X4F40, 0X8D01, 0X4DC0, 0X4C80, 0X8C41,
0X4400, 0X84C1, 0X8581, 0X4540, 0X8701, 0X47C0, 0X4680, 0X8641,
0X8201, 0X42C0, 0X4380, 0X8341, 0X4100, 0X81C1, 0X8081, 0X4040
]);
function calcCRC(data) { // expect Uint8Array input
// calculate a CRC-16/MODBUS checksum using the all except the last 2 bytes of the data array
var CRCWord = 0xFFFF;
var Length = data.length - 2;
var idx = 0;
while (idx < Length)
{
var nTemp = (data[idx] ^ CRCWord) & 0xff;
CRCWord >>= 8;
CRCWord ^= CRCTable[nTemp];
idx++;
}
return CRCWord;
}
function _(el) {
return document.getElementById(el);
}
function onWebSocket(event) {
var response = JSON.parse(event.data);
var key;
for(key in response) {
switch(key) {
case "progress":
// actual data bytes received as fed back via web socket
var bytes = response[key];
_("loaded_n_total").innerHTML = "Uploaded " + bytes + " bytes of " + sendSize;
var percent = Math.round( 100 * (bytes / sendSize));
_("progressBar").value = percent;
_("status").innerHTML = percent+"% uploaded.. please wait";
break;
}
}
}
function init() {
ws = new WebSocket('ws://' + window.location.hostname + ':81/');
ws.onmessage = onWebSocket;
}
function uploadFile() {
_("cancel").hidden = true;
var file = _("file1").files[0];
sendSize = file.size;
var reader = new FileReader();
reader.onload = function(event) {
var buffer = event.target.result;
var uint8 = new Uint8Array(buffer);
console.log("Array length: " + uint8.length);
console.log("Buffer length: " + buffer.size);
console.log("CRC: " + calcCRC(uint8));
}
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error);
}
reader.readAsArrayBuffer(file);
/* var JSONmsg = {};
JSONmsg['UploadSize'] = sendSize;
var str = JSON.stringify(JSONmsg);
console.log("JSON Tx:", str);
ws.send(str);
var formdata = new FormData();
formdata.append("update", file);
var ajax = new XMLHttpRequest();
// progress is handled via websocket JSON sent from controller
// using server side progress only shows the buffer filling, not actual delivery.
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "/updatenow");
ajax.send(formdata);*/
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
_("loaded_n_total").innerHTML = "Uploaded " + sendSize + " bytes of " + sendSize;
var file = _("file1").files[0];
if(file.name.endsWith(".bin")) {
setTimeout( function() { window.location.assign('/'); }, 5000);
}
else {
setTimeout( function() { location.assign('/update'); }, 500);
}
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
function onErase(fn) {
if(confirm('Do you really want to erase ' + fn +' ?')) {
var formdata = new FormData();
formdata.append("filename", fn);
var ajax = new XMLHttpRequest();
ajax.open("POST", "/erase");
ajax.send(formdata);
setTimeout(function () { location.reload(); }, 500);
}
}
function onBrowseChange() {
_("upload").hidden = false;
_("progressBar").hidden = false;
_("status").hidden = false;
_("loaded_n_total").hidden = false;
_("spacer").hidden = false;
}
</script>
<title>Afterburner update</title>
</head>
<body onload="javascript:init()">
<h1>Afterburner update</h1>
<form id='upload_form' method="POST" enctype="multipart/form-data" autocomplete="off">
<label for='file1'>Select a file to upload:<br></label>
<input type="file" name="file1" id="file1" size="50" onchange="onBrowseChange()">
<p>
<input id="upload" type='button' onclick='uploadFile()' value='Upload' >
<progress id='progressBar' value='0' max='100' style='width:300px;' hidden></progress>
<p id='spacer' hidden> </p>
<input type='button' onclick=window.location.assign('/') id='cancel' value='Cancel'>
<h3 id='status' hidden></h3>
<div id='loaded_n_total' hidden></div>
</form>
<p><button onclick=window.location.assign('/formatspiffs')>Format SPIFFS</button>
</body>
</html>