Skip to content

Instantly share code, notes, and snippets.

@dassiorleando

dassiorleando/web_compoment_objects.html

Created April 9, 2019 11:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dassiorleando/fb5c5f71ad76e3ec360530c2d0ac339e to your computer and use it in GitHub Desktop.
Save dassiorleando/fb5c5f71ad76e3ec360530c2d0ac339e to your computer and use it in GitHub Desktop.
Download ZIP
TrackingJs - Web Compoment Objects Detection
Raw
web_compoment_objects.html
<!DOCTYPE html>
<html>
<head>
<!-- Importing Web Component's Polyfill -->
<script src="bower/platform/platform.js"></script>
<!-- Importing Custom Elements -->
<link rel="import" href="../src/image-object-tracking.html">
</head>
<body>
<!-- Using Custom Elements -->
<img is="image-object-tracking" target="face" src="assets/faces.png" /><!-- HERE THE WEB COMPONENT -->
<script>
var img = document.querySelector('img');
// Fires when faces are found on the image.
img.addEventListener('track', function(event) {
event.detail.data.forEach(function(rect) {
plotRectangle(img, rect); // process received data and plot a rectangle on detected objects
});
});
function plotRectangle(el, rect) {
var div = document.createElement('div');
div.style.position = 'absolute';
div.style.border = '2px solid ' + (rect.color || 'magenta');
div.style.width = rect.width + 'px';
div.style.height = rect.height + 'px';
div.style.left = el.offsetLeft + rect.x + 'px';
div.style.top = el.offsetTop + rect.y + 'px';
document.body.appendChild(div);
return div;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment