31:T5a9,md`# Input: draw a box on image ~~~javascript import {drawBoxOnImage} from '@severo/input-draw-a-box-on-image' ~~~ Parameters: - image (*required*): a [CanvasImageSource](https://developer.mozilla.org/en-US/docs/Web/API/CanvasImageSource) - width: width of the input, defaults to Observable's global width - height: height of the input, defaults to keeping the image proportion - background: boolean to enable millimetric paper background, defaults to true - zoom: boolean to enable zoom, defaults to true - padding: proportion of the width and height used as padding on init, defaults to 0.1 - radius: radius of the points in pixels, defaults to 4 - label: print the point number inside the circle (\`true\`/\`false\`). If \`label\` is a function, print the result of \`label(i)\` (\`i\` being the point number, with 0-based numbering). Defaults to false - value: array of {x,y} point objects, expressed in percentage of the image width and height, defaults to [{ x: 20, y: 10 }, { x: 80, y: 10 }, { x: 95, y: 90 }, { x: 5, y: 90 }] Value: - array of {x,y} point objects, expressed in percentage of the image width and height Setter: ~~~js viewof a.setValue([{x:5, y:5}, {x:30, y:80}, {x:80, y:30}]) ~~~ `32:T18a5,drawBoxOnImage = config => { // See https://observablehq.com/@severo/drag-zoom-svg-rescaled // for reference on drag and zoom // parse input if (config.image === undefined) { throw new Error('No image provided.'); } const iWidth = intrinsicWidth(config.image); const iHeight = intrinsicHeight(config.image); if ( iWidth === undefined || iWidth <= 0 || iHeight === undefined || iHeight <= 0 ) { throw new Error('Cannot get image size.'); } const image = config.image; const viewWidth = config.width || width; const ratio = iWidth / iHeight; const viewHeight = config.height || viewWidth / ratio; const radius = config.radius || 4; const label = config.label === undefined || config.label === false ? false : typeof config.label === 'function' ? config.label : i => i; const zoomEnabled = config.zoom !== undefined ? config.zoom : true; const backgroundEnabled = config.background !== undefined ? config.background : true; // The image will be shown at the center of the SVG, with surrounding space // padding is expressed in proportion of the width and height. 0.1 means 10% of the width (or of the height) const padding = config.padding !== undefined ? config.padding : 0.1; // View state const data = config.value !== undefined ? config.value.map(d => { // TODO: validate. For now we assume config.value has the expected format return { x: d.x, y: d.y }; }) : [{ x: 20, y: 10 }, { x: 80, y: 10 }, { x: 95, y: 90 }, { x: 5, y: 90 }]; // The image is displayed in a canvas, using its full size for maximal resolution // This size would generally be greater than the size of SVG, and that's why the initial transform // will redimension its container to the size of the SVG (minus the padding) const ctxWidth = iWidth; const ctxHeight = iHeight; const viewToCtxRatio = viewWidth / ctxWidth; const initialTransform = d3.zoomIdentity .translate(viewWidth * padding, viewHeight * padding) .scale(viewToCtxRatio * (1 - 2 * padding)); const dataToImage = ({ x, y }) => ({ x: (x / 100) * ctxWidth, y: (y / 100) * ctxHeight }); const imageToData = ({ x, y }) => ({ x: (x / ctxWidth) * 100, y: (y / ctxHeight) * 100 }); // Add DOM elements const ctx = DOM.context2d(viewWidth, viewHeight); // Attach the state to the returned element // (see https://observablehq.com/@observablehq/introduction-to-views) const canvas = ctx.canvas; canvas.value = data; const color = "#333"; const labelColor = "white"; const strokeWidth = 1; // Initialize context image and handles positions const draw = (transform = d3.zoomTransform(canvas)) => { const imageData = data.map(dataToImage); const transformedData = imageData.map(({ x, y }) => ({ x: transform.applyX(x), y: transform.applyY(y) })); ctx.save(); ctx.clearRect(0, 0, viewWidth, viewHeight); // draw fog layer ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "rgba(255,255,255,0.5)"; ctx.fillRect(0, 0, viewWidth, viewHeight); // Transform ctx.translate(transform.x, transform.y); ctx.scale(transform.k, transform.k); // show src by cutting hole in fog ctx.globalCompositeOperation = "destination-out"; ctx.beginPath(); for (let { x, y } of imageData) { ctx.lineTo(x, y); } ctx.closePath(); ctx.fillStyle = "#fff"; ctx.fill(); // draw texture behind the fog ctx.globalCompositeOperation = "destination-over"; ctx.drawImage(image, 0, 0, ctxWidth, ctxHeight); ctx.restore(); // fill the background if (backgroundEnabled) { ctx.globalCompositeOperation = "destination-over"; ctx.strokeStyle = '#0091c988'; const bigStep = 100 * transform.k; const smallStep = 10 * transform.k; const [xOffset, yOffset] = transform .apply([0, 0]) .map(c => (c % bigStep) - bigStep); const xmax = viewWidth; const ymax = viewHeight; let x = xOffset - smallStep, y = yOffset - smallStep; ctx.lineWidth = 0.25 * transform.k; while (x < xmax + smallStep || y < ymax + smallStep) { x += smallStep; y += smallStep; ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, ymax); ctx.stroke(); ctx.moveTo(0, y); ctx.lineTo(xmax, y); ctx.stroke(); } x = xOffset - bigStep; y = yOffset - bigStep; ctx.lineWidth = 1 * transform.k; while (x < xmax + bigStep || y < ymax + bigStep) { x += bigStep; y += bigStep; ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, ymax); ctx.stroke(); ctx.moveTo(0, y); ctx.lineTo(xmax, y); ctx.stroke(); } } // draw src points ctx.globalCompositeOperation = "source-over"; ctx.lineWidth = strokeWidth; ctx.beginPath(); for (let { x, y } of transformedData) { ctx.lineTo(x, y); } ctx.closePath(); ctx.strokeStyle = color; ctx.stroke(); for (let { x, y } of transformedData) { ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fillStyle = color; ctx.fill(); } // label in the center of the circle if (label) { ctx.save(); ctx.fillStyle = labelColor; ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; ctx.font = `normal ${radius}px sans`; for (let [i, { x, y }] of transformedData.entries()) { ctx.fillText(label(i), x, y); } ctx.restore(); } }; // Add zoom and initial transform const zoom = d3 .zoom() .scaleExtent([1 / 8, 8]) .on("zoom", ({ transform }) => { draw(transform); }); d3.select(canvas).call(zoom.transform, initialTransform); d3.select(canvas).call( drag( data, canvas, imageToData, dataToImage, viewToCtxRatio, radius ).on("start.draw drag.draw end.draw", event => draw()) ); if (zoomEnabled === true) { d3.select(canvas).call(zoom); } canvas.setValue = v => { // TODO: validate! canvas.value.length = 0; v.forEach(c => canvas.value.push(c)); draw(); }; return canvas; }33:T775,drag = (circles, canvas, imageToData, dataToImage, viewToCtxRatio, radius) => { // Clamp mouse pointer to the visible window const clamp = (val, min, max) => Math.max(min, Math.min(max, val)); const clampDrag = ([x, y]) => [ clamp(x, 0, canvas.width / devicePixelRatio), clamp(y, 0, canvas.height / devicePixelRatio) ]; // Choose the circle that is closest to the pointer for dragging. function dragsubject(event) { const transform = d3.zoomTransform(canvas); let subject = null; let distance = Math.max(5, radius) / (transform.k / viewToCtxRatio); const { x, y } = imageToData({ x: transform.invertX(event.x), y: transform.invertY(event.y) }); for (const c of circles) { let d = Math.hypot(x - c.x, y - c.y); if (d < distance) { distance = d; subject = c; } } if (subject) { const s = dataToImage(subject); return { circle: subject, x: transform.applyX(s.x), y: transform.applyY(s.y) }; } else { return null; } } function dragstarted(event) { event.subject.active = true; } // When dragging, update the subject’s position. function dragged(event) { const [clientX, clientY] = clampDrag([event.x, event.y]); const transform = d3.zoomTransform(canvas); const { x, y } = imageToData({ x: transform.invertX(clientX), y: transform.invertY(clientY) }); // Update the canvas value event.subject.circle.x = x; event.subject.circle.y = y; // And emit an input event canvas.dispatchEvent(new CustomEvent("input")); } // When ending a drag gesture, mark the subject as inactive again. function dragended(event) { event.subject.active = false; } return d3 .drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }34:[{"id":"52ed65480b48d7bad78136abf97cb0f0fc32a6ad6e4eb4ac971e598a4e2a7d9bf3a5c0986cdeb1996c59ec8aac16c9ef413f248a79fe235fe4760dbf5309103e","href":"https://static.observableusercontent.com/files/52ed65480b48d7bad78136abf97cb0f0fc32a6ad6e4eb4ac971e598a4e2a7d9bf3a5c0986cdeb1996c59ec8aac16c9ef413f248a79fe235fe4760dbf5309103e","name":"mona-lisa.jpg","type":"image/jpeg","lastModified":1581000080362.142,"size":208281},{"id":"c0d5947b9c6a09b3fd9ae6572beefc9682cacc13cb8a6744e6b65b42b793d434883f1ea34bdd126b1424102ec2e440be804cef7ebe2ef1fd6122f6087c53c10e","href":"https://static.observableusercontent.com/files/c0d5947b9c6a09b3fd9ae6572beefc9682cacc13cb8a6744e6b65b42b793d434883f1ea34bdd126b1424102ec2e440be804cef7ebe2ef1fd6122f6087c53c10e","name":"flower.mp4","type":"video/mp4","lastModified":1601555465195.025,"size":1128375}] 2f:{"title":"Input: draw a box on image","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"a","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"viewof a = drawBoxOnImage({\n image: await FileAttachment(\"mona-lisa.jpg\").image(),\n width: width / 3,\n zoom: true,\n padding: 0,\n value: [{ x: 38, y: 7 }, { x: 65, y: 9 }, { x: 90, y: 91 }, { x: 1, y: 79 }]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"viewof b = drawBoxOnImage({\n image: await FileAttachment(\"mona-lisa.jpg\").image(),\n width: width / 4,\n zoom: false,\n padding: 0.15,\n background: false,\n radius: 12,\n label: true,\n value: [\n { x: 0, y: 0 },\n { x: 50, y: 0 },\n { x: 100, y: 50 },\n { x: 100, y: 100 },\n { x: 50, y: 100 },\n { x: 0, y: 50 }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"viewof c = drawBoxOnImage({\n image: await FileAttachment(\"mona-lisa.jpg\").image()\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"video = await new Promise(async (resolve, reject) => {\n const video = html`