31:T5e9,md`# Input: draw points on image ~~~javascript import {drawPointsOnImage} from '@severo/input-draw-points-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 - radius: radius of the points in pixels, defaults to 4 - color: color of the point. If \`color\` is a function, print the result of \`color(d, i)\` (\`d\` being the point data and \`i\` its index in the array). Defaults to "#333" - label: print the point number inside the circle (\`true\`/\`false\`). If \`label\` is a function, print the result of \`label(d, i)\`. Defaults to false - labelColor: color of the label. If \`labelColor\` is a function, print the result of \`labelColor(d, i)\`. Defaults to max contrast with the point color - value: array of points objects (data), with at least the following properties: {x,y} in pixels. Defaults to []. Value: - array of point objects Setter: ~~~js viewof a.value = [{x:5, y:5}, {x:30, y:80}, {x:80, y:30}] ~~~ `32:T1532,drawPointsOnImage = config => { // See https://observablehq.com/@severo/drag-zoom-svg-rescaled // for reference on drag and zoom // There are two systems: // - the image pixels: between 0 and image.naturalWidth // - the context2d pixels: between 0 and config.width (panned and zoomed) // The control's value is expressed in image pixels // parse input if (config.image === undefined) { throw new Error('No image provided.'); } const imgWidth = intrinsicWidth(config.image); const imgHeight = intrinsicHeight(config.image); if ( imgWidth === undefined || imgWidth <= 0 || imgHeight === undefined || imgHeight <= 0 ) { throw new Error('Cannot get image size.'); } const image = config.image; const ratio = imgWidth / imgHeight; const ctxWidth = config.width || width; const ctxHeight = config.height || ctxWidth / ratio; const radius = config.radius || 4; // in pixels of the context const label = config.label === undefined || config.label === false ? false : typeof config.label === 'function' ? config.label : (d, i) => i; const color = config.color === undefined ? (d, i) => "#333" : typeof config.color === 'function' ? config.color : (d, i) => config.color; // adapted from https://24ways.org/2010/calculating-color-contrast/ function getContrastYIQ(hexcolor) { const color = hexcolor[0] === "#" ? hexcolor.slice(1) : hexcolor; var r = parseInt(color.substr(0, 2), 16); var g = parseInt(color.substr(2, 2), 16); var b = parseInt(color.substr(4, 2), 16); var yiq = (r * 299 + g * 587 + b * 114) / 1000; return yiq >= 128 ? "black" : "white"; } const labelColor = config.labelColor === undefined ? (d, i) => getContrastYIQ(color(d, i)) : typeof config.labelColor === 'function' ? config.labelColor : (d, i) => config.labelColor; const zoomEnabled = config.zoom !== undefined ? config.zoom : true; const backgroundEnabled = config.background !== undefined ? config.background : true; // View state const data = []; const setData = (v = []) => { data.length = 0; v.forEach(d => data.push(d)); }; setData(config.value); const imgToCtxRatio = ctxWidth / imgWidth; const initialTransform = d3.zoomIdentity.scale(imgToCtxRatio); // Add DOM elements const ctx = DOM.context2d(ctxWidth, ctxHeight); const canvas = ctx.canvas; // Initialize context image and handles positions const draw = (transform = d3.zoomTransform(canvas)) => { ctx.clearRect(0, 0, ctxWidth, ctxHeight); // Draw the image ctx.save(); ctx.translate(transform.x, transform.y); ctx.scale(transform.k, transform.k); ctx.drawImage(image, 0, 0, imgWidth, imgHeight); 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 = ctxWidth; const ymax = ctxHeight; 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"; for (const [i, d] of data.entries()) { const x = transform.applyX(d.x); const y = transform.applyY(d.y); ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fillStyle = color(d, i); ctx.fill(); // label in the center of the circle if (label) { ctx.save(); ctx.fillStyle = labelColor(d, i); ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; ctx.font = `normal ${radius}px sans`; ctx.fillText(label(d, 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, imgToCtxRatio, radius ).on("start.draw drag.draw end.draw", event => draw()) ); if (zoomEnabled === true) { d3.select(canvas).call(zoom); } // Attach the state to the returned element // (see https://observablehq.com/@observablehq/introduction-to-views) Object.defineProperties(canvas, { value: { configurable: true, enumerable: true, get: () => data, set: v => { setData(v); draw(); } } }); return canvas; }33:T5d0,drag = (data, canvas, imgToCtxRatio, radius) => { // 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 * imgToCtxRatio); const imgX = transform.invertX(event.x); const imgY = transform.invertY(event.y); for (const c of data) { let d = Math.hypot(imgX - c.x, imgY - c.y); if (d < distance) { distance = d; subject = c; } } if (subject) { return { circle: subject, x: transform.applyX(subject.x), y: transform.applyY(subject.y) }; } else { return null; } } function dragstarted(event) { event.subject.active = true; } // When dragging, update the subject’s position. function dragged(event) { const transform = d3.zoomTransform(canvas); const imgX = transform.invertX(event.x); const imgY = transform.invertY(event.y); // Update the canvas value event.subject.circle.x = imgX; event.subject.circle.y = imgY; // 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":"c0d5947b9c6a09b3fd9ae6572beefc9682cacc13cb8a6744e6b65b42b793d434883f1ea34bdd126b1424102ec2e440be804cef7ebe2ef1fd6122f6087c53c10e","href":"https://static.observableusercontent.com/files/c0d5947b9c6a09b3fd9ae6572beefc9682cacc13cb8a6744e6b65b42b793d434883f1ea34bdd126b1424102ec2e440be804cef7ebe2ef1fd6122f6087c53c10e","name":"flower.mp4","type":"video/mp4","lastModified":1615279478414.265,"size":1128375},{"id":"52ed65480b48d7bad78136abf97cb0f0fc32a6ad6e4eb4ac971e598a4e2a7d9bf3a5c0986cdeb1996c59ec8aac16c9ef413f248a79fe235fe4760dbf5309103e","href":"https://static.observableusercontent.com/files/52ed65480b48d7bad78136abf97cb0f0fc32a6ad6e4eb4ac971e598a4e2a7d9bf3a5c0986cdeb1996c59ec8aac16c9ef413f248a79fe235fe4760dbf5309103e","name":"mona-lisa.jpg","type":"image/jpeg","lastModified":1615279478414.265,"size":208281}] 2f:{"title":"Input: draw points 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 = {\n const colorScale = d3.scaleOrdinal(d3.schemeAccent);\n const color = (d, i) => colorScale(i);\n return drawPointsOnImage({\n image: await FileAttachment(\"mona-lisa.jpg\").image(),\n width: width / 3,\n zoom: true,\n label: true,\n radius: 8,\n color,\n value: [\n { x: 181.1320754716981, y: 139.62264150943395 },\n { x: 632.0754716981131, y: 128.30188679245282 },\n { x: 803.7735849056603, y: 503.77358490566036 },\n { x: 750.9433962264151, y: 852.8301886792451 },\n { x: 333.96226415094344, y: 966.0377358490565 },\n { x: 128.30188679245282, y: 522.6415094339623 }\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"video = await new Promise(async (resolve, reject) => {\n const video = html`