31:T648,viewof strokes = { const context = DOM.context2d(350, 350); context.canvas.style.border = "1px solid #000"; const strokes = (context.canvas.value = []); const curve = d3.curveBasis(context); const redo = []; context.lineJoin = "round"; context.lineCap = "round"; // Render and report the new value. function render() { context.clearRect(0, 0, 600, 600); for (const stroke of strokes) { context.beginPath(); curve.lineStart(); for (const point of stroke) { curve.point(...point); } if (stroke.length === 1) curve.point(...stroke[0]); curve.lineEnd(); context.lineWidth = stroke.lineWidth; context.stroke(); } context.canvas.value = strokes; context.canvas.dispatchEvent(new CustomEvent("input")); } d3.select(context.canvas).call( d3 .drag() .container(context.canvas) .subject(dragsubject) .on("start drag", dragged) .on("start.render drag.render", render) ); context.canvas.undo = () => { if (strokes.length === 0) return; redo.push(strokes.pop()); render(); }; context.canvas.redo = (stroke) => { if (redo.length === 0) return; strokes.push(redo.pop()); render(); }; // Create a new empty stroke at the start of a drag gesture. function dragsubject() { const stroke = []; stroke.lineWidth = viewof lineWidth.value; strokes.push(stroke); redo.length = 0; return stroke; } // Add to the stroke when dragging. function dragged({ subject, x, y }) { subject.push([x, y]); } return context.canvas; }32:[{"id":"0eafeff29ee71cf3ee85734b35a70984c985884095624a97769ba2b3adbc7524a2df08273223d747656cd13fb9d9a4b339f25539d0c1a1e2cf7c00a4f4b7b31c","href":"https://static.observableusercontent.com/files/0eafeff29ee71cf3ee85734b35a70984c985884095624a97769ba2b3adbc7524a2df08273223d747656cd13fb9d9a4b339f25539d0c1a1e2cf7c00a4f4b7b31c","name":"2024-02-29_Fdqrd42WQAY0ATg.jpeg","type":"image/jpeg","lastModified":1709195254752.807,"size":115008}] 2f:{"title":"Draw & Print","cells":[{"id":31,"value":"md`# Draw & Print`","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"img = FileAttachment(\"2024-02-29_Fdqrd42WQAY0ATg.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"Draw something and then print it on my [receipt printer](https://t.me/sinananatraprinter).\n","pinned":false,"hidden":false,"mode":"md"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"viewof lineWidth = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}px width`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"undo = {\n const keydowned = event => {\n if (event.keyCode === 90 && event.metaKey && !event.altKey) {\n if (event.shiftKey) viewof strokes.redo();\n else viewof strokes.undo();\n event.preventDefault();\n }\n };\n const form = html``;\n form.redo.onclick = () => viewof strokes.redo();\n form.undo.onclick = () => viewof strokes.undo();\n addEventListener(\"keydown\", keydowned);\n invalidation.then(() => removeEventListener(\"keydown\", keydowned));\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"viewof print = Inputs.button(\"Print\", {\n reduce: () => {\n createMessage({\n data: [{ type: \"image\", url: msg, align: \"left\" }]\n });\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"You can view it on telegram:https://t.me/sinananatraprinter","pinned":false,"hidden":false,"mode":"md"},{"id":279,"value":"___\n### The stuff that makes it work","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"function createMessage(opts) {\n fetch(\n \"https://thermalprinter.accrocch.io/v1/print/printer/ESCPOS_Printer_Giacomo\",\n {\n method: \"POST\",\n mode: \"no-cors\",\n headers: new Headers({\n Accept: \"application/json\",\n \"Content-Type\": \"application/json\"\n }),\n body: JSON.stringify(opts)\n }\n )\n .then(function (response) {\n return response.status;\n })\n .then(function (data) {\n console.log(\"Got response:\", data);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"strokes","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"msg = {\n strokes;\n var dataURL = viewof strokes.toDataURL();\n return dataURL;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":63,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}