Skip to content

Commit

Permalink
WIP: initial visual
Browse files Browse the repository at this point in the history
  • Loading branch information
Michael Jae-Yoon Chung committed May 2, 2019
1 parent 4409896 commit 43b5840
Show file tree
Hide file tree
Showing 4 changed files with 259 additions and 29 deletions.
38 changes: 22 additions & 16 deletions dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23000,9 +23000,9 @@ var start = async function start(element, video, canvas) {
iouThreshold: 0.5, // ioU threshold for non-max suppression
scoreThreshold: 0.6 }, modelParams);

if (!model) model = await handTrack.load(modelParams);
var videoStatus = await handTrack.startVideo(video);
if (!videoStatus) throw 'Start video failed';
if (!model) model = await handTrack.load(modelParams);

var videoWidth = video.width;
var videoHeight = video.height;
Expand All @@ -23014,25 +23014,31 @@ var start = async function start(element, video, canvas) {
model.renderPredictions(predictions, canvas, context, video);

if (lastPredictions.length === 0 && predictions.length > 0) {
touches = [{
x: (predictions[0].bbox[0] + 0.0 * predictions[0].bbox[2]) / videoWidth * element.offsetWidth + element.offsetLeft,
y: (predictions[0].bbox[1] + 0.0 * predictions[0].bbox[3]) / videoHeight * element.offsetHeight + element.offsetTop,
target: element
}];
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
};
});
Simulator.events.touch.trigger(touches, touches[0].target, 'start');
} else if (predictions.length === 0 && lastPredictions.length > 0) {
touches = [{
x: (lastPredictions[0].bbox[0] + 0.0 * lastPredictions[0].bbox[2]) / videoWidth * element.offsetWidth + element.offsetLeft,
y: (lastPredictions[0].bbox[1] + 0.0 * lastPredictions[0].bbox[3]) / videoHeight * element.offsetHeight + element.offsetTop,
target: element
}];
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
};
});
Simulator.events.touch.trigger(touches, touches[0].target, 'end');
} else if (predictions.length > 0) {
touches = [{
x: (predictions[0].bbox[0] + 0.0 * predictions[0].bbox[2]) / videoWidth * element.offsetWidth + element.offsetLeft,
y: (predictions[0].bbox[1] + 0.0 * predictions[0].bbox[3]) / videoHeight * element.offsetHeight + element.offsetTop,
target: element
}];
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
};
});
Simulator.events.touch.trigger(touches, touches[0].target, 'move');
}
lastPredictions = predictions;
Expand Down
1 change: 0 additions & 1 deletion examples/input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
</div>
</div>
<script src="../node_modules/hammerjs/hammer.js"></script>
<script src="../node_modules/handtrackjs/dist/handtrack.min.js"> </script>
<script src="../dist/index.js"></script>
<script>

Expand Down
225 changes: 225 additions & 0 deletions examples/visual.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="assets/style.css">
<title>Hammer.js</title>

<style>

html, body {
overflow: hidden;
margin: 0;
}

body {
-webkit-perspective: 500;
-moz-perspective: 500;
perspective: 500;
}

.animate {
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}

#hit {
padding: 10px;
}

#log {
position: absolute;
padding: 10px;
}

</style>
</head>
<body>
<div id="handtrackjs">
<video autoplay="autoplay" style="display: none;"></video>
<canvas></canvas>
</div>

<div id="log"></div>
<div id="hit" style="background: #42d692; width: 150px; height: 150px;"></div>


<script src="../node_modules/hammerjs/hammer.js"></script>
<script src="../dist/index.js"></script>
<script>

var reqAnimationFrame = (function () {
return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

var log = document.querySelector("#log");
var el = document.querySelector("#hit");

var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2);
var START_Y = Math.round((window.innerHeight - el.offsetHeight) / 2);

var ticking = false;
var transform;
var timer;

var mc = new Hammer.Manager(el, {inputClass: Hammer.TouchInput});

mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));

mc.add(new Hammer.Swipe()).recognizeWith(mc.get('pan'));
mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);

mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
mc.add(new Hammer.Tap());

mc.on("panstart panmove", onPan);
mc.on("rotatestart rotatemove", onRotate);
mc.on("pinchstart pinchmove", onPinch);
mc.on("swipe", onSwipe);
mc.on("tap", onTap);
mc.on("doubletap", onDoubleTap);

mc.on("hammer.input", function(ev) {
if(ev.isFinal) {
resetElement();
}
});


function resetElement() {
el.className = 'animate';
transform = {
translate: { x: START_X, y: START_Y },
scale: 1,
angle: 0,
rx: 0,
ry: 0,
rz: 0
};

requestElementUpdate();

if (log.textContent.length > 2000) {
log.textContent = log.textContent.substring(0, 2000) + "...";
}
}

function updateElementTransform() {
var value = [
'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
'scale(' + transform.scale + ', ' + transform.scale + ')',
'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +','+ transform.angle + 'deg)'
];

value = value.join(" ");
el.textContent = value;
el.style.webkitTransform = value;
el.style.mozTransform = value;
el.style.transform = value;
ticking = false;
}

function requestElementUpdate() {
if(!ticking) {
reqAnimationFrame(updateElementTransform);
ticking = true;
}
}

function logEvent(str) {
//log.insertBefore(document.createTextNode(str +"\n"), log.firstChild);
}

function onPan(ev) {
el.className = '';
transform.translate = {
x: START_X + ev.deltaX,
y: START_Y + ev.deltaY
};

requestElementUpdate();
logEvent(ev.type);
}

var initScale = 1;
function onPinch(ev) {
if(ev.type == 'pinchstart') {
initScale = transform.scale || 1;
}

el.className = '';
transform.scale = initScale * ev.scale;

requestElementUpdate();
logEvent(ev.type);
}

var initAngle = 0;
function onRotate(ev) {
if(ev.type == 'rotatestart') {
initAngle = transform.angle || 0;
}

el.className = '';
transform.rz = 1;
transform.angle = initAngle + ev.rotation;
requestElementUpdate();
logEvent(ev.type);
}

function onSwipe(ev) {
var angle = 50;
transform.ry = (ev.direction & Hammer.DIRECTION_HORIZONTAL) ? 1 : 0;
transform.rx = (ev.direction & Hammer.DIRECTION_VERTICAL) ? 1 : 0;
transform.angle = (ev.direction & (Hammer.DIRECTION_RIGHT | Hammer.DIRECTION_UP)) ? angle : -angle;

clearTimeout(timer);
timer = setTimeout(function () {
resetElement();
}, 300);
requestElementUpdate();
logEvent(ev.type);
}

function onTap(ev) {
transform.rx = 1;
transform.angle = 25;

clearTimeout(timer);
timer = setTimeout(function () {
resetElement();
}, 200);
requestElementUpdate();
logEvent(ev.type);
}

function onDoubleTap(ev) {
transform.rx = 1;
transform.angle = 80;

clearTimeout(timer);
timer = setTimeout(function () {
resetElement();
}, 500);
requestElementUpdate();
logEvent(ev.type);
}

resetElement();


var video = document.getElementById("handtrackjs").getElementsByTagName("video")[0];
video.width = 320;
video.height = 240;
var canvas = document.getElementById("handtrackjs").getElementsByTagName("canvas")[0];
const context = canvas.getContext("2d");

HandtrackTouch.start(el, video, canvas);

</script>
</body>
</html>
24 changes: 12 additions & 12 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,31 +29,31 @@ const start = async (element, video, canvas, {
model.renderPredictions(predictions, canvas, context, video);

if (lastPredictions.length === 0 && predictions.length > 0) {
touches = [{
x: (predictions[0].bbox[0] + 0.5 * predictions[0].bbox[2]) /
touches = predictions.map(prediction => ({
x: (prediction.bbox[0] + 0.5 * prediction.bbox[2]) /
videoWidth * element.offsetWidth + element.offsetLeft,
y: (predictions[0].bbox[1] + 0.5 * predictions[0].bbox[3]) /
y: (prediction.bbox[1] + 0.5 * prediction.bbox[3]) /
videoHeight * element.offsetHeight + element.offsetTop,
target: element,
}];
}));
Simulator.events.touch.trigger(touches, touches[0].target, 'start');
} else if (predictions.length === 0 && lastPredictions.length > 0) {
touches = [{
x: (lastPredictions[0].bbox[0] + 0.5 * lastPredictions[0].bbox[2]) /
touches = lastPredictions.map(prediction => ({
x: (prediction.bbox[0] + 0.5 * prediction.bbox[2]) /
videoWidth * element.offsetWidth + element.offsetLeft,
y: (lastPredictions[0].bbox[1] + 0.5 * lastPredictions[0].bbox[3]) /
y: (prediction.bbox[1] + 0.5 * prediction.bbox[3]) /
videoHeight * element.offsetHeight + element.offsetTop,
target: element,
}];
}));
Simulator.events.touch.trigger(touches, touches[0].target, 'end');
} else if (predictions.length > 0) {
touches = [{
x: (predictions[0].bbox[0] + 0.5 * predictions[0].bbox[2]) /
touches = predictions.map(prediction => ({
x: (prediction.bbox[0] + 0.5 * prediction.bbox[2]) /
videoWidth * element.offsetWidth + element.offsetLeft,
y: (predictions[0].bbox[1] + 0.5 * predictions[0].bbox[3]) /
y: (prediction.bbox[1] + 0.5 * prediction.bbox[3]) /
videoHeight * element.offsetHeight + element.offsetTop,
target: element,
}];
}));
Simulator.events.touch.trigger(touches, touches[0].target, 'move');
}
lastPredictions = predictions;
Expand Down

0 comments on commit 43b5840

Please sign in to comment.