simplify Print page (#13) and add WiFi-Box banner

js/BoxesPage.js

@@ -41,6 +41,11 @@
 			//displayPace: 0,				// do not obey the display pace
 			//maxDisplayCount: 0		// do not obey the max display count
 		});
+
+		if (localStorage.getItem("hideBanner")==="true") {
+			$("#getyours").hide();		
+		}
+
   });
 	$.mobile.document.on( "pagebeforehide", PAGE_ID, function( event, data ) {
 		//console.log("Boxes page pagehide");

js/PrintPage.js

@@ -14,11 +14,14 @@
 	var _networkAPI = new NetworkAPI();
 	var _printerAPI = new PrinterAPI();
 	var _configAPI = new ConfigAPI();
+	var _updateAPI = new UpdateAPI();
 	var PAGE_ID = "#print";
 	var _pageData = {};
 	var _self = this;
 	var _wifiboxSettings;
 	var _slicerSettings;
+	var timerId;
+
 
 	$.mobile.document.on("pagebeforeshow", PAGE_ID, function( event, data ) {
 		_pageData = d3d.util.getPageParams(PAGE_ID);
@@ -40,6 +43,7 @@
 		//disabled by default
 		$("#btnPrint").button().on("click", print);
 		$("#btnPrint").button('disable');
+		$("#pleaseUpgrade").hide();
 
 		loadGCodeInfoFromServer(d3d.pageParams.uuid);
 
@@ -75,18 +79,53 @@
 		$("#lstBoxes").on("change", function(data) {
 			var ip = $(this).val();
 			console.log("lstBoxes change",ip);
-
+			$("#infoWiFiBox").text("...");
+			$("#pleaseUpgrade").hide();
 			onSelectWiFiBox(ip);
 		});
 
+		timerId = setInterval(refreshWiFiBoxInfo,5000);
+
 	});
 
 	$.mobile.document.on( "pagebeforehide", PAGE_ID, function( event, data ) {
 		_connectAPI.stop();
+		clearInterval(timerId);
 	});
 
+	function retrieveUpdateStatus() {
+		
+		
+		_updateAPI.status(function(data) { // completed
+			var canUpdate = data.can_update;
+			
+			if (canUpdate) {
+				$("#pleaseUpgrade").show();
+				$("#newest_version").text(" ("+data.newest_version+")");
+
+				console.log("_pageData",_pageData);
+
+				var updateLink = $("#pleaseUpgrade a").attr("href");
+				updateLink = d3d.util.replaceURLParameters(updateLink,_pageData);
+				$("#pleaseUpgrade a").attr("href",updateLink);
+			}
+
+		});
+	}
+
 	function onSelectWiFiBox(ip) {
-		$("#infoWiFiBox").text("");
+		refreshWiFiBoxInfo(ip);		
+	}
+
+	function refreshWiFiBoxInfo(ip) {
+		if (!ip) {
+			ip = _pageData.localip;
+			if (!ip) {
+				return;
+			}
+		}
+
+		$("#infoWiFiBox").show();
 
 		if (!ip) {
 			$("#btnPrint").button('disable');
@@ -96,21 +135,27 @@
 			// redirect
 			$.mobile.changePage("#boxes");
 		} else {
+
+			// console.log("IP:",ip);
+
 			var boxURL = "http://"+ip;
 			_infoAPI.init(boxURL);
 			_networkAPI.init(boxURL);
 			_printerAPI.init(boxURL);
 			_configAPI.init(boxURL);
+			_updateAPI.init(boxURL);
+
+			retrieveUpdateStatus();
 
 			var localip = localStorage.setItem("localip",ip);
 
 			_networkAPI.status(function(successData) {
-				console.log("network status",successData);
+				// console.log("network status",successData);
 				// $("#lstPrint li.boxItem p").text(
 				var netInfo = successData.statusMessage + " (" + successData.ssid + " @ <a href='http://" + successData.localip + "'>"+successData.localip+"</a>)";
 				
 				_infoAPI.getStatus(function(successData) {
-					console.log(successData);
+					// console.log(successData);
 					var state = successData.state;
 					if (state==="idle") {
 						state="ready";
@@ -123,7 +168,7 @@
 					info += "<a href='"+url+"'><span class='"+state+"'>"+state+"</span></a>";
 					$("#infoWiFiBox").html(info);
 				}, function(failData) {
-					console.log(failData);
+					console.log("_infoAPI.getStatus failData:",failData);
 					$("#infoWiFiBox").html("<span class='error'>failed to retrieve <em>printer status</em> from WiFi-Box</span>");
 				});
 
@@ -235,7 +280,7 @@
 		$("#infoFile").text("...");
 		$("#infoPrinter").text("...");
 		$("#infoMaterial").html("...");
-		$("#iconPrinter").attr('src','img/icons/blank.png');
+		// $("#iconPrinter").attr('src','img/icons/blank.png');
 	}
 
 	function loadGCodeInfoFromServer(uuid) {
@@ -252,10 +297,10 @@
 				var printerId = header.printer.type;
 				var printerTitle = header.printer.title;
 
-				$("#infoFile").text(header.name + " (" + filesize + ")");
+				$("#infoFile").html("Filename: <b>" + header.name + " (" + filesize + ")</b>");
-				$("#infoPrinter").text(printerTitle);
+				$("#infoPrinter").html("Printer: <b>" + printerTitle + "</b>");
-				$("#infoMaterial").html(header.filamentThickness + "mm @ " + header.temperature + "&deg;C");
+				$("#infoMaterial").html("Material: <b>" + header.filamentThickness + "mm @ " + header.temperature + "&deg;C</b>");
-				$("#iconPrinter").attr('src','img/icons/printers/'+printerId+'.png');
+				// $("#iconPrinter").attr('src','img/icons/printers/'+printerId+'.png');
 				
 			}, function(failData) {
 				console.log("_serverAPI.fetchHeader fail",failData);

js/api/InfoAPI.js

@@ -20,7 +20,7 @@ function InfoAPI() {
 	var _self = this;
 
 	this.init = function(wifiboxURL) {
-		console.log("InfoAPI:init");
+		// console.log("InfoAPI:init");
 		
 		_wifiboxURL = wifiboxURL+_apiPath;
 		_wifiboxCGIBinURL = wifiboxURL+_apiCGIPath;

js/main.js

@@ -122,6 +122,11 @@ d3d.util = {
 
 };
 
+function hideBanner() {
+	$("#getyours").hide();
+	localStorage.setItem("hideBanner",true);
+}
+
 (function (w) {
 	// To get to url parameters we need the url
 	// only pagecontainer events contain url's
@@ -150,7 +155,7 @@ d3d.util = {
 		if (localip) {
 			url += "?localip=" + localip;
 		}
-		location.href = url; 
+		// location.href = url; 
 	}
 
 })(window);

less/styles.less

@@ -4,6 +4,29 @@ body.ui-mobile-viewport {
 	/*font-family: 'Abel', sans-serif;*/
 }
 
+div.getyours {
+	color: black;
+	border: 1px solid black;
+	max-width: 300px;
+	float: right;
+	margin-top: 10px;
+	padding: 0px 10px 10px 10px;
+}
+
+div.getyours span {
+	/*float: right;*/
+	text-decoration: underline;
+	position: absolute;
+	left: 0px;
+}
+
+div.getyours img {
+	/*text-align: right;*/
+	max-width: 150px;
+	display: inline;
+	float: right;
+}
+
 #logo {
 	text-align: center;
 	display: block;

www/index.html

@@ -35,8 +35,11 @@
 <body>
 
 <div data-role="page" id="boxes" data-title="Doodle3D Connect">
-	<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
 	
+	<div id="getyours" class="getyours"><img src="img/icons/wifibox.jpg"><br>No WiFi-Box yet?<br>Get your own <a href="https://shop.doodle3d.com">here</a>.<br><br><a href="#" onclick="hideBanner()">Close</a></div>
+
+	<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
+
 	<div role="main" class="ui-content">
 		<h3>Let's connect to your Doodle3D WiFi-Box</h3>
 		<p>This webpage helps you to find your Doodle3D WiFi-Box on your local network.</p>
@@ -88,10 +91,30 @@
 	<div id="divPrint" role="main" class="ui-content">
         <p class="intro">Let's 3D-print your model by sending it to your printer over WiFi. Please check the settings below and press Print.</p>
 
-		<label for="name">The following GCODE file is ready for printing:</label>
+<form>
-		<ul id="lstPrint" data-role="listview" data-inset="true">
+
-	      
+		<!-- Please select your Doodle3D WiFi-Box: -->
+		<ul data-role="listview" data-inset="true">
 			<li>
+				<img src="img/icons/wifibox.jpg" width="80" height="80">
+				<select id="lstBoxes"></select>
+				<p style="white-space: normal;" id="infoWiFiBox"></p>
+		        <p style="white-space: normal;" id="pleaseUpgrade">New firmware for your Doodle3D WiFi-Box is available. Please <a href="#update">update</a> to the latest version <span id="newest_version"></span>.</p>
+			</li>
+		</ul>
+
+
+
+		<!-- <label for="name">The following GCODE file is ready for printing:</label> -->
+		<ul id="lstPrint" data-role="listview" data-inset="true">
+	    
+	    <li>
+		    <p id="infoFile">...</p>
+			<p id="infoPrinter">...</p>
+			<p id="infoMaterial">...</p>
+		</li>
+
+<!-- 			<li>
 				<img src="img/icons/gcode.png" width="80" height="80">
 				<h2>File to print</h2>
 				<p id="infoFile">...</p>
@@ -107,19 +130,13 @@
 				<img src="img/icons/white.jpg" width="80" height="80">
 				<h2>Material</h2>
 				<p id="infoMaterial">...</p>
-			</li>
+			</li> -->
 		</ul>
+		
+        <input type="button" id="btnPrint" class="ui-shadow .ui-input-btn ui-btn ui-corner-all" value="Print">
 
-		Please select your Doodle3D WiFi-Box:
+        </form>
-		<ul data-role="listview" data-inset="true">
-			<li>
-				<img src="img/icons/wifibox.jpg" width="80" height="80">
-				<select id="lstBoxes"></select>
-				<p style="white-space: normal;" id="infoWiFiBox"></p>
-			</li>
-		</ul>
 
-        <input type="button" id="btnPrint" class="ui-shadow ui-btn ui-corner-all" value="Print">
     </div>
 </div>