Network ui

css/settings.css

@@ -1,72 +1,79 @@
 form {
   margin: 10px;
 }
-input {
+form input {
   margin: 1px;
 }
 
 body,th,td {
-  font-family: Arial;
+  font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
   font-size: 13px;
 }
-#advancedSettings {
+form fieldset {
-  width: 96.3%;
-  height: 300px;
-  padding: 10px;
-}
-fieldset {
   width: 600px;
   border: 1px solid rgb(187, 187, 187);
   -webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
 	border-radius: 5px;
   margin-bottom: 20px;
-  /*padding-left: 20px;*/
+  padding: 8px 0 8px 8px;
 }
-fieldset legend {
+form fieldset fieldset{
+	width: 580px;
+	margin: 15px 0 5px 0;
+	clear: left;
+	float: left;
+}
+form fieldset legend {
   margin-left: 10px;
+  font-weight: bold;
 }
-label {
+form label {
   min-width: 150px;
-  display: inline-block;
+  display: block;
+  float: left;
+  margin: 1px 0 0 0;
+	clear: left;
 }
-textarea {
+form div {
-  border: 1px solid rgb(144, 192, 255);
+	float: left;
-  -webkit-border-radius: 5px;
-	-moz-border-radius: 5px;
-	border-radius: 5px;
 }
-input[type="text"], input[type="number"] {
+form input[type="text"], form input[type="number"], form input[type="password"] {
   border: 1px solid rgb(144, 192, 255);
   margin-right: 5px;
   -webkit-border-radius: 4px;
 	-moz-border-radius: 4px;
 	border-radius: 4px;
 }
-input[type="text"].small, input[type="number"].small {
+form input[type="text"].small, form input[type="number"].small, form input[type="password"].small {
   width: 50px;
 }
-input[type="text"].large,input[type="number"].large {
+form input[type="text"].large, form input[type="number"].large, form input[type="password"].large {
   width: 250px;
 }
-legend {
+form input[type="radio"] {
-  font-weight: bold;
+  margin: 4px 4px 0 0;
-  font-family: Arial;
 }
-select {
+form textarea {
-  margin-left: -4px;
+  border: 1px solid rgb(144, 192, 255);
+  -webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
 }
-textarea.gcode {
+form textarea.gcode {
   width: 270px;
   height: 150px;
   margin-right: 20px;
 }
-
-.retractionSettings {
-  display: none;
-  margin-top: 5px;
-}
 form small {
 	margin: 3px 0 0 0;
 	display: block;
+	clear: left;
 }
+form .button {
+	display: inline-block;
+}
+
+form #passwordLabel, form #password {
+	display: none;
+}

js/SettingsWindow.js

@@ -20,7 +20,7 @@ var settings = {
 "printer.retraction.speed": 250,
 "printer.retraction.minDistance": 1,
 "printer.retraction.amount": 2,
-"printer.autoWarmUpCommand": "M104 S220 (hardcoded temperature)" 
+"printer.autoWarmUpCommand": "M104 S220 (hardcoded temperature)"
 }
 
 function SettingsWindow() {
@@ -31,24 +31,68 @@ function SettingsWindow() {
 	this.retryDelay = 2000; 					// retry setTimout delay
 	this.retryLoadSettingsDelay; 			// retry setTimout instance
 	this.retrySaveSettingsDelay; 			// retry setTimout instance
-	
+	this.retryRetrieveNetworkStatusDelay;// retry setTimout instance
+
+
+	this.apFieldSet;
+	this.clientFieldSet;
+	this.networks;
+	this.currentNetwork;               // the ssid of the network the box is on
+  this.selectedNetwork;              // the ssid of the selected network in the client mode settings
+  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 time is multiplied 3 times after access point creation
+  this.retrieveNetworkStatusDelay;   // setTimout delay
+  this.retrieveNetworkStatusDelayTime = 3000;
+
 	// Events
 	SettingsWindow.SETTINGS_LOADED = "settingsLoaded";
-	
+
+  // network client mode states
+  SettingsWindow.NOT_CONNECTED   = "not connected";   // also used as first item in networks list
+  SettingsWindow.CONNECTED       = "connected";
+  SettingsWindow.CONNECTING      = "connecting";
+
+  // network access point mode states
+  SettingsWindow.NO_AP           = "no ap";
+  SettingsWindow.AP              = "ap";
+  SettingsWindow.CREATING_AP     = "creating ap";
+
 	var self = this;
-	
+
 	this.init = function(wifiboxURL) {
 		this.wifiboxURL = wifiboxURL;
-	
+
 		this.window = $("#settings");
 		this.window.find(".btnOK").click(this.submitwindow);
 	  this.window.find(".settings").load("settings.html", function() {
       console.log("Settings:finished loading settings.html, now loading settings...");
-      
+
       self.form = self.window.find("form");
 			self.form.submit(function (e) { self.submitwindow(e) });
-			
+
       self.loadSettings();
+
+
+      var btnAP 						= self.form.find("label[for='ap']");
+		  var btnClient 				= self.form.find("label[for='client']");
+		  var btnRefresh 				= self.form.find("#refreshNetworks");
+		  var btnConnect 				= self.form.find("#connectToNetwork");
+		  var btnCreate 				= self.form.find("#createAP");
+		  var networkSelector 	= self.form.find("#network");
+		  self.apFieldSet 			= self.form.find("#apSettings");
+		  self.clientFieldSet 	= self.form.find("#clientSettings");
+
+		  btnAP.on('touchstart mousedown',self.showAPSettings);
+		  btnClient.on('touchstart mousedown',self.showClientSettings);
+		  btnRefresh.on('touchstart mousedown',self.refreshNetworks);
+		  btnConnect.on('touchstart mousedown',self.connectToNetwork);
+			btnCreate.on('touchstart mousedown',self.createAP);
+		  networkSelector.change(self.networkSelectorChanged);
 	  });
 	}
 	this.submitwindow = function(e) {
@@ -57,12 +101,12 @@ function SettingsWindow() {
 	  self.saveSettings();
 	  self.hideSettings();
 	}
-	
+
 	this.showSettings = function() {
 	  console.log("f:showSettings()");
-	  
+
 	  this.loadSettings(); // reload settings
-	  
+
 	  $("#contentOverlay").fadeIn(375, function() {
 	    document.body.removeEventListener('touchmove',prevent,false);
 	  });
@@ -72,38 +116,40 @@ function SettingsWindow() {
       document.body.addEventListener('touchmove',prevent,false);
     });
 	}
-	
+
 	this.loadSettings = function() {
 		if (!communicateWithWifibox) {
 			console.log("     communicateWithWifibox is false: settings aren't being loaded from wifibox...")
 			return;
 		}
 	  console.log("Settings:loadSettings() >> getting new data...");
-		
+
 		$.ajax({
 		  url: this.wifiboxURL + "/config/all",
 		  dataType: 'json',
 		  timeout: this.timeoutTime,
 		  success: function(data){
 		  	console.log("Settings:loadSettings response: ",data);
-		  	// TODO: no request status? 
 		  	settings = data.data;
 		  	console.log("  settings: ",settings);
 		  	self.fillForm();
 		  	$(document).trigger(SettingsWindow.SETTINGS_LOADED);
 			}
-		}).fail(function() { 
+		}).fail(function() {
 			console.log("Settings:loadSettings: failed");
 			clearTimeout(self.retryLoadSettingsDelay);
 			self.retryLoadSettingsDelay = setTimeout(function() { self.loadSettings() },self.retryDelay); // retry after delay
 		});
+
+    this.refreshNetworks();
+    this.retrieveNetworkStatus();
 	}
-	
+
 	this.saveSettings = function(callback) {
 	  console.log("Settings:saveSettings");
-	  
+
 	  this.readForm();
-	  
+
 	  if (communicateWithWifibox) {
 		  $.ajax({
 			  url: this.wifiboxURL + "/config",
@@ -129,30 +175,30 @@ function SettingsWindow() {
 			      }
 			  	}
 				}
-			}).fail(function() { 
+			}).fail(function() {
 				console.log("Settings:saveSettings: failed");
 				clearTimeout(self.retrySaveSettingsDelay);
 				self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
 			});
 	  }
 	}
-	
+
 	this.fillForm = function() {
 		console.log("SettingsWindow:fillForm");
+
 		//fill form with loaded settings
 		var selects = this.form.find("select");
 		selects.each( function(index,element) {
 			var element = $(element);
 			element.val(settings[element.attr('name')]);
 		});
-		
 		var inputs = this.form.find("input");
 		inputs.each( function(index,element) {
 			var element = $(element);
 			//console.log("printer setting input: ",index,element.attr("type"),element.attr('name')); //,element);
 			switch(element.attr("type")) {
-				case "text": 
+				case "text":
-				case "number":  
+				case "number":
 					element.val(settings[element.attr('name')]);
 					break;
 				case "checkbox":
@@ -160,33 +206,28 @@ function SettingsWindow() {
 					break;
 			}
 		});
-		
 		var textareas = this.form.find("textarea");
-		console.log(textareas);
 		textareas.each( function(index,element) {
 			var element = $(element);
-			
-			console.log("printer setting textarea: ",index,element.attr('name')); //,element);
 			var value = settings[element.attr('name')];
 			element.val(value);
-			console.log("  value: ",value);
 		});
 	}
-	
+
-	this.readForm = function() {	
+	this.readForm = function() {
 		console.log("SettingsWindow:readForm");
 		var selects = this.form.find("select");
 		selects.each( function(index,element) {
 			var element = $(element);
 			settings[element.attr('name')] = element.val();
 		});
-		
+
 		var inputs = this.form.find("input");
 		inputs.each( function(index,element) {
 			var element = $(element);
 			switch(element.attr("type")) {
-				case "text": 
+				case "text":
-				case "number":  
+				case "number":
 					settings[element.attr('name')] = element.val();
 					break;
 				case "checkbox":
@@ -194,7 +235,7 @@ function SettingsWindow() {
 					break;
 			}
 		});
-	
+
 		var textareas = this.form.find("textarea");
 		textareas.each( function(index,element) {
 			var element = $(element);
@@ -202,6 +243,248 @@ function SettingsWindow() {
 		});
 		console.log(settings);
 	}
+
+
+	/*
+	 * Networks ui
+	 */
+	this.showAPSettings = function() {
+		self.apFieldSet.show();
+		self.clientFieldSet.hide();
+	}
+	this.showClientSettings = function() {
+		self.clientFieldSet.show();
+		self.apFieldSet.hide();
+	}
+	this.connectToNetwork = function() {
+		console.log("Settings:connectToNetwork");
+	}
+	this.refreshNetworks = function() {
+    console.log("Settings:refreshnetworks");
+
+		if (communicateWithWifibox) {
+		  $.ajax({
+			  url: self.wifiboxURL + "/network/scan",
+			  type: "GET",
+			  dataType: 'json',
+			  timeout: self.timeoutTime,
+			  success: function(response){
+			  	console.log("Settings:refreshNetworks response: ",response);
+			  	if(response.status == "error") {
+			  		//clearTimeout(self.retrySaveSettingsDelay);
+						//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
+			  	} else {
+			  		var networks = response.data.networks
+			  		self.networks = {};
+            var foundCurrentNetwork = false;
+			  		var networkSelector = self.form.find("#network");
+			  		networkSelector.empty();
+            networkSelector.append(
+								$("<option></option>").val(SettingsWindow.NOT_CONNECTED).html("not connected")
+							);
+			  		$.each(networks, function(index,element) {
+              if(element.ssid == self.currentNetwork) {
+                foundCurrentNetwork = true;
+              }
+							networkSelector.append(
+								$("<option></option>").val(element.ssid).html(element.ssid)
+							);
+							self.networks[element.ssid] = element;
+						});
+            if(foundCurrentNetwork) {
+              networkSelector.val(self.currentNetwork);
+              self.selectNetwork(self.currentNetwork);
+            } else {
+              self.retrieveNetworkStatus();
+            }
+			  	}
+				}
+			}).fail(function() {
+				console.log("Settings:saveSettings: failed");
+				//clearTimeout(self.retrySaveSettingsDelay);
+				//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
+			});
+	  }
+	}
+
+  this.retrieveNetworkStatus = function() {
+    console.log("Settings:retrieveNetworkStatus");
+    if (communicateWithWifibox) {
+		  $.ajax({
+			  url: self.wifiboxURL + "/network/status",
+			  type: "GET",
+			  dataType: 'json',
+			  timeout: self.timeoutTime,
+			  success: function(response){
+			  	console.log("Settings:updateNetworkStatus response: ",response);
+			  	if(response.status == "error") {
+			  		clearTimeout(self.retryRetrieveNetworkStatusDelay);
+						self.retryRetrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus() },self.retryDelay); // retry after delay
+			  	} else {
+            var data = response.data;
+            switch(data.mode) {
+              case "sta":
+                var networkSelector = self.form.find("#network");
+                networkSelector.val(data.ssid);
+                self.showClientSettings();
+                self.form.find("#client").prop('checked',true);
+
+                self.currentNetwork = data.ssid;
+                self.selectNetwork(data.ssid);
+                self.setClientModeState(SettingsWindow.CONNECTED);
+
+                self.setAPModeState(SettingsWindow.NO_AP);
+                break;
+              case "ap":
+                //self.form.find("#ssid").val(data.ssid);
+                self.showAPSettings();
+                self.form.find("#ap").prop('checked',true);
+                self.currentAP = data.ssid;
+                self.setAPModeState(SettingsWindow.AP);
+
+                self.currentNetwork = undefined;
+                self.selectNetwork(SettingsWindow.NOT_CONNECTED);
+                self.setClientModeState(SettingsWindow.NOT_CONNECTED);
+                break;
+              default:
+                self.showAPSettings();
+                self.form.find("#ap").prop('checked',true);
+                self.setAPModeState(SettingsWindow.NO_AP);
+
+                self.currentNetwork = undefined;
+                self.selectNetwork(SettingsWindow.NOT_CONNECTED);
+                self.setClientModeState(SettingsWindow.NOT_CONNECTED);
+                break;
+            }
+			  	}
+				}
+			}).fail(function() {
+				console.log("Settings:updateNetworkStatus: failed");
+				clearTimeout(self.retryRetrieveNetworkStatusDelay);
+				self.retryRetrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus() },self.retryDelay); // retry after delay
+			});
+    }
+  }
+
+	this.networkSelectorChanged = function(e) {
+		var selectedOption = $(this).find("option:selected");
+		self.selectNetwork(selectedOption.val());
+	}
+
+	this.selectNetwork = function(ssid) {
+		console.log("select network: ",ssid);
+		this.selectedNetwork = ssid;
+    if(this.networks == undefined || ssid == SettingsWindow.NOT_CONNECTED) {
+      this.form.find("#passwordLabel").hide();
+      this.form.find("#password").hide();
+    } else {
+      var network = this.networks[ssid];
+      if(network.encryption == "none") {
+        this.form.find("#passwordLabel").hide();
+        this.form.find("#password").hide();
+      } else {
+        this.form.find("#passwordLabel").show();
+        this.form.find("#password").show();
+      }
+      this.form.find("#password").val("");
+    }
+	}
+
+  this.setClientModeState = function(state) {
+    var field = this.form.find("#clientModeState");
+	  var btnConnect 				= self.form.find("#connectToNetwork");
+    switch(state) {
+      case SettingsWindow.NOT_CONNECTED:
+        btnConnect.removeAttr("disabled");
+        field.html("Not connected");
+        break;
+      case SettingsWindow.CONNECTED:
+        btnConnect.removeAttr("disabled");
+        field.html("Connected to: "+this.currentNetwork);
+        break;
+      case SettingsWindow.CONNECTING:
+        btnConnect.attr("disabled", true);
+        field.html("Connecting...");
+        break;
+    }
+    this.clientModeState = state;
+  }
+
+	this.connectToNetwork = function() {
+		console.log("connectToNetwork");
+		if(self.selectedNetwork == undefined) return;
+		postData = {
+			ssid:self.selectedNetwork,
+			phrase:self.form.find("#password").val()
+		}
+		console.log("  postData: ",postData);
+		if (communicateWithWifibox) {
+		  $.ajax({
+			  url: self.wifiboxURL + "/network/associate",
+			  type: "POST",
+			  data: postData,
+			  dataType: 'json',
+			  timeout: self.timeoutTime,
+			  success: function(response){
+			  	console.log("Settings:connectToNetwork response: ",response);
+
+				}
+			}).fail(function() {
+				console.log("Settings:connectToNetwork: timeout (normal behaivior)");
+				//clearTimeout(self.retrySaveSettingsDelay);
+				//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
+			});
+	  }
+    self.setClientModeState(SettingsWindow.CONNECTING);
+
+    // we delay the status retrieval because the webserver needs time to switch
+    clearTimeout(self.retrieveNetworkStatusDelay);
+		self.retrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus() },self.retrieveNetworkStatusDelayTime); // retry after delay
+	}
+
+  this.createAP = function() {
+		if (communicateWithWifibox) {
+		  $.ajax({
+			  url: self.wifiboxURL + "/network/openap",
+			  type: "POST",
+			  dataType: 'json',
+			  timeout: self.timeoutTime,
+			  success: function(response){
+			  	console.log("Settings:createAP response: ",response);
+
+				}
+			}).fail(function() {
+				console.log("Settings:createAP: timeout (normal behaivior)");
+				//clearTimeout(self.retrySaveSettingsDelay);
+				//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
+			});
+	  }
+    self.setAPModeState(SettingsWindow.CREATING_AP);
+
+    // we delay the status retrieval because the webserver needs time to switch
+    clearTimeout(self.retrieveNetworkStatusDelay);
+		self.retrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus() },self.retrieveNetworkStatusDelayTime*3); // retry after delay
+  }
+
+  this.setAPModeState = function(state) {
+    var field = this.form.find("#apModeState");
+    var btnCreate = this.form.find("#createAP");
+    switch(state) {
+      case SettingsWindow.NO_AP:
+        btnCreate.removeAttr("disabled");
+        field.html("Not currently a access point");
+        break;
+      case SettingsWindow.AP:
+        btnCreate.removeAttr("disabled");
+        field.html("Is access point: "+this.currentAP);
+        break;
+      case SettingsWindow.CREATING_AP:
+        btnCreate.attr("disabled", true);
+        field.html("Creating access point...");
+        break;
+    }
+    this.apModeState = state;
+  }
 }
 
 /*************************

settings.html

@@ -54,7 +54,7 @@
         <option value="2500000">2500000 bps</option>
       </select>
     </fieldset>
-		
+
 		<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>
@@ -84,13 +84,37 @@
 			<label for="simplifyMinDistance">Minimal line distance:</label><input id="simplifyMinDistance" type="number" class="small" name="doodle3d.simplify.minDistance">px<br>
 		</fieldset>
 
-    <fieldset>
+		<fieldset>
-      <legend>Access point settings</legend>
+      <legend>Network settings</legend>
-      <label for="ipaddress">Wi-Fi box IP address:</label><input type="text" name="network.ap.address" id="ipaddress"><br>
+      <label>Connection type:</label>
-      <label for="netmask">Wi-Fi box netmask:</label><input type="text" name="network.ap.netmask" id="netmask"><br>
+      <div>
-      <label for="ssid">Wi-Fi box ssid*:</label><input type="text" class="large" name="network.ap.ssid" id="ssid"> <br>
+      	<label for="ap"><input type="radio" name="connectiontype" value="ap" id="ap">Access point mode</label>
-      <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>
+				<label for="client"><input type="radio" name="connectiontype" value="client" id="client">Client mode</label>
-    </fieldset>
+			</div>
+
+	    <fieldset id="apSettings">
+	      <legend>Access point settings</legend>
+	      <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="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>
+	      <input type="button" name="create" value="Create" class="button" id="createAP"/>
+          <span id="apModeState"></span>
+	    </fieldset>
+
+	    <fieldset id="clientSettings">
+	      <legend>Client mode settings</legend>
+	      <label for="network">Network:</label>
+	      <select id="network" name="network.client.network">
+	        <option value="rigidbot">Fablab Amersfoort</option>
+		      <option value="ultimaker">Globe4D</option>
+	      </select>
+	      <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>
+	      <input type="button" name="connect" value="Connect" class="button" id="connectToNetwork"/>
+          <span id="clientModeState"></span>
+	    </fieldset>
+		</fieldset>
 
     <fieldset>
       <legend>GCODE settings</legend>