inital commit

js/content_handler.js

@@ -0,0 +1,56 @@
+/*
+    Content Handler for Web Printing Toolkit
+    Developed by Sören Oesterwind <software@tgd.fyi>
+    Licensed under AGPL-3.0
+
+    Do not use for evil.
+ */
+
+
+// Printer Configuration
+
+const paper_height = 400; // px
+const paper_width = 400; // px
+const print_server_url = "http://127.0.0.1:631/printers/PDF"; // The full path to the printer you wish to use, see README
+
+// For this example a canvas is used to draw on
+// It will get sent to the printer
+const print_canvas = document.getElementById("print_canvas");
+const print_context = print_canvas.getContext("2d");
+
+// Inputs
+const name_input = document.getElementById("input_text");
+
+const printBtn = document.getElementById("btn_print");
+
+
+
+name_input.addEventListener("input", update_canvas);
+
+// This function gets run everytime some value which impacts the canvas area gets changed
+function update_canvas() {
+    console.log("Updated Canvas")
+    // Always set canvas size, this can be usefull when loading the size from a diffrent source
+    print_canvas.width = paper_width;
+    print_canvas.height = paper_height;
+
+    // Clear the entire canvas and make sure it is white
+    print_context.fillStyle = "white";
+    print_context.fillRect(0, 0, print_canvas.width, print_canvas.height);
+
+    // Setup basic controls
+    print_context.fillStyle = "black";
+    print_context.font = `40px sans-serif`;
+    print_context.textAlign = "center";
+
+    // Place content on canvas
+    print_context.fillText(name_input.value, paper_width/2, paper_height/2);
+}
+
+printBtn.addEventListener("click", trigger_print_canvas);
+
+function trigger_print_canvas() {
+    // Usually it would be a good idea to disable the UI and show a loading screen here
+    console.log("Kicked-of printing job")
+    printViaIPP(print_server_url)
+}