0
0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-22 01:07:56 +01:00

added a settings popup -> the gearbox icon botomright is now clickable -> a settings popup will appear, showing various 3d printer settings. These settings are partially loaded from and saved back to the wifibox

This commit is contained in:
Adriaan Wormgoor 2013-07-28 02:47:42 +02:00
parent f439592faf
commit cbbe820d77
5 changed files with 516 additions and 0 deletions

60
css/settings.css Normal file
View File

@ -0,0 +1,60 @@
form {
margin: 10px;
}
input {
margin: 1px;
}
body,th,td {
font-family: Arial;
font-size: 13px;
}
#advancedSettings {
width: 96.3%;
height: 300px;
padding: 10px;
}
fieldset {
width: 600px;
border: 1px solid black;
border-radius: 10px;
margin-bottom: 20px;
/*padding-left: 20px;*/
}
fieldset legend {
margin-left: 10px;
}
label {
min-width: 150px;
display: inline-block;
}
textarea {
border-radius: 10px;
}
input[type="text"] {
border: 1px solid black;
margin-right: 5px;
}
input[type="text"].small {
width: 50px;
}
input[type="text"].large {
width: 250px;
}
legend {
font-weight: bold;
font-family: Arial;
}
select {
margin-left: -4px;
}
textarea.gcode {
width: 270px;
height: 150px;
margin-right: 20px;
}
.retractionSettings {
display: none;
margin-top: 5px;
}

73
css/settingsPopup.css Normal file
View File

@ -0,0 +1,73 @@
#contentOverlay {
background-color: rgba(255, 255, 255, 0.65);
top: 0px;
left: 0px;
width: 1024px;
height: 100%;
z-index: 10;
position: absolute;
display:table;
}
.contentOverlayHidden {
display:none;
}
#settingsContainer {
display: table-cell;
/*text-align: center;*/
vertical-align: middle;
}
#settings {
position: relative;
background-color: #fff;
border: 2px solid #222;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
z-index: 15;
margin: 0 auto;
padding: 25px;
width: 850px;
height: 450px;
/*overflow: scroll;*/
/*overflow-y: hidden;*/
-moz-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
-webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
overflow: hidden;
}
#settings header {
height: 44px;
}
div.content {
margin: 15px 0px;
height: 388px;
display: table;
}
div.content > div {
height: 100%;
}
div.content > div.settings {
border: 1px solid #333;
width: 725px;
overflow: scroll;
max-height: 368px;
overflow-x: hidden;
padding: 10px 10px 10px 10px;
}
div.content > div.buttons {
display: table-cell;
vertical-align: bottom;
width: 125px;
}
div.content .btnOK {
width: 85px;
height: 86px;
background: url('../img/buttons/btnOk_settings.png') no-repeat;
margin: 10px auto;
}

BIN
img/settings_lable.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@ -1,3 +1,139 @@
var wifiboxURL = "http://192.168.5.1/cgi-bin/d3dapi";
var settings = {
layerHeight: 0.2,
wallThickness: 0.6,
filamentThickness: 2.89,
speed: 50,
travelSpeed: 200,
autoWarmup: true,
firstLayerSlow: true,
useSubLayers: true,
useRetraction: true,
retractionAmount: 2,
retractionMinDistance: 1,
retractionSpeed: 250,
networkIP: "192.168.10.1",
networkNetmask: "255.255.255.0",
networkSsid: "d3d-ap-%%MAC_ADDR_TAIL%%"
}
var settingsForm = $("#settingsForm");
settingsForm.submit(function(e) {
e.preventDefault();
saveSettings();
return false;
})
function initSettingsPopup() {
console.log("f:initSettingsPopup()");
$("#contentOverlay").hide();
$("div.content .btnOK").click(function(e) {
e.preventDefault();
e.stopPropagation();
// TODO something like a callback or feedback that saving went well / or failed
saveSettings();
$("#contentOverlay").fadeOut(375, function() {
document.body.addEventListener('touchmove',prevent,false);
});
console.log("button OK in settings popup pressed");
});
}
function showSettings() {
console.log("f:showSettings()");
$("#contentOverlay").fadeIn(375, function() {
console.log("#contentOverlay faded in...");
loadSettings();
document.body.removeEventListener('touchmove',prevent,false);
});
}
function loadSettings() {
console.log("f:loadSettings() >> getting new data...");
$.get(wifiboxURL + "/config/all", {}, function(data) {
// console.log("f:loadSettings()");
var settings = JSON.parse(data).data;
// var printer_layerHeight = settings["printer.layerHeight"];
// var printer_autoWarmup = settings["printer.autoWarmUp"];
console.log("print_layerHeight = " + settings["printer.layerHeight"]);
console.log("printer_autoWarmup = " + settings["printer.autoWarmUp"] + ", type: " + (typeof settings["printer.autoWarmUp"]));
console.log("printer_useSubLayers = " + settings["printer.useSubLayers"] + " type: " + (typeof settings["printer.useSubLayers"]));
$("#formpje input[name='printer.layerHeight']").attr('value', settings["printer.layerHeight"]);
// printer settings
$('#autoWarmUp').prop('checked', settings["printer.autoWarmUp"]);
$('#firstLayerSlow').prop('checked', settings["printer.firstLayerSlow"]);
$('#useSubLayers').prop('checked', settings["printer.useSubLayers"]);
$("#layerHeight").attr('value', settings["printer.layerHeight"]);
$("#wallThickness").attr('value', settings["printer.wallThickness"]);
$("#filamentThickness").attr('value', settings["printer.filamentThickness"]);
$("#speed").attr('value', settings["printer.speed"]);
$("#travelSpeed").attr('value', settings["printer.travelSpeed"]);
$("#retractionAmount").attr('value', settings["printer.retraction.amount"]);
$("#retractionMinDistance").attr('value', settings["printer.retraction.minDistance"]);
$("#retractionSpeed").attr('value', settings["printer.retraction.speed"]);
// wifi settings
$("#ipaddress").attr('value', settings["network.ap.address"]);
$("#netmask").attr('value', settings["network.ap.netmask"]);
$("#ssid").attr('value', settings["network.ap.ssid"]);
// network.ap.address: "192.168.10.1"
// network.ap.netmask: "255.255.255.0"
// network.ap.ssid: "d3d-ap-%%MAC_ADDR_TAIL%%"
});
}
function saveSettings(callback) {
console.log("settings form submitted");
console.log(" printer.layerHeight:" + $("#formpje input[name='printer.layerHeight']").attr('value'));
console.log(" first layer slow (checkbox):" + $('#firstLayerSlow').prop('checked'));
console.log(" use sublayers (checkbox):" + $('#useSubLayers').prop('checked'));
$.post(
wifiboxURL + "/config",
{
"printer.autoWarmUp" : ($('#autoWarmUp').prop('checked') == true) ? 1 : 0,
"printer.firstLayerSlow": ($('#firstLayerSlow').prop('checked') == true) ? 1 : 0,
"printer.useSubLayers": ($('#useSubLayers').prop('checked') == true) ? true : false,
// "printer.useSubLayers": $('#useSubLayers').prop('checked'),
"printer.layerHeight": $("#layerHeight").attr('value'),
"printer.wallThickness": $("#wallThickness").attr('value'),
"printer.filamentThickness": $("#filamentThickness").attr('value'),
"printer.speed": $("#speed").attr('value'),
"printer.travelSpeed": $("#travelSpeed").attr('value'),
"printer.retraction.amount": $("#retractionAmount").attr('value'),
"printer.retraction.minDistance": $("#retractionMinDistance").attr('value'),
"printer.retraction.speed": $("#retractionSpeed").attr('value')
},
function(data) {
var res = JSON.parse(data).data;
$.each(res, function(index, val) {
if (val != "ok") {
console.log("ERROR: value '" + index + "' not successfully set. Message: " + val);
}
});
if (callback != undefined) {
callback();
}
// console.log(JSON.stringify(data));
// console.log(JSON.parse(data).data);
}
);
}
/*************************
*
*
* FROM DOODLE3D.INI
*
*/
var objectHeight = 20;
var layerHeight = .2;
var wallThickness = .5;

247
settings.html Executable file
View File

@ -0,0 +1,247 @@
<!DOCTYPE html>
<html>
<head>
<title>settings</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link href="css/settings.css" rel="stylesheet" media="screen">
</head>
<body>
<!--<div>-->
<!--<button id="loadBtn">load</button> - load data-->
<!--</div>-->
<!--<div>-->
<!--<form action="http://192.168.5.1/cgi-bin/d3dapi/config" method="POST" id="formpje">-->
<!--printer.layerHeight: <input type="text" name="printer.layerHeight" value="0.1"><br>-->
<!--<input type="submit" value="Submit">-->
<!--</form>-->
<!--</div>-->
<div>
<h3 style="font-weight:bold">
Not all fields are saveable at the moment
</h3>
<form id="settingsForm">
<fieldset>
<legend>3D printer</legend>
<label for="deviceType">Type:</label>
<select id="deviceType">
<option value="ultimaker">Ultimaker</option>
<option value="ultimaker">Makerbot CupCake</option>
<option value="reprap">Prusa Mendel</option>
</select>
<br>
<label for="deviceSpeed">Speed:</label>
<select id="deviceSpeed">
<option value="115200">115200 bps</option>
<option value="2500000">2500000 bps</option>
</select>
<br>
<label for="devicePort">Port:</label>
<select id="devicePort">
<option value="/dev/tty.usbmodem411">/dev/tty.usbmodem411</option>
<option value="/dev/tty.usbmodem602">/dev/tty.usbmodem621</option>
</select>
<button>Check connection...</button>
</fieldset>
<fieldset>
<legend>Print settings</legend>
<label for="layerHeight">Layer height:</label><input type="text" class="small" name="layerHeight" id="layerHeight" value="0.12">mm<br>
<label for="wallThickness">Wall thickness:</label><input type="text" class="small" name="wallThickness" id="wallThickness" value="0.6">mm<br>
<label for="filamentThickness">Filament thickness:</label><input type="text" class="small" name="filamentThickness" id="filamentThickness" value="2.89">mm<br>
<br>
<label for="speed">Speed:</label><input type="text" name="speed" id="speed" class="small" value="50">mm/s<br>
<label for="travelSpeed">Travel speed:</label><input type="text" name="travelSpeed" id="travelSpeed" class="small" value="200">mm/s<br>
<br>
<label for="autoWarmUp">Auto warm-up:</label><input type="checkbox" name="autoWarmUp" id="autoWarmUp" value="autoWarmUp" checked><br>
<label for="firstLayerSlow">First layer slow:</label><input type="checkbox" name="firstLayerSlow" id="firstLayerSlow" value="firstLayerSlow" checked><br>
<label for="useSubLayers">Use sub-layers:</label><input type="checkbox" name="useSubLayers" id="useSubLayers" value="firstLayerSlow" checked><br>
<label for="useRetraction">Use retraction:</label><input type="checkbox" name="useRetraction" id="useRetraction" value="useRetraction" checked><br>
<br>
<label for="retractionAmount">Retraction amount:</label><input type="text" class="small" name="retractionAmount" id="retractionAmount" value="2">mm<br>
<label for="retractionMinDistance">Retraction min distance:</label><input type="text" class="small" name="retractionMinDistance" id="retractionMinDistance" value="1">mm<br>
<label for="retractionSpeed">Retraction speed:</label><input type="text" class="small" name="retractionSpeed" id="retractionSpeed" value="250">mm/s<br>
</fieldset>
<fieldset>
<legend>Access point settings</legend>
<label for="ipaddress">Wi-Fi box IP address:</label><input type="text" name="ipaddress" id="ipaddress" value="0.3"><br>
<label for="netmask">Wi-Fi box netmask:</label><input type="text" name="netmask" id="netmask" value="0.8"><br>
<label for="ssid">Wi-Fi box ssid*:</label><input type="text" class="large" name="ssid" id="ssid" value="d3d-ap-%%MAC_ADDR_TAIL%%"> <br>
<br>
* The macro <em>%%MAC_ADDR_TAIL%%</em> will be replaced by the last 6 digits of your Doodle3D Wi-Fi box's MAC address.<br>
</fieldset>
<!--<fieldset>-->
<!--<legend>Doodle3D shape settings</legend>-->
<!--<label for="minScale">Minimum scale:</label><input type="text" class="small" name="minScale" id="minScale" value="0.3"><br>-->
<!--<label for="maxScale">Maximum scale:</label><input type="text" class="small" name="maxScale" id="maxScale" value="0.8"><br>-->
<!--<label for="twists">Twists:</label><input type="text" class="small" name="twists" id="twists" value="1.5"><br>-->
<!--<label for="shape">Vertical shape:</label>-->
<!--<select id="shape">-->
<!--<option value="/">/</option>-->
<!--<option value="|">|</option>-->
<!--<option value="/">\</option>-->
<!--<option value="#">#</option>-->
<!--<option value="$">$</option>-->
<!--<option value="%">%</option>-->
<!--<option value="^">^</option>-->
<!--<option value="*">*</option>-->
<!--</select>-->
<!--<br>-->
<!--<label for="simplifyShape">Simplify shape:</label>-->
<!--<select id="simplifyShape">-->
<!--<option value="strong">strong</option>-->
<!--<option value="normal" selected>normal</option>-->
<!--<option value="less">less</option>-->
<!--<option value="none">no</option>-->
<!--</fieldset>-->
<!--<fieldset>-->
<!--<legend>Webserver</legend>-->
<!--<label for="serverPort">Port:</label><input type="text" class="small" name="serverPort" id="serverPort" value="8888"><br>-->
<!--<label for="serverIP">IP-address:</label><input readonly type="text" name="serverPort" id="serverIP" value="192.168.2.1"><br>-->
<!--</fieldset>-->
<!--<fieldset>-->
<!--<legend>Application settings</legend>-->
<!--<label for="fullscreen">Start fullscreen:</label><input type="checkbox" name="fullscreen" id="fullscreen" value="fullscreen" checked><br>-->
<!--<label for="centerWindow">Center window:</label><input type="checkbox" name="centerWindow" id="centerWindow" value="centerWindow" checked><br>-->
<!--<label for="windowWidth">Window width:</label><input type="text" class="small" name="layerHeight" id="windowWidth" value="1120">px<br>-->
<!--<label for="windowHeight">Window height:</label><input type="text" class="small" name="layerHeight" id="windowHeight" value="700">px<br>-->
<!--</fieldset>-->
<fieldset>
<legend>GCODE settings</legend><br>
<table>
<tr>
<td>
<label for="startgcode">Start:</label><br>
<textarea id="startgcode" class="gcode">
G21 (mm)
G91 (relative)
G28 X0 Y0 Z0 (physical home)
M104 S230 (temperature)
G1 E10 F250 (flow)
G92 X-100 Y-100 Z0 E10
G1 Z3 F5000 (prevent diagonal line)
G90 (absolute)
M106 (fan on)
</textarea>
</td>
<td>
<label for="endgcode">End:</label><br>
<textarea id="endgcode" class="gcode">
G1 X-100 Y-100 F15000 (fast homing)
M107
M84 (disable axes)
</textarea>
</td>
</tr>
</table>
<br>
</fieldset>
<fieldset>
<legend>Advanced settings</legend>
<textarea id="advancedSettings">
zOffset=0
loadOffset=0,0
showWarmUp=true
loopAlways=false
maxObjectHeight=200
maxScaleDifference=.1
quitOnEscape=true
screenToMillimeterScale=.3
targetTemperature=230
</textarea>
</fieldset>
<!--<br>-->
<!--<input type="submit" value="Save settings">-->
</form>
</div>
<!--<script src="js/jquery-1.8.3.min.js"></script>-->
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="js/settings.js"></script>
<script type="text/javascript">
// var btnLoad = $("#loadBtn");
// var myForm = $("#formpje");
// myForm.submit(function(e) {
// e.preventDefault();
// console.log("form submitted");
// console.log(" printer.layerHeight:" + $("#formpje input[name='printer.layerHeight']").attr('value'));
// $.post(
// wifiboxURL + "/config",
// {
// "printer.layerHeight": $("#formpje input[name='printer.layerHeight']").attr('value')
// },
// function(data) {
// console.log(JSON.stringify(data));
// });
// return false;
// })
var sendIndex;
var sendLength;
$(function() {
console.log("ready");
// if ($("#useRetraction").prop('checked') == true) $(".retractionSettings").show(500);
// $("#useRetraction").click(function(e) {
// if ($(this).prop('checked')) {
// $(".retractionSettings").show(350);
// } else {
// $(".retractionSettings").hide(350);
// }
// });
// btnLoad.click(function(e) {
// e.preventDefault();
// console.log("load");
// });
loadSettings();
})
</script>
</body>
</html>
<!--
implemented:
X network.ap.address: "192.168.10.1"
X network.ap.netmask: "255.255.255.0"
X network.ap.ssid: "d3d-ap-%%MAC_ADDR_TAIL%%"
X printer.autoWarmUp: true
printer.autoWarmUpCommand: "M104 S230"
X printer.filamentThickness: 2.89
X printer.firstLayerSlow: true
X printer.layerHeight: 0.3
printer.objectHeight: 20
X printer.retraction.amount: 3
X printer.retraction.minDistance: 5
X printer.retraction.speed: 50
printer.simplify.iterations: 10
printer.simplify.minDistance: 3
printer.simplify.minNumPoints: 15
X printer.speed: 70
printer.temperature: 230
X printer.travelSpeed: 200
X printer.useSubLayers: true
X printer.wallThickness: 0.5
-->