new-location-based distance fixes

AR-js-org · Dec 29, 2022 · 588ea35 · 588ea35
1 parent d5fd88a
commit 588ea35
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 6 deletions.
diff --git a/aframe/build/aframe-ar-new-location-only.js b/aframe/build/aframe-ar-new-location-only.js
diff --git a/aframe/build/aframe-ar-nft.js b/aframe/build/aframe-ar-nft.js
diff --git a/aframe/build/aframe-ar.js b/aframe/build/aframe-ar.js
diff --git a/aframe/examples/new-location-based/README.md b/aframe/examples/new-location-based/README.md
@@ -14,10 +14,12 @@ These examples have been written specifically, or adapted, for the `new-location
 
 - `basic-js-modules` : version of `basic-js` which uses an ES6 import to include AR.js. Requires building using Webpack: a `webpack.config.js` is provided.
 
+- `show-distance` : version of `basic-js` which shows the distance to a given object when you click on it.
+
 - `poi` : Demonstrates downloading POIs from an OpenStreetMap-based GeoJSON API and adding them to the scene as objects, with text labels.
 
 - `poi-component` : Similar to `poi`, but demonstrating the use of a custom A-Frame component to download and display the POIs.
 
 - `osm-ways` : A more complex example showing how more specialised geodata can be rendered with AR.js. Downloads OpenStreetMap ways (roads, paths) from a GeoJSON API, reprojects them into Spherical Mercator, and adds them to the scene as polylines made up of individual triangles.
 
-- `smoothing` : A version of `basic-js` with a smoothing factor applied.
+- `avoid-shaking` : A version of `basic-js` with a smoothing factor applied to reduce shaking effects.
diff --git a/...s/new-location-based/smoothing/index.html → ...w-location-based/avoid-shaking/index.html b/...s/new-location-based/smoothing/index.html → ...w-location-based/avoid-shaking/index.html
diff --git a/...les/new-location-based/smoothing/index.js → ...new-location-based/avoid-shaking/index.js b/...les/new-location-based/smoothing/index.js → ...new-location-based/avoid-shaking/index.js
diff --git a/aframe/examples/new-location-based/show-distance/clicker.js b/aframe/examples/new-location-based/show-distance/clicker.js
@@ -0,0 +1,9 @@
+/*
+AFRAME.registerComponent("clicker", {
+    init: function() {
+        this.el.addEventListener("click", e=> {
+            alert(this.el.components["gps-new-entity-place"].distance);
+        });
+    }
+});
+*/
diff --git a/aframe/examples/new-location-based/show-distance/index.html b/aframe/examples/new-location-based/show-distance/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>AR.js A-Frame</title>
+<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
+<!-- Assumes AR.js build is in the 'AR.js' directory -->
+<script type='text/javascript' src='../../../../three.js/build/ar-threex-location-only.js'></script>
+<script type='text/javascript' src='../../../build/aframe-ar.js'></script>
+<script src='index.js'></script>
+<script src='clicker.js'></script>
+</head>
+<body>
+<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' renderer='antialias: true; alpha: true' cursor='rayOrigin: mouse' raycaster='near: 0; far:10000'>
+	<a-camera gps-new-camera='gpsMinDistance: 5'></a-camera>
+</a-scene>
+<div id='setloc' style='position:absolute; left: 10px; bottom: 2%; z-index:999; background-color: blue; color: white; padding: 10px'>
+Lat:<input id="lat" value="51.049" /> 
+Lon: <input id="lon" value="-0.723"/> 
+Min Acc: <input id='minacc' value='1000' /> <input type='button' id='go' value='go' />
+</div>
+</body>
+</html>
diff --git a/aframe/examples/new-location-based/show-distance/index.js b/aframe/examples/new-location-based/show-distance/index.js
@@ -0,0 +1,62 @@
+AFRAME.registerComponent("clicker", {
+    init: function() {
+        this.el.addEventListener("click", e=> {
+            const dist = this.el.components["gps-new-entity-place"].distance;
+            alert(dist === undefined ? "Please move to a new location to obtain the distance" : `This object is ${dist} metres away.`);
+        });
+    }
+});
+
+window.onload = () => {
+    let testEntitiesAdded = false;
+    alert('If testing the lat/lon manual input on a mobile device, please turn off your GPS to avoid the real location being detected.');
+    const el = document.querySelector("[gps-new-camera]");
+    el.addEventListener("gps-camera-update-position", e => {
+        if(!testEntitiesAdded) {
+            // Add four boxes to the north (red), south (yellow), west (blue)
+            // and east (red) of the initial GPS position
+            const properties = [{
+                    color: 'red',
+                    latDis: 0.001,
+                    lonDis: 0
+                },{
+                    color: 'yellow',
+                    latDis: -0.001,
+                    lonDis: 0
+                },{
+                    color: 'blue',
+                    latDis: 0,
+                    lonDis: -0.001
+                },{
+                    color: 'green',
+                    latDis: 0,
+                    lonDis: 0.001
+                }
+            ];
+            for(const prop of properties) {
+                const entity = document.createElement("a-box");
+                entity.setAttribute("scale", {
+                    x: 20, 
+                    y: 20,
+                    z: 20
+                });
+                entity.setAttribute('material', { color: prop.color } );
+                entity.setAttribute('gps-new-entity-place', {
+                    latitude: e.detail.position.latitude + prop.latDis,
+                    longitude: e.detail.position.longitude + prop.lonDis
+                });
+                entity.setAttribute('clicker', { });                
+                document.querySelector("a-scene").appendChild(entity);
+            }
+            testEntitiesAdded = true;
+        }
+    });
+
+    document.getElementById("go").addEventListener("click", e=> {
+        const lat = document.getElementById('lat').value;
+        const lon = document.getElementById('lon').value;
+        const minacc = document.getElementById('minacc').value;
+
+        el.setAttribute('gps-new-camera', { simulateLatitude: lat, simulateLongitude: lon, positionMinAccuracy: minacc } );
+    });
+};
diff --git a/aframe/src/new-location-based/gps-new-entity-place.js b/aframe/src/new-location-based/gps-new-entity-place.js
@@ -14,15 +14,14 @@ AFRAME.registerComponent("gps-new-entity-place", {
   },
 
   init: function () {
-    this.distance = Number.MAX_VALUE;
     const camera = document.querySelector("[gps-new-camera]");
     if (!camera.components["gps-new-camera"]) {
       console.error("gps-new-camera not initialised");
       return;
     }
     this._cameraGps = camera.components["gps-new-camera"];
 
-    this.el.addEventListener("gps-camera-update-position", (e) => {
+    camera.addEventListener("gps-camera-update-position", (e) => {
       this.distance = this._haversineDist(e.detail.position, this.data);
     });
   },