improving control/status page

js/BoxPage.js

@@ -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);

js/ControlPage.js

@@ -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);
+

js/PrintPage.js

@@ -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);
 
-				var url = d3d.util.replaceURLParameters("#control",_pageData);
+
-				$.mobile.changePage(url);
+				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);
+
 		});
 
 	}

js/api/ConnectAPI.js

@@ -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(); }
 		});
 	};

js/main.js

@@ -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) + "%";
 	},
 

less/styles.less

@@ -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;
 }
 

www/index.html

@@ -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.min.js" type="text/javascript"></script> -->
-	<!-- <script src="js/doodle3d-server.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 id="liPrinterId" data-icon="false">
-				<li data-icon="false"><a href="#">Nozzle temperature<span id="infoNozzleTemperature" class="ui-li-count"></span></a></li>
+					WiFi-Box
-				<li id="liPrintingProgress" data-icon="false"><a href="#">Printing progress<span id="infoPrintingProgress" class="ui-li-count">...</span></a></li>
+					<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>