diff --git a/dist/index.js b/dist/index.js index 32b4e49..a26c394 100644 --- a/dist/index.js +++ b/dist/index.js @@ -22992,7 +22992,15 @@ var start = async function start(element, video, canvas) { _ref$model = _ref.model, model = _ref$model === undefined ? null : _ref$model, _ref$modelParams = _ref.modelParams, - modelParams = _ref$modelParams === undefined ? {} : _ref$modelParams; + modelParams = _ref$modelParams === undefined ? {} : _ref$modelParams, + _ref$transform = _ref.transform, + transform = _ref$transform === undefined ? function (prediction, video, target) { + return { + x: (prediction.bbox[0] + 0.5 * prediction.bbox[2]) / video.width * target.offsetWidth + target.offsetLeft, + y: (prediction.bbox[1] + 0.5 * prediction.bbox[3]) / video.height * target.offsetHeight + target.offsetTop, + target: target + }; + } : _ref$transform; modelParams = _extends({ flipHorizontal: true, // flip e.g for video @@ -23015,29 +23023,17 @@ var start = async function start(element, video, canvas) { if (lastPredictions.length === 0 && predictions.length > 0) { touches = predictions.map(function (prediction) { - return { - x: (prediction.bbox[0] + 0.5 * prediction.bbox[2]) / videoWidth * element.offsetWidth + element.offsetLeft, - y: (prediction.bbox[1] + 0.5 * prediction.bbox[3]) / videoHeight * element.offsetHeight + element.offsetTop, - target: element - }; + return transform(prediction, video, element); }); Simulator.events.touch.trigger(touches, touches[0].target, 'start'); } else if (predictions.length === 0 && lastPredictions.length > 0) { touches = lastPredictions.map(function (prediction) { - return { - x: (prediction.bbox[0] + 0.5 * prediction.bbox[2]) / videoWidth * element.offsetWidth + element.offsetLeft, - y: (prediction.bbox[1] + 0.5 * prediction.bbox[3]) / videoHeight * element.offsetHeight + element.offsetTop, - target: element - }; + return transform(prediction, video, element); }); Simulator.events.touch.trigger(touches, touches[0].target, 'end'); } else if (predictions.length > 0) { touches = predictions.map(function (prediction) { - return { - x: (prediction.bbox[0] + 0.5 * prediction.bbox[2]) / videoWidth * element.offsetWidth + element.offsetLeft, - y: (prediction.bbox[1] + 0.5 * prediction.bbox[3]) / videoHeight * element.offsetHeight + element.offsetTop, - target: element - }; + return transform(prediction, video, element); }); Simulator.events.touch.trigger(touches, touches[0].target, 'move'); } diff --git a/examples/visual.html b/examples/visual.html index f46b4b4..f601718 100644 --- a/examples/visual.html +++ b/examples/visual.html @@ -218,7 +218,16 @@ var canvas = document.getElementById("handtrackjs").getElementsByTagName("canvas")[0]; const context = canvas.getContext("2d"); - HandtrackTouch.start(el, video, canvas); + var options = { + transform: function (prediction, video, target) { + return { + x: (prediction.bbox[0] + 0.5 * prediction.bbox[2]) / video.width * 1920, + y: (prediction.bbox[1] + 0.5 * prediction.bbox[3]) / video.height * 1200, + target: target, + }; + } + }; + HandtrackTouch.start(el, video, canvas, options); diff --git a/src/index.js b/src/index.js index 1d2ca4c..e6cfb79 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,13 @@ require('../node_modules/hammer-simulator/index.js'); const start = async (element, video, canvas, { model = null, modelParams = {}, + transform = (prediction, video, target) => ({ + x: (prediction.bbox[0] + 0.5 * prediction.bbox[2]) / + video.width * target.offsetWidth + target.offsetLeft, + y: (prediction.bbox[1] + 0.5 * prediction.bbox[3]) / + video.height * target.offsetHeight + target.offsetTop, + target: target, + }), } = {}) => { modelParams = { flipHorizontal: true, // flip e.g for video @@ -22,6 +29,7 @@ const start = async (element, video, canvas, { const videoWidth = video.width; const videoHeight = video.height; + let lastPredictions = []; let touches = []; function runDetection() { @@ -29,31 +37,16 @@ const start = async (element, video, canvas, { model.renderPredictions(predictions, canvas, context, video); if (lastPredictions.length === 0 && predictions.length > 0) { - touches = predictions.map(prediction => ({ - x: (prediction.bbox[0] + 0.5 * prediction.bbox[2]) / - videoWidth * element.offsetWidth + element.offsetLeft, - y: (prediction.bbox[1] + 0.5 * prediction.bbox[3]) / - videoHeight * element.offsetHeight + element.offsetTop, - target: element, - })); + touches = predictions.map(prediction => + transform(prediction, video, element)); Simulator.events.touch.trigger(touches, touches[0].target, 'start'); } else if (predictions.length === 0 && lastPredictions.length > 0) { - touches = lastPredictions.map(prediction => ({ - x: (prediction.bbox[0] + 0.5 * prediction.bbox[2]) / - videoWidth * element.offsetWidth + element.offsetLeft, - y: (prediction.bbox[1] + 0.5 * prediction.bbox[3]) / - videoHeight * element.offsetHeight + element.offsetTop, - target: element, - })); + touches = lastPredictions.map(prediction => + transform(prediction, video, element)); Simulator.events.touch.trigger(touches, touches[0].target, 'end'); } else if (predictions.length > 0) { - touches = predictions.map(prediction => ({ - x: (prediction.bbox[0] + 0.5 * prediction.bbox[2]) / - videoWidth * element.offsetWidth + element.offsetLeft, - y: (prediction.bbox[1] + 0.5 * prediction.bbox[3]) / - videoHeight * element.offsetHeight + element.offsetTop, - target: element, - })); + touches = predictions.map(prediction => + transform(prediction, video, element)); Simulator.events.touch.trigger(touches, touches[0].target, 'move'); } lastPredictions = predictions;