diff --git a/css/main.css b/css/main.css index 8cc86c7..dbbeddb 100644 --- a/css/main.css +++ b/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; } - -form p { +.networkForm 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; - width: 130px; -} + /*margin-right: 5px;*/ +} .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 { - display: block; - clear:left; +.networkForm #status { + position: relative; + 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; } \ No newline at end of file diff --git a/index.html b/index.html index ed06203..ad11d7a 100644 --- a/index.html +++ b/index.html @@ -55,10 +55,12 @@
-

Connect box to your WiFi network:

- -
-
+

Connect this box to your WiFi network:

+
+ +
+
+
@@ -68,9 +70,16 @@
-
- -
+
+ + +
+
+ +
+
+ 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’s own WiFi network by going to draw.doodle3d.com. +
diff --git a/js/Box.js b/js/Box.js index 9fba3c6..0c7aebd 100644 --- a/js/Box.js +++ b/js/Box.js @@ -26,7 +26,7 @@ function Box() { // create box dom element var link = (boxData.link)? boxData.link : url; _element = $("
  • "); - _element.append(""+_self.wifiboxid+""); + _element.append(""+_self.wifiboxid+""); _element.hide().appendTo(parentElement).fadeIn(500); // create network panel dom element diff --git a/js/NetworkPanel.js b/js/NetworkPanel.js index f7064fc..81cc7d8 100644 --- a/js/NetworkPanel.js +++ b/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 msg = ""; + var statusText = ""; switch(status) { - case NetworkAPI.STATUS.NOT_CONNECTED: - case NetworkAPI.STATUS.CREATING: - case NetworkAPI.STATUS.CREATED: - break; - case NetworkAPI.STATUS.CONNECTED: - msg = "Connected to: "+_currentNetwork+"."; - break; case NetworkAPI.STATUS.CONNECTING: - msg = "Connecting... "; - var targetNetwork; - if(_selectedNetwork != undefined) { - targetNetwork = _selectedNetwork; - } else if(_currentNetwork != undefined) { - targetNetwork = _currentNetwork; - } - if(targetNetwork != undefined) { - msg += "
    Connect your device to "+targetNetwork+"."; - } + statusText = "Connecting... "; 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(msg); + _statusTextField.html(statusText); + + // update action text + var actionText = ""; + switch(status) { + case NetworkAPI.STATUS.CONNECTING: + if(targetNetwork != undefined) { + actionText = "Connect your device to "+targetNetwork+"."; + _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); diff --git a/js/main.js b/js/main.js index 20d2eeb..a5d81f8 100644 --- a/js/main.js +++ b/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 = $("
  • "); - element.data("wifiboxid",box.wifiboxid); - element.append(""+box.wifiboxid+""); - - 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; -}*/ \ No newline at end of file +} \ No newline at end of file