add server scripts

WebXR-iOS · Apr 7, 2024 · 4b5f550 · 4b5f550
1 parent 9d202b4
commit 4b5f550
Show file tree

Hide file tree

Showing 8 changed files with 518 additions and 5 deletions.
diff --git a/libraries/peerjs.esm.js b/libraries/peerjs.esm.js
diff --git a/server.html b/server.html
@@ -19,6 +19,23 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
     <link rel="stylesheet" href="./styles/style.css">
 
+    <style>
+        #canvas, #cameraFeed {
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 3;
+        };
+
+        #canvas {
+            z-index: 4 !important;
+        }
+
+        #cameraFeed {
+            left: -46px !important;
+        }
+    </style>
+
 </head>
 
 <body>
@@ -36,6 +53,7 @@ <h1>CardiVR</h1>
         </div>
     </div>
     <video id="cameraFeed" width="800" height="530" playsinline autoplay muted></video>
+    <canvas id="canvas" width="800" height="530"></canvas>
 
     <script src="./libraries/tracking.js"></script>
     <script type="module" src="./server/serverScript.js"></script>

diff --git a/server/controllerTracking.js b/server/controllerTracking.js
@@ -0,0 +1,38 @@
+import { PositionalTracking  } from "./positionalTracking.js";
+import { RotationalTracking } from "./rotationalTracking.js";
+import { SocketManager } from "./socketScript.js";
+
+class ControllerTracking {
+    constructor() {
+        this.rotation = { error: "Starting" };
+        this.position = { error: "Starting" };
+
+        this.socket = new SocketManager();
+        this.PositionalTracking = new PositionalTracking(this);
+        this.RotationalTracking = new RotationalTracking(this);
+    };
+
+    connect(id) {
+        var scope = this;
+
+        //this.socket.connect(id);
+
+        setInterval(() => {
+            scope.send(scope);
+        }, 200);
+    };
+
+    send(scope) {
+        /*this.socket.send(JSON.stringify({
+            position: scope.position,
+            rotation: scope.rotation
+        }));*/
+
+        console.log({
+            position: scope.position,
+            rotation: scope.rotation
+        });
+    };
+};
+
+export { ControllerTracking };
diff --git a/server/positionalTracking.js b/server/positionalTracking.js
@@ -1,7 +1,12 @@
 class PositionalTracking {
-    constructor() {
+    constructor(root) {
+        this.root = root;
         var scope = this;
 
+        this.focalLength = 10000000; // Focal length of the camera in pixels (hypothetical value)
+        this.trackedObjectWidth = 4; // Width of the object in cm
+        this.trackedObjectHeight = 4; // Height of the object in cm
+
         navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: "user" }}).then(function success(stream) {
             document.querySelector("#cameraFeed").srcObject = stream;
 
@@ -12,7 +17,21 @@ class PositionalTracking {
     start() {
         var scope = this;
 
-        this.color = new tracking.ColorTracker(['yellow']);
+        /*tracking.ColorTracker.registerColor('theColor', function(r, g, b) {
+            if (r > 185 && g > 115 && g < 135 && b < 40) {
+              return true;
+            }
+            return false;
+        });*/
+
+        tracking.ColorTracker.registerColor('yellowgreen', function(r, g, b) {
+            if (r > 150 && g > 150 && b < 80) {
+                return true;
+            }
+            return false;
+          });
+
+        this.color = new tracking.ColorTracker(['yellowgreen']);//yellow
         this.color.setMinDimension(5);
 
         tracking.track('#cameraFeed', scope.color);
@@ -30,13 +49,50 @@ class PositionalTracking {
     };
 
     update(scope, event) {
-        event.data.forEach(function(rect) {
+        /*event.data.forEach(function(rect) {
+            console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
             // rect.x, rect.y, rect.height, rect.width, rect.color
+        });*/
+        var canvas = document.getElementById('canvas');
+        var context = canvas.getContext('2d');
+
+        context.clearRect(0, 0, canvas.width, canvas.height);
+
+        event.data.forEach(function(rect) {
+          if (rect.color === 'custom') {
+            rect.color = scope.color.customColor;
+          }
+
+          context.strokeStyle = rect.color;
+          context.strokeRect(rect.x, rect.y, rect.width, rect.height);
+
+          rect.z = scope.estimateDepth(scope.focalLength, scope.trackedObjectWidth, scope.trackedObjectHeight, rect.width, rect.height);
         });
+
+        var output = {
+            color: event.data[0].color,
+            x: event.data[0].x / 10,
+            y: event.data[0].y / 10,
+            z: event.data[0].z
+        }
+
+        scope.root.position = output;
+
+        //console.log(output);
     };
 
     notVisibleController(scope, event) {
+        scope.root.position = { error: "Empty" };
+
+        //console.log({ error: "Empty" });
+    };
+
+    estimateDepth(focalLength, objectWidth, objectHeight, imageWidth, imageHeight) {
+        const distance = (focalLength * (objectWidth / 100)) / imageWidth;
+
+        const correctedDistance = (distance * (objectHeight / 100)) / imageHeight;
 
+        return correctedDistance;
     };
 };
 

diff --git a/server/rotationalTracking.js b/server/rotationalTracking.js
@@ -0,0 +1,45 @@
+import { ControllerBluetoothInterface } from "../utils/ControllerBluetoothInterface.js";
+
+class RotationalTracking {
+    constructor(root) {
+        this.root = root;
+        var scope = this;
+
+        this.dataUpdate = false;
+
+        this.controllerBluetoothInterface = new ControllerBluetoothInterface((e) => {
+            scope.data(scope, e);
+        });
+
+        this.start();
+    };
+
+    async start() {
+        await this.controllerBluetoothInterface.pair();
+
+        var scope = this;
+
+        setInterval(() => {
+            this.tick(scope)
+        }, 1000);
+    };
+
+    async tick(scope) {
+        if(scope.dataUpdate == false) {
+            await this.controllerBluetoothInterface.runCommand(ControllerBluetoothInterface.CMD_VR_MODE);
+            await this.controllerBluetoothInterface.runCommand(ControllerBluetoothInterface.CMD_SENSOR);
+        } else {
+            scope.dataUpdate = false;
+        };
+    };
+
+    data(scope, event) {
+        scope.dataUpdate = true;
+
+        scope.root.rotation = event;
+
+        //console.log(event);
+    };
+};
+
+export { RotationalTracking };
diff --git a/server/serverScript.js b/server/serverScript.js
@@ -1,7 +1,7 @@
-import { PositionalTracking } from "./positionalTracking.js";
+import { ControllerTracking } from "./controllerTracking.js";
 
 async function setupController() {
-  window.positionTracking = new PositionalTracking();
+  window.controllerTracking = new ControllerTracking();
 };
 
 document.querySelector(".setupController").addEventListener("click", setupController);
diff --git a/server/socketScript.js b/server/socketScript.js
@@ -0,0 +1,44 @@
+import { Peer } from "../libraries/peerjs.esm.js";
+
+class SocketManager {
+    constructor() {
+        console.log("Waiting for Peer connection");
+
+        this.peer = new Peer();
+        this.conn = null;
+    };
+
+    connect(id) {
+        if(this.conn !== null) return false;
+
+        this.conn = this.peer.connect(id);
+
+        var scope = this;
+
+        this.conn.on('open', function(){
+            console.log("Peer connected");
+        });
+
+        this.conn.on('data', function(data){
+            scope.data(data, scope);
+        });
+
+        return true;
+    };
+
+    data(data, scope) {
+        if(this.conn == null) return false;
+
+        console.log("Data recieved: " + data);
+        return true;
+    };
+
+    send(data) {
+        if(this.conn == null) return false;
+
+        this.conn.send(data);
+        return true;
+    };
+};
+
+export { SocketManager };