mirror of
https://github.com/Doodle3D/doodle3d-connect.git
synced 2024-12-25 01:53:48 +01:00
improving control/status page
This commit is contained in:
Rick Companje
parent
5e2556eacd
commit
994d0e8ebb
@ -15,6 +15,7 @@
|
||||
var _updateItem;
|
||||
var _settingsItem;
|
||||
var _joinNetworkItem;
|
||||
var _printItem;
|
||||
var _defaultItems;
|
||||
|
||||
var _networkStatus;
|
||||
@ -39,11 +40,13 @@
|
||||
_updateItem = _list.find("#updateItem");
|
||||
_settingsItem = _list.find("#settingsItem");
|
||||
_joinNetworkItem = _list.find("#joinNetworkItem");
|
||||
_printItem = _list.find("#printItem");
|
||||
|
||||
// make sure draw link is opened in same WebApp (added to homescreen)
|
||||
// and it doesn't start a browser
|
||||
$.stayInWebApp("#box #drawItem a",true);
|
||||
});
|
||||
|
||||
$.mobile.document.on( "pagebeforeshow", PAGE_ID, function( event, data ) {
|
||||
console.log("Box page pagebeforeshow");
|
||||
_boxData = d3d.util.getPageParams(PAGE_ID);
|
||||
@ -54,6 +57,8 @@
|
||||
var boxURL = "http://"+_boxData.localip;
|
||||
//console.log(" _boxData: ",_boxData);
|
||||
|
||||
_printItem.hide();
|
||||
|
||||
_title.text(_boxData.wifiboxid);
|
||||
|
||||
var drawLink = (_boxData.link)? _boxData.link : boxURL;
|
||||
@ -119,7 +124,6 @@
|
||||
_intro.toggleClass("ui-screen-hidden",(introText === ""));
|
||||
|
||||
//printLink
|
||||
var _printItem = _list.find("#printItem");
|
||||
var printLink = _printItem.find("a").attr("href");
|
||||
printLink = d3d.util.replaceURLParameters(printLink,_boxData);
|
||||
_printItem.find("a").attr("href",printLink);
|
||||
|
||||
270
js/ControlPage.js
Normal file
270
js/ControlPage.js
Normal file
@ -0,0 +1,270 @@
|
||||
/*
|
||||
* This file is part of the Doodle3D project (http://doodle3d.com).
|
||||
*
|
||||
* Copyright (c) 2013-2017, Doodle3D
|
||||
* This software is licensed under the terms of the GNU GPL v2 or later.
|
||||
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
|
||||
*/
|
||||
|
||||
(function (w) {
|
||||
var _page;
|
||||
var _form;
|
||||
var _statusField;
|
||||
var _infoField;
|
||||
var _noRetainCheckbox;
|
||||
var _includeBetasCheckbox;
|
||||
var _submitButton;
|
||||
var _settings;
|
||||
|
||||
var _updateAPI = new UpdateAPI();
|
||||
var _configAPI = new ConfigAPI();
|
||||
var _printerAPI = new PrinterAPI();
|
||||
var _serverAPI = new ServerAPI();
|
||||
var _infoAPI = new InfoAPI();
|
||||
var _pageData = {};
|
||||
var _updateStatus = {};
|
||||
var _title;
|
||||
var endCode;
|
||||
|
||||
var PAGE_ID = "#control";
|
||||
|
||||
var timerObject = {
|
||||
interval_id : null
|
||||
};
|
||||
|
||||
var _self = this;
|
||||
|
||||
$.mobile.document.on( "pageinit", PAGE_ID, function( event, data ) {
|
||||
console.log(PAGE_ID+":pageinit");
|
||||
|
||||
_page = $(this);
|
||||
_title = _page.find(".ui-title");
|
||||
|
||||
d3d.util.showLoader();
|
||||
|
||||
$("#grpStatusAndControl").hide();
|
||||
$("#btnStop").hide();
|
||||
$("#btnNewPrint").hide();
|
||||
|
||||
|
||||
|
||||
//$("#btnSend").on("click", function(data) {
|
||||
// // console.log("test",$("#gcode").val());
|
||||
|
||||
// _configAPI.loadAll(function(successData) {
|
||||
// _settings = successData;
|
||||
|
||||
// var gcode = _configAPI.subsituteVariables($("#gcode").val(),_settings);
|
||||
|
||||
// console.log("btnPrint subsituteVariables: ",gcode);
|
||||
|
||||
// $(this).hide();
|
||||
// _printerAPI.print({
|
||||
// gcode: gcode,
|
||||
// start: true,
|
||||
// first: true
|
||||
// },function(successData) {
|
||||
// console.log("btnSend success");
|
||||
// },function(failData) {
|
||||
// console.log("btnSend fail");
|
||||
// });
|
||||
// });
|
||||
|
||||
//});
|
||||
|
||||
_pageData = d3d.util.getPageParams(PAGE_ID);
|
||||
|
||||
// console.log(_pageData);
|
||||
|
||||
if(_pageData === undefined) {
|
||||
console.log("ERROR",PAGE_ID,"_pageData undefined");
|
||||
$.mobile.changePage("#boxes");
|
||||
return;
|
||||
}
|
||||
|
||||
var backUrl = d3d.util.replaceURLParameters("#print",_pageData);
|
||||
$("#btnControlBack").attr("href",backUrl);
|
||||
|
||||
/*
|
||||
$("#btnCooldown").button().on("click", function(data) {
|
||||
_printerAPI.print({
|
||||
gcode: "M104 S20",
|
||||
start: true,
|
||||
first: true
|
||||
});
|
||||
});
|
||||
|
||||
$("#btnHeatup").button().on("click", function(data) {
|
||||
_printerAPI.print({
|
||||
gcode: "M104 S180",
|
||||
start: true,
|
||||
first: true
|
||||
});
|
||||
});
|
||||
|
||||
$("#btnHome").button().on("click", function(data) {
|
||||
_printerAPI.print({
|
||||
gcode: "G28",
|
||||
start: true,
|
||||
first: true
|
||||
});
|
||||
});
|
||||
*/
|
||||
$("#btnStop").on("click", function(data) {
|
||||
if (!window.confirm("Are you sure you want to stop the current print?")) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(this).hide();
|
||||
|
||||
if (!_settings) {
|
||||
console.log("Error: _settings undefined");
|
||||
return;
|
||||
}
|
||||
|
||||
var endcode = _configAPI.subsituteVariables(_settings["printer.endcode"],_settings);
|
||||
|
||||
_printerAPI.stop({gcode:endcode}, function(successData) {
|
||||
console.log("btnStop success",successData);
|
||||
refreshStatus();
|
||||
},function(failData) {
|
||||
console.log("btnStop fail",failData);
|
||||
window.alert("Problem: " + failData.msg);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
function refreshStatus() {
|
||||
d3d.util.showLoader();
|
||||
|
||||
_infoAPI.getStatus(function(successData) {
|
||||
$("#grpStatusAndControl").show();
|
||||
|
||||
var state = successData.state;
|
||||
if (state==="idle") {
|
||||
state="ready";
|
||||
}
|
||||
|
||||
if (state==="disconnected" || state==="connecting") {
|
||||
$("#infoState").show();
|
||||
$("#infoState").text("Printer " + state + "...");
|
||||
$("#grpStatusAndControl").hide();
|
||||
} else {
|
||||
$("#infoState").hide();
|
||||
$("#grpStatusAndControl").show();
|
||||
$("#infoNozzleTemperature").html(successData.hotend + " / " + successData.hotend_target + " °C");
|
||||
$("#infoPrinterStatus").text(state);
|
||||
|
||||
if (_settings && _settings["printer.heatedbed"]) {
|
||||
$("#liBedTemperature").show();
|
||||
$("#infoBedTemperature").html(successData.bed + " / " + successData.bed_target + " °C");
|
||||
} else {
|
||||
$("#liBedTemperature").hide();
|
||||
}
|
||||
}
|
||||
|
||||
if (successData.state==="printing") {
|
||||
$("#liPrintingProgress").show();
|
||||
// console.log('printing',d3d.util.formatPercentage(successData.current_line,successData.total_lines));
|
||||
$("#infoPrintingProgress").text(d3d.util.formatPercentage(successData.current_line,successData.total_lines));
|
||||
|
||||
var uuid = successData.current_print;
|
||||
|
||||
//request filename only once
|
||||
if ($("#infoPrintingFile").text()==="") {
|
||||
_serverAPI.fetchHeader(uuid,function(successData) {
|
||||
$("#liPrintingFile").show();
|
||||
$("#infoPrintingFile").text(successData.name);
|
||||
},function(failData) {
|
||||
$("#liPrintingFile").hide();
|
||||
});
|
||||
}
|
||||
|
||||
$("#btnStop").show();
|
||||
// console.log('printing');
|
||||
} else {
|
||||
// console.log('not printing');
|
||||
$("#btnStop").hide();
|
||||
$("#liPrintingProgress").hide();
|
||||
$("#liPrintingFile").hide();
|
||||
}
|
||||
|
||||
if (state==="ready") {
|
||||
|
||||
if (d3d && d3d.pageParams && d3d.pageParams.uuid) {
|
||||
console.log("show button btnNewPrint");
|
||||
var url = d3d.util.replaceURLParameters("#print",_pageData);
|
||||
// $("#btnNewPrint").attr("href",url);
|
||||
// $("#btnNewPrint").show();
|
||||
}
|
||||
|
||||
} else {
|
||||
// $("#grpCustomGCODE").hide();
|
||||
}
|
||||
|
||||
// console.log("getStatus success",successData);
|
||||
d3d.util.hideLoader();
|
||||
|
||||
},function(failData) {
|
||||
console.log("getStatus fail",failData);
|
||||
$("#grpStatusAndControl").hide();
|
||||
d3d.util.hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
$.mobile.document.on("pagebeforeshow", PAGE_ID, function( event, data ) {
|
||||
_pageData = d3d.util.getPageParams(PAGE_ID);
|
||||
|
||||
if(_pageData === undefined) {
|
||||
console.log("ERROR",PAGE_ID,"_pageData undefined");
|
||||
$.mobile.changePage("#boxes");
|
||||
return;
|
||||
}
|
||||
var boxURL = "http://"+_pageData.localip;
|
||||
|
||||
// _title.text("Control 3D-printer on " + _pageData.wifiboxid);
|
||||
|
||||
_configAPI.init(boxURL);
|
||||
_printerAPI.init(boxURL);
|
||||
_infoAPI.init(boxURL);
|
||||
_serverAPI.init("https://gcodeserver.doodle3d.com");
|
||||
|
||||
_configAPI.loadAll(function(successData) {
|
||||
_settings = successData;
|
||||
|
||||
console.log("_configAPI.loadAll success",_settings);
|
||||
|
||||
// $("#infoWiFiBox").text(_settings.)
|
||||
|
||||
},function(failData) {
|
||||
console.log("_configAPI.loadAll failed");
|
||||
});
|
||||
|
||||
|
||||
_infoAPI.getInfo(function(successData) {
|
||||
$("span#infoWiFiBox").text(successData.wifiboxid);
|
||||
},function(failData) {
|
||||
|
||||
});
|
||||
|
||||
// refreshSettings();
|
||||
|
||||
refreshStatus();
|
||||
|
||||
timerObject.interval_id = setInterval(function() {refreshStatus(); }, 3000);
|
||||
});
|
||||
|
||||
$.mobile.document.on('pagehide', PAGE_ID, function(){
|
||||
clearInterval(timerObject.interval_id);
|
||||
});
|
||||
|
||||
$.mobile.document.on( "pagebeforehide", PAGE_ID, function( event, data ) {
|
||||
console.log("pagebeforehide");
|
||||
});
|
||||
|
||||
|
||||
})(window);
|
||||
|
||||
@ -28,6 +28,13 @@
|
||||
$.mobile.changePage("#boxes");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!d3d || !d3d.pageParams || !d3d.pageParams.uuid) {
|
||||
console.log("ERROR",PAGE_ID,"d3d.pageParams no uuid");
|
||||
$.mobile.changePage("#boxes");
|
||||
return;
|
||||
}
|
||||
|
||||
var boxURL = "http://"+_pageData.localip;
|
||||
|
||||
//disabled by default
|
||||
@ -67,6 +74,7 @@
|
||||
$("#lstBoxes").on("change", function(data) {
|
||||
var ip = $(this).val();
|
||||
console.log("lstBoxes change",ip);
|
||||
|
||||
onSelectWiFiBox(ip);
|
||||
});
|
||||
|
||||
@ -93,6 +101,8 @@
|
||||
_printerAPI.init(boxURL);
|
||||
_configAPI.init(boxURL);
|
||||
|
||||
var localip = localStorage.setItem("localip",ip);
|
||||
|
||||
_networkAPI.status(function(successData) {
|
||||
console.log("network status",successData);
|
||||
// $("#lstPrint li.boxItem p").text(
|
||||
@ -106,8 +116,10 @@
|
||||
$("#btnPrint").button('enable');
|
||||
}
|
||||
|
||||
_pageData.localip = ip; //update pageData to reflect the selected WiFi-Box without reloading the page
|
||||
var url = d3d.util.replaceURLParameters("#control",_pageData);
|
||||
var info = netInfo + " - Printer status: ";
|
||||
info += "<span class='"+state+"'>"+state+"</span>";
|
||||
info += "<a href='"+url+"'><span class='"+state+"'>"+state+"</span></a>";
|
||||
$("#infoWiFiBox").html(info);
|
||||
}, function(failData) {
|
||||
console.log(failData);
|
||||
@ -171,7 +183,7 @@
|
||||
failedHandler({msg:"saving failed printer.type failed",details:failData});
|
||||
});
|
||||
} else {
|
||||
failedHandler({msg:"Please use the settings from Slicer."});
|
||||
failedHandler({msg:""});
|
||||
}
|
||||
});
|
||||
|
||||
@ -192,12 +204,18 @@
|
||||
"end_code": endcode
|
||||
};
|
||||
|
||||
$("#btnPrint").button('disable');
|
||||
d3d.util.showLoader();
|
||||
|
||||
//console.log("fetchPrint",d3d.pageParams.uuid,data);
|
||||
_printerAPI.fetch(data,function(successData) {
|
||||
console.log("fetchPrint success",successData);
|
||||
|
||||
|
||||
setTimeout(function() {
|
||||
var url = d3d.util.replaceURLParameters("#control",_pageData);
|
||||
$.mobile.changePage(url);
|
||||
},3000);
|
||||
|
||||
},function(failData) {
|
||||
console.log("fetchPrint fail",failData);
|
||||
@ -240,13 +258,19 @@
|
||||
$("#iconPrinter").attr('src','img/icons/printers/'+printerId+'.png');
|
||||
|
||||
}, function(failData) {
|
||||
console.log("_serverAPI fetchHeader fail",failData);
|
||||
console.log("_serverAPI.fetchHeader fail",failData);
|
||||
clearInfo();
|
||||
});
|
||||
|
||||
|
||||
},function(failData) {
|
||||
clearInfo();
|
||||
console.log("_serverAPI.getInfo fail",failData);
|
||||
setTimeout(function() {
|
||||
console.log("_serverAPI.getInfo: now try again",uuid);
|
||||
loadGCodeInfoFromServer(uuid);
|
||||
},3000);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
@ -56,9 +56,9 @@ function ConnectAPI() {
|
||||
completeHandler(response.data);
|
||||
}
|
||||
}
|
||||
}).fail(function() {
|
||||
}).fail(function(failData) {
|
||||
//console.log("ConnectAPI:list failed");
|
||||
if(failedHandler) failedHandler();
|
||||
if(failedHandler) failedHandler(failData);
|
||||
if(_self.listFailed) {_self.listFailed(); }
|
||||
});
|
||||
};
|
||||
|
||||
@ -116,7 +116,7 @@ d3d.util = {
|
||||
},
|
||||
|
||||
formatPercentage:function(cur,total) {
|
||||
console.log("formatPercentage",cur,total);
|
||||
// console.log("formatPercentage",cur,total);
|
||||
return Math.round(cur/total*100) + "%";
|
||||
},
|
||||
|
||||
|
||||
@ -214,13 +214,16 @@ html head + body .ui-body-a.ui-focus {
|
||||
|
||||
#infoWiFiBox .idle, #infoWiFiBox .ready {
|
||||
color: #5fba7d;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#infoWiFiBox .disconnected, #infoWiFiBox .connecting, #infoWiFiBox .stopping, #infoWiFiBox .error {
|
||||
color: red;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#infoWiFiBox .printing {
|
||||
color: #93CAF4;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
@ -21,8 +21,8 @@
|
||||
|
||||
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
|
||||
<script src="js/doodle3d-server.min.js" type="text/javascript"></script>
|
||||
<!-- <script src="js/doodle3d-server.js" type="text/javascript"></script> -->
|
||||
<!-- <script src="js/doodle3d-server.min.js" type="text/javascript"></script> -->
|
||||
<script src="js/doodle3d-server.js" type="text/javascript"></script>
|
||||
|
||||
<!-- stylesheets -->
|
||||
<!-- <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> -->
|
||||
@ -80,7 +80,7 @@
|
||||
<div data-role="page" id="print">
|
||||
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
|
||||
<div data-role="header">
|
||||
<a href="../toolbar/" data-rel="back"
|
||||
<a href="#boxes" data-rel="back"
|
||||
class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
||||
<h1>Print</h1>
|
||||
|
||||
@ -127,9 +127,9 @@
|
||||
<div data-role="page" id="control">
|
||||
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
|
||||
<div data-role="header">
|
||||
<a id="btnControlBack" href="#"
|
||||
<a id="btnControlBack" href="#boxes"
|
||||
class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
||||
<h1>Control</h1>
|
||||
<h1>Status</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div id="divControl" role="main" class="ui-content">
|
||||
@ -138,13 +138,36 @@
|
||||
|
||||
<div id="grpStatusAndControl">
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li id="liPrinterStatus" data-icon="false"><a href="#">Printer status<span id="infoPrinterStatus" class="ui-li-count"></span></a></li>
|
||||
<li data-icon="false"><a href="#">Nozzle temperature<span id="infoNozzleTemperature" class="ui-li-count"></span></a></li>
|
||||
<li id="liPrintingProgress" data-icon="false"><a href="#">Printing progress<span id="infoPrintingProgress" class="ui-li-count">...</span></a></li>
|
||||
<li id="liPrinterId" data-icon="false">
|
||||
WiFi-Box
|
||||
<span id="infoWiFiBox" class="ui-li-count"></span>
|
||||
</li>
|
||||
<li id="liPrinterStatus" data-icon="false">
|
||||
Status
|
||||
<span id="infoPrinterStatus" class="ui-li-count"></span>
|
||||
</li>
|
||||
<li id="liPrintingFile" data-icon="false">
|
||||
File
|
||||
<span id="infoPrintingFile" class="ui-li-count"></span>
|
||||
</li>
|
||||
<li id="liPrintingProgress" data-icon="false">
|
||||
Progress
|
||||
<span id="infoPrintingProgress" class="ui-li-count">...</span>
|
||||
</li>
|
||||
<li data-icon="false">
|
||||
Nozzle Temperature
|
||||
<span id="infoNozzleTemperature" class="ui-li-count"></span>
|
||||
</li>
|
||||
<li id="liBedTemperature" data-icon="false">
|
||||
Bed temperature
|
||||
<span id="infoBedTemperature" class="ui-li-count"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button id="btnStop" data-role="button">Stop print</button>
|
||||
<button id="btnNewPrint" data-role="button">Start a new print</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user