mirror of
https://github.com/bdring/Grbl_Esp32.git
synced 2025-09-02 02:42:36 +02:00
Upload error improvement and bug fixes
Fix update partition size in [ESP420] add upload file size checking better upload error management use grbl version + build version for better tracking new embedded page from 3.0 - display fw version - menu link link to wiki / github - auto detection of index.html.gz when uploaded - websocket to limit to one instance - build batch to generate page and fw file fix for Apple captive portal blocking websocket Change `Error 0` message to `No connection`
This commit is contained in:
Luc
@@ -1,26 +1,16 @@
|
||||
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%; font-size:10px;}
|
||||
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333333;background-color:#ffffff;}
|
||||
.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px;}
|
||||
table{border:0px;border-spacing:0;max-width:100%;}
|
||||
.table-bordered{ width:100%; border:1px solid #dddddd;margin-bottom:20px;}
|
||||
td{white-space:nowrap; padding:2mm;}
|
||||
th{text-align:left;}
|
||||
.table>thead>tr>th,.table>tbody>tr>th,.table>thead>tr>td,.table>tbody>tr>td{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #dddddd;}
|
||||
.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td{border:1px solid #dddddd;}
|
||||
.table-bordered>thead>tr>th,.table-bordered>thead>tr>td{border-bottom-width:2px;}
|
||||
.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9;}
|
||||
@media (min-width:768px){.container{width:750px;}}
|
||||
@media (min-width:992px){.container{width:970px;}}
|
||||
@media (min-width:1200px){.container{width:1170px;}}
|
||||
.nav{ width:100%; color:#cccccc;padding-left:10;padding-right:10;list-style:none;background-color:#333333;border-radius:6px ;margin-bottom:20px;}
|
||||
a{position:relative;display:block;padding:10px 15px;text-decoration:none;color:#cccccc;}
|
||||
.active{color:#ffffff;background-color:#000000;}
|
||||
.active a,a:hover,a:focus{color:#FFFFFF;}
|
||||
.panel{margin-bottom:20px;background-color:#ffffff;border:1px solid #dddddd;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05);}
|
||||
.panel-body{padding:15px;}
|
||||
.panel-heading{padding:10px 15px;color:#333333;background-color:#f5f5f5;border-color:#dddddd;border-top-right-radius:3px;border-top-left-radius:3px;border-bottom:1px solid #dddddd;}
|
||||
label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:bold;}
|
||||
.text-info{color:#31708f;}
|
||||
.form-control{display:block;width:auto;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555555;background-color:#ffffff
|
||||
;background-image:none;border:1px solid #cccccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
|
||||
* -webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
|
||||
@@ -32,24 +22,12 @@ background-image:none;border:1px solid transparent;white-space:nowrap;padding:6p
|
||||
* -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
|
||||
.btn-primary{color:#ffffff;background-color:#337ab7;border-color:#2e6da4;}
|
||||
.btn-primary:focus,.btn-primary:active,.btn-primary:hover,.btn-primary.focus,.btn-primary.active,.btn-primary.hover{color:#ffffff;background-color:#286090;border-color:#122b40;}
|
||||
caption{padding-top:8px;padding-bottom:8px;color:#777777;text-align:left;}
|
||||
.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px;}
|
||||
.alert-success{background-color:#dff0d8;border-color:#d6e9c6;color:#3c763d;}
|
||||
.alert-danger{background-color:#f2dede;border-color:#ebccd1;color:#a94442;}
|
||||
.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);}
|
||||
.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;}
|
||||
.has-error .control-label{color:#a94442;}
|
||||
.has-success .form-control {border-color: #3c763d;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);}
|
||||
.has-success .form-control:focus {border-color: #2b542c;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;}
|
||||
.has-success .control-label{color: #3c763d;}
|
||||
.btn-danger{color:#ffffff;background-color:#d9534f;border-color:#d43f3a;}
|
||||
.btn-danger:focus,.btn-danger:active,.btn-danger:hover,.btn-danger.focus,.btn-danger.active,.btn-danger.hover{color: #ffffff;background-color:#c9302c;border-color:#761c19;}
|
||||
.btnimg {cursor:hand; border-radius:6px ;;border:1px solid #FFFFFF;}
|
||||
.btnimg:hover{background-color:#F0F0F0;border-color:#00FFFF;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;}
|
||||
.btnimg {cursor:hand; border-radius:6px ;border:1px solid #FFFFFF;}
|
||||
.btnimg:hover{background-color:#F0F0F0;border-color:#6c6c6c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #808080;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #808080;}
|
||||
.btnroundimg {cursor:hand; border-radius:30px;}
|
||||
.btnroundimg:hover{background-color:#F0F0F0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;}
|
||||
.blacklink {color:#000000;}
|
||||
.blacklink:hover, .filelink:focus {color:#0094FF;}
|
||||
.btnroundimg:hover{background-color:#F0F0F0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #808080;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #808080;}
|
||||
.blacklink, .blacklink:active {color:#000000;}
|
||||
.blacklink:hover{color:#000000;}
|
||||
input[type="file"]::-webkit-file-upload-button{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;-ms-touch-action:manipulation; touch-action:manipulation;cursor:pointer;
|
||||
background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:4px;
|
||||
* -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; color: #ffffff;background-color: #5bc0de;border-color: #46b8da;}
|
||||
@@ -59,22 +37,7 @@ background-image:none;border:1px solid transparent;white-space:nowrap;padding:6p
|
||||
input[type="file"]::-webkit-file-upload-button:hover{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;-ms-touch-action:manipulation; touch-action:manipulation;cursor:pointer;
|
||||
background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:4px;
|
||||
* -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; color: #ffffff;background-color: #31b0d5;border-color: #269abc;}
|
||||
.filelink {color:#000000;}
|
||||
.filelink:hover, .filelink:focus {color:#0094FF;}
|
||||
.panel-footer{padding:10px 15px;color:#31708f;background-color:#f5f5f5;border-color:#dddddd;border-top:1px solid #dddddd;}
|
||||
.loader {
|
||||
border: 4px solid #f3f3f3; /* Light grey */
|
||||
border-top: 4px solid #3498db; /* Blue */
|
||||
border-radius: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
.panel-footer{padding:10px 15px;color:#31708f;background-color:#f5f5f5;border-color:#dddddd;border-top:1px solid #dddddd;}
|
||||
|
||||
.modal {
|
||||
@@ -125,6 +88,9 @@ background-image:none;border:1px solid transparent;white-space:nowrap;padding:6p
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
.hide_it {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.modal-content {
|
||||
|
||||
@@ -1,4 +1,16 @@
|
||||
var currentpath = "/";
|
||||
var authentication = false;
|
||||
var websocket_port = 0;
|
||||
var websocket_IP = "";
|
||||
var async_webcommunication = false;
|
||||
var page_id = "";
|
||||
var ws_source;
|
||||
var log_off =false;
|
||||
var websocket_started =false;
|
||||
var esp_error_message ="";
|
||||
var esp_error_code = 0;
|
||||
var xmlhttpupload;
|
||||
var typeupload = 0;
|
||||
function navbar(){
|
||||
var content="<table><tr>";
|
||||
var tlist = currentpath.split("/");
|
||||
@@ -14,6 +26,7 @@ function navbar(){
|
||||
content+="</tr></table>";
|
||||
return content;
|
||||
}
|
||||
|
||||
function trash_icon(){
|
||||
var content ="<svg width='24' height='24' viewBox='0 0 128 128'>";
|
||||
content +="<rect x='52' y='12' rx='6' ry='6' width='25' height='7' style='fill:red;' />";
|
||||
@@ -26,23 +39,28 @@ function trash_icon(){
|
||||
content +="<rect x='80' y='43' rx='7' ry='7' width='7' height='63' style='fill:white;' /></svg>";
|
||||
return content;
|
||||
}
|
||||
|
||||
function back_icon(){
|
||||
var content ="<svg width='24' height='24' viewBox='0 0 24 24'><path d='M7,3 L2,8 L7,13 L7,10 L17,10 L18,11 L18,15 L17,16 L10,16 L9,17 L9,19 L10,20 L20,20 L22,18 L22,8 L20,6 L7,6 z' stroke='black' fill='white' /></svg>";
|
||||
return content;
|
||||
}
|
||||
|
||||
function select_dir(directoryname){
|
||||
currentpath+=directoryname + "/";
|
||||
SendCommand('list','all');
|
||||
}
|
||||
|
||||
function compareStrings(a, b) {
|
||||
// case-insensitive comparison
|
||||
a = a.toLowerCase();
|
||||
b = b.toLowerCase();
|
||||
return (a < b) ? -1 : (a > b) ? 1 : 0;
|
||||
}
|
||||
|
||||
function dispatchfilestatus(jsonresponse)
|
||||
{
|
||||
var content ="";
|
||||
var display_message = false;
|
||||
content =" Status: "+jsonresponse.status;
|
||||
content +=" | Total space: "+jsonresponse.total;
|
||||
content +=" | Used space: "+jsonresponse.used;
|
||||
@@ -59,18 +77,34 @@ if (currentpath!="/")
|
||||
jsonresponse.files.sort(function(a, b) {
|
||||
return compareStrings(a.name, b.name);
|
||||
});
|
||||
if (currentpath=="/") {
|
||||
display_message = true;
|
||||
}
|
||||
var display_time =false;
|
||||
for (var i1=0;i1 <jsonresponse.files.length;i1++){
|
||||
//first display files
|
||||
if (String(jsonresponse.files[i1].size) != "-1")
|
||||
{
|
||||
content +="<TR>";
|
||||
content +="<td><svg height='24' width='24' viewBox='0 0 24 24' > <path d='M1,2 L1,21 L2,22 L16,22 L17,21 L17,6 L12,6 L12,1 L2,1 z' stroke='black' fill='white' /><line x1='12' y1='1' x2='17' y2='6' stroke='black' stroke-width='1'/>";
|
||||
content +="<line x1='5' y1='10' x2='13' y2='10' stroke='black' stroke-width='1'/> <line x1='5' y1='14' x2='13' y2='14' stroke='black' stroke-width='1'/> <line x1='5' y1='18' x2='13' y2='18' stroke='black' stroke-width='1'/></svg></td>";
|
||||
content +="<td><svg height='24' width='24' viewBox='0 0 24 24' > <path d='M1,2 L1,21 L2,22 L16,22 L17,21 L17,6 L12,6 L12,1 L2,1 z' stroke='black' fill='white' /><line x1='12' y1='1' x2='17' y2='6' stroke='black' stroke-width='1'/>";
|
||||
content +="</svg></td>";
|
||||
content +="<TD class='btnimg' style=\"padding:0px;\"><a href=\""+jsonresponse.path+jsonresponse.files[i1].name+"\" target=_blank><div class=\"blacklink\">";
|
||||
content +=jsonresponse.files[i1].name;
|
||||
if ((jsonresponse.files[i1].name == "index.html.gz")||(jsonresponse.files[i1].name == "index.html")){
|
||||
display_message = false;
|
||||
}
|
||||
content +="</div></a></TD><TD>";
|
||||
content +=jsonresponse.files[i1].size;
|
||||
content +="</TD><TD width='0%'><div class=\"btnimg\" onclick=\"Delete('"+jsonresponse.files[i1].name+"')\">";
|
||||
content +="</TD>";
|
||||
if (jsonresponse.files[i1].hasOwnProperty('time')){
|
||||
display_time = true;
|
||||
content +="<TD>";
|
||||
content += jsonresponse.files[i1].time;
|
||||
content +="</TD>";
|
||||
} else {
|
||||
content +="<TD></TD>";
|
||||
}
|
||||
content +="<TD width='0%'><div class=\"btnimg\" onclick=\"Delete('"+jsonresponse.files[i1].name+"')\">";
|
||||
content +=trash_icon();
|
||||
content +="</div></TD><td></td></TR>";
|
||||
}
|
||||
@@ -79,49 +113,72 @@ if (String(jsonresponse.files[i1].size) != "-1")
|
||||
for (var i2=0;i2 <jsonresponse.files.length;i2++){
|
||||
if (String(jsonresponse.files[i2].size) == "-1")
|
||||
{
|
||||
content +="<TR>";
|
||||
content+="<td><svg height='24' width='24' viewBox='0 0 24 24' ><path d='M19,11 L19,8 L18,7 L8,7 L8,5 L7,4 L2,4 L1,5 L1,22 L19,22 L20,21 L23,11 L5,11 L2,21 L1,22' stroke='black' fill='white' /></svg></td>";
|
||||
content+="<TR><td><svg height='24' width='24' viewBox='0 0 24 24' ><path d='M19,11 L19,8 L18,7 L8,7 L8,5 L7,4 L2,4 L1,5 L1,22 L19,22 L20,21 L23,11 L5,11 L2,21 L1,22' stroke='black' fill='white' /></svg></td>";
|
||||
content +="<TD class='btnimg blacklink' style='padding:10px 15px;' onclick=\"select_dir('" + jsonresponse.files[i2].name+"');\">";
|
||||
content +=jsonresponse.files[i2].name;
|
||||
content +="</TD><TD>";
|
||||
content +="</TD><TD width='0%'><div class=\"btnimg\" onclick=\"Deletedir('"+jsonresponse.files[i2].name+"')\">";
|
||||
content +="</TD><TD></TD><TD></TD>";
|
||||
if (typeof jsonresponse.files[i2].hasOwnProperty('time')){
|
||||
display_time = true;
|
||||
}
|
||||
content +="<TD width='0%'><div class=\"btnimg\" onclick=\"Deletedir('"+jsonresponse.files[i2].name+"')\">";
|
||||
content +=trash_icon();
|
||||
content +="</div></TD><td></td></TR>";
|
||||
}
|
||||
}
|
||||
|
||||
if(display_time){
|
||||
document.getElementById('FS_time').innerHTML = "";
|
||||
} else {
|
||||
document.getElementById('FS_time').innerHTML = "Time";
|
||||
}
|
||||
if (display_message) {
|
||||
|
||||
document.getElementById('MSG').innerHTML = "File index.html.gz is missing, please upload it";
|
||||
} else {
|
||||
document.getElementById('MSG').innerHTML = "<a href='/' class= 'btn btn-primary'>Go to ESP3D interface</a>";
|
||||
}
|
||||
document.getElementById('file_list').innerHTML=content;
|
||||
document.getElementById('path').innerHTML=navbar();}
|
||||
|
||||
function Delete(filename){
|
||||
if (confirm("Confirm deletion of file: " + filename))SendCommand("delete",filename);
|
||||
}
|
||||
|
||||
function Deletedir(filename){
|
||||
if (confirm("Confirm deletion of directory: " + filename))SendCommand("deletedir",filename);
|
||||
}
|
||||
|
||||
function Createdir(){
|
||||
var filename = prompt("Please enter directory name", "");
|
||||
var filename = prompt("Directory name", "");
|
||||
if (filename != null) {
|
||||
SendCommand("createdir",filename.trim());
|
||||
}
|
||||
}
|
||||
|
||||
function SendCommand(action,filename){
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
var url = "/files?action="+action;
|
||||
document.getElementById('MSG').innerHTML = "Connecting...";
|
||||
url += "&filename="+encodeURI(filename);
|
||||
url += "&path="+encodeURI(currentpath);
|
||||
document.getElementById('loader').style.visibility="visible";
|
||||
xmlhttp.onreadystatechange = function() {
|
||||
if (xmlhttp.readyState == 4 ) {
|
||||
if(xmlhttp.status == 200) {
|
||||
var jsonresponse = JSON.parse(xmlhttp.responseText);
|
||||
document.getElementById('loader').style.visibility="hidden";
|
||||
dispatchfilestatus(jsonresponse);}
|
||||
else SubmitRequest ()
|
||||
dispatchfilestatus(jsonresponse);
|
||||
} else {
|
||||
if(xmlhttp.status == 401) {
|
||||
RL ();
|
||||
} else {
|
||||
console.log(xmlhttp.status);
|
||||
FWError();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
xmlhttp.open("GET", url, true);
|
||||
xmlhttp.send();
|
||||
}
|
||||
|
||||
function Sendfile(){
|
||||
var files = document.getElementById('file-select').files;
|
||||
if (files.length==0)return;
|
||||
@@ -135,10 +192,10 @@ var arg = currentpath + file.name + "S";
|
||||
//append file size first to check updload is complete
|
||||
formData.append(arg, file.size);
|
||||
formData.append('myfiles[]', file, currentpath+file.name);}
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open('POST', '/files', true);
|
||||
xmlhttpupload = new XMLHttpRequest();
|
||||
xmlhttpupload.open('POST', '/files', true);
|
||||
//progress upload event
|
||||
xmlhttp.upload.addEventListener("progress", updateProgress, false);
|
||||
xmlhttpupload.upload.addEventListener("progress", updateProgress, false);
|
||||
//progress function
|
||||
function updateProgress (oEvent) {
|
||||
if (oEvent.lengthComputable) {
|
||||
@@ -149,31 +206,208 @@ function updateProgress (oEvent) {
|
||||
// Impossible because size is unknown
|
||||
}
|
||||
}
|
||||
|
||||
xmlhttp.onload = function () {
|
||||
if (xmlhttp.status === 200) {
|
||||
typeupload = 1;
|
||||
xmlhttpupload.onload = function () {
|
||||
if (xmlhttpupload.status === 200) {
|
||||
document.getElementById('upload-button').value = 'Upload';
|
||||
document.getElementById('prg').style.visibility = "hidden";
|
||||
document.getElementById('file-select').value="";
|
||||
var jsonresponse = JSON.parse(xmlhttp.responseText);
|
||||
var jsonresponse = JSON.parse(xmlhttpupload.responseText);
|
||||
dispatchfilestatus(jsonresponse);
|
||||
} else alert('An error occurred!');
|
||||
} else uploadError();
|
||||
};
|
||||
xmlhttp.send(formData);
|
||||
|
||||
xmlhttpupload.send(formData);
|
||||
}
|
||||
|
||||
function padNumber(num, size) {
|
||||
var s = num.toString();
|
||||
while (s.length < size) s = "0" + s;
|
||||
return s;
|
||||
}
|
||||
function getPCTime(){
|
||||
var d = new Date();
|
||||
return d.getFullYear() + "-" + padNumber(d.getMonth() + 1 ,2) + "-" + padNumber(d.getDate(),2) + "-" + padNumber(d.getHours(),2) + "-" + padNumber(d.getMinutes(),2) + "-" + padNumber(d.getSeconds(),2);
|
||||
}
|
||||
|
||||
function HideAll(msg){
|
||||
//console.log("Hide all:" + msg);
|
||||
log_off = true;
|
||||
if(websocket_started){
|
||||
ws_source.close();
|
||||
}
|
||||
document.title = document.title + "(disconnected)";
|
||||
document.getElementById('MSG').innerHTML = msg;
|
||||
document.getElementById('FILESYSTEM').style.display = "none";
|
||||
document.getElementById('FWUPDATE').style.display = "none";
|
||||
}
|
||||
|
||||
function FWError(){
|
||||
HideAll("Failed to communicate with FW!");
|
||||
}
|
||||
|
||||
function FWOk(){
|
||||
document.getElementById('MSG').innerHTML = "Connected";
|
||||
document.getElementById('FILESYSTEM').style.display = "block";
|
||||
document.getElementById('FWUPDATE').style.display = "block";
|
||||
}
|
||||
|
||||
function InitUI(){
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
var url = "/command?commandText="+encodeURI("[ESP800]");
|
||||
authentication = false;
|
||||
async_webcommunication = false;
|
||||
console.log("Init UI");
|
||||
xmlhttp.onreadystatechange = function() {
|
||||
if (xmlhttp.readyState == 4 ) {
|
||||
var error = false;
|
||||
if(xmlhttp.status == 200) {
|
||||
var response = xmlhttp.responseText;
|
||||
var nbitem = 0;
|
||||
var tresp = response.split("#");
|
||||
console.log(xmlhttp.responseText);
|
||||
if (tresp.length < 3) {
|
||||
error = true;
|
||||
} else {
|
||||
//FW version:1.1f # FW target:grbl-embedded # FW HW:Direct SD # primary sd:/sd # secondary sd:none # authentication:no # webcommunication: Sync: 81:192.168.0.1 # hostname:grblesp # axis:3
|
||||
for (var p=0; p < tresp.length; p++){
|
||||
var sublist = tresp[p].split(":");
|
||||
if (sublist[0].trim() == "FW version"){
|
||||
document.getElementById('FWVERSION').innerHTML = "v"+sublist[1];
|
||||
nbitem++;
|
||||
}
|
||||
if (sublist[0].trim() == "authentication"){
|
||||
if (sublist[1].trim() == "no") authentication = false;
|
||||
else authentication = true;
|
||||
nbitem++;
|
||||
}
|
||||
if (sublist[0].trim() == "webcommunication"){
|
||||
websocket_port = sublist[2].trim();
|
||||
websocket_IP = sublist[3].trim();
|
||||
startSocket();
|
||||
nbitem++;
|
||||
}
|
||||
if (sublist[0].trim() == "hostname"){
|
||||
document.title = sublist[1].trim();
|
||||
nbitem++
|
||||
}
|
||||
}
|
||||
if (nbitem == 4) {
|
||||
SendCommand('list','all');
|
||||
FWOk();
|
||||
} else {
|
||||
error = true;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
} else if (xmlhttp.status == 401){
|
||||
RL();
|
||||
} else {
|
||||
error = true;
|
||||
console.log( xmlhttp.status);
|
||||
}
|
||||
if (error) {
|
||||
FWError();
|
||||
}
|
||||
}
|
||||
};
|
||||
xmlhttp.open("GET", url, true);
|
||||
xmlhttp.send();
|
||||
}
|
||||
|
||||
function startSocket(){
|
||||
if (websocket_started){
|
||||
ws_source.close();
|
||||
}
|
||||
if(async_webcommunication){
|
||||
ws_source = new WebSocket('ws://'+websocket_IP + ':' + websocket_port +'/ws',['arduino']);
|
||||
}
|
||||
else {
|
||||
//console.log("Socket port is :" + websocket_port);
|
||||
ws_source = new WebSocket('ws://'+websocket_IP + ':' + websocket_port,['arduino']);
|
||||
}
|
||||
ws_source.binaryType = "arraybuffer";
|
||||
ws_source.onopen = function(e){
|
||||
console.log("WS");
|
||||
websocket_started = true;
|
||||
};
|
||||
ws_source.onclose = function(e){
|
||||
websocket_started = false;
|
||||
console.log("~WS");
|
||||
//seems sometimes it disconnect so wait 3s and reconnect
|
||||
//if it is not a log off
|
||||
if(!log_off) setTimeout(startSocket, 3000);
|
||||
};
|
||||
ws_source.onerror = function(e){
|
||||
console.log("WS", e);
|
||||
};
|
||||
ws_source.onmessage = function(e){
|
||||
var msg = "";
|
||||
//bin
|
||||
if(!(e.data instanceof ArrayBuffer)){
|
||||
msg = e.data;
|
||||
var tval = msg.split(":");
|
||||
if (tval.length >= 2) {
|
||||
if (tval[0] == 'currentID') {
|
||||
page_id = tval[1];
|
||||
console.log("ID " + page_id);
|
||||
}
|
||||
if (tval[0] == 'activeID') {
|
||||
if(page_id != tval[1]) {
|
||||
HideAll("It seems you are connect from another location, your are now disconnected");
|
||||
}
|
||||
}
|
||||
if (tval[0] == 'ERROR') {
|
||||
esp_error_message = tval[2];
|
||||
esp_error_code = tval[1];
|
||||
console.log(tval[2] + " code:" + tval[1]);
|
||||
uploadError();
|
||||
xmlhttpupload.abort();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
//console.log(msg);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
SendCommand('list','all');
|
||||
InitUI();
|
||||
};
|
||||
|
||||
function uploadError()
|
||||
{
|
||||
if (esp_error_code != 0) {
|
||||
alert('Update failed(' + esp_error_code + '): ' + esp_error_message);
|
||||
esp_error_code = 0;
|
||||
} else {
|
||||
alert('Update failed!');
|
||||
}
|
||||
|
||||
if (typeupload == 1) {
|
||||
//location.reload();
|
||||
document.getElementById('upload-button').value = 'Upload';
|
||||
document.getElementById('prg').style.visibility = "hidden";
|
||||
document.getElementById('file-select').value="";
|
||||
SendCommand('list', 'all');
|
||||
} else {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
function Uploadfile(){
|
||||
if (!confirm("Confirm Firmware Update ?"))return;
|
||||
var files = document.getElementById('fw-select').files;
|
||||
if (files.length==0)return;
|
||||
document.getElementById('uploadfw-button').style.visibility = 'hidden';
|
||||
document.getElementById('ubut').style.visibility = 'hidden';
|
||||
document.getElementById('fw-select').style.visibility = 'hidden';
|
||||
document.getElementById('msg').style.visibility = "visible";
|
||||
document.getElementById('msg').innerHTML="";
|
||||
document.getElementById('SPIFFS').style.display = "none";
|
||||
document.getElementById('FILESYSTEM').style.display = "none";
|
||||
document.getElementById('prgfw').style.visibility = "visible";
|
||||
var formData = new FormData();
|
||||
for (var i4 = 0; i4 < files.length; i4++) {
|
||||
@@ -182,10 +416,11 @@ var arg = "/" + file.name + "S";
|
||||
//append file size first to check updload is complete
|
||||
formData.append(arg, file.size);
|
||||
formData.append('myfile[]', file, "/"+file.name);}
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open('POST', '/updatefw', true);
|
||||
typeupload = 0;
|
||||
xmlhttpupload = new XMLHttpRequest();
|
||||
xmlhttpupload.open('POST', '/updatefw', true);
|
||||
//progress upload event
|
||||
xmlhttp.upload.addEventListener("progress", updateProgress, false);
|
||||
xmlhttpupload.addEventListener("progress", updateProgress, false);
|
||||
//progress function
|
||||
function updateProgress (oEvent) {
|
||||
if (oEvent.lengthComputable) {
|
||||
@@ -196,58 +431,67 @@ function updateProgress (oEvent) {
|
||||
// Impossible because size is unknown
|
||||
}
|
||||
}
|
||||
xmlhttp.onload = function () {
|
||||
if (xmlhttp.status === 200) {
|
||||
document.getElementById('uploadfw-button').value = 'Upload';
|
||||
xmlhttpupload.onload = function () {
|
||||
if (xmlhttpupload.status === 200) {
|
||||
document.getElementById('ubut').value = 'Upload';
|
||||
document.getElementById('msg').innerHTML="Restarting, please wait....";
|
||||
document.getElementById('counter').style.visibility = "visible";
|
||||
document.getElementById('uploadfw-button').style.visibility = 'hidden';
|
||||
document.getElementById('uploadfw-button').style.width = '0px';
|
||||
document.getElementById('ubut').style.visibility = 'hidden';
|
||||
document.getElementById('ubut').style.width = '0px';
|
||||
document.getElementById('fw-select').value="";
|
||||
document.getElementById('fw-select').style.visibility = 'hidden';
|
||||
document.getElementById('fw-select').style.width = '0px';
|
||||
|
||||
var jsonresponse = JSON.parse(xmlhttp.responseText);
|
||||
if (jsonresponse.status=='1' || jsonresponse.status=='4' || jsonresponse.status=='1')alert("Update failed");
|
||||
var jsonresponse = JSON.parse(xmlhttpupload.responseText);
|
||||
if (jsonresponse.status=='1' || jsonresponse.status=='4' || jsonresponse.status=='1')uploadError();
|
||||
if (jsonresponse.status=='2')alert('Update canceled!');
|
||||
else if (jsonresponse.status=='3')
|
||||
{
|
||||
var i5 = 0;
|
||||
var interval;
|
||||
var x = document.getElementById("prgfw");
|
||||
x.max=40;
|
||||
interval = setInterval(function(){
|
||||
i5=i5+1;
|
||||
var x = document.getElementById("prgfw");
|
||||
x.value=i5;
|
||||
var i5 = 0;
|
||||
var interval;
|
||||
var x = document.getElementById("prgfw");
|
||||
x.max=40;
|
||||
interval = setInterval(function(){
|
||||
i5=i5+1;
|
||||
var x = document.getElementById("prgfw");
|
||||
x.value=i5;
|
||||
document.getElementById('counter').innerHTML=41-i5;
|
||||
if (i5>40)
|
||||
{
|
||||
clearInterval(interval);
|
||||
location.reload();
|
||||
}
|
||||
},1000);
|
||||
if (i5>40)
|
||||
{
|
||||
clearInterval(interval);
|
||||
location.reload();
|
||||
}
|
||||
},1000);
|
||||
}
|
||||
else alert('Update failed!');
|
||||
} else alert('An error occurred!');
|
||||
else uploadError()
|
||||
} else uploadError()
|
||||
};
|
||||
xmlhttp.send(formData);
|
||||
xmlhttpupload.send(formData);
|
||||
}
|
||||
|
||||
function RequestLogin(){
|
||||
document.getElementById('loader').style.visibility="hidden";
|
||||
|
||||
function RL(){
|
||||
document.getElementById('loginpage').style.display='block';
|
||||
}
|
||||
|
||||
function SubmitRequest (){
|
||||
function SLR (){
|
||||
document.getElementById('loginpage').style.display='none';
|
||||
var user = document.getElementById('login_user_text').value.trim();
|
||||
var password = document.getElementById('login_password_text').value.trim();
|
||||
var user = document.getElementById('lut').value.trim();
|
||||
var password = document.getElementById('lpt').value.trim();
|
||||
var url = "/login?USER="+encodeURIComponent(user) + "&PASSWORD=" + encodeURIComponent(password) + "&SUBMIT=yes" ;
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.onreadystatechange = function() {
|
||||
if (xmlhttp.readyState == 4 && xmlhttp.status != 200) {
|
||||
RequestLogin();
|
||||
if (xmlhttp.readyState == 4){
|
||||
if (xmlhttp.status != 200) {
|
||||
if (xmlhttp.status == 401) {
|
||||
RL();
|
||||
} else {
|
||||
FWError();
|
||||
console.log(xmlhttp.status);
|
||||
}
|
||||
} else {
|
||||
InitUI();
|
||||
}
|
||||
}
|
||||
};
|
||||
xmlhttp.open("GET", url, true);
|
||||
|
||||
@@ -3,18 +3,52 @@
|
||||
<!-- smoosh -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<!-- endsmoosh -->
|
||||
<title>ESP3D tool page</title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="position:absolute;top:0;right:0;">
|
||||
V1.2
|
||||
|
||||
<div class="panel">
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td>
|
||||
<a class="btnimg" href="https://github.com/bdring/Grbl_Esp32" target="_blank">
|
||||
<svg width='1em' height='1em' viewBox='0 0 1300 1200'>
|
||||
<g transform='translate(50,1200) scale(1, -1)'>
|
||||
<path d='M600 1174q33 0 74 -5l38 -152l5 -1q49 -14 94 -39l5 -2l134 80q61 -48 104 -105l-80 -134l3 -5q25 -44 39 -93l1 -6l152 -38q5 -43 5 -73q0 -34 -5 -74l-152 -38l-1 -6q-15 -49 -39 -93l-3 -5l80 -134q-48 -61 -104 -105l-134 81l-5 -3q-44 -25 -94 -39l-5 -2l-38 -151 q-43 -5 -74 -5q-33 0 -74 5l-38 151l-5 2q-49 14 -94 39l-5 3l-134 -81q-60 48 -104 105l80 134l-3 5q-25 45 -38 93l-2 6l-151 38q-6 42 -6 74q0 33 6 73l151 38l2 6q13 48 38 93l3 5l-80 134q47 61 105 105l133 -80l5 2q45 25 94 39l5 1l38 152q43 5 74 5zM600 815 q-89 0 -152 -63t-63 -151.5t63 -151.5t152 -63t152 63t63 151.5t-63 151.5t-152 63z'></path>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="blacklink">Firmware</span>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a class="btnimg" href="https://www.github.com/luc-github/ESP3D-WEBUI/tree/2.1" target="_blank">
|
||||
<svg width='1em' height='1em' viewBox='0 0 1300 1200'>
|
||||
<g transform='translate(50,1200) scale(1, -1)'>
|
||||
<path d='M600 1094q82 0 160.5 -22.5t140 -59t116.5 -82.5t94.5 -95t68 -95t42.5 -82.5t14 -57.5t-14 -57.5t-43 -82.5t-68.5 -95t-94.5 -95t-116.5 -82.5t-140 -59t-159.5 -22.5t-159.5 22.5t-140 59t-116.5 82.5t-94.5 95t-68.5 95t-43 82.5t-14 57.5t14 57.5t42.5 82.5t68 95 t94.5 95t116.5 82.5t140 59t160.5 22.5zM888 829q-15 15 -18 12t5 -22q25 -57 25 -119q0 -124 -88 -212t-212 -88t-212 88t-88 212q0 59 23 114q8 19 4.5 22t-17.5 -12q-70 -69 -160 -184q-13 -16 -15 -40.5t9 -42.5q22 -36 47 -71t70 -82t92.5 -81t113 -58.5t133.5 -24.5 t133.5 24t113 58.5t92.5 81.5t70 81.5t47 70.5q11 18 9 42.5t-14 41.5q-90 117 -163 189zM448 727l-35 -36q-15 -15 -19.5 -38.5t4.5 -41.5q37 -68 93 -116q16 -13 38.5 -11t36.5 17l35 34q14 15 12.5 33.5t-16.5 33.5q-44 44 -89 117q-11 18 -28 20t-32 -12z'> </path>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="blacklink">Interface</span>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a class="btnimg" href="https://github.com/bdring/Grbl_Esp32/wiki" target="_blank">
|
||||
<svg width='1em' height='1em' viewBox='0 0 1300 1200'>
|
||||
<g transform='translate(50,1200) scale(1, -1)'>
|
||||
<path d='M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM588 941q-29 0 -59 -5.5t-63 -20.5t-58 -38.5t-41.5 -63t-16.5 -89.5 q0 -25 20 -25h131q30 -5 35 11q6 20 20.5 28t45.5 8q20 0 31.5 -10.5t11.5 -28.5q0 -23 -7 -34t-26 -18q-1 0 -13.5 -4t-19.5 -7.5t-20 -10.5t-22 -17t-18.5 -24t-15.5 -35t-8 -46q-1 -8 5.5 -16.5t20.5 -8.5h173q7 0 22 8t35 28t37.5 48t29.5 74t12 100q0 47 -17 83 t-42.5 57t-59.5 34.5t-64 18t-59 4.5zM675 400h-150q-10 0 -17.5 -7.5t-7.5 -17.5v-150q0 -10 7.5 -17.5t17.5 -7.5h150q10 0 17.5 7.5t7.5 17.5v150q0 10 -7.5 17.5t-17.5 7.5z'> </path>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="blacklink">Help</span></a>
|
||||
</td>
|
||||
<td style="width:100%;"></td>
|
||||
<td style="text-align:right;">
|
||||
<span id="FWVERSION" class="blacklink"></span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<center>
|
||||
<h2>It seems you do not have any index.html neither index.html.gz, please upload it or update your firmware if necessary.</h2>
|
||||
you can find one here : <a class='blacklink' href='https://github.com/luc-github/ESP3D-WEBUI'>https://github.com/luc-github/ESP3D-WEBUI</a>
|
||||
</center>
|
||||
|
||||
<div class="panel" id="SPIFFS">
|
||||
<div class="panel">
|
||||
<center><h2 id="MSG"></h2></center>
|
||||
</div>
|
||||
<div class="panel hide_it" id="FILESYSTEM">
|
||||
<div class="panel-heading">Flash Filesystem</div>
|
||||
<div class="panel-body">
|
||||
<input type="file" id="file-select" name="myfiles[]" multiple />
|
||||
@@ -32,9 +66,6 @@
|
||||
<rect x="20" y="5" width="15" height="15" rx="2" ry="2" fill="#31b0d5" /><text x="15" y="25" font-size="18" font-weight="800" fill="white">+</text></svg>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="loader" class="loader"></div>
|
||||
</td>
|
||||
<td width="100%">
|
||||
<div id="path" class="info" > </div>
|
||||
</td>
|
||||
@@ -46,6 +77,7 @@
|
||||
<th width='0%'>Type</th>
|
||||
<th>Name</th>
|
||||
<th>Size</th>
|
||||
<th id="FS_time">Time</th>
|
||||
<th width='0%'></th>
|
||||
<th width='100%'></th>
|
||||
</tr>
|
||||
@@ -57,13 +89,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel hide_it" id="FWUPDATE">
|
||||
<div class="panel-heading">Firmware Update</div>
|
||||
<div class="panel-body">
|
||||
<table>
|
||||
<tr>
|
||||
<td><input type="file" id="fw-select" name="myfiles[]" /></td>
|
||||
<td><input class="btn btn-primary" type="button" id="uploadfw-button" onclick="Uploadfile();" value="Update"/></td>
|
||||
<td><input class="btn btn-primary" type="button" id="ubut" onclick="Uploadfile();" value="Update"/></td>
|
||||
<td><progress style="visibility:hidden;" name='prgfw' id='prgfw' max='100'></progress></td>
|
||||
<td><span id='msg' style='visibility:hidden;'>Restarting, please wait....</span><span id='counter'></span></td>
|
||||
</tr>
|
||||
@@ -78,17 +110,17 @@
|
||||
<div class="modal-body">
|
||||
<span>
|
||||
<span class="modal-text" translate>User:</span>
|
||||
<input class='form-control' type="text" id="login_user_text" style="width:auto"/>
|
||||
<input class='form-control' type="text" id="lut" style="width:auto"/>
|
||||
</span>
|
||||
<hr>
|
||||
<span>
|
||||
<span class="modal-text" translate>Password:</span>
|
||||
<input class='form-control' type="password" id="login_password_text" style="width:auto"/>
|
||||
<input class='form-control' type="password" id="lpt" style="width:auto"/>
|
||||
</span>
|
||||
<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<input type="button" class="btn btn-primary" onclick="SubmitRequest()" value="Submit"/>
|
||||
<input type="button" class="btn btn-primary" onclick="SLR()" value="Submit"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user