mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-11-22 01:07:56 +01:00
Network ui
This commit is contained in:
peteruithoven
parent
4d53a2ee19
commit
200052dae0
@ -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 {
|
||||
width: 96.3%;
|
||||
height: 300px;
|
||||
padding: 10px;
|
||||
}
|
||||
fieldset {
|
||||
form 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 {
|
||||
border: 1px solid rgb(144, 192, 255);
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
form div {
|
||||
float: left;
|
||||
}
|
||||
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 {
|
||||
font-weight: bold;
|
||||
font-family: Arial;
|
||||
form input[type="radio"] {
|
||||
margin: 4px 4px 0 0;
|
||||
}
|
||||
select {
|
||||
margin-left: -4px;
|
||||
form textarea {
|
||||
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;
|
||||
}
|
||||
@ -31,10 +31,37 @@ 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) {
|
||||
@ -49,6 +76,23 @@ function SettingsWindow() {
|
||||
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) {
|
||||
@ -86,7 +130,6 @@ function SettingsWindow() {
|
||||
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();
|
||||
@ -97,6 +140,9 @@ function SettingsWindow() {
|
||||
clearTimeout(self.retryLoadSettingsDelay);
|
||||
self.retryLoadSettingsDelay = setTimeout(function() { self.loadSettings() },self.retryDelay); // retry after delay
|
||||
});
|
||||
|
||||
this.refreshNetworks();
|
||||
this.retrieveNetworkStatus();
|
||||
}
|
||||
|
||||
this.saveSettings = function(callback) {
|
||||
@ -139,13 +185,13 @@ function SettingsWindow() {
|
||||
|
||||
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);
|
||||
@ -160,16 +206,11 @@ 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);
|
||||
});
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
/*************************
|
||||
|
||||
@ -85,11 +85,35 @@
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Network settings</legend>
|
||||
<label>Connection type:</label>
|
||||
<div>
|
||||
<label for="ap"><input type="radio" name="connectiontype" value="ap" id="ap">Access point mode</label>
|
||||
<label for="client"><input type="radio" name="connectiontype" value="client" id="client">Client mode</label>
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user