28:null 29:["$","title",null,{"children":"Draw & Print | Giacomo Nanni | Observable"}] 2e: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; }2f:[{"id":"0eafeff29ee71cf3ee85734b35a70984c985884095624a97769ba2b3adbc7524a2df08273223d747656cd13fb9d9a4b339f25539d0c1a1e2cf7c00a4f4b7b31c","href":"https://static.observableusercontent.com/files/0eafeff29ee71cf3ee85734b35a70984c985884095624a97769ba2b3adbc7524a2df08273223d747656cd13fb9d9a4b339f25539d0c1a1e2cf7c00a4f4b7b31c","name":"2024-02-29_Fdqrd42WQAY0ATg.jpeg","type":"image/jpeg","lastModified":1709195254752.807,"size":115008}] 2c:{"id":"14e1948887cc8aa9","slug":"draw-print","title":"Draw & Print","thumbnail":"1beaaac3249277b8e2bdb66ab1868e44667abf12ff67d5cfda9a11643586fc22","access_level":"public","create_time":"$D2022-05-19T13:37:25.095Z","update_time":"$D2024-02-29T08:27:48.235Z","view_time":null,"first_public_time":"$D2022-09-27T13:58:01.071Z","has_unpublished_edits":null,"fork":{"id":"c36363a3d71a4530","slug":"draw-me","title":"Draw Me","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"5129c2957f22f1f2","login":"sinanatra","name":"Giacomo Nanni","avatar_url":"https://avatars-next.observableusercontent.com/780b6bc6dd2a5bbb19911ff3ee47ff844b4e25436b3bd6a0cde359479c6b4dd9","tier":"starter_2024"},"version":406,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c9e695131ad6aff8","login":"sinanatra","name":"Giacomo Nanni","avatar_url":"https://avatars-next.observableusercontent.com/780b6bc6dd2a5bbb19911ff3ee47ff844b4e25436b3bd6a0cde359479c6b4dd9","tier":null}],"members":[{"type":"individual","id":"c9e695131ad6aff8","login":"sinanatra","name":"Giacomo Nanni","avatar_url":"https://avatars-next.observableusercontent.com/780b6bc6dd2a5bbb19911ff3ee47ff844b4e25436b3bd6a0cde359479c6b4dd9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"0ad21b061afca8d7","slug":"random","title":"Graphics","owner":{"id":"5129c2957f22f1f2","login":"sinanatra","name":"Giacomo Nanni"}},"type":"notebook","body":{"title":"Draw & Print","cells":[{"id":31,"value":"md`# Draw & Print`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"img = FileAttachment(\"2024-02-29_Fdqrd42WQAY0ATg.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"Draw something and then print it on my [receipt printer](https://t.me/sinananatraprinter).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"You can view it on telegram:https://t.me/sinananatraprinter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"___\n### The stuff that makes it work","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"strokes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"msg = {\n strokes;\n var dataURL = viewof strokes.toDataURL();\n return dataURL;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"