mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-11-22 09:17:56 +01:00
Network ui
This commit is contained in:
parent
4d53a2ee19
commit
200052dae0
@ -1,72 +1,79 @@
|
|||||||
form {
|
form {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
input {
|
form input {
|
||||||
margin: 1px;
|
margin: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body,th,td {
|
body,th,td {
|
||||||
font-family: Arial;
|
font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
#advancedSettings {
|
form fieldset {
|
||||||
width: 96.3%;
|
|
||||||
height: 300px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
fieldset {
|
|
||||||
width: 600px;
|
width: 600px;
|
||||||
border: 1px solid rgb(187, 187, 187);
|
border: 1px solid rgb(187, 187, 187);
|
||||||
-webkit-border-radius: 5px;
|
-webkit-border-radius: 5px;
|
||||||
-moz-border-radius: 5px;
|
-moz-border-radius: 5px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
margin-bottom: 20px;
|
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;
|
margin-left: 10px;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
label {
|
form label {
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
display: inline-block;
|
display: block;
|
||||||
|
float: left;
|
||||||
|
margin: 1px 0 0 0;
|
||||||
|
clear: left;
|
||||||
}
|
}
|
||||||
textarea {
|
form div {
|
||||||
border: 1px solid rgb(144, 192, 255);
|
float: left;
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
}
|
||||||
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);
|
border: 1px solid rgb(144, 192, 255);
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
-webkit-border-radius: 4px;
|
-webkit-border-radius: 4px;
|
||||||
-moz-border-radius: 4px;
|
-moz-border-radius: 4px;
|
||||||
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;
|
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;
|
width: 250px;
|
||||||
}
|
}
|
||||||
legend {
|
form input[type="radio"] {
|
||||||
font-weight: bold;
|
margin: 4px 4px 0 0;
|
||||||
font-family: Arial;
|
|
||||||
}
|
}
|
||||||
select {
|
form textarea {
|
||||||
margin-left: -4px;
|
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;
|
width: 270px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.retractionSettings {
|
|
||||||
display: none;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
form small {
|
form small {
|
||||||
margin: 3px 0 0 0;
|
margin: 3px 0 0 0;
|
||||||
display: block;
|
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.retryDelay = 2000; // 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.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
|
// Events
|
||||||
SettingsWindow.SETTINGS_LOADED = "settingsLoaded";
|
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;
|
var self = this;
|
||||||
|
|
||||||
this.init = function(wifiboxURL) {
|
this.init = function(wifiboxURL) {
|
||||||
@ -49,6 +76,23 @@ function SettingsWindow() {
|
|||||||
self.form.submit(function (e) { self.submitwindow(e) });
|
self.form.submit(function (e) { self.submitwindow(e) });
|
||||||
|
|
||||||
self.loadSettings();
|
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) {
|
this.submitwindow = function(e) {
|
||||||
@ -86,7 +130,6 @@ function SettingsWindow() {
|
|||||||
timeout: this.timeoutTime,
|
timeout: this.timeoutTime,
|
||||||
success: function(data){
|
success: function(data){
|
||||||
console.log("Settings:loadSettings response: ",data);
|
console.log("Settings:loadSettings response: ",data);
|
||||||
// TODO: no request status?
|
|
||||||
settings = data.data;
|
settings = data.data;
|
||||||
console.log(" settings: ",settings);
|
console.log(" settings: ",settings);
|
||||||
self.fillForm();
|
self.fillForm();
|
||||||
@ -97,6 +140,9 @@ function SettingsWindow() {
|
|||||||
clearTimeout(self.retryLoadSettingsDelay);
|
clearTimeout(self.retryLoadSettingsDelay);
|
||||||
self.retryLoadSettingsDelay = setTimeout(function() { self.loadSettings() },self.retryDelay); // retry after delay
|
self.retryLoadSettingsDelay = setTimeout(function() { self.loadSettings() },self.retryDelay); // retry after delay
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.refreshNetworks();
|
||||||
|
this.retrieveNetworkStatus();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.saveSettings = function(callback) {
|
this.saveSettings = function(callback) {
|
||||||
@ -139,13 +185,13 @@ function SettingsWindow() {
|
|||||||
|
|
||||||
this.fillForm = function() {
|
this.fillForm = function() {
|
||||||
console.log("SettingsWindow:fillForm");
|
console.log("SettingsWindow:fillForm");
|
||||||
|
|
||||||
//fill form with loaded settings
|
//fill form with loaded settings
|
||||||
var selects = this.form.find("select");
|
var selects = this.form.find("select");
|
||||||
selects.each( function(index,element) {
|
selects.each( function(index,element) {
|
||||||
var element = $(element);
|
var element = $(element);
|
||||||
element.val(settings[element.attr('name')]);
|
element.val(settings[element.attr('name')]);
|
||||||
});
|
});
|
||||||
|
|
||||||
var inputs = this.form.find("input");
|
var inputs = this.form.find("input");
|
||||||
inputs.each( function(index,element) {
|
inputs.each( function(index,element) {
|
||||||
var element = $(element);
|
var element = $(element);
|
||||||
@ -160,16 +206,11 @@ function SettingsWindow() {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
var textareas = this.form.find("textarea");
|
var textareas = this.form.find("textarea");
|
||||||
console.log(textareas);
|
|
||||||
textareas.each( function(index,element) {
|
textareas.each( function(index,element) {
|
||||||
var element = $(element);
|
var element = $(element);
|
||||||
|
|
||||||
console.log("printer setting textarea: ",index,element.attr('name')); //,element);
|
|
||||||
var value = settings[element.attr('name')];
|
var value = settings[element.attr('name')];
|
||||||
element.val(value);
|
element.val(value);
|
||||||
console.log(" value: ",value);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -202,6 +243,248 @@ function SettingsWindow() {
|
|||||||
});
|
});
|
||||||
console.log(settings);
|
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>
|
||||||
|
|
||||||
<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>
|
<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="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="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>
|
<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>
|
<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>
|
||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
|
Loading…
Reference in New Issue
Block a user