fix: Remove coaching nav arrows on single image target

Geo-Web-Project · May 31, 2023 · 4cd8416 · 4cd8416
1 parent 3594b54
commit 4cd8416
Show file tree

Hide file tree

Showing 5 changed files with 176 additions and 15 deletions.
diff --git a/examples/webpack-example/package.json b/examples/webpack-example/package.json
@@ -35,6 +35,7 @@
   "dependencies": {
     "@helia/dag-cbor": "^0.0.0",
     "blockstore-idb": "^1.1.0",
-    "helia": "^1.1.5"
+    "helia": "^1.1.5",
+    "http-server": "^14.1.1"
   }
 }
diff --git a/examples/webpack-example/src/index.ts b/examples/webpack-example/src/index.ts
@@ -22,6 +22,8 @@ import {
 } from "@augmented-worlds/system-babylonjs";
 
 import "@augmented-worlds/system-babylonjs/styles.css";
+import "swiper/css";
+import "swiper/css/navigation";
 
 init()
   .then(() => {
@@ -67,16 +69,46 @@ init()
       ComponentType.Orientation,
       {} as Orientation
     );
-    // world.add_component_to_entity(testImageAnchor, ComponentType.TrackedImage, {
-    //   imageAsset: {
-    //     "/": "QmZsDopGXAGPtToWSi8bxYjsrZkiraX7wqMZ9K8LgW2tyE",
-    //   },
-    //   physicalWidthInMeters: 0.165,
-    // } as TrackedImage);
+    world.add_component_to_entity(testImageAnchor, ComponentType.TrackedImage, {
+      imageAsset: {
+        "/": "QmZsDopGXAGPtToWSi8bxYjsrZkiraX7wqMZ9K8LgW2tyE",
+      },
+      physicalWidthInMeters: 0.165,
+    } as TrackedImage);
     world.add_component_to_entity(testImageAnchor, ComponentType.IsAnchor, {
       isAnchor: true,
     } as IsAnchor);
 
+    const testImageAnchor1 = world.create_entity();
+    world.add_component_to_entity(
+      testImageAnchor1,
+      ComponentType.Component,
+      {}
+    );
+    world.add_component_to_entity(
+      testImageAnchor1,
+      ComponentType.Position,
+      {} as Position
+    );
+    world.add_component_to_entity(
+      testImageAnchor1,
+      ComponentType.Orientation,
+      {} as Orientation
+    );
+    world.add_component_to_entity(
+      testImageAnchor1,
+      ComponentType.TrackedImage,
+      {
+        imageAsset: {
+          "/": "QmWgve8r2o8NRTjFxEVawXM9nD7m97zDwJS9T4cFER5nVE",
+        },
+        physicalWidthInMeters: 0.10478,
+      } as TrackedImage
+    );
+    world.add_component_to_entity(testImageAnchor1, ComponentType.IsAnchor, {
+      isAnchor: true,
+    } as IsAnchor);
+
     const testEntity = world.create_entity();
     world.add_component_to_entity(testEntity, ComponentType.Component, {});
     world.add_component_to_entity(testEntity, ComponentType.GLTFModel, {
@@ -113,7 +145,7 @@ init()
       coachingOverlayEntity,
       ComponentType.CoachingOverlay,
       {
-        trackedImages: [{ "/": testImageAnchor }],
+        trackedImages: [{ "/": testImageAnchor }, { "/": testImageAnchor1 }],
         text: "Point and hold the camera on the image target to enter AR.",
       } as CoachingOverlay
     );

diff --git a/examples/webpack-example/yarn.lock b/examples/webpack-example/yarn.lock
@@ -36,11 +36,11 @@
 
 "@augmented-worlds/system-babylonjs@file:../..":
   "resolved" "file:../.."
-  "version" "0.1.6"
+  "version" "0.1.8"
   dependencies:
     "@babylonjs/core" "^6.3.1"
     "@babylonjs/loaders" "^6.3.1"
-    "augmented-worlds" "^0.1.3"
+    "augmented-worlds" "^0.1.7"
     "multiformats" "^11.0.2"
     "swiper" "^9.3.2"
     "typescript" "^5.0.4"
@@ -1547,11 +1547,25 @@
   "resolved" "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz"
   "version" "1.1.1"
 
+"async@^2.6.4":
+  "integrity" "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA=="
+  "resolved" "https://registry.npmjs.org/async/-/async-2.6.4.tgz"
+  "version" "2.6.4"
+  dependencies:
+    "lodash" "^4.17.14"
+
 "balanced-match@^1.0.0":
   "integrity" "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
   "resolved" "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
   "version" "1.0.2"
 
+"basic-auth@^2.0.1":
+  "integrity" "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg=="
+  "resolved" "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz"
+  "version" "2.0.1"
+  dependencies:
+    "safe-buffer" "5.1.2"
+
 "batch@0.6.1":
   "integrity" "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
   "resolved" "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz"
@@ -1696,7 +1710,7 @@
   "resolved" "https://registry.npmjs.org/cborg/-/cborg-1.10.2.tgz"
   "version" "1.10.2"
 
-"chalk@^4.1.0":
+"chalk@^4.1.0", "chalk@^4.1.2":
   "integrity" "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="
   "resolved" "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
   "version" "4.1.2"
@@ -1834,6 +1848,11 @@
   "resolved" "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz"
   "version" "1.0.3"
 
+"corser@^2.0.1":
+  "integrity" "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ=="
+  "resolved" "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz"
+  "version" "2.0.1"
+
 "cross-spawn@^7.0.3":
   "integrity" "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w=="
   "resolved" "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -1881,6 +1900,13 @@
     "it-take" "^3.0.1"
     "uint8arrays" "^4.0.2"
 
+"debug@^3.2.7":
+  "integrity" "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ=="
+  "resolved" "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
+  "version" "3.2.7"
+  dependencies:
+    "ms" "^2.1.1"
+
 "debug@^4.1.0":
   "integrity" "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ=="
   "resolved" "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
@@ -2331,6 +2357,11 @@
   "resolved" "https://registry.npmjs.org/hashlru/-/hashlru-2.3.0.tgz"
   "version" "2.3.0"
 
+"he@^1.2.0":
+  "integrity" "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
+  "resolved" "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
+  "version" "1.2.0"
+
 "helia@^1.1.5":
   "integrity" "sha512-7BPdSX/vPCUakmEhX9fGYLE3elJYUeDab2f4E1R6N6CFfMgc9qgF2SOLrc8VmD1/nwidjJqoFLWK7/c/06QuMA=="
   "resolved" "https://registry.npmjs.org/helia/-/helia-1.1.5.tgz"
@@ -2389,6 +2420,13 @@
     "readable-stream" "^2.0.1"
     "wbuf" "^1.1.0"
 
+"html-encoding-sniffer@^3.0.0":
+  "integrity" "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA=="
+  "resolved" "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz"
+  "version" "3.0.0"
+  dependencies:
+    "whatwg-encoding" "^2.0.0"
+
 "html-entities@^2.3.2":
   "integrity" "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA=="
   "resolved" "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz"
@@ -2445,6 +2483,25 @@
     "follow-redirects" "^1.0.0"
     "requires-port" "^1.0.0"
 
+"http-server@^14.1.1":
+  "integrity" "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A=="
+  "resolved" "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz"
+  "version" "14.1.1"
+  dependencies:
+    "basic-auth" "^2.0.1"
+    "chalk" "^4.1.2"
+    "corser" "^2.0.1"
+    "he" "^1.2.0"
+    "html-encoding-sniffer" "^3.0.0"
+    "http-proxy" "^1.18.1"
+    "mime" "^1.6.0"
+    "minimist" "^1.2.6"
+    "opener" "^1.5.1"
+    "portfinder" "^1.0.28"
+    "secure-compare" "3.0.1"
+    "union" "~0.5.0"
+    "url-join" "^4.0.1"
+
 "human-signals@^2.1.0":
   "integrity" "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
   "resolved" "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz"
@@ -2457,6 +2514,13 @@
   dependencies:
     "safer-buffer" ">= 2.1.2 < 3"
 
+"iconv-lite@0.6.3":
+  "integrity" "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw=="
+  "resolved" "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz"
+  "version" "0.6.3"
+  dependencies:
+    "safer-buffer" ">= 2.1.2 < 3.0.0"
+
 "icss-utils@^5.0.0", "icss-utils@^5.1.0":
   "integrity" "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
   "resolved" "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz"
@@ -3053,7 +3117,7 @@
   dependencies:
     "p-locate" "^4.1.0"
 
-"lodash@^4.17.4":
+"lodash@^4.17.14", "lodash@^4.17.4":
   "integrity" "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
   "resolved" "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   "version" "4.17.21"
@@ -3142,7 +3206,7 @@
   dependencies:
     "mime-db" "1.52.0"
 
-"mime@1.6.0":
+"mime@^1.6.0", "mime@1.6.0":
   "integrity" "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
   "resolved" "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
   "version" "1.6.0"
@@ -3164,6 +3228,18 @@
   dependencies:
     "brace-expansion" "^1.1.7"
 
+"minimist@^1.2.6":
+  "integrity" "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
+  "resolved" "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
+  "version" "1.2.8"
+
+"mkdirp@^0.5.6":
+  "integrity" "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw=="
+  "resolved" "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz"
+  "version" "0.5.6"
+  dependencies:
+    "minimist" "^1.2.6"
+
 "mortice@^3.0.1":
   "integrity" "sha512-eyDUsl1nCR9+JtNksKnaESLP9MgAXCA4w1LTtsmOSQNsThnv++f36rrBu5fC/fdGIwTJZmbiaR/QewptH93pYA=="
   "resolved" "https://registry.npmjs.org/mortice/-/mortice-3.0.1.tgz"
@@ -3325,6 +3401,11 @@
     "is-docker" "^2.1.1"
     "is-wsl" "^2.2.0"
 
+"opener@^1.5.1":
+  "integrity" "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A=="
+  "resolved" "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz"
+  "version" "1.5.2"
+
 "p-defer@^4.0.0":
   "integrity" "sha512-Vb3QRvQ0Y5XnF40ZUWW7JfLogicVh/EnA5gBIvKDJoYpeI82+1E3AlB9yOcKFS0AhHrWVnAQO39fbR0G99IVEQ=="
   "resolved" "https://registry.npmjs.org/p-defer/-/p-defer-4.0.0.tgz"
@@ -3447,6 +3528,15 @@
   "resolved" "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz"
   "version" "1.3.6"
 
+"portfinder@^1.0.28":
+  "integrity" "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg=="
+  "resolved" "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz"
+  "version" "1.0.32"
+  dependencies:
+    "async" "^2.6.4"
+    "debug" "^3.2.7"
+    "mkdirp" "^0.5.6"
+
 "postcss-modules-extract-imports@^3.0.0":
   "integrity" "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw=="
   "resolved" "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz"
@@ -3575,6 +3665,13 @@
   "resolved" "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz"
   "version" "2.3.0"
 
+"qs@^6.4.0":
+  "integrity" "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA=="
+  "resolved" "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz"
+  "version" "6.11.2"
+  dependencies:
+    "side-channel" "^1.0.4"
+
 "qs@6.11.0":
   "integrity" "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q=="
   "resolved" "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz"
@@ -3732,7 +3829,7 @@
   "resolved" "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
   "version" "5.1.2"
 
-"safer-buffer@>= 2.1.2 < 3":
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0":
   "integrity" "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
   "resolved" "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
   "version" "2.1.2"
@@ -3777,6 +3874,11 @@
     "ajv-formats" "^2.1.1"
     "ajv-keywords" "^5.1.0"
 
+"secure-compare@3.0.1":
+  "integrity" "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw=="
+  "resolved" "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz"
+  "version" "3.0.1"
+
 "select-hose@^2.0.0":
   "integrity" "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg=="
   "resolved" "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz"
@@ -4148,6 +4250,13 @@
   dependencies:
     "busboy" "^1.6.0"
 
+"union@~0.5.0":
+  "integrity" "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA=="
+  "resolved" "https://registry.npmjs.org/union/-/union-0.5.0.tgz"
+  "version" "0.5.0"
+  dependencies:
+    "qs" "^6.4.0"
+
 "unpipe@~1.0.0", "unpipe@1.0.0":
   "integrity" "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ=="
   "resolved" "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz"
@@ -4168,6 +4277,11 @@
   dependencies:
     "punycode" "^2.1.0"
 
+"url-join@^4.0.1":
+  "integrity" "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA=="
+  "resolved" "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz"
+  "version" "4.0.1"
+
 "utf8-byte-length@^1.0.1":
   "integrity" "sha512-4+wkEYLBbWxqTahEsWrhxepcoVOJ+1z5PGIjPZxRkytcdSUaNjIjBM7Xn8E+pdSuV7SzvWovBFA54FO0JSoqhA=="
   "resolved" "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz"
@@ -4352,6 +4466,13 @@
   "resolved" "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz"
   "version" "0.1.4"
 
+"whatwg-encoding@^2.0.0":
+  "integrity" "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg=="
+  "resolved" "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz"
+  "version" "2.0.0"
+  dependencies:
+    "iconv-lite" "0.6.3"
+
 "wherearewe@^2.0.0", "wherearewe@^2.0.1":
   "integrity" "sha512-XUguZbDxCA2wBn2LoFtcEhXL6AXo+hVjGonwhSTTTU9SzbWG8Xu3onNIpzf9j/mYUcJQ0f+m37SzG77G851uFw=="
   "resolved" "https://registry.npmjs.org/wherearewe/-/wherearewe-2.0.1.tgz"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@augmented-worlds/system-babylonjs",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "",
   "type": "module",
   "main": "dist/index.js",

diff --git a/src/xr/coaching-overlay/CoachingOverlaySystem.ts b/src/xr/coaching-overlay/CoachingOverlaySystem.ts
@@ -49,9 +49,11 @@ export class CoachingOverlaySystem implements System, WebXRFeatureSystem {
     swiperWrapper.classList.add("swiper-wrapper");
 
     const swiperButtonNext = document.createElement("div");
+    swiperButtonNext.id = "swiper-button-next";
     swiperButtonNext.classList.add("swiper-button-next");
 
     const swiperButtonPrev = document.createElement("div");
+    swiperButtonPrev.id = "swiper-button-prev";
     swiperButtonPrev.classList.add("swiper-button-prev");
 
     swiper.appendChild(swiperWrapper);
@@ -123,6 +125,11 @@ export class CoachingOverlaySystem implements System, WebXRFeatureSystem {
       document.querySelector("#coaching-overlay-text")!.innerHTML =
         coachingOverlay.text;
 
+      if (trackedImageComps.length < 2) {
+        document.getElementById("swiper-button-next")?.remove();
+        document.getElementById("swiper-button-prev")?.remove();
+      }
+
       for (const { trackedImage } of trackedImageComps) {
         if (!trackedImage?.imageAsset) continue;