Files
Web-Printing-Toolkit/js/content_handler.js
TheGreydiamond 7b45a854fe inital commit
2025-08-18 20:02:43 +02:00

56 lines
1.7 KiB
JavaScript

/*
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)
}