Add Upload&Print Gcode option

- Allow to specify URL/API key
- Upload&Print directly
- Document what needs to be configured

Author: ayufan

js/createform.js

@@ -459,9 +459,31 @@ var preview = /*html*/ `<p>It is advised to preview the generated gcode through
 
 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"></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>Get API Key go to <b>User Settings > Application Keys</b> and manually generate new application key.</li>
+        <li>Enable CORS support by going to <b>OctoPrint Settings > API</b> and checking <b>Allow Cross Origin Resource Sharing (CORS)</b>. Restart afterwards</li>
+        <li>Restart afterwards</li>
+    </ul>
+
+    <label>Configure Moonraker if used with Klipper:</label>
+    <ul>
+        <li>As part of the <a href="https://moonraker.readthedocs.io/en/latest/configuration/#authorization">[authorization] config</a>
+            add to <b>cors_domains:</b> the <b><script>document.write(window.location.origin);</script></b>.</li>
+        <li>Restart afterwards</li>
+    </ul>
+</div>
+
 `;
 
 function createForm(n){

js/gcodeprocessing.js

@@ -700,30 +700,93 @@ function outputSettings(formName) {
     return string;
 }
 
-
-function downloadGcode(form, fileName) {
+function getGcodeAndSettings(form) {
     var gcode = processGcode(form);
     var settings = outputSettings(form);
 
-    // process finished gcode file
+    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 += ".gcode";
 
-    var output = "";
-    // prefix each line with ; to indicate comment
-    output += "; " + settings.replaceAll("\n", "\n; ");
-    output += gcode;
-    downloadFile(fileName, output);
+    downloadFile(fileName, getGcodeAndSettings(form));
 }
 
 function downloadSettings(form, fileName) {
-    var settings = outputSettings(form);
-
     if (!fileName) {
         fileName = form.description.value;
     }
-    fileName += "settings.txt";
-    downloadFile(fileName, settings);
+    fileName += ".gcode";
+
+    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 + ".gcode";
+    }
+    fileName = fileName.split('/').reverse()[0];
+
+    // remove `/` from the end of URL
+    var url = form.octoprint_url.value.replace(/\/$/, '');
+    url += "/api/files/local";
+
+    // this detects a `mixed-context` scenario:
+    // sending request to `http:` when connected via `https:` is not possible
+    if (window.location.protocol == "https:" && url.toLowerCase().startsWith("http:")) {
+        httpUrl = window.location.href.replace('https:', 'http:');
+
+        alert("Your local Octoprint/Moonraker uses `http://`. " +
+              "You need to open the `" + httpUrl + "` instead");
+        return;
+    }
+
+    const formData = new FormData();
+    formData.append("file", new Blob([output], {type : 'text/plain'}), fileName);
+    formData.append("path", "TeachingTechYT");
+    formData.append("select", "true");
+    formData.append("print", "true");
+
+    fetch(url, {
+        method: "POST",
+        body: formData,
+        headers: {
+            'X-Api-Key': form.octoprint_key.value
+        }
+    })
+    .then(response => {
+        if (response.ok) {
+            response.json().then(data => {
+                if (data.print_started) {
+                    alert("Successfully uploaded and started print from " + fileName);
+                } else {
+                    alert("Successfully uploaded, but print was not started from " + fileName);
+                }
+            });
+        } else {
+            alert("Failed to upload due to " + response.statusText);
+        }
+    })
+    .catch((error) => {
+       alert("Failed to upload due to an error. Possible causes:\n" +
+        "- CORS not configured properly\n" +
+        "- url does not start with `http://` or `https://`\n" +
+        "\n" + error);
+    });
 }

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"
     ) {