Include a title and frame in demos

breakeryang · Jul 24, 2014 · 23b9c85 · 23b9c85
1 parent 9c664bc
commit 23b9c85
Show file tree

Hide file tree

Showing 13 changed files with 441 additions and 325 deletions.
diff --git a/examples/assets/demo.css b/examples/assets/demo.css
@@ -0,0 +1,52 @@
+* {
+  margin: 0;
+  padding: 0;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.demo-title {
+  position: absolute;
+  width: 100%;
+  background: #2e2f33;
+  z-index: 2;
+  padding: .7em 0;
+}
+
+.demo-title a {
+  color: #fff;
+  border-bottom: 1px dotted #a64ceb;
+  text-decoration: none;
+}
+
+.demo-title p {
+  color: #fff;
+  text-align: center;
+  text-transform: lowercase;
+  font-size: 15px;
+}
+
+.demo-frame {
+  background: url(frame.png) no-repeat;
+  width: 854px;
+  height: 658px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin: -329px 0 0 -429px;
+  padding: 95px 20px 45px 34px;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.demo-container {
+  width: 100%;
+  height: 530px;
+  position: relative;
+  background: #eee;
+  overflow: hidden;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
diff --git a/examples/assets/faces.jpg b/examples/assets/faces.jpg
diff --git a/examples/assets/faces.png b/examples/assets/faces.png
diff --git a/examples/assets/frame.png b/examples/assets/frame.png
diff --git a/examples/assets/psmove.png b/examples/assets/psmove.png
diff --git a/examples/color_camera.html b/examples/color_camera.html
@@ -1,14 +1,19 @@
 <!doctype html>
 <html>
 <head>
-
-  <title>tracking.js - color with camera</title>
-
   <meta charset="utf-8">
+  <title>tracking.js - color with camera</title>
+  <link rel="stylesheet" href="assets/demo.css">
 
-  <script src="../build/tracking.js"></script>
+  <script src="../build/tracking-min.js"></script>
 
   <style>
+  video, canvas {
+    padding-top: 5px;
+  }
+  video {
+    padding-left: 5px;
+  }
   .rect {
     height: 80px;
     left: -1000px;
@@ -19,8 +24,16 @@
   </style>
 </head>
 <body>
-  <video id="video" width="640" height="480" preload autoplay loop muted controls></video>
-  <canvas id="canvas" width="640" height="480"></canvas>
+  <div class="demo-title">
+    <p><a href="http://trackingjs.com">tracking.js</a> － get user's webcam and detect colors</p>
+  </div>
+
+  <div class="demo-frame">
+    <div class="demo-container">
+      <video id="video" width="393" height="295" preload autoplay loop muted controls></video>
+      <canvas id="canvas" width="393" height="295"></canvas>
+    </div>
+  </div>
 
   <script>
     window.onload = function() {
@@ -33,7 +46,7 @@
       tracking.track('#video', tracker, { camera: true });
 
       tracker.on('track', function(event) {
-        context.drawImage(video, 0, 0, 640, 480);
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
         event.data.forEach(function(rect) {
           context.strokeStyle = rect.color;
           context.strokeRect(rect.x, rect.y, rect.width, rect.height);

diff --git a/examples/color_hello_world.html b/examples/color_hello_world.html
@@ -1,29 +1,37 @@
 <!doctype html>
 <html>
 <head>
-
-  <title>tracking.js - hello world</title>
-
   <meta charset="utf-8">
+  <title>tracking.js - color hello world</title>
+  <link rel="stylesheet" href="assets/demo.css">
 
-  <script src="../build/tracking.js"></script>
+  <script src="../build/tracking-min.js"></script>
 
   <style>
   .rect {
+    width: 80px;
     height: 80px;
-    left: -1000px;
     position: absolute;
+    left: -1000px;
     top: -1000px;
-    width: 80px;
   }
   </style>
 </head>
 <body>
-  <img id="img" src="assets/psmove.png" />
+  <div class="demo-title">
+    <p><a href="http://trackingjs.com">tracking.js</a> － detect certain colors in a image</p>
+  </div>
+
+  <div class="demo-frame">
+    <div class="demo-container">
+      <img id="img" src="assets/psmove.png" />
+    </div>
+  </div>
 
   <script>
     window.onload = function() {
       var img = document.getElementById('img');
+      var demoContainer = document.querySelector('.demo-container');
 
       var tracker = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);
 
@@ -37,7 +45,7 @@
 
       window.plot = function(x, y, w, h, color) {
         var rect = document.createElement('div');
-        document.body.appendChild(rect);
+        document.querySelector('.demo-container').appendChild(rect);
         rect.classList.add('rect');
         rect.style.border = '2px solid ' + color;
         rect.style.width = w + 'px';