update package.json to launch demo example. update readme

README.md

@@ -164,6 +164,14 @@ Returns an array of classes and confidence scores that looks like:
 - `startVideo(video)` : start webcam video stream on given video element. Returns a promise that can be used to validate if user provided video permission.
 - `stopVideo(video)` : stop video stream.
 
+## Run Demo 
+
+Commands below runs the demo example in the `demo` folder.
+
+`npm install`
+`npm run start`
+
+
 
 ## How was this built?
 
@@ -172,7 +180,7 @@ The object detection model used in this project was trained using annotated imag
 
 ## TODO (ideas welcome)
 
-- This thing is still compute heavy (you will hear your fans start spinning like crazy after a few mins). This is mainly because of the neural net operations needed to predict bounding boxes. Perhaps there might be ways to improve/optimize this.
+- This thing is still compute heavy (your fans may spin after while). This is mainly because of the neural net operations needed to predict bounding boxes. Perhaps there might be ways to improve/optimize this.
 - Tracking id's across frames. Perhaps some nifty methods that assigns ids to each had as they enter a frame and tracks them (e.g based on naive euclidean distance).
 - Add some discrete poses (e.g. instead of just hand, detect open hand, fist).
 

demo/index.html

@@ -15,10 +15,10 @@
     Handtrack.js allows you prototype handtracking interactions in the browser in 3 lines of code.
   </div>
   <div class="mb10">
-    <button onclick="toggleVideo()" id="trackbutton" class="bx--btn bx--btn--secondary" type="button" disabled>
+    <button  id="trackbutton" class="bx--btn bx--btn--secondary" type="button" disabled>
       Toggle Video
     </button>
-    <button onclick="nextImage()" id="nextimagebutton" class="mt10 bx--btn bx--btn--secondary" type="button" disabled>
+    <button id="nextimagebutton" class="mt10 bx--btn bx--btn--secondary" type="button" disabled>
       Next Image
     </button>
     <div id="updatenote" class="updatenote mt10"> loading model ..</div>
@@ -32,7 +32,7 @@
 
   <script src="https://unpkg.com/carbon-components@latest/scripts/carbon-components.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/handtrackjs@latest/dist/handtrack.min.js"> </script>
-  <script src="track.js"></script>
+  <script src="index.js"></script>
 </body>
 
 </html>

demo/track.js → demo/index.js

@@ -45,10 +45,21 @@ function toggleVideo() {
     }
 }
 
+
+
+nextImageButton.addEventListener("click", function(){
+    nextImage();
+});
+
+trackButton.addEventListener("click", function(){
+    toggleVideo();
+});
+
 function nextImage() {
 
     imgindex++;
     handimg.src = "images/" + imgindex % 15 + ".jpg"
+    // alert(handimg.src)
     runDetectionImage(handimg)
 }
 

package.json

@@ -11,10 +11,10 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "cross-env NODE_ENV=development parcel demo/index.html --open",
-    "build": "cross-env NODE_ENV=production parcel build demo/index.html --public-url https://victordibia.github.io/handtrackjs/",
+    "start": "cp -R demo/images dist/ && cross-env NODE_ENV=development parcel demo/index.html --open",   
     "deploy": "gh-pages -d demoreact/build",
-    "srcbuild": "cross-env NODE_ENV=production parcel build --out-dir srcdist demo/index.html"
+    "srcbuild": "cross-env NODE_ENV=production parcel build --out-dir srcdist demo/index.html",
+    "build" : "rollup -c "
   },
   "files": [
     "dist/**/*",