Bangle Functionality

index.html

@@ -48,6 +48,9 @@
   <!-- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> -->
   <!-- <script src="js/third-party/plotly-latest.min.js"></script> -->
   <script src="js/buffer-browser.js"></script>
+
+
+
   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
   <!-- script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
@@ -62,6 +65,9 @@
   <header id=header>
     <details open id="header-details">
       <summary>Welcome to the FutureClassroom!!</summary>
+            <button id="connectWatchBtn" style="padding: 10px; margin-bottom: 10px; background-color: #4CAF50; color: white;">
+        Connect Bangle.js
+      </button>
       <dev id=messages>&nbsp;</dev>
         <!-- <a class="back" href="./">Back</a> -->
       <dev id=sceneButtons>&nbsp;</dev>
@@ -77,6 +83,23 @@
 
   <script type="module" src="/js/main.js"></script>
 
+  <script type = "module">
+
+    //window.Puck = Puck;
+
+    document.getElementById('connectWatchBtn').addEventListener('click', function() {
+      console.log("hello");
+      Puck.write('\n', function() 
+      {
+        window.isWatchConnected = true;
+        let btn = document.getElementById('connectWatchBtn');
+        btn.innerText = "Watch Connected!";
+        btn.style.backgroundColor = "gray";
+        console.log("Bangle.js connected");
+      });
+    });
+  </script>
+
 </body>
 
 </html>

js/scenes/scenes.js

@@ -42,6 +42,8 @@ export default () => {
          { name: "arrange2"     , path: "./arrange2.js"     , public: true },
          { name: "widgets"      , path: "./widgets.js"      , public: true },
          { name: "transfer"     , path: "./transfer.js"     , public: true },
+         { name: "watchTest"     , path: "./watchTest.js"     , public: true },
+         { name: "watchTest2"     , path: "./watchTest2.js"     , public: true },
          { name: "transferBiciWidgets" , path: "./transferBiciWidgets.js" , public: true },
       ]
    };

js/scenes/watchTest.js

@@ -0,0 +1,81 @@
+import {ControllerBeam} from "../render/core/controllerInput.js";
+//import {Puck} from "../third-party/puck.js";
+
+let beams = null;
+
+function getDistance(x1,y1,z1,x2,y2,z2)
+{
+    let dx = x2 - x1;
+    let dy = y2 - y1;
+    let dz = z2 - z1;
+    return Math.sqrt(dx*dx + dy*dy + dz*dz);
+}
+
+export const init = async model => {
+    //Create a box
+    let targetBox = model.add('cube').move(0,1.5,-0.5).scale(0.15).color(1,1,1);
+    beams = {   left : new ControllerBeam(model, 'left' ),
+                right: new ControllerBeam(model, 'right') 
+            };
+    let debugTextNode = model.add();
+    let targetBox2 = model.add('sphere').move(0,1.5,-0.5).scale(0.25).color(1,1,1);
+
+
+    model.animate(() => {
+
+        beams.left.update();
+        beams.right.update();
+
+        // Use the global inputEvents to get the controller position
+        let rightHandPos = inputEvents.pos('right');
+
+        // Clear the previous frame's text geometry
+        while (debugTextNode.nChildren() > 0) {
+                debugTextNode.remove(0);
+            }
+        debugTextNode.add(clay.text("HELLO WORLD")).move(1, 1.8, -1).scale(10);
+        console.log(rightHandPos);
+
+        /*
+        if (rightHandPos) {
+            // Get the current [X, Y, Z] position of the target box (the cube)
+            let boxMatrix = targetBox.getGlobalMatrix();
+            //Transformation matrix
+            let boxX = boxMatrix[12];
+            let boxY = boxMatrix[13];
+            let boxZ = boxMatrix[14];
+
+            //Calculate how far the hand is from the box
+            let distance = getDistance(boxX, boxY, boxZ, rightHandPos[0], rightHandPos[1], rightHandPos[2]);
+
+            let coordString = `Pos: ${rightHandPos[0].toFixed(2)}, ${rightHandPos[1].toFixed(2)}, ${rightHandPos[2].toFixed(2)}\nDist: ${distance.toFixed(2)}`;
+
+            // Add text with color and a larger scale (0.1) to ensure it is visible in VR
+            debugTextNode.add(clay.text(coordString)).move(0, 1.8, -1).scale(0.1).color(1, 1, 1);
+
+            while (debugTextNode.nChildren() > 0) {
+                debugTextNode.remove(0);
+            }
+            //let coordString = `X: ${rightHandPos[0].toFixed(2)}   Y: ${rightHandPos[1].toFixed(2)}   Z: ${rightHandPos[2].toFixed(2)} X: ${distance.toFixed(2)}`;
+            let coordString = "Hello";
+            //debugTextNode.add(clay.text(coordString)).move(0, 1.8, -1).scale(0.04);
+            debugTextNode.add(clay.text("HELLO WORLD")).move(0, 1.8, -1).scale(0.04);
+            // Trigger visual feedback (red color) when touching the box
+            targetBox.color(distance <= 0.15 ? [1, 0, 0] : [1, 1, 1]);
+
+
+            if (distance <= 0.15)
+            {
+                targetBox.color(1,0,0);
+            }
+            else
+            {
+                targetBox.color(1,1,1)
+            }
+        } else {
+            // Fallback text if the controller isn't detected
+            debugTextNode.add(clay.text("Waiting for controller...")).move(0, 1.8, -1).scale(0.1).color(1, 1, 1);
+        }*/
+
+    });
+};

js/scenes/watchTest2.js

@@ -0,0 +1,157 @@
+/*
+   This is a very simple example of how to use the
+   inputEvents object.
+
+   When the scene is in XR mode, the x position of
+   the left controller controls the red component
+   of the cube's color, and the x position of the
+   right controller controls the blue component of
+   the cube's color.
+*/
+
+import {Puck} from "../third-party/puck.js";
+
+function getDistance(x1,y1,z1,x2,y2,z2)
+{
+    let dx = x2 - x1;
+    let dy = y2 - y1;
+    let dz = z2 - z1;
+    return Math.sqrt(dx*dx + dy*dy + dz*dz);
+}
+
+export const init = async model => {
+   console.log("Loaded watchTest2");
+   let watchCommand = 
+                "\x10" +
+                "Bangle.buzz(10,1);\n" +
+                "g.clear(1);\n" + 
+                "g.setFontAlign(0,0);\n" +
+                "g.setFont('Vector', 10);\n" + // 80 might be too big for the screen!
+                "g.drawString('Connected to watchTest2', g.getWidth()/2, g.getHeight()/2);\n" +
+                "Bangle.setLCDPower(1);\n"; // Forces the screen on, just in case it went to sleep
+   Puck.write(watchCommand);
+   watchCommand = 
+               "function makeWatchBuzz() {Bangle.buzz(90,0.2);}\n";
+   Puck.write(watchCommand);
+
+
+   let obj1 = model.add('cube');
+   let debugTextNode = model.add();
+   let wasInside = false;
+   let lastBuzzTime = 0;
+
+   // USING THE GLOBAL inputEvents OBJECT
+
+   //inputEvents.onPress = hand => color = [0,0,1];
+   //inputEvents.onRelease = hand => color = [1,0,0];
+
+   inputEvents.onMove = hand => {
+      if (isXR()) {
+         //Should I put code in animate or onMove?
+         let handPos = inputEvents.pos('right');
+         console.log("Cur handPos" + handPos);
+
+         //let boxMatrix = obj1.getGlobalMatrix();
+         //   //Transformation matrix
+         //   let boxX = boxMatrix[12];
+         //   let boxY = boxMatrix[13];
+         //   let boxZ = boxMatrix[14];
+         //let dist = getDistance(rightHandPos[0], rightHandPos[1], rightHandPos[2], boxX, boxY, boxZ);
+         //console.log(dist);*/
+
+
+      }
+   }
+
+   let color = [.5,.5,.5];
+   model.move(0,1.5,0).scale(.1).animate(() => {
+
+      obj1.identity().color(color);
+      if (true)//(isXR()) 
+      {
+         //Should I put code in animate or onMove?
+         //let handPos = inputEvents.pos('right');
+         let handPos = inputEvents.pos('right') ?? [0, 0, 0];
+         console.log("Cur handPos" + handPos);
+         let boxMatrix = obj1.getGlobalMatrix();
+         //Transformation matrix
+         let boxX = boxMatrix[12];
+         let boxY = boxMatrix[13];
+         let boxZ = boxMatrix[14];
+         let dist = getDistance(handPos[0], handPos[1], handPos[2], boxX, boxY, boxZ);
+
+         while (debugTextNode.nChildren() > 0) {
+                debugTextNode.remove(0);
+            }
+         //debugTextNode.add(clay.text("HELLO WORLD")).move(1, 1.8, -1).scale(30);
+         debugTextNode.add(clay.text("hand pos "+ handPos)).move(1, 1.8, -1).scale(30);
+         debugTextNode.add(clay.text("Distance "+ dist)).move(1, 1.0, -1).scale(30);
+
+         if(dist < 0.4)
+         {
+            obj1.color(1,0,0);
+            if(!wasInside)
+            {
+               let command =
+                           "\x10" +
+                           "g.clear(1);\n" +
+                           "g.setFontAlign(0,0);\n" +
+                           "g.setFont('Vector', 20);\n" +
+                           "g.drawString('Touching box', g.getWidth()/2, g.getHeight()/2);\n" +
+                           "Bangle.setLCDPower(1);\n" +
+                           "clearInterval(global.counterInterval);\n" +
+                           "global.counterInterval = setInterval(makeWatchBuzz, 100);\n";
+               Puck.write(command);
+               wasInside = true;
+            }
+         }
+         else
+         {
+            obj1.color(.5,.5,.5);
+            if(wasInside)
+            {
+               let exitCommand = 
+                           "\x10" +
+                           "g.clear(1);\n" +
+                           "clearInterval(global.counterInterval);\n" +
+                           "Bangle.setLCDPower(0);\n" +
+                           "g.drawString('Not touching box', g.getWidth()/2, g.getHeight()/2);\n"
+               Puck.write(exitCommand);
+               wasInside = false;
+
+            }
+         }
+
+         /*
+         if(dist < 0.4)
+         {
+            obj1.color(1,1,0);
+            if(!wasInside)
+            {
+               let screenCommand = 
+                    "\x10" +
+                    "g.clear(1);\n" + 
+                    "g.setFontAlign(0,0);\n" +
+                    "g.setFont('Vector', 40);\n" + 
+                    "g.drawString('Inside!', g.getWidth()/2, g.getHeight()/2);\n" +
+                    "Bangle.setLCDPower(1);\n";
+               Puck.write(screenCommand);
+               wasInside = true;
+            }
+
+            let curTime = Date.now();
+            if(curTime - lastBuzzTime > 200)
+            {
+               let watchCommand = 
+                    "\x10" +
+                    "Bangle.buzz(160,0.2);\n";
+               Puck.write(watchCommand);
+               lastBuzzTime = curTime;
+            }
+
+
+         }
+         */
+      }
+   });
+}