SquirrelMobile/gist:da2ec649f80dbffcb3ab17602601532d

## gistfile1.txt
<!doctype html>
	<html>
	<head>
	  <meta charset="utf-8">
	  <title>tracking.js - face hello world</title>
	  <link rel="stylesheet" href="assets/demo.css">


	  <script src="../build/tracking-min.js"></script>
	  <script src="../build/data/face-min.js"></script>
	  <script src="../build/data/eye-min.js"></script>
	  <script src="../build/data/mouth-min.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-title">
	    <p><a href="http://trackingjs.com" target="_parent">tracking.js</a> － detect faces, eyes and mouths in a image</p>
	  </div>


	  <div class="demo-frame">
	    <div class="demo-container">
	      <img id="img" src="assets/faces.jpg" />
	    </div>
	  </div>


	  <script>
	    window.onload = function() {
	      var img = document.getElementById('img');

	      var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
	      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) {
	        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 - face hello world</title>
	<link rel="stylesheet" href="assets/demo.css">


	<script src="../build/tracking-min.js"></script>
	<script src="../build/data/face-min.js"></script>
	<script src="../build/data/eye-min.js"></script>
	<script src="../build/data/mouth-min.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-title">
	<p><a href="http://trackingjs.com" target="_parent">tracking.js</a> － detect faces, eyes and mouths in a image</p>
	</div>


	<div class="demo-frame">
	<div class="demo-container">
	<img id="img" src="assets/faces.jpg" />
	</div>
	</div>


	<script>
	window.onload = function() {
	var img = document.getElementById('img');

	var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
	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) {
	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>