31:T679,md` Options ~~~js viewof trace = pointerTrace(options) ~~~ - \`width\`: width, in pixels. Defaults to Observable reactive variable: [\`width\`](https://observablehq.com/@observablehq/standard-library) - \`height\`: height, in pixels. Defaults to \`280\` - \`eventTypes\`: event types to be tracked. Defaults to \`[${pointerEventTypes .map(e => `'${e}'`) .join(', ')}]\` - \`render\`: rendering function. Default to \`renderPoints()\` - \`filter\`: function to filter the events to track. Takes a [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) instance as its input and returns true if the event should be captured. Defaults to \`(event) => true\` - \`showButtons\`: a boolean (\`true\`: everything, \`false\`: nothing), or an array of the elements to show below the canvas: \`["image", "capture", "clear", "save", "info", "submit"]\`. Defaults to \`true\` - \`"image"\`: an [imageInput](https://observablehq.com/@mbostock/file-input) control to select a background image. - \`"capture"\`: button to start and end the capture - \`"clear"\`: button to clear the data - \`"save"\`: button to save the data as a JSON file - \`"info"\`: string with the number of captured points - \`"submit"\`: button to submit the control data (update the cell's value) - \`imageInputOptions\`: an options object as defined in [imageInput](https://observablehq.com/@mbostock/file-input), to initialize the background image input control. When an image is present (by a user action, or using \`imageInputOptions.initialUrl\`), the canvas \`height\` is overriden to match the image aspect ratio. Defaults to an empty object. `32:T1bf1,function pointerTrace(opts) { const { width: w, height: h, eventTypes, render, filter, showButtons, imageInputOptions } = { width: width, height: 280, eventTypes: pointerEventTypes, render: renderPoints, filter: event => true, showButtons: true, imageInputOptions: {}, ...opts }; // Init const control = html`

`; const statusText = html``; statusText.style.marginRight = "1em"; const context = DOM.context2d(w, h); const canvas = context.canvas; canvas.style.setProperty('touch-action', "none"); canvas.style.display = 'block'; const curve = d3.curveBasis(context); const image = new Image(); image.width = w; image.height = h; const imageInputControl = imageInput(imageInputOptions); // Data const _trace = []; let refDate = new Date(); let refOffset = 0; // TODO: It would be better not to manage a state flag. We try to limit its use let running = false; function storePoint( x, y, eventType, t = (new Date() - refDate + refOffset) / 1000 ) { _trace.push({ x, y, eventType, t }); } function updateView() { // update rendered view render(context, _trace, { curve }); statusText.innerText = _trace.length === 0 ? `No point` : _trace.length === 1 ? `1 point` : `${_trace.length} points`; } function getHandleEvent(isSubmitAuto) { return function(event) { const bbox = canvas.getBoundingClientRect(); if (filter(event)) { storePoint(event.pageX - bbox.left, event.pageY - bbox.top, event.type); } updateView(); if (isSubmitAuto) { submit(); } }; } function addEventListeners(handleEvent) { for (const eventType of eventTypes) { canvas.addEventListener(eventType, handleEvent); } } function removeEventListeners(handleEvent) { for (const eventType of eventTypes) { canvas.removeEventListener(eventType, handleEvent); } } function start(handleEvent) { running = true; addEventListeners(handleEvent); invalidation.then(() => removeEventListeners(handleEvent)); refDate = new Date(); } function stop(handleEvent) { running = false; removeEventListeners(handleEvent); refOffset += new Date() - refDate; refDate = new Date(); } function reset() { _trace.splice(0, _trace.length); refDate = new Date(); refOffset = 0; updateView(); } function submit() { const canvasToRef = image.naturalWidth ? image.naturalWidth / w : 1; const refW = image.width * canvasToRef; const refH = image.height * canvasToRef; const lastEventTime = _trace.length ? _trace[_trace.length - 1].t : 0; const d = new Date(); const duration = Math.max( running ? (d - refDate + refOffset) / 1000 : refOffset / 1000, lastEventTime ); control.value = { imageSrc: image.src, width: refW, height: refH, duration, trace: _trace.map(p => ({ x: p.x * canvasToRef, y: p.y * canvasToRef, eventType: p.eventType, t: p.t })) }; control.dispatchEvent(new CustomEvent("input")); } function createCaptureButton({ handleEvent }) { const captureButton = html``; captureButton.style.marginRight = "1em"; captureButton.style.marginBottom = "1em"; captureButton.style.display = "inline-block"; captureButton.toStart = () => { start(handleEvent); captureButton.innerText = 'Stop'; captureButton.onclick = () => { stop(handleEvent); captureButton.toStop(); }; }; captureButton.toStop = () => { stop(handleEvent); captureButton.innerText = 'Start'; captureButton.onclick = () => { start(handleEvent); captureButton.toStart(); }; }; // initialize in "stop" mode reset(); captureButton.toStop(); return captureButton; } function createClearButton() { const clearButton = html``; clearButton.style.marginRight = "1em"; clearButton.style.marginBottom = "1em"; clearButton.style.display = "inline-block"; clearButton.onclick = () => { reset(); }; return clearButton; } function createSaveButton() { const saveButton = DOM.download( () => new Blob([JSON.stringify(_trace, null, 2)], { type: "application/json" }), `pointer.json`, `Save` ); saveButton.style.marginRight = "1em"; saveButton.style.marginBottom = "1em"; saveButton.style.display = "inline-block"; return saveButton; } function createSubmitButton() { const submitButton = html``; submitButton.style.marginRight = "1em"; submitButton.style.marginBottom = "1em"; submitButton.style.display = "inline-block"; submitButton.onclick = () => { submit(); }; return submitButton; } function createImageInputControl() { const dom = html`

Background image${imageInputControl}

`; dom.style.paddingBottom = "1em"; return dom; } function setupButtons(showButtons) { const initFunctions = new Map([ ['image', createImageInputControl], ['capture', createCaptureButton], ['clear', createClearButton], ['save', createSaveButton], ['info', () => statusText], ['submit', createSubmitButton] ]); const fullList = [...initFunctions.keys()]; const keys = showButtons === true ? fullList : Array.isArray(showButtons) ? showButtons.filter(s => fullList.includes(s)) : []; const isSubmitAuto = !keys.includes('submit'); // by default: start. Latter init functions might change this behavior (createCaptureButton) const handleEvent = getHandleEvent(isSubmitAuto); start(handleEvent); canvas.style.paddingBottom = '1em'; for (const key of keys) { control.append(initFunctions.get(key)({ handleEvent })); } return isSubmitAuto; } function updateAspectRatio() { const ratio = image.naturalWidth / image.naturalHeight; image.height = image.width / ratio; canvas.height = canvas.width / ratio; context.scale(devicePixelRatio, devicePixelRatio); // context.restore(); // <- ??? updateView(); } async function updateImage() { const newImage = await imageInputControl.value; if (newImage && newImage.src !== image.src) { image.src = newImage.src; } } image.style.position = "absolute"; canvas.style.position = "relative"; control.append(image); control.append(canvas); const isSubmitAuto = setupButtons(showButtons); image.onload = () => { updateAspectRatio(); if (isSubmitAuto) { submit(); } }; function handleImageChange() { return imageInputControl.value.then(updateImage); } imageInputControl.addEventListener('input', updateImage); invalidation.then(() => { imageInputControl.removeEventListener('input', updateImage); }); updateImage().then(submit); return control; }33:[{"id":"3fb07c7adf49f5434a72f920c2b125aebea640b5131e3943693de62fbe7d253a18d0378dcb3de499fcf0b6e716c73cd1c397e1b16deb0e1371ae9781bdea9993","href":"https://static.observableusercontent.com/files/3fb07c7adf49f5434a72f920c2b125aebea640b5131e3943693de62fbe7d253a18d0378dcb3de499fcf0b6e716c73cd1c397e1b16deb0e1371ae9781bdea9993","name":"ryan-stone-U3cctUBucn0-unsplash.jpg","type":"image/jpeg","lastModified":1598459242310.538,"size":193750}] 2f:{"title":"Pointer trace on image","cells":[{"id":0,"value":"md`# Pointer trace on image\n\nCapture data of pointer events on a canvas, with a background image.\n\nInstall\n\n~~~js\nimport {pointerTrace} from '@severo/pointer-trace-on-image'\n~~~\n\nUse\n\n~~~js\nviewof trace = pointerTrace()\n~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"viewof trace = pointerTrace()","pinned":true,"hidden":false,"mode":"ojs"},{"id":782,"value":"trace","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`The value is an object \\`{imageSrc, width, height, duration, trace}\\`:\n\n- \\`imageSrc\\`: the background image URL if any, or \\`\"\"\\` otherwise\n- \\`width\\`: the reference width. Equals to the background image \\`naturalWidth\\` if present, or to the \\`width\\` option otherwise\n- \\`height\\`: the reference height. Equals to the background image \\`naturalHeight\\` if present, or to the \\`height\\` option otherwise\n- \\`duration\\`: duration in seconds until the Stop button is pressed, or until the last captured event otherwise. Note that the time starts when the Start button is pressed for the first time (or at control creation if the Start button is not shown), and is paused every time the Stop button is hit.\n- \\`trace\\`: an array of points. Each point is an object \\`{x, y, eventType, t}\\`:\n - \\`x\\`: x position in pixels, between \\`0\\` and \\`width\\`\n - \\`y\\`: y position in pixels, between \\`0\\` and \\`height\\`\n - \\`eventType\\`: one of ${pointerEventTypes.map(e => `\\`${e}\\``).join(', ')}\n - \\`t\\`: time in seconds\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"trace","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"viewof traceWithOptions = pointerTrace({\n width: 500,\n eventTypes: ['pointerdown'],\n render: renderLine('white'),\n filter: event => event.pressure > 0,\n showButtons: ['info', 'save', 'image'],\n imageInputOptions: {\n initialUrl: await FileAttachment(\n \"ryan-stone-U3cctUBucn0-unsplash.jpg\"\n ).url()\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":453,"value":"traceWithOptions","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`---\n\n### Credits\n\n_Developed for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage._\n\n_Based on https://observablehq.com/@severo/pointer-trace, but published in a different notebook because the value format has changed_\n\n*Photo by [Ryan Stone](https://unsplash.com/@rstone_design) on [Unsplash](https://unsplash.com/photos/U3cctUBucn0)*\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"md`### CHANGELOG\n\n- 2020/09/11: add \"touch-action: none\" CSS property\n- 2020/09/03: add bottom margin to the buttons\n- 2020/09/03: add a submit button\n- 2020/08/26: fork https://observablehq.com/@severo/pointer-trace, add the [imageInput](https://observablehq.com/@mbostock/file-input) control to select the background image, and change the value format.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`### TODO\n\n_empty_\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"pointerEventTypes = ['pointerdown', 'pointerup', 'pointermove', 'pointerout']","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"helloTrace = helloStroke.map(p => ({\n x: p[0],\n y: p[1],\n eventType: 'pointermove',\n t: 0\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"function renderLine(color = 'black') {\n return function(context, trace, { curve }) {\n context.save()\n context.clearRect(0, 0, context.canvas.width, context.canvas.height);\n context.strokeStyle = color;\n context.beginPath();\n curve.lineStart();\n for (const p of trace) curve.point(p.x, p.y);\n curve.lineEnd();\n context.stroke();\n context.restore()\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"function renderPoints(context, trace) {\n const radius = 1;\n context.save();\n context.clearRect(0, 0, context.canvas.width, context.canvas.height);\n\n for (const p of trace) {\n if (p.eventType === 'pointerdown') {\n context.beginPath();\n context.arc(p.x, p.y, 5 * radius, 0, Math.PI * 2, true);\n context.stroke();\n } else {\n context.beginPath();\n context.arc(p.x, p.y, radius, 0, Math.PI * 2, true);\n context.fill();\n }\n }\n context.restore();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"d3 = require(\"d3-shape@1\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"// Polyfill the pointer events if required\nrequire(\"pepjs\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"import { stroke as helloStroke } from '@observablehq/introduction-to-views'","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}