mirror of
https://github.com/bdring/Grbl_Esp32.git
synced 2025-08-28 16:49:54 +02:00
Update Docs
Update Libraries Add embedded remove binary
This commit is contained in:
Luc
139
embedded/www/css/style.css
Normal file
139
embedded/www/css/style.css
Normal file
@@ -0,0 +1,139 @@
|
||||
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;
|
||||
* transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6);
|
||||
* box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6);}
|
||||
.form-group{margin-bottom:15px;}
|
||||
.btn{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;}
|
||||
.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;}
|
||||
.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;}
|
||||
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;}
|
||||
input[type="file"]::-webkit-file-upload-button:focus{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: #1b6d85;}
|
||||
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 {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 10000; /* Sit on top */
|
||||
padding-top: 100px; /* Location of the box */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: rgb(0,0,0); /* Fallback color */
|
||||
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
||||
}
|
||||
|
||||
/* Modal Content */
|
||||
.modal-content {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
border: 2px solid #337AB7;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
position: relative;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
background-color: #fefefe;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 2px 16px;
|
||||
color: #0f0f0f;
|
||||
background-color: #f2f2f2;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom: 1px solid #cfcfcf;
|
||||
}
|
||||
|
||||
.modal-body {padding: 10px 16px;}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 16px;
|
||||
height: 4.5em;
|
||||
color: #0f0f0f;
|
||||
background-color: #f2f2f2;
|
||||
border-top: 1px solid #cfcfcf;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.modal-content {
|
||||
width: 580px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
255
embedded/www/js/script.js
Normal file
255
embedded/www/js/script.js
Normal file
@@ -0,0 +1,255 @@
|
||||
var currentpath = "/";
|
||||
function navbar(){
|
||||
var content="<table><tr>";
|
||||
var tlist = currentpath.split("/");
|
||||
var path="/";
|
||||
var nb = 1;
|
||||
content+="<td class='btnimg' onclick=\"currentpath='/'; SendCommand('list','all');\">/</td>";
|
||||
while (nb < (tlist.length-1))
|
||||
{
|
||||
path+=tlist[nb] + "/";
|
||||
content+="<td class='btnimg' onclick=\"currentpath='"+path+"'; SendCommand('list','all');\">"+tlist[nb] +"</td><td>/</td>";
|
||||
nb++;
|
||||
}
|
||||
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;' />";
|
||||
content +="<rect x='52' y='16' width='25' height='2' style='fill:white;' />";
|
||||
content +="<rect x='30' y='18' rx='6' ry='6' width='67' height='100' style='fill:red;' />";
|
||||
content +="<rect x='20' y='18' rx='10' ry='10' width='87' height='14' style='fill:red;' />";
|
||||
content +="<rect x='20' y='29' width='87' height='3' style='fill:white;' />";
|
||||
content +="<rect x='40' y='43' rx='7' ry='7' width='7' height='63' style='fill:white;' />";
|
||||
content +="<rect x='60' y='43' rx='7' ry='7' width='7' height='63' style='fill:white;' />";
|
||||
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 ="";
|
||||
content =" Status: "+jsonresponse.status;
|
||||
content +=" | Total space: "+jsonresponse.total;
|
||||
content +=" | Used space: "+jsonresponse.used;
|
||||
content +=" | Occupation: ";
|
||||
content +="<meter min='0' max='100' high='90' value='"+jsonresponse.occupation +"'></meter> "+jsonresponse.occupation +"%";
|
||||
document.getElementById('status').innerHTML=content;
|
||||
content ="";
|
||||
if (currentpath!="/")
|
||||
{
|
||||
var pos = currentpath.lastIndexOf("/",currentpath.length-2);
|
||||
var previouspath = currentpath.slice(0,pos+1);
|
||||
content +="<tr style='cursor:hand;' onclick=\"currentpath='"+previouspath+"'; SendCommand('list','all');\"><td >"+back_icon()+"</td><td colspan='4'> Up..</td></tr>";
|
||||
}
|
||||
jsonresponse.files.sort(function(a, b) {
|
||||
return compareStrings(a.name, b.name);
|
||||
});
|
||||
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 class='btnimg' style=\"padding:0px;\"><a href=\""+jsonresponse.path+jsonresponse.files[i1].name+"\" target=_blank><div class=\"blacklink\">";
|
||||
content +=jsonresponse.files[i1].name;
|
||||
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 +=trash_icon();
|
||||
content +="</div></TD><td></td></TR>";
|
||||
}
|
||||
}
|
||||
//then display directories
|
||||
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 +="<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 +=trash_icon();
|
||||
content +="</div></TD><td></td></TR>";
|
||||
}
|
||||
}
|
||||
|
||||
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", "");
|
||||
if (filename != null) {
|
||||
SendCommand("createdir",filename.trim());
|
||||
}
|
||||
}
|
||||
function SendCommand(action,filename){
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
var url = "/files?action="+action;
|
||||
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 ()
|
||||
}
|
||||
};
|
||||
xmlhttp.open("GET", url, true);
|
||||
xmlhttp.send();
|
||||
}
|
||||
function Sendfile(){
|
||||
var files = document.getElementById('file-select').files;
|
||||
if (files.length==0)return;
|
||||
document.getElementById('upload-button').value = "Uploading...";
|
||||
document.getElementById('prg').style.visibility = "visible";
|
||||
var formData = new FormData();
|
||||
formData.append('path', currentpath);
|
||||
for (var i3 = 0; i3 < files.length; i3++) {
|
||||
var file = files[i3];
|
||||
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);
|
||||
//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';
|
||||
document.getElementById('prg').style.visibility = "hidden";
|
||||
document.getElementById('file-select').value="";
|
||||
var jsonresponse = JSON.parse(xmlhttp.responseText);
|
||||
dispatchfilestatus(jsonresponse);
|
||||
} else alert('An error occurred!');
|
||||
};
|
||||
xmlhttp.send(formData);
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
SendCommand('list','all');
|
||||
};
|
||||
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('fw-select').style.visibility = 'hidden';
|
||||
document.getElementById('msg').style.visibility = "visible";
|
||||
document.getElementById('msg').innerHTML="";
|
||||
document.getElementById('SPIFFS').style.display = "none";
|
||||
document.getElementById('prgfw').style.visibility = "visible";
|
||||
var formData = new FormData();
|
||||
for (var i4 = 0; i4 < files.length; i4++) {
|
||||
var file = files[i4];
|
||||
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);
|
||||
//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('prgfw').value=percentComplete;
|
||||
document.getElementById('msg').innerHTML = "Uploading ..." + percentComplete.toFixed(0)+"%" ;
|
||||
} else {
|
||||
// Impossible because size is unknown
|
||||
}
|
||||
}
|
||||
xmlhttp.onload = function () {
|
||||
if (xmlhttp.status === 200) {
|
||||
document.getElementById('uploadfw-button').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('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");
|
||||
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;
|
||||
document.getElementById('counter').innerHTML=41-i5;
|
||||
if (i5>40)
|
||||
{
|
||||
clearInterval(interval);
|
||||
location.reload();
|
||||
}
|
||||
},1000);
|
||||
}
|
||||
else alert('Update failed!');
|
||||
} else alert('An error occurred!');
|
||||
};
|
||||
xmlhttp.send(formData);
|
||||
}
|
||||
|
||||
function RequestLogin(){
|
||||
document.getElementById('loader').style.visibility="hidden";
|
||||
document.getElementById('loginpage').style.display='block';
|
||||
}
|
||||
|
||||
function SubmitRequest (){
|
||||
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 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();
|
||||
}
|
||||
};
|
||||
xmlhttp.open("GET", url, true);
|
||||
xmlhttp.send();
|
||||
}
|
||||
101
embedded/www/tool.html
Normal file
101
embedded/www/tool.html
Normal file
@@ -0,0 +1,101 @@
|
||||
<html>
|
||||
<head>
|
||||
<!-- smoosh -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<!-- endsmoosh -->
|
||||
</head>
|
||||
<body>
|
||||
<div style="position:absolute;top:0;right:0;">
|
||||
V1.2
|
||||
|
||||
</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-heading">Flash 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"/> <progress style="visibility:hidden;" name='prg' id='prg' max='100'></progress>
|
||||
<br><br>
|
||||
<div class="panel">
|
||||
<div class="panel-body">
|
||||
<table>
|
||||
<tr>
|
||||
<td width="0%">
|
||||
<input class="btn btn-primary" type="button" onclick="SendCommand('list','all');" value="Refresh"/>
|
||||
</td>
|
||||
<td width="0%">
|
||||
<div onclick="Createdir()" class="btnimg"><svg width="40" height="40" viewBox="0 0 40 40"><rect x="5" y="10" width="30" height="20" rx="2" ry="2" fill="#31b0d5" />
|
||||
<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>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="table table-striped" style="border:1px;solid #dddddd;margin-bottom:20px;" >
|
||||
<thead>
|
||||
<tr>
|
||||
<th width='0%'>Type</th>
|
||||
<th>Name</th>
|
||||
<th>Size</th>
|
||||
<th width='0%'></th>
|
||||
<th width='100%'></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="file_list"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="panel-footer " id="status"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<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><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>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loginpage"class="modal">
|
||||
<div class="modal-content" >
|
||||
<div class="modal-header">
|
||||
<h3>Identification</h3>
|
||||
</div>
|
||||
<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"/>
|
||||
</span>
|
||||
<hr>
|
||||
<span>
|
||||
<span class="modal-text" translate>Password:</span>
|
||||
<input class='form-control' type="password" id="login_password_text" style="width:auto"/>
|
||||
</span>
|
||||
<br>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<input type="button" class="btn btn-primary" onclick="SubmitRequest()" value="Submit"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- smoosh -->
|
||||
<script src="js/script.js"></script>
|
||||
<!-- endsmoosh -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user