simo97/object_detector.html

## object_detector.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>tracking.js - first tracking</title>
  <script src="tracking-min.js"></script>

  <!-- include dataset for each objet type -->
  <script src="data/face.js"></script>
  <script src="data/eye.js"></script>
  <script src="data/mouth.js"></script>

<style>
    .rect {
      border: 2px solid #a64ceb;
      left: -1000px;
      position: absolute;
      top: -1000px;
    }
    #img {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -173px 0 0 -300px;
    }
    </style>

</head>
<body>
    <div class="demo-frame">
        <div class="demo-container">
            <img id='img' style="width: 500px;" src="faces.jpg">
        </div>
    </div>

    <script>
        window.onload = function() {
          var img = document.getElementById('img');
          var tracker = new tracking.ObjectTracker([ 'mouth', 'eye']);// define object i want to track here
          tracker.setStepSize(1.7);
          tracking.track('#img', tracker);
          tracker.on('track', function(event) {
            event.data.forEach(function(rect) {
              window.plot(rect.x, rect.y, rect.width, rect.height);
            });
          });
          window.plot = function(x, y, w, h) {
              console.log(x)
            var rect = document.createElement('div');
            document.querySelector('.demo-container').appendChild(rect);
            rect.classList.add('rect');
            rect.style.width = w + 'px';
            rect.style.height = h + 'px';
            rect.style.left = (img.offsetLeft + x) + 'px';
            rect.style.top = (img.offsetTop + y) + 'px';
          };
        };
      </script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>tracking.js - first tracking</title>
	<script src="tracking-min.js"></script>

	<!-- include dataset for each objet type -->
	<script src="data/face.js"></script>
	<script src="data/eye.js"></script>
	<script src="data/mouth.js"></script>

	<style>
	.rect {
	border: 2px solid #a64ceb;
	left: -1000px;
	position: absolute;
	top: -1000px;
	}
	#img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -173px 0 0 -300px;
	}
	</style>

	</head>
	<body>
	<div class="demo-frame">
	<div class="demo-container">
	<img id='img' style="width: 500px;" src="faces.jpg">
	</div>
	</div>

	<script>
	window.onload = function() {
	var img = document.getElementById('img');
	var tracker = new tracking.ObjectTracker([ 'mouth', 'eye']);// define object i want to track here
	tracker.setStepSize(1.7);
	tracking.track('#img', tracker);
	tracker.on('track', function(event) {
	event.data.forEach(function(rect) {
	window.plot(rect.x, rect.y, rect.width, rect.height);
	});
	});
	window.plot = function(x, y, w, h) {
	console.log(x)
	var rect = document.createElement('div');
	document.querySelector('.demo-container').appendChild(rect);
	rect.classList.add('rect');
	rect.style.width = w + 'px';
	rect.style.height = h + 'px';
	rect.style.left = (img.offsetLeft + x) + 'px';
	rect.style.top = (img.offsetTop + y) + 'px';
	};
	};
	</script>
	</body>
	</html>