loading and showing settings

This commit is contained in:
Rick Companje 2017-05-16 09:55:32 +02:00
parent f1267b93ce
commit e9da8a91f0
6 changed files with 307 additions and 4 deletions

View File

@ -99,6 +99,7 @@ module.exports = function(grunt) {
NetworkAPI: true,
InfoAPI: true,
ConfigAPI: true,
PrinterAPI: true,
UpdateAPI:true,
addToHomescreen: true
},

View File

@ -13,6 +13,7 @@
var _intro;
var _drawItem;
var _updateItem;
var _settingsItem;
var _joinNetworkItem;
var _defaultItems;
@ -36,6 +37,7 @@
_defaultItems = _list.children();
_drawItem = _list.find("#drawItem");
_updateItem = _list.find("#updateItem");
_settingsItem = _list.find("#settingsItem");
_joinNetworkItem = _list.find("#joinNetworkItem");
// make sure draw link is opened in same WebApp (added to homescreen)
@ -82,7 +84,7 @@
var introText = "";
if(status === NetworkAPI.STATUS.CONNECTED) { // online
//console.log("online");
_drawItem.find("a").text("Draw");
_drawItem.find("a").text("Draw / Sketch");
// display the right buttons
_defaultItems.toggleClass("ui-screen-hidden",false);
@ -92,13 +94,18 @@
updateLink = d3d.util.replaceURLParameters(updateLink,_boxData);
_updateItem.find("a").attr("href",updateLink);
//settingsLink
var settingsLink = _settingsItem.find("a").attr("href");
settingsLink = d3d.util.replaceURLParameters(settingsLink,_boxData);
_settingsItem.find("a").attr("href",settingsLink);
retrieveUpdateStatus();
} else { // offline
//console.log("offline");
introText = "Please connect your WiFi-Box to the internet. You can also use it offline, but then you won't be able to update.";
_drawItem.find("a").text("Draw (offline)");
_drawItem.find("a").text("Draw / Sketch (offline)");
// display the right buttons
_defaultItems.toggleClass("ui-screen-hidden",true);

129
js/SettingsPage.js Normal file
View File

@ -0,0 +1,129 @@
/*
* This file is part of the Doodle3D project (http://doodle3d.com).
*
* Copyright (c) 2013, Doodle3D
* This software is licensed under the terms of the GNU GPL v2 or later.
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
*/
(function (w) {
var _page;
var _form;
var _statusField;
var _infoField;
var _noRetainCheckbox;
var _includeBetasCheckbox;
var _submitButton;
var _updateAPI = new UpdateAPI();
var _configAPI = new ConfigAPI();
var _printerAPI = new PrinterAPI();
var _pageData = {};
var _updateStatus = {};
var PAGE_ID = "#settings";
var _self = this;
function updateFields() {
var isHeatedBed = $("#chkBed").prop("checked");
if (isHeatedBed) {
$("#grpBedTemp").show();
} else {
$("#grpBedTemp").hide();
}
}
$.mobile.document.on( "pageinit", PAGE_ID, function( event, data ) {
console.log(PAGE_ID+":pageinit");
_page = $(this);
$("#divSettings").hide();
d3d.util.showLoader();
$("#chkBed").on("change", function(data) {
updateFields();
});
$("#filamentThickness").on("change", function(data) {
console.log("filamentThickness change",$(this).val());
});
$("#bedTemperature").on("change", function(data) {
console.log("bedTemperature change",$(this).val());
});
});
$.mobile.document.on( "pagebeforeshow", PAGE_ID, function( event, data ) {
_pageData = d3d.util.getPageParams(PAGE_ID);
if(_pageData === undefined) {
console.log("ERROR",PAGE_ID,"_pageData undefined");
$.mobile.changePage("#boxes");
return;
}
var boxURL = "http://"+_pageData.localip;
_configAPI.init(boxURL);
_printerAPI.init(boxURL);
_configAPI.loadAll(function(successData) {
var printerType = successData["printer.type"];
var printerStartGCode = successData["printer.startcode"];
var printerEndGCode = successData["printer.endcode"];
var heatedBedEnabled = successData["printer.heatedbed"];
var bedTemperature = successData["printer.bed.temperature"];
var dimensionsX = successData["printer.dimensions.x"];
var dimensionsY = successData["printer.dimensions.y"];
var dimensionsZ = successData["printer.dimensions.z"];
var filamentThickness = successData["printer.filamentThickness"];
var nozzleTemperature = successData["printer.temperature"];
$('#chkBed').prop('checked', heatedBedEnabled);
$('#chkBed').val('on').flipswitch('refresh');
$('#bedTemperature').val(bedTemperature);
$('#dimensionsX').val(dimensionsX);
$('#dimensionsY').val(dimensionsY);
$('#dimensionsZ').val(dimensionsZ);
$('#filamentThickness').val(filamentThickness);
$('#startgcode').val(printerStartGCode);
$('#endgcode').val(printerEndGCode);
$('#nozzleTemperature').val(nozzleTemperature);
_printerAPI.listAll(function(printers) {
console.log(PAGE_ID,'page init',data);
$("#lstPrinters").empty();
for (var id in printers) {
var selected = (id===printerType) ? "selected " : "";
$("#lstPrinters").append("<option "+selected+" value='"+id+"'>"+printers[id]+"</option>");
}
$("#lstPrinters").selectmenu("refresh", true);
$("#divSettings").show();
d3d.util.hideLoader();
},function(failData) { //_printerAPI.listAll
console.log(PAGE_ID,'FAIL _printerAPI.listall',data);
$.mobile.changePage("#boxes");
return;
});
},function(failData) {
console.log("FAIL loadPrinterType",failData);
$.mobile.changePage("#boxes");
return;
});
});
$.mobile.document.on( "pagebeforehide", PAGE_ID, function( event, data ) {
});
})(window);

View File

@ -61,6 +61,17 @@ function ConfigAPI() {
if(failedHandler) failedHandler();
});
};
this.loadSetting = function(settingName,completeHandler,failedHandler) {
this.load(settingName+"=",function(successData) {
completeHandler(successData[settingName]);
},failedHandler);
}
this.loadPrinterType = function(completeHandler,failedHandler) {
this.loadSetting("printer.type",completeHandler,failedHandler);
}
this.save = function(newSettings,completeHandler,failedHandler) {
//console.log("ConfigAPI:save");
$.ajax({

49
js/api/PrinterAPI.js Normal file
View File

@ -0,0 +1,49 @@
/*
* This file is part of the Doodle3D project (http://doodle3d.com).
*
* Copyright (c) 2013, Doodle3D
* This software is licensed under the terms of the GNU GPL v2 or later.
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
*/
function PrinterAPI() {
var _apiPath = "/d3dapi";
var _apiCGIPath = "/cgi-bin"+_apiPath;
var _wifiboxURL;
var _wifiboxCGIBinURL;
var _timeoutTime = 3000;
var _configAPI = new ConfigAPI(); // needed for wifiboxid workaround
var _self = this;
this.init = function(wifiboxURL) {
console.log("InfoAPI:init");
_wifiboxURL = wifiboxURL+_apiPath;
_wifiboxCGIBinURL = wifiboxURL+_apiCGIPath;
_configAPI.init(wifiboxURL);
}
this.listAll = function(completeHandler,failedHandler) {
console.log("listAll",_wifiboxURL);
$.ajax({
url: _wifiboxURL + "/printer/listall",
type: "GET",
dataType: 'json',
timeout: _timeoutTime,
success: function(response){
if(response.status == "error" || response.status == "fail") {
if(failedHandler) failedHandler(response);
} else {
completeHandler(response.data.printers);
}
}
}).fail(function() {
if(failedHandler) failedHandler();
});
};
}

View File

@ -15,6 +15,10 @@
<link rel="icon" type="image/ico" href="./img/favicon.ico">
<!-- scripts -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> -->
<!-- <script src="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.js"></script> -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="js/doodle3d-server.min.js" type="text/javascript"></script>
@ -22,6 +26,7 @@
<!-- stylesheets -->
<!-- <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.css" /> -->
<link rel="stylesheet" href="css/doodle3d-server.min.css"/>
</head>
@ -61,9 +66,11 @@
<p class="intro"></p>
<ul data-role="listview">
<li id="drawItem"><a href="#draw">Draw</a></li>
<li id="updateItem"><a href="#update">Update<span class="ui-li-count"></span></a></li>
<!-- <li id="transformItem"><a href="http://transform.doodle3d.com">Doodle3D Transform</a></li> -->
<li id="settingsItem" data-icon="gear"><a href="#settings">Settings</a></li>
<li id="updateItem"><a href="#update">Firmware Update<span class="ui-li-count"></span></a></li>
<li id="joinNetworkItem"><a href="#join_network">Join network </a></li>
<li><a href="#yourapp">Your app here?</a></li>
<!-- <li><a href="#yourapp">Your app here?</a></li> -->
</ul>
</div><!-- /content -->
</div><!-- /page -->
@ -263,6 +270,105 @@
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="settings">
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
<div data-role="header">
<a href="../toolbar/" data-rel="back"
class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>Settings</h1>
</div><!-- /header -->
<div id="divSettings" role="main" class="ui-content">
<!-- <p class="intro">test</p> -->
<a href="index.html" data-icon="check" data-role="button" data-inline="true" data-theme="c">Save settings</a>
<!-- <div align="right"> -->
<!-- <a href="index.html" data-role="button" class="ui-btn-right ui-btn-inline">Save</a> -->
<!-- </div> -->
<!-- data-theme="a" data-inline="true" -->
<!-- <a href="#" class="ui-btn-right ui-btn-inline">Login</a> -->
<div data-role="collapsible" data-collapsed="false">
<h3>Printer settings</h3>
<div data-role="fieldcontain">
<label for="name">3D Printer model:</label>
<select id="lstPrinters"></select>
</div>
<div data-role="fieldcontain">
<!-- <label for="name"></label>
<label>
<input type="checkbox" name="checkbox-0 ">Enable heated bed
</label> -->
    <label for="chkBed">Heated bed:</label>
    <input type="checkbox" data-role="flipswitch" name="chkBed" id="chkBed">
</div>
<div id="grpBedTemp" data-role="fieldcontain">
<label for="bedTemperature">Bed temperature (&deg;C):</label>
<input type="range" name="bedTemperature" id="bedTemperature" value="70" min="20" max="120" data-highlight="true" />
</div>
<div id="grpDimensions" data-role="fieldcontain">
<label for="name">Dimensions XYZ (mm):</label>
<div class="ui-grid-b">
<div class="ui-block-a"><input placeholder="x" name="dimensionsX" id="dimensionsX" type="number" data-mini="true"/></div>
<div class="ui-block-b"><input placeholder="y" name="dimensionsY" id="dimensionsY" type="number" data-mini="true"/></div>
<div class="ui-block-c"><input placeholder="z" name="dimensionsZ" id="dimensionsZ" type="number" data-mini="true"/></div>
</div>
</div>
</div>
<div data-role="collapsible" data-collapsed="false">
<h3>Material settings</h3>
<div data-role="fieldcontain">
<label for="name">Filament thickness (mm):</label>
<input type="number" id="filamentThickness" name="filamentThickness" data-mini="true"/>
</div>
<div data-role="fieldcontain">
<label for="nozzleTemperature">Nozzle temperature (&deg;C):</label>
<input type="range" name="nozzleTemperature" id="nozzleTemperature" value="200" min="20" max="260" data-highlight="true" />
</div>
</div>
<div data-role="collapsible">
<h3>GCODE settings</h3>
<div data-role="fieldcontain">
<label for="startgcode">Start gcode:</label>
<textarea name="startgcode" id="startgcode"></textarea>
</div>
<div data-role="fieldcontain">
<label for="endgcode">End gcode:</label>
<textarea name="endgcode" id="endgcode"></textarea>
</div>
<div data-role="collapsible" data-mini="true">
<h3>Help</h3>
<small>
The following texts are replaced:
<dl>
<dt>{printingTemp}</dt><dd>Printing temperature</dd>
<dt>{printingBedTemp}</dt><dd>Printing bed temperature</dd>
<dt>{preheatTemp}</dt><dd>Preheat temperature</dd>
<dt>{preheatBedTemp}</dt><dd>Preheat bed temperature</dd>
<dt>{printerType}</dt><dd>Printer type</dd>
<dt>{if heatedBed}</dt><dd>Enable line if printer has heated bed</dd>
</dl>
</small>
</div>
</div>
</div>
</div>
<script>
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar();