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

css/settings.css

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

css/settingsPopup.css

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

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;

settings.html

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