GitHub-Proxy/ESP3D
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/luc-github/ESP3D.git synced 2025-10-12 06:11:35 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add proper progress bar for SD files/local files/FW

Browse Source 
Now display % of upload
This commit is contained in:
Luc 2016-06-21 11:10:09 +02:00
parent 6d73f3a9f2
commit 6728d8a1cc
3 changed files with 40 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
esp3d/data/printer.tpl
View File

@ -70,7 +70,7 @@ $INCLUDE[css2.inc]$
<td>&nbsp;&nbsp;</td>
<td id="SDLIST"></td></tr></table></td></tr>
<tr><td><input type="file" id="file-select" name="myfiles[]" multiple />
<input class="btn btn-primary" type="button" id="upload-button" onclick="Sendfile();" value="Upload"/>&nbsp;&nbsp;<progress style="visibility:hidden;" name='prg' id='prg'></progress></td></tr>
<input class="btn btn-primary" type="button" id="upload-button" onclick="Sendfile();" value="Upload"/>&nbsp;&nbsp;<progress style="visibility:hidden;" name='prg' id='prg' max='100'></progress></td></tr>
<tr><td><table><tr align="center" valign="middle"><td class="btnimg" onclick=" Sendcommand('G28 X');">
<svg width="40" height="40" viewBox="0 0 40 40" ><polygon points="7,40 7,25 4,28 0,24 20,4 26,10 26,6 32,6 32,16 40,24 36,28 33,25 33,40" fill="black" stroke-width:"1" stroke:"black" />
<line x1="25" y1="8" x2="33" y2="16" style="stroke:white;stroke-width:1" /><polyline points="4,28 20,12 36,28" style="fill:none;stroke:white;stroke-width:1" />
@ -406,6 +406,18 @@ var file = files[i];
formData.append('myfiles[]', file, "/"+file.name);}
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', '/SDFILES', true);
//progress upload event
xmlhttp.upload.addEventListener("progress", updateProgress, false);
//progress function
function updateProgress (oEvent) {
if (oEvent.lengthComputable) {
var percentComplete = (oEvent.loaded / oEvent.total)*100;
document.getElementById('prg').value=percentComplete;
document.getElementById('upload-button').value = "Uploading ..." + percentComplete.toFixed(0)+"%" ;
} else {
// Impossible because size is unknown
}
}
xmlhttp.onload = function () {
if (xmlhttp.status === 200) {
document.getElementById('upload-button').value = 'Upload';

15
esp3d/data/settings.tpl
View File

@ -30,7 +30,7 @@ $SUCCESS_MSG$
<div class="panel-heading">Filesystem</div>
<div class="panel-body">
<input type="file" id="file-select" name="myfiles[]" multiple />
<input class="btn btn-primary" type="button" id="upload-button" onclick="Sendfile();" value="Upload"/>&nbsp;&nbsp;<progress style="visibility:hidden;" name='prg' id='prg'></progress>
<input class="btn btn-primary" type="button" id="upload-button" onclick="Sendfile();" value="Upload"/>&nbsp;&nbsp;<progress style="visibility:hidden;" name='prg' id='prg' max='100'></progress>
<br><br><div class="panel">
<div class="panel-body">
<table class="table table-striped" style="border:1px;solid #dddddd;margin-bottom:20px;" ><thead><tr><th>Name</th><th>size</th><th width='0%'></th><th width='100%'></th></tr></thead><tbody id="file_list"><tbody></table>
@ -88,6 +88,19 @@ var file = files[i];
formData.append('myfiles[]', file, "/"+file.name);}
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', '/FILES', true);
//progress upload event
xmlhttp.upload.addEventListener("progress", updateProgress, false);
//progress function
function updateProgress (oEvent) {
if (oEvent.lengthComputable) {
var percentComplete = (oEvent.loaded / oEvent.total)*100;
document.getElementById('prg').value=percentComplete;
document.getElementById('upload-button').value = "Uploading ..." + percentComplete.toFixed(0)+"%" ;
} else {
// Impossible because size is unknown
}
}
xmlhttp.onload = function () {
if (xmlhttp.status === 200) {
document.getElementById('upload-button').value = 'Upload';

14
esp3d/data/system.tpl
View File

@ -34,7 +34,7 @@ $SUCCESS_MSG$
<table><tr>
<td><input type="file" id="file-select" name="myfiles[]" multiple /></td>
<td><input class="btn btn-primary" type="button" id="upload-button" onclick="Sendfile();" value="Update"/></td>
<td><progress style="visibility:hidden;" name='prg' id='prg'></progress></td>
<td><progress style="visibility:hidden;" name='prg' id='prg' max='100'></progress></td>
<td><div id='msg' style='visibility:hidden;'>Restarting, please wait....</div></td></tr></table>
</div>
@ -52,6 +52,18 @@ var file = files[i];
formData.append('myfiles[]', file, "/"+file.name);}
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', '/UPDATE', true);
//progress upload event
xmlhttp.upload.addEventListener("progress", updateProgress, false);
//progress function
function updateProgress (oEvent) {
if (oEvent.lengthComputable) {
var percentComplete = (oEvent.loaded / oEvent.total)*100;
document.getElementById('prg').value=percentComplete;
document.getElementById('upload-button').value = "Uploading ..." + percentComplete.toFixed(0)+"%" ;
} else {
// Impossible because size is unknown
}
}
xmlhttp.onload = function () {
if (xmlhttp.status === 200) {
document.getElementById('upload-button').value = 'Upload';