Update de grbl avec un plus grand buffer et un peu de doc en plus
This commit is contained in:
Geekoid
105
Grbl_Esp32-master/embedded/www/css/style.css
Normal file
105
Grbl_Esp32-master/embedded/www/css/style.css
Normal file
@ -0,0 +1,105 @@
|
||||
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;}
|
||||
table{border:0px;border-spacing:0;max-width:100%;}
|
||||
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-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9;}
|
||||
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;}
|
||||
.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;}
|
||||
.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 #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;}
|
||||
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;}
|
||||
.panel-footer{padding:10px 15px;color:#31708f;background-color:#f5f5f5;border-color:#dddddd;border-top:1px solid #dddddd;}
|
||||
.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;
|
||||
}
|
||||
.hide_it {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.modal-content {
|
||||
width: 580px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
505
Grbl_Esp32-master/embedded/www/js/script.js
Normal file
505
Grbl_Esp32-master/embedded/www/js/script.js
Normal file
@ -0,0 +1,505 @@
|
||||
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("/");
|
||||
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 ="";
|
||||
var display_message = false;
|
||||
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);
|
||||
});
|
||||
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 +="</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>";
|
||||
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>";
|
||||
}
|
||||
}
|
||||
//then display directories
|
||||
for (var i2=0;i2 <jsonresponse.files.length;i2++){
|
||||
if (String(jsonresponse.files[i2].size) == "-1")
|
||||
{
|
||||
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></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("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);
|
||||
xmlhttp.onreadystatechange = function() {
|
||||
if (xmlhttp.readyState == 4 ) {
|
||||
if(xmlhttp.status == 200) {
|
||||
var jsonresponse = JSON.parse(xmlhttp.responseText);
|
||||
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;
|
||||
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);}
|
||||
xmlhttpupload = new XMLHttpRequest();
|
||||
xmlhttpupload.open('POST', '/files', true);
|
||||
//progress upload event
|
||||
xmlhttpupload.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
|
||||
}
|
||||
}
|
||||
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(xmlhttpupload.responseText);
|
||||
dispatchfilestatus(jsonresponse);
|
||||
} else uploadError();
|
||||
};
|
||||
|
||||
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;
|
||||
document.getElementById('loginicon').style.visibility = "hidden";
|
||||
}
|
||||
else {
|
||||
authentication = true;
|
||||
document.getElementById('loginicon').style.visibility = "visible";
|
||||
}
|
||||
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() {
|
||||
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('ubut').style.visibility = 'hidden';
|
||||
document.getElementById('fw-select').style.visibility = 'hidden';
|
||||
document.getElementById('msg').style.visibility = "visible";
|
||||
document.getElementById('msg').innerHTML="";
|
||||
document.getElementById('FILESYSTEM').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);}
|
||||
typeupload = 0;
|
||||
xmlhttpupload = new XMLHttpRequest();
|
||||
xmlhttpupload.open('POST', '/updatefw', true);
|
||||
//progress upload event
|
||||
xmlhttpupload.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
|
||||
}
|
||||
}
|
||||
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('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(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;
|
||||
document.getElementById('counter').innerHTML=41-i5;
|
||||
if (i5>40)
|
||||
{
|
||||
clearInterval(interval);
|
||||
location.reload();
|
||||
}
|
||||
},1000);
|
||||
}
|
||||
else uploadError()
|
||||
} else uploadError()
|
||||
};
|
||||
xmlhttpupload.send(formData);
|
||||
}
|
||||
|
||||
|
||||
function RL(){
|
||||
document.getElementById('loginpage').style.display='block';
|
||||
}
|
||||
|
||||
function SLR (){
|
||||
document.getElementById('loginpage').style.display='none';
|
||||
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){
|
||||
if (xmlhttp.status != 200) {
|
||||
if (xmlhttp.status == 401) {
|
||||
RL();
|
||||
} else {
|
||||
FWError();
|
||||
console.log(xmlhttp.status);
|
||||
}
|
||||
} else {
|
||||
InitUI();
|
||||
}
|
||||
}
|
||||
};
|
||||
xmlhttp.open("GET", url, true);
|
||||
xmlhttp.send();
|
||||
}
|
||||
142
Grbl_Esp32-master/embedded/www/tool.html
Normal file
142
Grbl_Esp32-master/embedded/www/tool.html
Normal file
@ -0,0 +1,142 @@
|
||||
<html>
|
||||
<head>
|
||||
<!-- smoosh -->
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<!-- endsmoosh -->
|
||||
<title>ESP3D tool page</title>
|
||||
</head>
|
||||
<body>
|
||||
<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 onclick='RL();' id="loginicon">
|
||||
<a class="btnimg">
|
||||
<svg width='1.3em' height='1.2em' viewBox='0 0 1300 1200'>
|
||||
<g transform='translate(50,1200) scale(1, -1)'>
|
||||
<path fill='black' d='M900 800v200q0 83 -58.5 141.5t-141.5 58.5h-300q-82 0 -141 -59t-59 -141v-200h-100q-41 0 -70.5 -29.5t-29.5 -70.5v-600q0 -41 29.5 -70.5t70.5 -29.5h900q41 0 70.5 29.5t29.5 70.5v600q0 41 -29.5 70.5t-70.5 29.5h-100zM400 800v150q0 21 15 35.5t35 14.5h200 q20 0 35 -14.5t15 -35.5v-150h-300z' />
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</td>
|
||||
<td style="text-align:right;">
|
||||
<span id="FWVERSION" class="blacklink"></span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<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 />
|
||||
<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 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 id="FS_time">Time</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 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="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>
|
||||
</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="lut" style="width:auto"/>
|
||||
</span>
|
||||
<hr>
|
||||
<span>
|
||||
<span class="modal-text" translate>Password:</span>
|
||||
<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="SLR()" value="Submit"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- smoosh -->
|
||||
<script src="js/script.js"></script>
|
||||
<!-- endsmoosh -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user