Added action field, using submit button, Improved texts, More generic css

css/main.css

@@ -1,3 +1,7 @@
+p, small {
+	line-height: 1.2em;
+}
+
 #container {
   position:absolute;
   width: 100%;
@@ -18,7 +22,6 @@ a {
 	text-decoration: none;
 }
 
-
 #preloader {
 	position: absolute;
 	top: 50%;
@@ -58,7 +61,7 @@ a {
 .box:hover {
 	background-color: #5491D2;
 }
-.box:hover a{
+.box:hover .link{
 	color: #fff;
 }
 .box.complex {
@@ -68,7 +71,7 @@ a {
 box.connecting {
 	border: 2px solid #ff0;
 }	
-.box a{
+.box .link{
 	display:block;
 	padding: 25px 25px 12px 25px;
 	text-align: center;
@@ -79,19 +82,22 @@ box.connecting {
 	bottom: 0;
 	left: 0;
 }
-.box.complex a {
+.box.complex .link {
 	position: relative;
 	top: auto;
 	right: auto;
 	bottom: auto;
 	left: auto;
 }
+.box small {
+	margin: 1em 0 0 0;
+	display: block;
+}
 
 #hint {
 	display:none;
 	position: absolute;
 	bottom: 1em;
-	line-height: 1.5;
 }
 
 #networkForm {
@@ -105,56 +111,60 @@ box.connecting {
 }
 
 
+/* FORMS */
+form label {
+  min-width: 110px;
+  display: block;
+  float: left;
+  margin: 1px 0 10px 0;
+}
+form label.inline {
+	display: inline;
+	float: none;
+}
+
+form input, form select {
+  margin-bottom: 5px;
+}
+form select {
+	margin-right: 5px;
+}
+form input[type="text"], form input[type="number"], form input[type="password"], form select {
+	width: 130px;
+}
+form input[type="text"], form input[type="number"], form input[type="password"] {
+  border: 1px solid rgb(144, 192, 255);
+  -webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+}
+form .row {
+	clear: left;
+}
+form .row div {
+/*	float: left;*/
+}
+
+
 /* NETWORK PANEL */
 .networkForm {
 	background-color: #fff;
 	/*border-radius: 0 0 25px 25px;*/
 	padding: 12px 25px 12px 25px;
 }
-
+.networkForm p {
-form p {
 	margin: 0 0 10px 0;
 }
-form label {
-  min-width: 110px;
-  display: block;
-  float: left;
-  margin: 1px 0 10px 0;
-	clear: left;
-}
-form label.inline {
-	display: inline;
-	float: none;
-}
-form div {
-	float: left;
-}
-form input[type="text"], form input[type="number"], form input[type="password"] {
-  border: 1px solid rgb(144, 192, 255);
-  margin-right: 5px;
-  margin-bottom: 5px;
-  -webkit-border-radius: 4px;
-	-moz-border-radius: 4px;
-	border-radius: 4px;
-	
-	width: 130px;
-	
-}
-form .button {
-	display: inline-block;
-}
 
 .networkForm #network {
-	margin-right: 5px;
+	/*margin-right: 5px;*/
-	width: 130px;
-}
 
+}
 .networkForm #ssid,
 .networkForm #listNetworks,
 .networkForm #passwordSettings {
 	display: none;
 }
-
 .networkForm.customNetwork #passwordSettings {
 	display: block;
 }
@@ -166,7 +176,25 @@ form .button {
 .networkForm.customNetwork #refreshNetworks {
 	display: none;
 }
-.networkForm #btnConnect {
+.networkForm #status {
-	display: block;
+	position: relative;
-	clear:left;
+	top: 2px;
+}
+.networkForm #action {
+    /*clear: left;*/
+    display: block;
+    padding: 5px 4px 4px 4px;
+}
+.networkForm #action.error {
+    background: #EB313C;
+    color: #fff;
+}
+.networkForm #action.warning {
+    background: #E9A86E;
+}
+.networkForm #action.notice {
+    background: #93CAF4;
+}
+.networkForm #action.info {
+    background: #97DD8A;
 }

index.html

@@ -55,10 +55,12 @@
 </div>
 						
 <form id="networkForm">
-	<p>Connect box to your WiFi network:</p>
+	<p>Connect this box to your WiFi network:</p>
-	<label for="ssid">Network:</label><input type="text" name="ssid" id="ssid"><input type="button" name="list" value="List" class="button" id="listNetworks"/>
+	<div class="row">
-	<select id="network" name=""></select><input type="button" name="refresh" value="Refresh" class="button" id="refreshNetworks"/><br/>
+		<label for="ssid">Network:</label><input type="text" name="ssid" id="ssid"><input type="button" name="list" value="List" class="button" id="listNetworks"/>
-	<div id="passwordSettings">
+		<select id="network" name=""></select><input type="button" name="refresh" value="Refresh" class="button" id="refreshNetworks"/><br/>
+	</div>
+	<div id="passwordSettings" class="row">
 		<div>
 			<label for="phrase" id="phraseLabel">Password:</label>
 		</div>
@@ -68,9 +70,16 @@
 			<label for="showPassword" class="inline">show password</label>
 		</div>
 	</div>
-	<br/>
+	<div class="row">
-	<input type="button" value="Connect" class="button" id="btnConnect"/>
+		<input type="submit" value="Connect" class="button" id="btnConnect"/>
-	<span id="statusText"></span><br/>
+		<span id="status"></span>
+	</div>
+	<div class="row">
+		<span id="action"></span>
+	</div>
+	<div class="row">
+		<small>Connecting the box to your WiFi network makes it easier to connect to and allows you to update. You can also continue using the box on it&#8217;s own WiFi network by going to <a href="http://draw.doodle3d.com">draw.doodle3d.com</a>. </small>
+	</div>
 </form>
 
 </body>

js/Box.js

@@ -26,7 +26,7 @@ function Box() {
 		// create box dom element
 		var link = (boxData.link)? boxData.link : url;
 		_element = $("<li id='"+_self.localip+"' class='box'></li>");
-		_element.append("<a href='"+link+"'>"+_self.wifiboxid+"</a>");
+		_element.append("<a href='"+link+"' class='link'>"+_self.wifiboxid+"</a>");
 		_element.hide().appendTo(parentElement).fadeIn(500);
 		
 		// create network panel dom element

js/NetworkPanel.js

@@ -47,6 +47,7 @@ function NetworkPanel() {
 	var _passwordField;
 	var _btnConnect;
 	var _statusTextField;
+	var _actionTextField;
 	
 	var _self = this;
 	
@@ -64,12 +65,16 @@ function NetworkPanel() {
 		_passwordSettings 	= _element.find("#passwordSettings");
 		_passwordField 			= _element.find("#phrase");
 		_btnConnect 				= _element.find("#btnConnect");
-		_statusTextField	 	= _element.find("#statusText");
+		_statusTextField	 	= _element.find("#status");
+		_actionTextField	 	= _element.find("#action");
 		
 		_btnRefreshNetworks.on('touchstart mousedown',onRefreshClick);
 		_btnListNetworks.on('touchstart mousedown',showNetworkSelector);
-		_btnConnect.on('touchstart mousedown',_self.connectToNetwork);
+		//_btnConnect.on('touchstart mousedown',_self.connectToNetwork);
+		_element.submit(connectToNetwork);
+		
 		_networkSelector.change(networkSelectorChanged);
+		_networkSelector.blur(networkSelectorBlurred);
 		_passwordField.showPassword();
 		
 		_statusChangeHandler = statusChangeHandler;
@@ -93,6 +98,12 @@ function NetworkPanel() {
 		var selectedOption = $(this).find("option:selected");
 		_self.selectNetwork(selectedOption.val());
 	};
+	function networkSelectorBlurred(e) {
+		console.log("networkSelectorBlurred");
+		var selectedOption = $(this).find("option:selected");
+		//_self.selectNetwork(selectedOption.val());
+	};
+	
 	
 	this.retrieveStatus = function(completeHandler) {
 		//console.log(_self.id,"NetworkPanel:retrieveStatus");
@@ -125,6 +136,7 @@ function NetworkPanel() {
 	function setStatus(status,data) {
 		if(status == _currentNetworkStatus) return;
 		_currentNetworkStatus = status;
+		var targetNetwork; 
 		
 		// update info
 		switch(status) {
@@ -138,6 +150,12 @@ function NetworkPanel() {
 					_currentNetwork = data.ssid;
 				}
 				break;
+			case NetworkAPI.STATUS.CONNECTING:
+				if(_selectedNetwork != undefined) {
+					targetNetwork = _selectedNetwork;
+				} else if(_currentNetwork != undefined) {
+					targetNetwork = _currentNetwork;
+				}
 			case NetworkAPI.STATUS.CREATING:
 			case NetworkAPI.STATUS.CREATED:					
 				_currentNetwork = undefined;
@@ -169,35 +187,33 @@ function NetworkPanel() {
 				break;
 		}
 		// update status text
-		//updateStatusText(status,data.statusMessage);
+		var statusText = "";
-		var msg = "";
 		switch(status) {
-			case NetworkAPI.STATUS.NOT_CONNECTED:
-			case NetworkAPI.STATUS.CREATING:
-			case NetworkAPI.STATUS.CREATED:
-				break;
-			case NetworkAPI.STATUS.CONNECTED:
-				msg = "Connected to: <b>"+_currentNetwork+"</b>.";
-				break;
 			case NetworkAPI.STATUS.CONNECTING:
-				msg = "Connecting... "; 
+				statusText = "Connecting... ";
-				var targetNetwork; 
-				if(_selectedNetwork != undefined) {
-					targetNetwork = _selectedNetwork;
-				} else if(_currentNetwork != undefined) {
-					targetNetwork = _currentNetwork;
-				}
-				if(targetNetwork != undefined) {
-					msg += "<br/>Connect your device to <b>"+targetNetwork+"</b>.";
-				}
 				break;
 			case NetworkAPI.STATUS.CONNECTING_FAILED:
 				//msg = data.statusMessage;
-				msg = "Could not connect, please check password";
+				statusText = "Could not connect.";
 				break;
 		}
-		//console.log("  client display msg: ",msg);
+		_statusTextField.html(statusText);
-		_statusTextField.html(msg);
+		
+		// update action text
+		var actionText = "";
+		switch(status) {
+			case NetworkAPI.STATUS.CONNECTING:
+				if(targetNetwork != undefined) {
+					actionText = "Connect your device to <b>"+targetNetwork+"</b>.";
+					_actionTextField.attr("class","info");
+				}
+				break;
+			case NetworkAPI.STATUS.CONNECTING_FAILED:
+				actionText = "Please check password";
+				_actionTextField.attr("class","error");
+				break;
+		}
+		_actionTextField.html(actionText);
 			
 		if(_statusChangeHandler) _statusChangeHandler(status);
 	}
@@ -207,14 +223,14 @@ function NetworkPanel() {
 			//console.log("NetworkPanel:scanned");
 			
 			// order networks alphabetically
-			data.networks.sort(function (a, b) {
+			/*data.networks.sort(function (a, b) {
 				if (a.ssid > b.ssid)
 					return 1;
 				if (a.ssid < b.ssid)
 					return -1;
 				// a must be equal to b
 				return 0;
-			});
+			});*/
 			
 			fillNetworkSelector(data.networks)
 			_networks = {};
@@ -276,7 +292,7 @@ function NetworkPanel() {
 		_element.addClass("customNetwork");
 	}*/
 	
-	this.connectToNetwork = function() {
+	function connectToNetwork() {
 		//console.log("NetworkPanel:connectToNetwork");
 		if(_selectedNetwork == NETWORK_SELECTOR_DEFAULT) return;
 		
@@ -289,6 +305,8 @@ function NetworkPanel() {
 		// because the webserver needs time to switch it's status
 		clearTimeout(_retrieveStatusDelay);
 		_retrieveStatusDelay = setTimeout(_self.retrieveStatus, _retrieveStatusDelayTime);
+		
+		return false;
 	};
 	this.destroy = function() {
 		clearTimeout(_retryRetrieveStatusDelay);

js/main.js

@@ -138,8 +138,6 @@ function addBox(boxData) {
 	box.init(boxData,$list);
 	box.destroyedHandler = boxDestroyedHandler;
 	boxes[box.localip] = box;
-	
-	//createBox(boxData);
 }
 function removeBox(localip,force) {
 	var box = getBox(localip);
@@ -166,33 +164,4 @@ function updateIntro() {
 		}
 		$preloader.fadeOut(1000);
 	}
-}
+}
-
-/*function createBox(boxData) {
-	//console.log("createBox: ",box.localip,box.wifiboxid);
-	var url = "http://"+box.localip;
-	var element = $("<li id='"+box.localip+"' class='box'></li>");
-	element.data("wifiboxid",box.wifiboxid);
-	element.append("<a href='"+((box.url)? box.url : url)+"'>"+box.wifiboxid+"</a>");
-	
-	var networkPanelElement = $("#networkForm").clone();
-	networkPanelElement.addClass(networkPanelElement.attr("id"));
-	networkPanelElement.removeAttr("id");
-	element.append(networkPanelElement);
-		
-	var networkPanel = new NetworkPanel();
-	networkPanel.id = box.localip;
-	networkPanel.init(url,networkPanelElement, function(networkStatus) {
-		element.toggleClass("complex",(networkStatus != NetworkAPI.STATUS.CONNECTED));
-		element.toggleClass("connecting",(networkStatus == NetworkAPI.STATUS.CONNECTING));
-		console.log("status changed: ",networkStatus);
-		//console.log("  url: ",url);
-		if(networkStatus == NetworkAPI.STATUS.CONNECTING) {
-			setTimeout(function() {
-				console.log("delayed remove");
-				removeBox(box,true); 
-			}, 10000);
-		}
-	});
-	return element;
-}*/