fix examples

Kim · Kim · commit 6affa88edad4 · 2022-12-13T18:00:06.000+08:00
diff --git a/examples/face-tracking/debug.html b/examples/face-tracking/debug.html
@@ -1,6 +1,5 @@
 <html>
   <head>
-    <script src="../../dist-dev/mindar-face.js" type="module"></script>
     <script>
       const loadImage = async (src) => {
 	return new Promise((resolve, reject) => {
@@ -12,19 +11,16 @@
     </script>
 
     <script type="module">
+      import {Controller} from "../../dist-dev/mindar-face.js";
+
       const process = async() => {
 	const queryImage = await loadImage('./assets/face1.jpeg');
 	
-	const controller = new window.MINDAR.FACE.Controller({});
-	await controller.setup();
-	controller.setInputSize(queryImage.width, queryImage.height);
-	controller.setDisplaySize(queryImage.width, queryImage.height);
-
-	const hasFace = await controller.detect(queryImage);
-	console.log("detected face", hasFace, controller.faceGeometry);
+	const controller = new Controller({});
+	await controller.setup(queryImage);
 
-	const landmark = controller.getLandmarkProperties(0);
-	console.log("landmark", landmark);
+	const result = await controller.faceMeshHelper.detect(queryImage);
+	console.log("result", result);
       }
       process();
     </script>
diff --git a/examples/image-tracking/compile.html b/examples/image-tracking/compile.html
@@ -3,11 +3,15 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css">
     <!-- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> -->
+    <!--
     <script id="mindar-module" src="../../dist-dev/mindar-image.js"  type="module"></script>
+    -->
 
     <script type="module">
+      import {Compiler} from "../../dist-dev/mindar-image.js";
+
       Dropzone.autoDiscover = false;
-      document.getElementById('mindar-module').onload=()=>{
+      //document.getElementById('mindar-module').onload=()=>{
       const compiler = new window.MINDAR.IMAGE.Compiler();
 
       const download = (buffer) => {
@@ -134,7 +138,7 @@
           }
         });
       });
-    };
+    //};
     </script>
 
     <style>
diff --git a/examples/image-tracking/debug.html b/examples/image-tracking/debug.html
@@ -1,6 +1,5 @@
 <html>
   <head>
-    <script src="../../dist-dev/mindar-image.js"></script>
     <script>
       const loadImage = async (src) => {
 	return new Promise((resolve, reject) => {
@@ -11,11 +10,13 @@
       };
     </script>
 
-    <script>
+    <script type="module">
+      import {Controller} from "../../dist-dev/mindar-image.js";
+
       const process = async() => {
 	const queryImage = await loadImage('./assets/card-example/test-card.png');
 	
-	const controller = new MINDAR.IMAGE.Controller({inputWidth: queryImage.width, inputHeight: queryImage.height});
+	const controller = new window.MINDAR.IMAGE.Controller({inputWidth: queryImage.width, inputHeight: queryImage.height});
 	const {dimensions, matchingDataList, imageListList} = await controller.addImageTargets('./assets/card-example/card.mind');
 
 	const {featurePoints} = await controller.detect(queryImage);
diff --git a/index.html b/index.html
@@ -21,10 +21,9 @@ <h2>Face-Tracking</h2>
             <li><a href="examples/face-tracking/example1.html">Example 1</a></li>
             <li><a href="examples/face-tracking/example2.html">Example 2</a></li>
             <li><a href="examples/face-tracking/example3.html">Example 3</a></li>
-            <li><a href="examples/face-tracking/example4.html">Example 4</a></li>
             <li><a href="examples/face-tracking/three-css.html">three-CSS</a></li>
             <li><a href="examples/face-tracking/three-facemesh.html">three-FaceMesh</a></li>
             <li><a href="examples/face-tracking/three.html">three</a></li>
         </ul>
     </body>
-</html>
+</html>
