vmario/doodle3d-connect
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-connect.git synced 2024-12-25 18:13:48 +01:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
peteruithoven 2014-02-25 11:30:20 +01:00
parent 693af8f6d6
commit 557c36b84d
5 changed files with 133 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
css/main.css
View File

@ -1,3 +1,7 @@
p, small {
line-height: 1.2em;
}
#container { #container {
position:absolute; position:absolute;
width: 100%; width: 100%;
@ -18,7 +22,6 @@ a {
text-decoration: none; text-decoration: none;
} }
#preloader { #preloader {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -58,7 +61,7 @@ a {
.box:hover { .box:hover {
background-color: #5491D2; background-color: #5491D2;
} }
.box:hover a{ .box:hover .link{
color: #fff; color: #fff;
} }
.box.complex { .box.complex {
@ -68,7 +71,7 @@ a {
box.connecting { box.connecting {
border: 2px solid #ff0; border: 2px solid #ff0;
} }
.box a{ .box .link{
display:block; display:block;
padding: 25px 25px 12px 25px; padding: 25px 25px 12px 25px;
text-align: center; text-align: center;
@ -79,19 +82,22 @@ box.connecting {
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.box.complex a { .box.complex .link {
position: relative; position: relative;
top: auto; top: auto;
right: auto; right: auto;
bottom: auto; bottom: auto;
left: auto; left: auto;
} }
.box small {
margin: 1em 0 0 0;
display: block;
}
#hint { #hint {
display:none; display:none;
position: absolute; position: absolute;
bottom: 1em; bottom: 1em;
line-height: 1.5;
} }
#networkForm { #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 */ /* NETWORK PANEL */
.networkForm { .networkForm {
background-color: #fff; background-color: #fff;
/*border-radius: 0 0 25px 25px;*/ /*border-radius: 0 0 25px 25px;*/
padding: 12px 25px 12px 25px; padding: 12px 25px 12px 25px;
} }
.networkForm p {
form p {
margin: 0 0 10px 0; 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 { .networkForm #network {
margin-right: 5px; /*margin-right: 5px;*/
width: 130px;
}
}
.networkForm #ssid, .networkForm #ssid,
.networkForm #listNetworks, .networkForm #listNetworks,
.networkForm #passwordSettings { .networkForm #passwordSettings {
display: none; display: none;
} }
.networkForm.customNetwork #passwordSettings { .networkForm.customNetwork #passwordSettings {
display: block; display: block;
} }
@ -166,7 +176,25 @@ form .button {
.networkForm.customNetwork #refreshNetworks { .networkForm.customNetwork #refreshNetworks {
display: none; 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;
} }

19
index.html
View File

@ -55,10 +55,12 @@
</div> </div>
<form id="networkForm"> <form id="networkForm">
<p>Connect box to your WiFi network:</p> <p>Connect this box to your WiFi network:</p>
<div class="row">
<label for="ssid">Network:</label><input type="text" name="ssid" id="ssid"><input type="button" name="list" value="List" class="button" id="listNetworks"/> <label for="ssid">Network:</label><input type="text" name="ssid" id="ssid"><input type="button" name="list" value="List" class="button" id="listNetworks"/>
<select id="network" name=""></select><input type="button" name="refresh" value="Refresh" class="button" id="refreshNetworks"/><br/> <select id="network" name=""></select><input type="button" name="refresh" value="Refresh" class="button" id="refreshNetworks"/><br/>
<div id="passwordSettings"> </div>
<div id="passwordSettings" class="row">
<div> <div>
<label for="phrase" id="phraseLabel">Password:</label> <label for="phrase" id="phraseLabel">Password:</label>
</div> </div>
@ -68,9 +70,16 @@
<label for="showPassword" class="inline">show password</label> <label for="showPassword" class="inline">show password</label>
</div> </div>
</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> </form>
</body> </body>

2
js/Box.js
View File

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

72
js/NetworkPanel.js
View File

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

31
js/main.js
View File

@ -138,8 +138,6 @@ function addBox(boxData) {
box.init(boxData,$list); box.init(boxData,$list);
box.destroyedHandler = boxDestroyedHandler; box.destroyedHandler = boxDestroyedHandler;
boxes[box.localip] = box; boxes[box.localip] = box;
//createBox(boxData);
} }
function removeBox(localip,force) { function removeBox(localip,force) {
var box = getBox(localip); var box = getBox(localip);
@ -167,32 +165,3 @@ function updateIntro() {
$preloader.fadeOut(1000); $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;
}*/