25:null 26:["$","title",null,{"children":"Input: draw a box on image | yq605879396 | Observable"}] 2b:T156f,drawBoxOnImage = config => { // See https://observablehq.com/@severo/drag-zoom-svg-rescaled // for reference on drag and zoom // parse input if ( config.image === undefined || !config.image.naturalHeight || !config.image.naturalWidth ) { throw new Error('No image provided. {image} must be an HTMLImageElement.'); } const image = config.image; const viewWidth = config.width || width; const ratio = image.naturalWidth / image.naturalHeight; const viewHeight = config.height || viewWidth / ratio; 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 : [{ 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 = image.naturalWidth; const ctxHeight = image.naturalHeight; 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 radius = 4; const color = "#333"; 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(); } }; // Add zoom and initial transform const zoom = d3 .zoom() .scaleExtent([1 / 8, 8]) .on("zoom", () => { const { transform } = d3.event; draw(transform); }); d3.select(canvas).call(zoom.transform, initialTransform); d3.select(canvas).call( drag(data, canvas, imageToData, dataToImage, viewToCtxRatio).on( "start.draw drag.draw end.draw", 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; }2c:T75f,drag = (circles, canvas, imageToData, dataToImage, viewToCtxRatio) => { // 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() { const transform = d3.zoomTransform(canvas); let subject = null; let distance = 5 / (transform.k / viewToCtxRatio); const { x, y } = imageToData({ x: transform.invertX(d3.event.x), y: transform.invertY(d3.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() { d3.event.subject.active = true; } // When dragging, update the subject’s position. function dragged() { const [clientX, clientY] = clampDrag([d3.event.x, d3.event.y]); const transform = d3.zoomTransform(canvas); const { x, y } = imageToData({ x: transform.invertX(clientX), y: transform.invertY(clientY) }); // Update the canvas value d3.event.subject.circle.x = x; d3.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() { d3.event.subject.active = false; } return d3 .drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }2d:[{"id":"52ed65480b48d7bad78136abf97cb0f0fc32a6ad6e4eb4ac971e598a4e2a7d9bf3a5c0986cdeb1996c59ec8aac16c9ef413f248a79fe235fe4760dbf5309103e","href":"https://static.observableusercontent.com/files/52ed65480b48d7bad78136abf97cb0f0fc32a6ad6e4eb4ac971e598a4e2a7d9bf3a5c0986cdeb1996c59ec8aac16c9ef413f248a79fe235fe4760dbf5309103e","name":"mona-lisa.jpg","type":"image/jpeg","lastModified":1588629497460.319,"size":208281}] 29:{"id":"57e4c666fcf6825c","slug":"input-draw-a-box-on-image/3","title":"Input: draw a box on image","thumbnail":"ccc50d91b989c2444cac823eecc0004b23ce9c33e8118e62df0d4bd6f0a2e43a","access_level":"public","create_time":"$D2020-05-04T21:58:17.460Z","update_time":"$D2020-05-04T22:58:34.093Z","view_time":null,"first_public_time":"$D2020-05-04T22:02:29.654Z","has_unpublished_edits":null,"fork":{"id":"5bba6f36dcaf18e3","slug":"input-draw-a-box-on-image","title":"Input: draw a box on image","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bd59c1888e2577a5","login":"yq605879396","name":"","avatar_url":"https://avatars-next.observableusercontent.com/af2835bcdb59086e7feedad39ed3ffe91e18c5255aedeb8ea7425a08b52283dd","tier":"starter_2024"},"version":212,"publish_version":212,"role":null,"authored":false,"authors":[{"type":"individual","id":"5d4863d1b3221a9f","login":"yq605879396","name":"","avatar_url":"https://avatars-next.observableusercontent.com/af2835bcdb59086e7feedad39ed3ffe91e18c5255aedeb8ea7425a08b52283dd","tier":null}],"members":[{"type":"individual","id":"5d4863d1b3221a9f","login":"yq605879396","name":"","avatar_url":"https://avatars-next.observableusercontent.com/af2835bcdb59086e7feedad39ed3ffe91e18c5255aedeb8ea7425a08b52283dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Input: draw a box on image","cells":[{"id":0,"value":"md`# Input: draw a box on image\n\n\n~~~javascript \nimport {drawBoxOnImage} from '@severo/input-draw-a-box-on-image'\n~~~\n\nParameters:\n\n- image (*required*): an HTMLImageElement\n- width: width of the input, defaults to Observable's global width\n- height: height of the input, defaults to keeping the image proportion\n- background: boolean to enable millimetric paper background, defaults to true\n- zoom: boolean to enable zoom, defaults to true\n- padding: proportion of the width and height used as padding on init, defaults to 0.1\n- 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 }]\n\nValue:\n\n- array of {x,y} point objects, expressed in percentage of the image width and height\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"image = new Promise((resolve, reject) => {\n const image = new Image;\n image.style = \"height: 60px; display: block;\";\n image.crossOrigin = \"anonymous\";\n image.onerror = reject;\n image.onload = () => resolve(image);\n image.src = //\"https://gist.githubusercontent.com/mbostock/9511ae067889eefa5537eedcbbf87dab/raw/944b6e5fe8dd535d6381b93d88bf4a854dac53d4/mona-lisa.jpg\";\n \"http://127.0.0.1:5000/photo/test.jpg\" //https://gist.githubusercontent.com/mbostock/9511ae067889eefa5537eedcbbf87dab/raw/944b6e5fe8dd535d6381b93d88bf4a854dac53d4/mona-lisa.jpg\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof a = drawBoxOnImage({\n //image: await FileAttachment(\"mona-lisa.jpg\").image(),\n image :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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof c = drawBoxOnImage({\n image: await FileAttachment(\"mona-lisa.jpg\").image()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`---\n\n## Credits\n\nDeveloped for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2a:"$29:body"