loading and showing settings

Gruntfile.js

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

js/BoxPage.js

@@ -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);

js/SettingsPage.js

@@ -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);
+

js/api/ConfigAPI.js

@@ -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({

js/api/PrinterAPI.js

@@ -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();
+		});
+	};
+}

www/index.html

@@ -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();