Merge branch 'feature/printerdriver' of https://github.com/Doodle3D/doodle3d-client into feature/printerdriver

# By peteruithoven
# Via peteruithoven
* 'feature/printerdriver' of https://github.com/Doodle3D/doodle3d-client:
  UpdatePanel

www/index.html

@@ -131,6 +131,7 @@
 </div>
 <script src="js/libs/jquery-1.8.3.min.js"></script>
 <script src="js/SettingsWindow.js"></script>
+<script src="js/UpdatePanel.js"></script>
 <script src="js/d3dServerInterfacing.js"></script>
 <script src="js/verticalShapes.js"></script>
 <script src="js/buttonbehaviors.js"></script>
@@ -143,7 +144,7 @@
 <script src="js/Thermometer.js"></script>
 <script src="js/utils.js"></script>
 <script src="js/sidebar.js"></script>
-<script src="js/message.js"></script>
+<script src="js/Message.js"></script>
 <script src="js/main.js"></script>
 
 </body>

www/js/SettingsWindow.js

@@ -49,7 +49,7 @@ function SettingsWindow() {
   this.clientModeState = SettingsWindow.NOT_CONNECTED;
   this.currentAP;
   this.apModeState = SettingsWindow.NO_AP;
-
+  
   // after switching wifi network or creating a access point we delay the status retrieval
   // because the webserver needs time to switch
   this.retrieveNetworkStatusDelay;   // setTimout delay
@@ -68,7 +68,6 @@ function SettingsWindow() {
   SettingsWindow.NO_AP           		= "no ap";
   SettingsWindow.AP              		= "ap";
   SettingsWindow.CREATING_AP     		= "creating ap";
-
   
   SettingsWindow.API_CONNECTING_FAILED  = -1
   SettingsWindow.API_NOT_CONNECTED 			= 0
@@ -77,6 +76,15 @@ function SettingsWindow() {
   SettingsWindow.API_CREATING 					= 3 
   SettingsWindow.API_CREATED 						= 4 
   
+  // network mode
+  SettingsWindow.NETWORK_MODE_NEITHER  			= "neither";
+  SettingsWindow.NETWORK_MODE_CLIENT  			= "clientMode";
+  SettingsWindow.NETWORK_MODE_ACCESS_POINT  = "accessPointMode";
+  
+  this.networkMode = SettingsWindow.NETWORK_MODE_NEITHER;
+  
+  this.updatePanel = new UpdatePanel();
+  
 	var self = this;
 
 	this.init = function(wifiboxURL,wifiboxCGIBinURL) {
@@ -108,6 +116,10 @@ function SettingsWindow() {
 		  btnConnect.on('touchstart mousedown',self.connectToNetwork);
 			btnCreate.on('touchstart mousedown',self.createAP);
 		  networkSelector.change(self.networkSelectorChanged);
+		  
+		  // update panel
+		  var $updatePanelElement = self.form.find("#updatePanel");
+		  self.updatePanel.init(wifiboxURL,$updatePanelElement);
 	  });
 	}
 	this.submitwindow = function(e) {
@@ -360,6 +372,8 @@ function SettingsWindow() {
               	//console.log("  not connected & not a access point");
           			self.apFieldSet.show();
           			self.clientFieldSet.show();
+          			
+          			self.networkMode = SettingsWindow.NETWORK_MODE_NEITHER;
               	break;
 							case SettingsWindow.API_CONNECTING_FAILED:
 							case SettingsWindow.API_CONNECTING:
@@ -380,7 +394,7 @@ function SettingsWindow() {
 								} else {
 									self.currentLocalIP = ""
 								}
-							  
+								self.networkMode = SettingsWindow.NETWORK_MODE_CLIENT;
 								break;
 							case SettingsWindow.API_CREATING:
 							case SettingsWindow.API_CREATED:
@@ -398,8 +412,10 @@ function SettingsWindow() {
 								if(data.ssid && data.status == SettingsWindow.API_CREATED) { 
 										self.currentAP = data.ssid;
 								}
+								self.networkMode = SettingsWindow.NETWORK_MODE_ACCESS_POINT;
 								break;
 						}
+            self.updatePanel.setNetworkMode(self.networkMode);
             
             // update status message
             switch(data.status) {
@@ -456,6 +472,8 @@ function SettingsWindow() {
 
 	this.selectNetwork = function(ssid) {
 		console.log("select network: ",ssid);
+		if(ssid == "") return;
+		console.log("  checked");
 		this.selectedNetwork = ssid;
     if(this.networks == undefined || ssid == SettingsWindow.NOT_CONNECTED) {
     	this.hideWiFiPassword();

www/js/UpdatePanel.js

@@ -0,0 +1,230 @@
+function UpdatePanel() {
+	this.wifiboxURL;
+	this.element;
+	
+	this.statusCheckInterval 	= 1000; 
+	this.statusCheckDelayer; 						// setTimout instance
+	this.installedDelay 			= 60*1000; 			// Since we can't retrieve status during installation we show the installed text after a fixed delay	
+	this.installedDelayer; 							// setTimout instance
+	this.retryDelay 					= 1000; 
+	this.retryDelayer; 									// setTimout instance
+	//this.timeoutTime 					= 3000;
+	
+	this.canUpdate 						= false;
+	this.currentVersion				= "";
+	this.newestVersion;	
+	this.progress;
+	this.imageSize;
+	
+	// states from api, see Doodle3D firmware src/script/d3d-updater.lua
+	UpdatePanel.NONE 								= 1; // default state 
+  UpdatePanel.DOWNLOADING  				= 2;
+  UpdatePanel.DOWNLOAD_FAILED 		= 3;
+  UpdatePanel.IMAGE_READY 				= 4; // download successfull and checked 
+  UpdatePanel.INSTALLING 					= 5;
+  UpdatePanel.INSTALLED 					= 6;
+  UpdatePanel.INSTALL_FAILED 			= 7;
+  
+  this.state; // update state from api
+  this.stateText = ""; // update state text from api
+  
+  this.networkMode; // network modes from SettingsWindow
+  
+	var self = this;
+
+	this.init = function(wifiboxURL,updatePanelElement) {
+		
+		this.wifiboxURL = wifiboxURL;
+		
+		this.element = updatePanelElement;
+		this.btnUpdate = this.element.find("#update");
+		this.statusDisplay = this.element.find("#updateState");
+		this.infoDisplay = this.element.find("#updateInfo");
+		
+		this.btnUpdate.click(this.update);
+		
+		this.checkStatus(false);
+	}
+	
+	this.update = function() {
+		console.log("UpdatePanel:update");
+		self.downloadUpdate();
+	}
+	this.downloadUpdate = function() {
+		console.log("UpdatePanel:downloadUpdate");
+		$.ajax({
+			url: self.wifiboxURL + "/update/download",
+			type: "POST",
+			dataType: 'json',
+			success: function(response){
+				console.log("UpdatePanel:downloadUpdate response: ",response);
+			}
+		}).fail(function() {
+			console.log("UpdatePanel:downloadUpdate: failed");
+		});
+		self.setState(UpdatePanel.DOWNLOADING);
+		self.startCheckingStatus();
+	}
+	this.installUpdate = function() {
+		console.log("UpdatePanel:installUpdate");
+		self.stopCheckingStatus();
+		$.ajax({
+			url: self.wifiboxURL + "/update/install",
+			type: "POST",
+			dataType: 'json',
+			success: function(response){
+				console.log("UpdatePanel:installUpdate response: ",response);
+			}
+		}).fail(function() {
+			console.log("UpdatePanel:installUpdate: no respons (there shouldn't be)");
+		});
+		self.setState(UpdatePanel.INSTALLING);
+		
+		clearTimeout(self.installedDelayer);
+		self.installedDelayer = setTimeout(function() { self.setState(UpdatePanel.INSTALLED) },self.installedDelay);
+	}
+	
+	this.startCheckingStatus = function() {
+		clearTimeout(self.statusCheckDelayer);
+		clearTimeout(self.retryDelayer);
+		self.statusCheckDelayer = setTimeout(function() { self.checkStatus(true) },self.statusCheckInterval);
+	}
+	this.stopCheckingStatus = function() {
+		clearTimeout(self.statusCheckDelayer);
+		clearTimeout(self.retryDelayer);
+	}
+	this.checkStatus = function(keepChecking) {
+    if (!communicateWithWifibox) return;
+		$.ajax({
+			url: self.wifiboxURL + "/update/status",
+			type: "GET",
+			dataType: 'json',
+			//timeout: self.timeoutTime,
+			success: function(response){
+				console.log("UpdatePanel:checkStatus response: ",response);
+				
+				// Keep checking ?
+				if(keepChecking) {
+					switch(self.state){
+						case UpdatePanel.DOWNLOADING: 
+						case UpdatePanel.INSTALLING:
+							clearTimeout(self.statusCheckDelayer);
+							self.statusCheckDelayer = setTimeout(function() { self.checkStatus(keepChecking) },self.statusCheckInterval);
+							break;
+					}
+				}
+				
+				if(response.status != "error") {
+					var data = response.data;
+					self.handleStatusData(data);
+				}
+			}
+		}).fail(function() {
+			//console.log("UpdatePanel:checkStatus: failed");
+			if(keepChecking) {
+				clearTimeout(self.retryDelayer);
+				self.retryDelayer = setTimeout(function() { self.checkStatus(keepChecking) },self.retryDelay); // retry after delay
+			}
+		});
+	}
+	
+	this.handleStatusData = function(data) {
+		//console.log("UpdatePanel:handleStatusData");
+		self.canUpdate 				= data.can_update;
+		
+		if(self.currentVersion != data.current_version || self.newestVersion != data.newest_version) {
+			self.currentVersion 	= data.current_version;
+			self.newestVersion 		= data.newest_version;
+			self.updateInfoDisplay();
+		}
+		
+		self.stateText 				= data.state_text;
+		self.progress 				= data.progress; // not always available
+		self.imageSize 				= data.image_size; // not always available
+		
+		self.setState(data.state_code);
+		
+		switch(this.state){
+			case UpdatePanel.IMAGE_READY:
+				self.installUpdate();
+				break;
+		}
+	}
+	this.setState = function(newState) {
+		if(this.state == newState) return;
+		console.log("UpdatePanel:setState: ",this.state," > ",newState,"(",this.stateText,") (networkMode: ",self.networkMode,") (newestVersion: ",self.newestVersion,")");
+		this.state = newState;
+		
+		// download button
+		// if there isn't newestVersion data something went wrong, 
+		//   probably accessing the internet  
+		if(self.newestVersion != undefined) {
+			switch(this.state){
+				case UpdatePanel.NONE: 
+				case UpdatePanel.DOWNLOAD_FAILED:
+				case UpdatePanel.INSTALL_FAILED:
+					if(self.canUpdate) {
+						self.btnUpdate.removeAttr("disabled");
+					} else {
+						self.btnUpdate.attr("disabled", true);
+					}
+					break;
+				default:
+					self.btnUpdate.attr("disabled", true);
+					break;
+			}
+		} else {
+			self.btnUpdate.attr("disabled", true);
+		}
+		this.updateStatusDisplay();
+	}
+	this.updateStatusDisplay = function() {
+		var text = "";
+		if(self.newestVersion != undefined) {
+			switch(this.state){
+				case UpdatePanel.NONE:
+					if(self.canUpdate) {
+						text = "Update(s) available.";
+					} else {
+						text = "You're up to date.";
+					}
+					break;
+				case UpdatePanel.DOWNLOADING: 
+					text = "Downloading update...";
+					break;
+				case UpdatePanel.DOWNLOAD_FAILED: 
+					text = "Downloading update failed.";
+					break;
+				case UpdatePanel.IMAGE_READY: 
+					text = "Update downloaded.";
+					break;
+				case UpdatePanel.INSTALLING: 
+					text = "Installing update... (will take a minute)";
+					break;
+				case UpdatePanel.INSTALLED: 
+					text = "Update complete, please <a href='javascript:location.reload(true);'>refresh Page</a>.";
+					break;
+				case UpdatePanel.INSTALL_FAILED: 
+					text = "Installing update failed.";
+					break;
+			}
+		} else {
+			if(self.networkMode == SettingsWindow.NETWORK_MODE_ACCESS_POINT) {
+				text = "Can't access internet in access point mode.";
+			} else {
+				text = "Can't access internet.";
+			}
+		}
+		this.statusDisplay.html(text);
+	}
+	this.updateInfoDisplay = function() {
+		var text = "Current version: "+self.currentVersion+". ";
+		if(self.canUpdate) {
+			text += "Latest version: "+self.newestVersion+".";
+		}
+		self.infoDisplay.text(text);
+	}
+	this.setNetworkMode = function(networkMode) {
+		self.networkMode = networkMode;
+	}
+}

www/settings.html

@@ -55,7 +55,7 @@
       </select>
     </fieldset>-->
 
-		<fieldset id="printersettings">
+	<fieldset id="printersettings">
       <legend>Print settings</legend>
       <label for="layerHeight">Layer height:</label><input id="layerHeight" type="number" step="0.01" class="small" name="printer.layerHeight">mm<br>
       <label for="wallThickness">Wall thickness:</label><input id="wallThickness" type="number" step="0.1" class="small" name="printer.wallThickness">mm<br>
@@ -78,68 +78,71 @@
       <label for="heatupTemperature">Auto preaheat temperature:</label><input id="heatupTemperature" type="number" class="small" name="printer.heatup.temperature"><br>
     </fieldset>
 
-		<fieldset id="doodlesettings">
+	<fieldset id="doodlesettings">
-			<legend>Doodle3D settings</legend>
+		<legend>Doodle3D settings</legend>
-			<label for="simplifyMinDistance">Minimal line distance:</label><input id="simplifyMinDistance" type="number" class="small" name="doodle3d.simplify.minDistance">px<br>
+		<label for="simplifyMinDistance">Minimal line distance:</label><input id="simplifyMinDistance" type="number" class="small" name="doodle3d.simplify.minDistance">px<br>
-			<label for="maxObjectHeight">Max object height:</label><input id="maxObjectHeight" type="number" class="small" name="printer.maxObjectHeight">mm<br>
+		<label for="maxObjectHeight">Max object height:</label><input id="maxObjectHeight" type="number" class="small" name="printer.maxObjectHeight">mm<br>
-			<label for="screenToMillimeterScale">Pixels to mm scale:</label><input id="screenToMillimeterScale" type="number" step="0.1" class="small" name="printer.screenToMillimeterScale"><br>
+		<label for="screenToMillimeterScale">Pixels to mm scale:</label><input id="screenToMillimeterScale" type="number" step="0.1" class="small" name="printer.screenToMillimeterScale"><br>
-		</fieldset>
+	</fieldset>
 
-		<fieldset>
+	<fieldset>
-      <legend>Network settings</legend>
+		<legend>Network settings</legend>
-      <label>Connection type:</label>
+		<label>Connection type:</label>
-      <div>
+		<div>
-      	<label for="ap"><input type="radio" name="connectiontype" value="ap" id="ap">Access point mode</label>
+      		<label for="ap"><input type="radio" name="connectiontype" value="ap" id="ap">Access point mode</label>
-				<label for="client"><input type="radio" name="connectiontype" value="client" id="client">Client mode</label>
+			<label for="client"><input type="radio" name="connectiontype" value="client" id="client">Client mode</label>
-			</div>
+		</div>
 
 	    <fieldset id="apSettings">
-	      <legend>Access point settings</legend>
+	      	<legend>Access point settings</legend>
-	      <label for="ssid">Wi-Fi box ssid*:</label><input type="text" class="large" name="network.ap.ssid" id="ssid"> <br>
+	      	<label for="ssid">Wi-Fi box ssid*:</label><input type="text" class="large" name="network.ap.ssid" id="ssid"> <br>
-	      <small>* The text <em>%%MAC_ADDR_TAIL%%</em> will be replaced by the last 6 digits of your Doodle3D Wi-Fi box's MAC address.</small>
+	      	<small>* The text <em>%%MAC_ADDR_TAIL%%</em> will be replaced by the last 6 digits of your Doodle3D Wi-Fi box's MAC address.</small>
-	      <br>
+	      	<br>
-	      <label for="apKey">Password:</label><input type="text" class="large" name="network.ap.key" id="apKey"> <br>
+	      	<label for="apKey">Password:</label><input type="text" class="large" name="network.ap.key" id="apKey"> <br>
-	      <label for="ipaddress">Wi-Fi box IP address:</label><input type="text" name="network.ap.address" id="ipaddress"><br>
+	      	<label for="ipaddress">Wi-Fi box IP address:</label><input type="text" name="network.ap.address" id="ipaddress"><br>
-	      <label for="netmask">Wi-Fi box netmask:</label><input type="text" name="network.ap.netmask" id="netmask"><br>
+	      	<label for="netmask">Wi-Fi box netmask:</label><input type="text" name="network.ap.netmask" id="netmask"><br>
-	      <input type="button" name="create" value="Create" class="button" id="createAP"/>
+	      	<input type="button" name="create" value="Create" class="button" id="createAP"/>
-        <span id="apModeState"></span><br/>
+			<span id="apModeState"></span><br/>
-        <br/>
+       	 	<br/>
-        <small>When you can't connect to your device, you can always use an ethernet cable and go to <a href="http://connect.doodle3d.com">connect.doodle3d.com</a>.</small>
+       	 	<small>When you can't connect to your device, you can always use an ethernet cable and go to <a href="http://connect.doodle3d.com">connect.doodle3d.com</a>.</small>
 	    </fieldset>
 
 	    <fieldset id="clientSettings">
-	      <legend>Client mode settings</legend>
+	      	<legend>Client mode settings</legend>
 	      
-	      <label for="wifiboxid">Wi-Fi box id*:</label><input type="text" name="network.cl.wifiboxid" id="wifiboxid"><br>
+	      	<label for="wifiboxid">Wi-Fi box id*:</label><input type="text" name="network.cl.wifiboxid" id="wifiboxid"><br>
-        <small>* Is used on <a href="http://connect.doodle3d.com">connect.doodle3d.com</a>. <br/>
+        	<small>* Is used on <a href="http://connect.doodle3d.com">connect.doodle3d.com</a>. <br/>
-        The text <em>%%MAC_ADDR_TAIL%%</em> will be replaced by the last 6 digits of your Doodle3D Wi-Fi box's MAC address.</small>
+        	The text <em>%%MAC_ADDR_TAIL%%</em> will be replaced by the last 6 digits of your Doodle3D Wi-Fi box's MAC address.</small>
-	      <br>
+	      	<br>
-	      <label for="network">Network:</label>
+	      	<label for="network">Network:</label>
-	      <select id="network" name="network.client.network">
+	      	<select id="network" name="network.client.network"></select>
-	      </select>
+	      	<input type="button" name="refresh" value="Refresh" class="button" id="refreshNetworks"/><br>
-	      <input type="button" name="refresh" value="Refresh" class="button" id="refreshNetworks"/><br>
+	      	<label for="password" id="passwordLabel">Password:</label><input type="password" name="network.client.password" id="password"><br>
-	      <label for="password" id="passwordLabel">Password:</label><input type="password" name="network.client.password" id="password"><br>
+	      	<input type="button" name="connect" value="Connect" class="button" id="connectToNetwork"/>
-	      <input type="button" name="connect" value="Connect" class="button" id="connectToNetwork"/>
+        	<span id="clientModeState"></span><br/>
-        <span id="clientModeState"></span><br/>
+        	<br/>
-        <br/>
+        	<small>When you can't connect to your device, you can always use an ethernet cable and go to <a href="http://connect.doodle3d.com">connect.doodle3d.com</a>.</small>
-        <small>When you can't connect to your device, you can always use an ethernet cable and go to <a href="http://connect.doodle3d.com">connect.doodle3d.com</a>.</small>
-	    </fieldset>
 		</fieldset>
+	</fieldset>
+
+	<fieldset id="updatePanel">
+ 		<legend>Update</legend>
+ 		<input type="button" name="update" value="Update" class="button" id="update"/>
+        <span id="updateState"></span><br/>
+        <small id="updateInfo"></small>
+ 	</fieldset>
 
     <fieldset>
-      <legend>GCODE settings</legend>
+ 		<legend>GCODE settings</legend>
-      <div class="startgcode_left">
+      	<div class="startgcode_left">
-        <label for="startgcode">Start:</label><br/>
+       		<label for="startgcode">Start:</label><br/>
-        <textarea id="startgcode" class="gcode" name="printer.startgcode">
+       		<textarea id="startgcode" class="gcode" name="printer.startgcode"></textarea>
-        </textarea>
+     	</div>
-
+      	<div>
-      </div>
+        	<label for="endgcode">End:</label><br/>
-      <div>
+        	<textarea id="endgcode" class="gcode" name="printer.endgcode"></textarea>
-        <label for="endgcode">End:</label><br/>
+      	</div>
-        <textarea id="endgcode" class="gcode" name="printer.endgcode">
+      	<small>The text <em>{printingTemp}</em> will be replaced by the printing temperature and <em>{preheatTemp}</em> will be replaced by the preaheat temperature.</small>
-        </textarea>
-      </div>
-      <small>The text <em>{printingTemp}</em> will be replaced by the printing temperature and <em>{preheatTemp}</em> will be replaced by the preaheat temperature.</small>
     </fieldset>
   </form><br/>
 </div>