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:
parent
f439592faf
commit
cbbe820d77
60
css/settings.css
Normal file
60
css/settings.css
Normal 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
73
css/settingsPopup.css
Normal 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
BIN
img/settings_lable.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.7 KiB |
136
js/settings.js
136
js/settings.js
@ -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
247
settings.html
Executable 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
|
||||
|
||||
-->
|
Loading…
Reference in New Issue
Block a user