vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-22 09:17:56 +01:00
Code Issues Releases Wiki Activity

Better network connecting feedback

Browse Source
This commit is contained in:
peteruithoven 2013-10-10 12:12:33 +02:00
parent f292c01d64
commit d417a7454f
2 changed files with 176 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

234
js/SettingsWindow.js
View File

@ -32,6 +32,8 @@ function SettingsWindow() {
this.form; this.form;
this.timeoutTime = 3000; this.timeoutTime = 3000;
this.retryDelay = 2000; // retry setTimout delay this.retryDelay = 2000; // retry setTimout delay
this.retryRetrieveNetworkStatusDelayTime = 1000;// retry setTimout delay
this.retryLoadSettingsDelay; // retry setTimout instance this.retryLoadSettingsDelay; // retry setTimout instance
this.retrySaveSettingsDelay; // retry setTimout instance this.retrySaveSettingsDelay; // retry setTimout instance
this.retryRetrieveNetworkStatusDelay;// retry setTimout instance this.retryRetrieveNetworkStatusDelay;// retry setTimout instance
@ -42,16 +44,15 @@ function SettingsWindow() {
this.networks; this.networks;
this.currentNetwork; // the ssid of the network the box is on 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.selectedNetwork; // the ssid of the selected network in the client mode settings
this.currentLocalIP; this.currentLocalIP = "";
this.clientModeState = SettingsWindow.NOT_CONNECTED; this.clientModeState = SettingsWindow.NOT_CONNECTED;
this.currentAP; this.currentAP;
this.apModeState = SettingsWindow.NO_AP; this.apModeState = SettingsWindow.NO_AP;
// after switching wifi network or creating a access point we delay the status retrieval // after switching wifi network or creating a access point we delay the status retrieval
// because the webserver needs time to switch // because the webserver needs time to switch
// this time is multiplied 3 times after access point creation
this.retrieveNetworkStatusDelay; // setTimout delay this.retrieveNetworkStatusDelay; // setTimout delay
this.retrieveNetworkStatusDelayTime = 4000; this.retrieveNetworkStatusDelayTime = 1000;
// Events // Events
SettingsWindow.SETTINGS_LOADED = "settingsLoaded"; SettingsWindow.SETTINGS_LOADED = "settingsLoaded";
@ -60,12 +61,21 @@ function SettingsWindow() {
SettingsWindow.NOT_CONNECTED = "not connected"; // also used as first item in networks list SettingsWindow.NOT_CONNECTED = "not connected"; // also used as first item in networks list
SettingsWindow.CONNECTED = "connected"; SettingsWindow.CONNECTED = "connected";
SettingsWindow.CONNECTING = "connecting"; SettingsWindow.CONNECTING = "connecting";
SettingsWindow.CONNECTING_FAILED = "connecting failed"
// network access point mode states // network access point mode states
SettingsWindow.NO_AP = "no ap"; SettingsWindow.NO_AP = "no ap";
SettingsWindow.AP = "ap"; SettingsWindow.AP = "ap";
SettingsWindow.CREATING_AP = "creating ap"; SettingsWindow.CREATING_AP = "creating ap";
SettingsWindow.API_CONNECTING_FAILED = -1
SettingsWindow.API_NOT_CONNECTED = 0
SettingsWindow.API_CONNECTING = 1
SettingsWindow.API_CONNECTED = 2
SettingsWindow.API_CREATING = 3
SettingsWindow.API_CREATED = 4
var self = this; var self = this;
this.init = function(wifiboxURL) { this.init = function(wifiboxURL) {
@ -81,7 +91,6 @@ function SettingsWindow() {
self.loadSettings(); self.loadSettings();
var btnAP = self.form.find("label[for='ap']"); var btnAP = self.form.find("label[for='ap']");
var btnClient = self.form.find("label[for='client']"); var btnClient = self.form.find("label[for='client']");
var btnRefresh = self.form.find("#refreshNetworks"); var btnRefresh = self.form.find("#refreshNetworks");
@ -104,6 +113,8 @@ function SettingsWindow() {
e.stopPropagation(); e.stopPropagation();
self.saveSettings(); self.saveSettings();
self.hideSettings(); self.hideSettings();
clearTimeout(self.retryRetrieveNetworkStatusDelay);
} }
this.showSettings = function() { this.showSettings = function() {
@ -147,7 +158,7 @@ function SettingsWindow() {
}); });
this.refreshNetworks(); this.refreshNetworks();
this.retrieveNetworkStatus(); this.retrieveNetworkStatus(false);
} }
this.saveSettings = function(callback) { this.saveSettings = function(callback) {
@ -261,11 +272,8 @@ function SettingsWindow() {
self.clientFieldSet.show(); self.clientFieldSet.show();
self.apFieldSet.hide(); self.apFieldSet.hide();
} }
this.connectToNetwork = function() {
console.log("Settings:connectToNetwork");
}
this.refreshNetworks = function() { this.refreshNetworks = function() {
console.log("Settings:refreshnetworks"); console.log("Settings:refreshNetworks");
if (communicateWithWifibox) { if (communicateWithWifibox) {
$.ajax({ $.ajax({
@ -299,21 +307,17 @@ function SettingsWindow() {
if(foundCurrentNetwork) { if(foundCurrentNetwork) {
networkSelector.val(self.currentNetwork); networkSelector.val(self.currentNetwork);
self.selectNetwork(self.currentNetwork); self.selectNetwork(self.currentNetwork);
} else {
self.retrieveNetworkStatus();
} }
} }
} }
}).fail(function() { }).fail(function() {
console.log("Settings:saveSettings: failed");
//clearTimeout(self.retrySaveSettingsDelay);
//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
}); });
} }
} }
this.retrieveNetworkStatus = function() { this.retrieveNetworkStatus = function(connecting) {
console.log("Settings:retrieveNetworkStatus"); //console.log("Settings:retrieveNetworkStatus");
if (communicateWithWifibox) { if (communicateWithWifibox) {
$.ajax({ $.ajax({
url: self.wifiboxURL + "/network/status", url: self.wifiboxURL + "/network/status",
@ -322,55 +326,107 @@ function SettingsWindow() {
timeout: self.timeoutTime, timeout: self.timeoutTime,
success: function(response){ success: function(response){
console.log("Settings:retrieveNetworkStatus response: ",response); console.log("Settings:retrieveNetworkStatus response: ",response);
if(response.status == "error" || response.data.ssid == "") { if(response.status == "error") {
//clearTimeout(self.retryRetrieveNetworkStatusDelay);
//self.retryRetrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus() },self.retryDelay); // retry after delay
self.setClientModeState(SettingsWindow.NOT_CONNECTED);
} else { } else {
var data = response.data; var data = response.data;
switch(data.mode) {
case "sta": if(typeof data.status === 'string') {
var networkSelector = self.form.find("#network"); data.status = parseInt(data.status);
networkSelector.val(data.ssid); }
self.showClientSettings(); //console.log(" data.status: ",data.status,data.statusMessage);
// Determine which network settings to show
switch(data.status) {
case SettingsWindow.API_NOT_CONNECTED:
//console.log(" not connected & not a access point");
self.apFieldSet.show();
self.clientFieldSet.show();
break;
case SettingsWindow.API_CONNECTING_FAILED:
case SettingsWindow.API_CONNECTING:
case SettingsWindow.API_CONNECTED:
//console.log(" client mode");
self.form.find("#client").prop('checked',true); self.form.find("#client").prop('checked',true);
self.currentLocalIP = data.localip; self.apFieldSet.hide();
self.clientFieldSet.show();
if(data.status == SettingsWindow.API_CONNECTED) {
var networkSelector = self.form.find("#network");
networkSelector.val(data.ssid);
self.currentNetwork = data.ssid; self.currentNetwork = data.ssid;
self.currentLocalIP = data.localip;
self.selectNetwork(data.ssid); self.selectNetwork(data.ssid);
self.setClientModeState(SettingsWindow.CONNECTED); } else {
self.currentLocalIP = ""
}
self.setAPModeState(SettingsWindow.NO_AP);
break; break;
case "ap": case SettingsWindow.API_CREATING:
//self.form.find("#ssid").val(data.ssid); case SettingsWindow.API_CREATED:
self.showAPSettings(); //console.log(" access point mode");
self.form.find("#ap").prop('checked',true); self.form.find("#ap").prop('checked',true);
self.apFieldSet.show();
self.clientFieldSet.hide();
self.currentNetwork = undefined;
self.selectNetwork(SettingsWindow.NOT_CONNECTED);
var networkSelector = self.form.find("#network");
networkSelector.val(SettingsWindow.NOT_CONNECTED);
if(data.ssid) {
self.currentAP = data.ssid; self.currentAP = data.ssid;
self.setAPModeState(SettingsWindow.AP); }
self.currentNetwork = undefined;
self.selectNetwork(SettingsWindow.NOT_CONNECTED);
self.setClientModeState(SettingsWindow.NOT_CONNECTED);
break; break;
default: }
self.showAPSettings();
self.form.find("#ap").prop('checked',true);
self.setAPModeState(SettingsWindow.NO_AP);
self.currentNetwork = undefined; // update status message
self.selectNetwork(SettingsWindow.NOT_CONNECTED); switch(data.status) {
self.setClientModeState(SettingsWindow.NOT_CONNECTED); case SettingsWindow.API_CONNECTING_FAILED:
self.setClientModeState(SettingsWindow.CONNECTING_FAILED,data.statusMessage);
self.setAPModeState(SettingsWindow.NO_AP,"");
break; break;
case SettingsWindow.API_NOT_CONNECTED:
self.setClientModeState(SettingsWindow.NOT_CONNECTED,"");
self.setAPModeState(SettingsWindow.NO_AP,"");
break;
case SettingsWindow.API_CONNECTING:
self.setClientModeState(SettingsWindow.CONNECTING,"");
self.setAPModeState(SettingsWindow.NO_AP,"");
break;
case SettingsWindow.API_CONNECTED:
self.setClientModeState(SettingsWindow.CONNECTED,"");
self.setAPModeState(SettingsWindow.NO_AP,"");
break;
case SettingsWindow.API_CREATING:
self.setClientModeState(SettingsWindow.NOT_CONNECTED,"");
self.setAPModeState(SettingsWindow.CREATING_AP,"");
break;
case SettingsWindow.API_CREATED:
self.setClientModeState(SettingsWindow.NOT_CONNECTED,"");
self.setAPModeState(SettingsWindow.AP,"");
break;
}
// Keep checking for updates?
if(connecting) {
switch(data.status) {
case SettingsWindow.API_CONNECTING:
case SettingsWindow.API_CREATING:
clearTimeout(self.retryRetrieveNetworkStatusDelay);
self.retryRetrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(connecting) },self.retryRetrieveNetworkStatusDelayTime); // retry after delay
break;
}
} }
} }
} }
}).fail(function() { }).fail(function() {
console.log("Settings:retrieveNetworkStatus: failed"); console.log("Settings:retrieveNetworkStatus: failed");
clearTimeout(self.retryRetrieveNetworkStatusDelay); clearTimeout(self.retryRetrieveNetworkStatusDelay);
self.retryRetrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus() },self.retryDelay); // retry after delay self.retryRetrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(connecting) },self.retryDelay); // retry after delay
}); });
} }
} }
@ -384,22 +440,27 @@ function SettingsWindow() {
console.log("select network: ",ssid); console.log("select network: ",ssid);
this.selectedNetwork = ssid; this.selectedNetwork = ssid;
if(this.networks == undefined || ssid == SettingsWindow.NOT_CONNECTED) { if(this.networks == undefined || ssid == SettingsWindow.NOT_CONNECTED) {
this.form.find("#passwordLabel").hide(); this.hideWiFiPassword();
this.form.find("#password").hide();
} else { } else {
var network = this.networks[ssid]; var network = this.networks[ssid];
if(network.encryption == "none") { if(network.encryption == "none") {
this.form.find("#passwordLabel").hide(); this.hideWiFiPassword();
this.form.find("#password").hide();
} else { } else {
this.form.find("#passwordLabel").show(); this.showWiFiPassword();
this.form.find("#password").show();
} }
this.form.find("#password").val(""); this.form.find("#password").val("");
} }
} }
this.showWiFiPassword = function() {
this.form.find("#passwordLabel").show();
this.form.find("#password").show();
}
this.hideWiFiPassword = function() {
this.form.find("#passwordLabel").hide();
this.form.find("#password").hide();
}
this.setClientModeState = function(state) { this.setClientModeState = function(state,msg) {
var field = this.form.find("#clientModeState"); var field = this.form.find("#clientModeState");
var btnConnect = self.form.find("#connectToNetwork"); var btnConnect = self.form.find("#connectToNetwork");
switch(state) { switch(state) {
@ -409,16 +470,44 @@ function SettingsWindow() {
break; break;
case SettingsWindow.CONNECTED: case SettingsWindow.CONNECTED:
btnConnect.removeAttr("disabled"); btnConnect.removeAttr("disabled");
var fieldText = "Connected to: "+this.currentNetwork+".";
if(this.currentLocalIP != undefined && this.currentLocalIP != "") {
var a = "<a href='http://"+this.currentLocalIP+"' target='_black'>"+this.currentLocalIP+"</a>"; var a = "<a href='http://"+this.currentLocalIP+"' target='_black'>"+this.currentLocalIP+"</a>";
field.html("Connected to: "+this.currentNetwork+". Local ip: "+a); fieldText += " Local ip: "+a;
}
field.html(fieldText);
break; break;
case SettingsWindow.CONNECTING: case SettingsWindow.CONNECTING:
btnConnect.attr("disabled", true); btnConnect.attr("disabled", true);
field.html("Connecting..."); field.html("Connecting...");
break; break;
case SettingsWindow.CONNECTING_FAILED:
btnConnect.removeAttr("disabled");
field.html(msg);
break;
} }
this.clientModeState = state; this.clientModeState = state;
} }
this.setAPModeState = function(state,msg) {
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;
}
this.connectToNetwork = function() { this.connectToNetwork = function() {
console.log("connectToNetwork"); console.log("connectToNetwork");
@ -438,19 +527,19 @@ function SettingsWindow() {
timeout: self.timeoutTime, timeout: self.timeoutTime,
success: function(response){ success: function(response){
console.log("Settings:connectToNetwork response: ",response); console.log("Settings:connectToNetwork response: ",response);
} }
}).fail(function() { }).fail(function() {
console.log("Settings:connectToNetwork: timeout (normal behaivior)"); console.log("Settings:connectToNetwork: timeout (normal behavior)");
//clearTimeout(self.retrySaveSettingsDelay); //clearTimeout(self.retrySaveSettingsDelay);
//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay //self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
}); });
} }
self.setClientModeState(SettingsWindow.CONNECTING); self.setClientModeState(SettingsWindow.CONNECTING,"");
// we delay the status retrieval because the webserver needs time to switch // after switching wifi network or creating a access point we delay the status retrieval
// because the webserver needs time to switch
clearTimeout(self.retrieveNetworkStatusDelay); clearTimeout(self.retrieveNetworkStatusDelay);
self.retrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus() },self.retrieveNetworkStatusDelayTime); // retry after delay self.retrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(true) },self.retrieveNetworkStatusDelayTime);
} }
this.createAP = function() { this.createAP = function() {
@ -465,36 +554,17 @@ function SettingsWindow() {
} }
}).fail(function() { }).fail(function() {
console.log("Settings:createAP: timeout (normal behaivior)"); console.log("Settings:createAP: timeout (normal behavior)");
//clearTimeout(self.retrySaveSettingsDelay); //clearTimeout(self.retrySaveSettingsDelay);
//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay //self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
}); });
} }
self.setAPModeState(SettingsWindow.CREATING_AP); self.setAPModeState(SettingsWindow.CREATING_AP,"");
// we delay the status retrieval because the webserver needs time to switch // after switching wifi network or creating a access point we delay the status retrieval
// because the webserver needs time to switch
clearTimeout(self.retrieveNetworkStatusDelay); clearTimeout(self.retrieveNetworkStatusDelay);
self.retrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus() },self.retrieveNetworkStatusDelayTime*3); // retry after delay self.retrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(true) },self.retrieveNetworkStatusDelayTime);
}
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;
} }
} }

2
js/main.js
View File

@ -21,7 +21,7 @@ $(function() {
if (getURLParameter("u") != "null") autoUpdate = (getURLParameter("u") == "1"); if (getURLParameter("u") != "null") autoUpdate = (getURLParameter("u") == "1");
if (wifiboxIsRemote) { if (wifiboxIsRemote) {
wifiboxURL = "http://192.168.5.1/d3dapi"; wifiboxURL = "http://192.168.5.1/cgi-bin/d3dapi";
} else { } else {
wifiboxURL = "http://" + window.location.host + "/d3dapi"; wifiboxURL = "http://" + window.location.host + "/d3dapi";
} }