Add built-in Octoprint support (v2)

calibration.html

@@ -294,10 +294,8 @@ <h6 id="fl" >First layer gcode generator</h6>
         <!-- firstlayerForm -->
         <form name="firstlayerForm" id="firstlayerForm" onsubmit="return false;">
             <script>
-            createForm("firstlayer");    
+                createForm("firstlayer");
             </script>
-            <p><input type="button" onclick="processGcode(form)" value="Download Gcode"></p>
-            <p><input type="button" onclick="resetFormToDefaults(form)" value="Reset parameters"> <input type="button" onclick="outputSettings(form)" value="Output Settings Summary"></p>
         </form>
         <h2>Interpreting Results:</h2>
         <p>Please use the following video as a guide to this test:</p>
@@ -324,10 +322,8 @@ <h6 id="bl">Baseline test print generator</h6>
         <!-- baselineForm -->
         <form name="baselineForm" id="baselineForm" onsubmit="return false;">
             <script>
-                createForm("baseline");    
+                createForm("baseline");
             </script>
-            <p><input type="button" onclick="processGcode(form)" value="Download Gcode"></p>
-            <p><input type="button" onclick="resetFormToDefaults(form)" value="Reset parameters"> <input type="button" onclick="outputSettings(form)" value="Output Settings Summary"></p>
         </form>
         <h2>Interpreting Results:</h2>
         <p>Please use the following video as a guide to this test:</p>
@@ -752,8 +748,6 @@ <h6 id="ret">Retraction tuning tower generator</h6>
             <script>
                 createForm("retraction");
             </script>
-            <p><input type="button" onclick="processGcode(form)" value="Download Gcode"></p>
-            <p><input type="button" onclick="resetFormToDefaults(form)" value="Reset parameters"> <input type="button" onclick="outputSettings(form)" value="Output Settings Summary"></p>
         </form>
         <h2>Interpreting Results:</h2>
         <p>Please use the following video as a guide to this test:</p>
@@ -810,8 +804,6 @@ <h6 id="tmp">Temperature tuning tower generator</h6>
             <script>
                 createForm("temperature");
             </script>
-            <p><input type="button" onclick="processGcode(form)" value="Download Gcode"></p>
-            <p><input type="button" onclick="resetFormToDefaults(form)" value="Reset parameters"> <input type="button" onclick="outputSettings(form)" value="Output Settings Summary"></p>
         </form>
         <h2>Interpreting Results:</h2>
         <p>Please use the following video as a guide to this test:</p>
@@ -922,8 +914,6 @@ <h6 id="acc">Acceleration & jerk/junction deviation tuning tower generator</h6>
             <script>
                 createForm("acceleration");
             </script>
-            <p><input type="button" onclick="processGcode(form)" value="Download Gcode"></p>
-            <p><input type="button" onclick="resetFormToDefaults(form)" value="Reset parameters"> <input type="button" onclick="outputSettings(form)" value="Output Settings Summary"></p>
             <p class="warning">This gcode will raise the acceleration limits (<a href="https://marlinfw.org/docs/gcode/M201.html" target="_blank">M201</a>), set acceleration (<a href="https://marlinfw.org/docs/gcode/M204.html" target="_blank">M204</a>) and set junction deviation/jerk (<a href="https://marlinfw.org/docs/gcode/M205.html" target="_blank">M205</a>) for the purposes of the test. If you print another job afterwards these higher values will still be in place. If you are unsure how to restore your previous values, the easiest thing to do is to power cycle the printer.</p> 
         </form>
         <h2>Interpreting Results:</h2>
@@ -1184,14 +1174,20 @@ <h6 id="spd">Speed/feedrate tuning tower generator</h6>
             <script>
                 createForm("speed");
             </script>
-            <p><input type="button" onclick="processGcode(form)" value="Download Gcode"></p>
-            <p><input type="button" onclick="resetFormToDefaults(form)" value="Reset parameters"> <input type="button" onclick="outputSettings(form)" value="Output Settings Summary"></p>
         </form>
         <h2>Interpreting Results:</h2>
         <p>Please use the following video as a guide to this test:</p>
         <iframe loading="lazy" width="640" height="480" src="https://www.youtube.com/embed/CZC5n2J8k_c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         <p>You may wish to stop the print early if it is clear extrusion has ceased or become unreliable. This may prevent the need for disassembly of the extruder to clear the blockage.</p>
     </div>
+
+    <form style="display: none" name="octoprintForm" id="octoprintForm" action="#" method="post" enctype="multipart/form-data" target="_blank">
+        <input type="file" name="file"/>
+        <input type="hidden" name="apikey" value=""/>
+        <input type="hidden" name="path" value="TeachingTechYT"/>
+        <input type="hidden" name="select" value="true"/>
+        <input type="hidden" name="print" value="true"/>
+    </form>
 </div>
 <div id="up"></div>
 <div id="footer"></div>

js/commongcode.js

@@ -1,6 +1,4 @@
-var commonStart = `; G-Code originally generated by Simplify3D(R) Version 4.1.2
-; This calibration test gcode modified by the Teaching Tech Calibration website: https://teachingtechyt.github.io/calibration.html
-;M80 ; power supply on
+var commonStart = `;M80 ; power supply on
 G90
 M82
 M106 S0

js/createform.js

@@ -459,6 +459,27 @@ var endGcode = /*html*/ `<h4>Additional end gcode</h4>
 
 var preview = /*html*/ `<p>It is advised to preview the generated gcode through your slicer or <a href="http://zupfe.velor.ca" target="_blank">Zupfe GCode Viewer</a> before printing.`;
 
+var downloadGcodeHtml = /*html*/ `<h4>Download</h4>
+<p><label>Filename: <input type="text" name="{formName}_filename" value="{formName}"></label></p>
+<p><input type="button" onclick="downloadGcode(form, form['{formName}_filename'].value)" value="Download Gcode">
+   <input type="button" onclick="uploadGcode(form, form['{formName}_filename'].value)" value="Upload&Print Gcode"></p>
+<p><input type="button" onclick="resetFormToDefaults(form)" value="Reset parameters">
+   <input type="button" onclick="downloadSettings(form, form['{formName}_filename'].value)" value="Output Settings Summary"></p>
+
+<h4>Octoprint / Moonraker</h4>
+<p>You can directly print from this website if you specify <b>Octoprint</b> or <b>Moonraker</b> server.</p>
+<p><label>URL: <input type="text" name="octoprint_url"></label>
+   <label>API Key: <input type="password" name="octoprint_key"></label></p>
+<div class="octoprintExp">
+    <label>Configure Octoprint:</label>
+    <ul>
+        <li>Login to your Octoprint from this browser</li>
+        <li>Or get API Key from <b>User Settings > Application Keys</b></li>
+    </ul>
+</div>
+
+`;
+
 function createForm(n){
     document.write('<input type="hidden" name="description" value="'+n+'">')
     document.write(nozzleLayer);
@@ -495,4 +516,5 @@ function createForm(n){
     }
     document.write(endGcode);
     document.write(preview);
-}      
+    document.write(downloadGcodeHtml.replaceAll('{formName}', n));
+}

js/gcodeprocessing.js

@@ -118,7 +118,6 @@ function updateFeedsTower(feedrate) {
 
 function processGcode(formName) {
     var name = formName.name;
-    var description = formName.description.value;
     var nozzleLayer = formName.nozzleLayer.value;
     var bedTemp = formName.bedtemp.value;
     var centre = formName.centre.checked;
@@ -600,37 +599,14 @@ function processGcode(formName) {
     if(formName.deltaHome.checked == true) {
         gcode = gcode.replace(/G28 X0 ; home X axis/, "G28 ; home all on delta");
     }
-
-    // process finished gcode file
-    downloadFile(description+'.gcode', gcode);
+
+    return gcode;
 }
 
 function outputSettings(formName) {
-    var fileName;
-    var string = "Settings for ";
-    switch(formName.name) {
-        case "firstlayerForm":
-            string += "first layer"
-            fileName = "firstlayersettings.txt";
-            break;
-        case "baselineForm":
-            string += "baseline print"
-            fileName = "baselinesettings.txt";
-            break;
-        case "retractionForm":
-            string += "retraction tuning"
-            fileName = "retractionsettings.txt";
-            break;
-        case "temperatureForm":
-            string += "temperature tuning"
-            fileName = "temperaturesettings.txt";
-            break;
-        case "accelerationForm":
-            string += "acceleration and jerk/junction deviation tuning"
-            fileName = "accelerationsettings.txt";
-            break;
-    }
-    string += " form\n_________________________________________________________________________\n\n";
+    var string = "";
+    string += "Settings for " + formName.description.value + " form\n";
+    string += "_________________________________________________________________________\n\n";
     string += "G-Code originally generated by Simplify3D(R) Version 4.1.2\nThis calibration test gcode modified by the Teaching Tech Calibration website: https://teachingtechyt.github.io/calibration.html\n";
     string += "All changes are marked in the gcode with 'custom' at the end of each line. Open the gcode in a text editor and search for this to your check inputs if needed.\n\n";
 
@@ -728,6 +704,67 @@ function outputSettings(formName) {
             string += "   B    |    "+formName.accel_b1.value+" mm/sec/sec   |          "+formName.accel_b4.value+"\n";
             string += "   A    |    "+formName.accel_a1.value+" mm/sec/sec   |          "+formName.accel_a4.value+"\n";
         }
-    }  
-    downloadFile(fileName, string);
+    }
+    return string;
+}
+
+function getGcodeAndSettings(form) {
+    var gcode = processGcode(form);
+    var settings = outputSettings(form);
+
+    var output = "";
+    // prefix each line with ; to indicate comment
+    output += "; " + settings.replaceAll("\n", "\n; ");
+    output += gcode;
+    return output;
+}
+
+function downloadGcode(form, fileName) {
+    if (!fileName) {
+        fileName = form.description.value;
+    }
+    fileName = fileName.trimRight(".gcode");
+    fileName += ".gcode";
+
+    downloadFile(fileName, getGcodeAndSettings(form));
+}
+
+function downloadSettings(form, fileName) {
+    if (!fileName) {
+        fileName = form.description.value;
+    }
+    fileName = fileName.trimRight(".gcode");
+    fileName += "_settings.txt";
+
+    downloadFile(fileName, outputSettings(form));
+}
+
+function uploadGcode(form, fileName) {
+    var output = getGcodeAndSettings(form);
+
+    if (!form.octoprint_url.value) {
+        alert("No URL specified for Octoprint or Moonraker.");
+        return;
+    }
+
+    // get only basename
+    if (!fileName) {
+        fileName = form.description.value;
+    }
+    fileName += ".gcode";
+    fileName = fileName.split('/').reverse()[0];
+    fileName = fileName.trimRight(".gcode");
+    fileName += ".gcode";
+
+    // remove `/` from the end of URL
+    var url = form.octoprint_url.value.replace(/\/+$/, '');
+    url += "/api/files/local";
+
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(new File([output], fileName, {type : 'text/plain'}));
+
+    document.octoprintForm.action = url;
+    document.octoprintForm.file.files = dataTransfer.files;
+    document.octoprintForm.apikey.value = form.octoprint_key.value;
+    document.octoprintForm.submit();
 }

js/persist.js

@@ -17,6 +17,7 @@ function loadFormData(form) {
       element.tagName == "INPUT" && element.type == "checkbox" ||
       element.tagName == "INPUT" && element.type == "radio" ||
       element.tagName == "INPUT" && element.type == "text" ||
+      element.tagName == "INPUT" && element.type == "password" ||
       element.tagName == "TEXTAREA" ||
       element.tagName == "SELECT"
     ) {