144 lines
3.8 KiB
HTML
144 lines
3.8 KiB
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
<form method="POST" action="#" enctype="multipart/form-data" id="upload_form">
|
|
<h1>ESPMega PRO</h1>
|
|
<h3>LCD Display Management</h3>
|
|
<hr>
|
|
<h3>Upload TFT Firmware</h3>
|
|
<input type="file" name="update" id="file" onchange="sub(this)" style="display: none" />
|
|
<label id="file-input" for="file">Choose file...</label>
|
|
<input type="button" class="btn" value="Upload" onclick="uploadFirmware()" /><br /><br />
|
|
<div id="prg"></div>
|
|
<br />
|
|
<div id="prgbar">
|
|
<div id="bar"></div>
|
|
</div>
|
|
<br />
|
|
<b>SIWAT SYSTEM 2023</b>
|
|
</form>
|
|
<script>
|
|
function sub(obj) {
|
|
var fileName = obj.value.split("\\");
|
|
document.getElementById("file-input").innerHTML =
|
|
" " + fileName[fileName.length - 1];
|
|
}
|
|
|
|
function uploadFirmware() {
|
|
var file = document.getElementById('file').files[0];
|
|
var reader = new FileReader();
|
|
var path = window.location.pathname;
|
|
reader.onload = function (e) {
|
|
var data = new Uint8Array(e.target.result);
|
|
var size = data.length;
|
|
var chunkSize = 4096;
|
|
var index = 0;
|
|
|
|
// Begin the update
|
|
$.post(path + '/ota/begin', JSON.stringify({ size: size }), function () {
|
|
// Send the data in chunks
|
|
function sendNextChunk() {
|
|
if (index < size) {
|
|
var chunk = data.subarray(index, index + chunkSize);
|
|
var chunkArray = Array.from(chunk);
|
|
$.post(path + '/ota/write', JSON.stringify({ size: chunk.length, data: chunkArray }), function () {
|
|
index += chunkSize;
|
|
sendNextChunk();
|
|
});
|
|
} else {
|
|
// End the update
|
|
$.post(path + '/ota/end');
|
|
}
|
|
}
|
|
sendNextChunk();
|
|
});
|
|
};
|
|
reader.readAsArrayBuffer(file);
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
hr {
|
|
display: block;
|
|
color: #aaaaaa;
|
|
background-color: #aaaaaa;
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
border-style: inset;
|
|
border-width: 0px;
|
|
height: 3px;
|
|
}
|
|
|
|
#file-input,
|
|
input {
|
|
width: 100%;
|
|
height: 44px;
|
|
border-radius: 4px;
|
|
margin: 10px auto;
|
|
font-size: 15px;
|
|
}
|
|
|
|
input {
|
|
background: #f1f1f1;
|
|
border: 0;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
body {
|
|
background-image: url("https://fs.siwatsystem.com/arona_bg.png");
|
|
background-size: cover;
|
|
font-family: sans-serif;
|
|
font-size: 14px;
|
|
color: #777;
|
|
}
|
|
|
|
#file-input {
|
|
background-color: #CCCCCC;
|
|
color: #5E5E5E;
|
|
padding: 0;
|
|
border: 1px solid #ddd;
|
|
line-height: 44px;
|
|
text-align: center;
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#bar,
|
|
#prgbar {
|
|
background-color: #D9D9D9;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
#bar {
|
|
background-color: #29CD1F;
|
|
width: 0%;
|
|
height: 10px;
|
|
}
|
|
|
|
form {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
max-width: 258px;
|
|
margin: 75px auto;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn {
|
|
background: #CA3D3D;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.conf {
|
|
background: #417df3;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 44px;
|
|
border-radius: 4px;
|
|
margin: 10px auto;
|
|
font-size: 15px;
|
|
border: 0;
|
|
}
|
|
</style> |