mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-11-22 01:07:56 +01:00
UpdatePanel
This commit is contained in:
peteruithoven
parent
eb2f941639
commit
48a602e856
@ -131,6 +131,7 @@
|
||||
</div>
|
||||
<script src="js/libs/jquery-1.8.3.min.js"></script>
|
||||
<script src="js/SettingsWindow.js"></script>
|
||||
<script src="js/UpdatePanel.js"></script>
|
||||
<script src="js/d3dServerInterfacing.js"></script>
|
||||
<script src="js/verticalShapes.js"></script>
|
||||
<script src="js/buttonbehaviors.js"></script>
|
||||
@ -143,7 +144,7 @@
|
||||
<script src="js/Thermometer.js"></script>
|
||||
<script src="js/utils.js"></script>
|
||||
<script src="js/sidebar.js"></script>
|
||||
<script src="js/message.js"></script>
|
||||
<script src="js/Message.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -49,7 +49,7 @@ function SettingsWindow() {
|
||||
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.retrieveNetworkStatusDelay; // setTimout delay
|
||||
@ -68,7 +68,6 @@ function SettingsWindow() {
|
||||
SettingsWindow.NO_AP = "no ap";
|
||||
SettingsWindow.AP = "ap";
|
||||
SettingsWindow.CREATING_AP = "creating ap";
|
||||
|
||||
|
||||
SettingsWindow.API_CONNECTING_FAILED = -1
|
||||
SettingsWindow.API_NOT_CONNECTED = 0
|
||||
@ -77,6 +76,15 @@ function SettingsWindow() {
|
||||
SettingsWindow.API_CREATING = 3
|
||||
SettingsWindow.API_CREATED = 4
|
||||
|
||||
// network mode
|
||||
SettingsWindow.NETWORK_MODE_NEITHER = "neither";
|
||||
SettingsWindow.NETWORK_MODE_CLIENT = "clientMode";
|
||||
SettingsWindow.NETWORK_MODE_ACCESS_POINT = "accessPointMode";
|
||||
|
||||
this.networkMode = SettingsWindow.NETWORK_MODE_NEITHER;
|
||||
|
||||
this.updatePanel = new UpdatePanel();
|
||||
|
||||
var self = this;
|
||||
|
||||
this.init = function(wifiboxURL,wifiboxCGIBinURL) {
|
||||
@ -108,6 +116,10 @@ function SettingsWindow() {
|
||||
btnConnect.on('touchstart mousedown',self.connectToNetwork);
|
||||
btnCreate.on('touchstart mousedown',self.createAP);
|
||||
networkSelector.change(self.networkSelectorChanged);
|
||||
|
||||
// update panel
|
||||
var $updatePanelElement = self.form.find("#updatePanel");
|
||||
self.updatePanel.init(wifiboxURL,$updatePanelElement);
|
||||
});
|
||||
}
|
||||
this.submitwindow = function(e) {
|
||||
@ -360,6 +372,8 @@ function SettingsWindow() {
|
||||
//console.log(" not connected & not a access point");
|
||||
self.apFieldSet.show();
|
||||
self.clientFieldSet.show();
|
||||
|
||||
self.networkMode = SettingsWindow.NETWORK_MODE_NEITHER;
|
||||
break;
|
||||
case SettingsWindow.API_CONNECTING_FAILED:
|
||||
case SettingsWindow.API_CONNECTING:
|
||||
@ -380,7 +394,7 @@ function SettingsWindow() {
|
||||
} else {
|
||||
self.currentLocalIP = ""
|
||||
}
|
||||
|
||||
self.networkMode = SettingsWindow.NETWORK_MODE_CLIENT;
|
||||
break;
|
||||
case SettingsWindow.API_CREATING:
|
||||
case SettingsWindow.API_CREATED:
|
||||
@ -398,8 +412,10 @@ function SettingsWindow() {
|
||||
if(data.ssid && data.status == SettingsWindow.API_CREATED) {
|
||||
self.currentAP = data.ssid;
|
||||
}
|
||||
self.networkMode = SettingsWindow.NETWORK_MODE_ACCESS_POINT;
|
||||
break;
|
||||
}
|
||||
self.updatePanel.setNetworkMode(self.networkMode);
|
||||
|
||||
// update status message
|
||||
switch(data.status) {
|
||||
@ -456,6 +472,8 @@ function SettingsWindow() {
|
||||
|
||||
this.selectNetwork = function(ssid) {
|
||||
console.log("select network: ",ssid);
|
||||
if(ssid == "") return;
|
||||
console.log(" checked");
|
||||
this.selectedNetwork = ssid;
|
||||
if(this.networks == undefined || ssid == SettingsWindow.NOT_CONNECTED) {
|
||||
this.hideWiFiPassword();
|
||||
|
||||
230
www/js/UpdatePanel.js
Normal file
230
www/js/UpdatePanel.js
Normal file
@ -0,0 +1,230 @@
|
||||
function UpdatePanel() {
|
||||
this.wifiboxURL;
|
||||
this.element;
|
||||
|
||||
this.statusCheckInterval = 1000;
|
||||
this.statusCheckDelayer; // setTimout instance
|
||||
this.installedDelay = 60*1000; // Since we can't retrieve status during installation we show the installed text after a fixed delay
|
||||
this.installedDelayer; // setTimout instance
|
||||
this.retryDelay = 1000;
|
||||
this.retryDelayer; // setTimout instance
|
||||
//this.timeoutTime = 3000;
|
||||
|
||||
this.canUpdate = false;
|
||||
this.currentVersion = "";
|
||||
this.newestVersion;
|
||||
this.progress;
|
||||
this.imageSize;
|
||||
|
||||
// states from api, see Doodle3D firmware src/script/d3d-updater.lua
|
||||
UpdatePanel.NONE = 1; // default state
|
||||
UpdatePanel.DOWNLOADING = 2;
|
||||
UpdatePanel.DOWNLOAD_FAILED = 3;
|
||||
UpdatePanel.IMAGE_READY = 4; // download successfull and checked
|
||||
UpdatePanel.INSTALLING = 5;
|
||||
UpdatePanel.INSTALLED = 6;
|
||||
UpdatePanel.INSTALL_FAILED = 7;
|
||||
|
||||
this.state; // update state from api
|
||||
this.stateText = ""; // update state text from api
|
||||
|
||||
this.networkMode; // network modes from SettingsWindow
|
||||
|
||||
var self = this;
|
||||
|
||||
this.init = function(wifiboxURL,updatePanelElement) {
|
||||
|
||||
this.wifiboxURL = wifiboxURL;
|
||||
|
||||
this.element = updatePanelElement;
|
||||
this.btnUpdate = this.element.find("#update");
|
||||
this.statusDisplay = this.element.find("#updateState");
|
||||
this.infoDisplay = this.element.find("#updateInfo");
|
||||
|
||||
this.btnUpdate.click(this.update);
|
||||
|
||||
this.checkStatus(false);
|
||||
}
|
||||
|
||||
this.update = function() {
|
||||
console.log("UpdatePanel:update");
|
||||
self.downloadUpdate();
|
||||
}
|
||||
this.downloadUpdate = function() {
|
||||
console.log("UpdatePanel:downloadUpdate");
|
||||
$.ajax({
|
||||
url: self.wifiboxURL + "/update/download",
|
||||
type: "POST",
|
||||
dataType: 'json',
|
||||
success: function(response){
|
||||
console.log("UpdatePanel:downloadUpdate response: ",response);
|
||||
}
|
||||
}).fail(function() {
|
||||
console.log("UpdatePanel:downloadUpdate: failed");
|
||||
});
|
||||
self.setState(UpdatePanel.DOWNLOADING);
|
||||
self.startCheckingStatus();
|
||||
}
|
||||
this.installUpdate = function() {
|
||||
console.log("UpdatePanel:installUpdate");
|
||||
self.stopCheckingStatus();
|
||||
$.ajax({
|
||||
url: self.wifiboxURL + "/update/install",
|
||||
type: "POST",
|
||||
dataType: 'json',
|
||||
success: function(response){
|
||||
console.log("UpdatePanel:installUpdate response: ",response);
|
||||
}
|
||||
}).fail(function() {
|
||||
console.log("UpdatePanel:installUpdate: no respons (there shouldn't be)");
|
||||
});
|
||||
self.setState(UpdatePanel.INSTALLING);
|
||||
|
||||
clearTimeout(self.installedDelayer);
|
||||
self.installedDelayer = setTimeout(function() { self.setState(UpdatePanel.INSTALLED) },self.installedDelay);
|
||||
}
|
||||
|
||||
this.startCheckingStatus = function() {
|
||||
clearTimeout(self.statusCheckDelayer);
|
||||
clearTimeout(self.retryDelayer);
|
||||
self.statusCheckDelayer = setTimeout(function() { self.checkStatus(true) },self.statusCheckInterval);
|
||||
}
|
||||
this.stopCheckingStatus = function() {
|
||||
clearTimeout(self.statusCheckDelayer);
|
||||
clearTimeout(self.retryDelayer);
|
||||
}
|
||||
this.checkStatus = function(keepChecking) {
|
||||
if (!communicateWithWifibox) return;
|
||||
$.ajax({
|
||||
url: self.wifiboxURL + "/update/status",
|
||||
type: "GET",
|
||||
dataType: 'json',
|
||||
//timeout: self.timeoutTime,
|
||||
success: function(response){
|
||||
console.log("UpdatePanel:checkStatus response: ",response);
|
||||
|
||||
// Keep checking ?
|
||||
if(keepChecking) {
|
||||
switch(self.state){
|
||||
case UpdatePanel.DOWNLOADING:
|
||||
case UpdatePanel.INSTALLING:
|
||||
clearTimeout(self.statusCheckDelayer);
|
||||
self.statusCheckDelayer = setTimeout(function() { self.checkStatus(keepChecking) },self.statusCheckInterval);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if(response.status != "error") {
|
||||
var data = response.data;
|
||||
self.handleStatusData(data);
|
||||
}
|
||||
}
|
||||
}).fail(function() {
|
||||
//console.log("UpdatePanel:checkStatus: failed");
|
||||
if(keepChecking) {
|
||||
clearTimeout(self.retryDelayer);
|
||||
self.retryDelayer = setTimeout(function() { self.checkStatus(keepChecking) },self.retryDelay); // retry after delay
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.handleStatusData = function(data) {
|
||||
//console.log("UpdatePanel:handleStatusData");
|
||||
self.canUpdate = data.can_update;
|
||||
|
||||
if(self.currentVersion != data.current_version || self.newestVersion != data.newest_version) {
|
||||
self.currentVersion = data.current_version;
|
||||
self.newestVersion = data.newest_version;
|
||||
self.updateInfoDisplay();
|
||||
}
|
||||
|
||||
self.stateText = data.state_text;
|
||||
self.progress = data.progress; // not always available
|
||||
self.imageSize = data.image_size; // not always available
|
||||
|
||||
self.setState(data.state_code);
|
||||
|
||||
switch(this.state){
|
||||
case UpdatePanel.IMAGE_READY:
|
||||
self.installUpdate();
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.setState = function(newState) {
|
||||
if(this.state == newState) return;
|
||||
console.log("UpdatePanel:setState: ",this.state," > ",newState,"(",this.stateText,") (networkMode: ",self.networkMode,") (newestVersion: ",self.newestVersion,")");
|
||||
this.state = newState;
|
||||
|
||||
// download button
|
||||
// if there isn't newestVersion data something went wrong,
|
||||
// probably accessing the internet
|
||||
if(self.newestVersion != undefined) {
|
||||
switch(this.state){
|
||||
case UpdatePanel.NONE:
|
||||
case UpdatePanel.DOWNLOAD_FAILED:
|
||||
case UpdatePanel.INSTALL_FAILED:
|
||||
if(self.canUpdate) {
|
||||
self.btnUpdate.removeAttr("disabled");
|
||||
} else {
|
||||
self.btnUpdate.attr("disabled", true);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
self.btnUpdate.attr("disabled", true);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
self.btnUpdate.attr("disabled", true);
|
||||
}
|
||||
this.updateStatusDisplay();
|
||||
}
|
||||
this.updateStatusDisplay = function() {
|
||||
var text = "";
|
||||
if(self.newestVersion != undefined) {
|
||||
switch(this.state){
|
||||
case UpdatePanel.NONE:
|
||||
if(self.canUpdate) {
|
||||
text = "Update(s) available.";
|
||||
} else {
|
||||
text = "You're up to date.";
|
||||
}
|
||||
break;
|
||||
case UpdatePanel.DOWNLOADING:
|
||||
text = "Downloading update...";
|
||||
break;
|
||||
case UpdatePanel.DOWNLOAD_FAILED:
|
||||
text = "Downloading update failed.";
|
||||
break;
|
||||
case UpdatePanel.IMAGE_READY:
|
||||
text = "Update downloaded.";
|
||||
break;
|
||||
case UpdatePanel.INSTALLING:
|
||||
text = "Installing update... (will take a minute)";
|
||||
break;
|
||||
case UpdatePanel.INSTALLED:
|
||||
text = "Update complete, please <a href='javascript:location.reload(true);'>refresh Page</a>.";
|
||||
break;
|
||||
case UpdatePanel.INSTALL_FAILED:
|
||||
text = "Installing update failed.";
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
if(self.networkMode == SettingsWindow.NETWORK_MODE_ACCESS_POINT) {
|
||||
text = "Can't access internet in access point mode.";
|
||||
} else {
|
||||
text = "Can't access internet.";
|
||||
}
|
||||
}
|
||||
this.statusDisplay.html(text);
|
||||
}
|
||||
this.updateInfoDisplay = function() {
|
||||
var text = "Current version: "+self.currentVersion+". ";
|
||||
if(self.canUpdate) {
|
||||
text += "Latest version: "+self.newestVersion+".";
|
||||
}
|
||||
self.infoDisplay.text(text);
|
||||
}
|
||||
this.setNetworkMode = function(networkMode) {
|
||||
self.networkMode = networkMode;
|
||||
}
|
||||
}
|
||||
@ -55,7 +55,7 @@
|
||||
</select>
|
||||
</fieldset>-->
|
||||
|
||||
<fieldset id="printersettings">
|
||||
<fieldset id="printersettings">
|
||||
<legend>Print settings</legend>
|
||||
<label for="layerHeight">Layer height:</label><input id="layerHeight" type="number" step="0.01" class="small" name="printer.layerHeight">mm<br>
|
||||
<label for="wallThickness">Wall thickness:</label><input id="wallThickness" type="number" step="0.1" class="small" name="printer.wallThickness">mm<br>
|
||||
@ -78,68 +78,71 @@
|
||||
<label for="heatupTemperature">Auto preaheat temperature:</label><input id="heatupTemperature" type="number" class="small" name="printer.heatup.temperature"><br>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="doodlesettings">
|
||||
<legend>Doodle3D settings</legend>
|
||||
<label for="simplifyMinDistance">Minimal line distance:</label><input id="simplifyMinDistance" type="number" class="small" name="doodle3d.simplify.minDistance">px<br>
|
||||
<label for="maxObjectHeight">Max object height:</label><input id="maxObjectHeight" type="number" class="small" name="printer.maxObjectHeight">mm<br>
|
||||
<label for="screenToMillimeterScale">Pixels to mm scale:</label><input id="screenToMillimeterScale" type="number" step="0.1" class="small" name="printer.screenToMillimeterScale"><br>
|
||||
</fieldset>
|
||||
<fieldset id="doodlesettings">
|
||||
<legend>Doodle3D settings</legend>
|
||||
<label for="simplifyMinDistance">Minimal line distance:</label><input id="simplifyMinDistance" type="number" class="small" name="doodle3d.simplify.minDistance">px<br>
|
||||
<label for="maxObjectHeight">Max object height:</label><input id="maxObjectHeight" type="number" class="small" name="printer.maxObjectHeight">mm<br>
|
||||
<label for="screenToMillimeterScale">Pixels to mm scale:</label><input id="screenToMillimeterScale" type="number" step="0.1" class="small" name="printer.screenToMillimeterScale"><br>
|
||||
</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>
|
||||
<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="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>
|
||||
<br>
|
||||
<label for="apKey">Password:</label><input type="text" class="large" name="network.ap.key" id="apKey"> <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>
|
||||
<input type="button" name="create" value="Create" class="button" id="createAP"/>
|
||||
<span id="apModeState"></span><br/>
|
||||
<br/>
|
||||
<small>When you can't connect to your device, you can always use an ethernet cable and go to <a href="http://connect.doodle3d.com">connect.doodle3d.com</a>.</small>
|
||||
<legend>Access point settings</legend>
|
||||
<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>
|
||||
<br>
|
||||
<label for="apKey">Password:</label><input type="text" class="large" name="network.ap.key" id="apKey"> <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>
|
||||
<input type="button" name="create" value="Create" class="button" id="createAP"/>
|
||||
<span id="apModeState"></span><br/>
|
||||
<br/>
|
||||
<small>When you can't connect to your device, you can always use an ethernet cable and go to <a href="http://connect.doodle3d.com">connect.doodle3d.com</a>.</small>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="clientSettings">
|
||||
<legend>Client mode settings</legend>
|
||||
<legend>Client mode settings</legend>
|
||||
|
||||
<label for="wifiboxid">Wi-Fi box id*:</label><input type="text" name="network.cl.wifiboxid" id="wifiboxid"><br>
|
||||
<small>* Is used on <a href="http://connect.doodle3d.com">connect.doodle3d.com</a>. <br/>
|
||||
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>
|
||||
<br>
|
||||
<label for="network">Network:</label>
|
||||
<select id="network" name="network.client.network">
|
||||
</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><br/>
|
||||
<br/>
|
||||
<small>When you can't connect to your device, you can always use an ethernet cable and go to <a href="http://connect.doodle3d.com">connect.doodle3d.com</a>.</small>
|
||||
</fieldset>
|
||||
<label for="wifiboxid">Wi-Fi box id*:</label><input type="text" name="network.cl.wifiboxid" id="wifiboxid"><br>
|
||||
<small>* Is used on <a href="http://connect.doodle3d.com">connect.doodle3d.com</a>. <br/>
|
||||
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>
|
||||
<br>
|
||||
<label for="network">Network:</label>
|
||||
<select id="network" name="network.client.network"></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><br/>
|
||||
<br/>
|
||||
<small>When you can't connect to your device, you can always use an ethernet cable and go to <a href="http://connect.doodle3d.com">connect.doodle3d.com</a>.</small>
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="updatePanel">
|
||||
<legend>Update</legend>
|
||||
<input type="button" name="update" value="Update" class="button" id="update"/>
|
||||
<span id="updateState"></span><br/>
|
||||
<small id="updateInfo"></small>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>GCODE settings</legend>
|
||||
<div class="startgcode_left">
|
||||
<label for="startgcode">Start:</label><br/>
|
||||
<textarea id="startgcode" class="gcode" name="printer.startgcode">
|
||||
</textarea>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<label for="endgcode">End:</label><br/>
|
||||
<textarea id="endgcode" class="gcode" name="printer.endgcode">
|
||||
</textarea>
|
||||
</div>
|
||||
<small>The text <em>{printingTemp}</em> will be replaced by the printing temperature and <em>{preheatTemp}</em> will be replaced by the preaheat temperature.</small>
|
||||
<legend>GCODE settings</legend>
|
||||
<div class="startgcode_left">
|
||||
<label for="startgcode">Start:</label><br/>
|
||||
<textarea id="startgcode" class="gcode" name="printer.startgcode"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label for="endgcode">End:</label><br/>
|
||||
<textarea id="endgcode" class="gcode" name="printer.endgcode"></textarea>
|
||||
</div>
|
||||
<small>The text <em>{printingTemp}</em> will be replaced by the printing temperature and <em>{preheatTemp}</em> will be replaced by the preaheat temperature.</small>
|
||||
</fieldset>
|
||||
</form><br/>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user