brilliantsole 0.0.27 → 0.0.29

package/examples/gloves/script.js

@@ -11,7 +11,9 @@ console.log({ BS });
 // GET DEVICES
 
 /** @type {HTMLTemplateElement} */
-const availableDeviceTemplate = document.getElementById("availableDeviceTemplate");
+const availableDeviceTemplate = document.getElementById(
+  "availableDeviceTemplate"
+);
 const availableDevicesContainer = document.getElementById("availableDevices");
 /** @param {BS.Device[]} availableDevices */
 function onAvailableDevices(availableDevices) {
@@ -20,12 +22,17 @@ function onAvailableDevices(availableDevices) {
     availableDevicesContainer.innerText = "no devices available";
   } else {
     availableDevices.forEach((availableDevice) => {
-      let availableDeviceContainer = availableDeviceTemplate.content.cloneNode(true).querySelector(".availableDevice");
-      availableDeviceContainer.querySelector(".name").innerText = availableDevice.name;
-      availableDeviceContainer.querySelector(".type").innerText = availableDevice.type;
+      let availableDeviceContainer = availableDeviceTemplate.content
+        .cloneNode(true)
+        .querySelector(".availableDevice");
+      availableDeviceContainer.querySelector(".name").innerText =
+        availableDevice.name;
+      availableDeviceContainer.querySelector(".type").innerText =
+        availableDevice.type;
 
       /** @type {HTMLButtonElement} */
-      const toggleConnectionButton = availableDeviceContainer.querySelector(".toggleConnection");
+      const toggleConnectionButton =
+        availableDeviceContainer.querySelector(".toggleConnection");
       toggleConnectionButton.addEventListener("click", () => {
         availableDevice.toggleConnection();
       });
@@ -34,7 +41,9 @@ function onAvailableDevices(availableDevices) {
           case "connected":
           case "notConnected":
             toggleConnectionButton.disabled = false;
-            toggleConnectionButton.innerText = availableDevice.isConnected ? "disconnect" : "connect";
+            toggleConnectionButton.innerText = availableDevice.isConnected
+              ? "disconnect"
+              : "connect";
             break;
           case "connecting":
           case "disconnecting":
@@ -43,7 +52,9 @@ function onAvailableDevices(availableDevices) {
             break;
         }
       };
-      availableDevice.addEventListener("connectionStatus", () => onConnectionStatusUpdate());
+      availableDevice.addEventListener("connectionStatus", () =>
+        onConnectionStatusUpdate()
+      );
       onConnectionStatusUpdate();
       availableDevicesContainer.appendChild(availableDeviceContainer);
     });
@@ -88,7 +99,9 @@ window.positionScalar = 0.1;
 
 devicePair.sides.forEach((side) => {
   /** @type {HTMLElement} */
-  const gloveContainer = gloveTemplate.content.cloneNode(true).querySelector(".glove");
+  const gloveContainer = gloveTemplate.content
+    .cloneNode(true)
+    .querySelector(".glove");
   gloveContainer.classList.add(side);
   gloveContainer.dataset.side = side;
   /** @type {HTMLIFrameElement} */
@@ -110,10 +123,12 @@ function onIFrameLoaded(gloveContainer) {
   const targetPositionEntity = targetEntity.querySelector(".position");
   const targetRotationEntity = targetEntity.querySelector(".rotation");
   const gloveEntity = targetEntity.querySelector(".glove");
-  const pressureEntities = Array.from(targetEntity.querySelectorAll("[data-pressure]"))
+  const pressureEntities = Array.from(
+    targetEntity.querySelectorAll("[data-pressure]")
+  )
     .sort((a, b) => a.dataset.pressure - b.dataset.pressure)
     .map((entity) => entity.querySelector("a-sphere"));
-  //pressureEntities.forEach((entity) => entity.setAttribute("opacity", "0.0"));
+  pressureEntities.forEach((entity) => entity.setAttribute("opacity", "0.0"));
   scene.addEventListener("loaded", () => {
     if (side == "left") {
       targetEntity.object3D.scale.x *= -1;
@@ -121,7 +136,8 @@ function onIFrameLoaded(gloveContainer) {
   });
 
   /** @type {HTMLButtonElement} */
-  const toggleConnectionButton = gloveContainer.querySelector(".toggleConnection");
+  const toggleConnectionButton =
+    gloveContainer.querySelector(".toggleConnection");
   toggleConnectionButton.addEventListener("click", () => {
     devicePair[side].toggleConnection();
   });
@@ -134,7 +150,9 @@ function onIFrameLoaded(gloveContainer) {
     if (device.isConnected) {
       toggleConnectionButton.disabled = false;
     }
-    toggleConnectionButton.innerText = device.isConnected ? "disconnect" : "reconnect";
+    toggleConnectionButton.innerText = device.isConnected
+      ? "disconnect"
+      : "reconnect";
   });
 
   devicePair.addEventListener("deviceConnectionStatus", (event) => {
@@ -147,7 +165,9 @@ function onIFrameLoaded(gloveContainer) {
       case "connected":
       case "notConnected":
         toggleConnectionButton.disabled = false;
-        toggleConnectionButton.innerText = device.isConnected ? "disconnect" : "reconnect";
+        toggleConnectionButton.innerText = device.isConnected
+          ? "disconnect"
+          : "reconnect";
         break;
       case "connecting":
       case "disconnecting":
@@ -161,33 +181,41 @@ function onIFrameLoaded(gloveContainer) {
   const orientationSelect = gloveContainer.querySelector(".orientation");
   orientationSelect.addEventListener("input", () => {
     /** @type {BS.SensorConfiguration} */
-    const configuration = { gameRotation: 0, rotation: 0, gyroscope: 0, orientation: 0 };
+    const configuration = {
+      gameRotation: 0,
+      rotation: 0,
+      gyroscope: 0,
+      orientation: 0,
+    };
 
     switch (orientationSelect.value) {
       case "none":
         break;
       case "gameRotation":
-        configuration.gameRotation = sensorRate;
+        configuration.gameRotation = pinchSensorRate;
         break;
       case "rotation":
-        configuration.rotation = sensorRate;
+        configuration.rotation = pinchSensorRate;
         break;
       case "orientation":
-        configuration.orientation = sensorRate;
+        configuration.orientation = pinchSensorRate;
         break;
       case "gyroscope":
-        configuration.gyroscope = sensorRate;
+        configuration.gyroscope = pinchSensorRate;
         break;
       default:
-        console.error(`uncaught orientationSelect value "${orientationSelect.value}"`);
+        console.error(
+          `uncaught orientationSelect value "${orientationSelect.value}"`
+        );
         break;
     }
 
-    devicePair[side].setSensorConfiguration(configuration);
+    devicePair[side]?.setSensorConfiguration(configuration);
   });
 
   /** @type {HTMLButtonElement} */
-  const resetOrientationButton = gloveContainer.querySelector(".resetOrientation");
+  const resetOrientationButton =
+    gloveContainer.querySelector(".resetOrientation");
   resetOrientationButton.addEventListener("click", () => {
     resetOrientation();
   });
@@ -204,28 +232,34 @@ function onIFrameLoaded(gloveContainer) {
   const positionSelect = gloveContainer.querySelector(".position");
   positionSelect.addEventListener("input", () => {
     /** @type {BS.SensorConfiguration} */
-    const configuration = { acceleration: 0, gravity: 0, linearAcceleration: 0 };
+    const configuration = {
+      acceleration: 0,
+      gravity: 0,
+      linearAcceleration: 0,
+    };
 
     switch (positionSelect.value) {
       case "none":
         break;
       case "acceleration":
-        configuration.acceleration = sensorRate;
+        configuration.acceleration = pinchSensorRate;
         break;
       case "gravity":
-        configuration.gravity = sensorRate;
+        configuration.gravity = pinchSensorRate;
         break;
       case "linearAcceleration":
-        configuration.linearAcceleration = sensorRate;
+        configuration.linearAcceleration = pinchSensorRate;
         break;
       default:
-        console.error(`uncaught positionSelect value "${positionSelect.value}"`);
+        console.error(
+          `uncaught positionSelect value "${positionSelect.value}"`
+        );
         break;
     }
 
     console.log({ configuration });
 
-    devicePair[side].setSensorConfiguration(configuration);
+    devicePair[side]?.setSensorConfiguration(configuration);
   });
   devicePair.addEventListener("deviceIsConnected", (event) => {
     const device = event.message.device;
@@ -276,7 +310,10 @@ function onIFrameLoaded(gloveContainer) {
   /** @param {BS.Vector3} position */
   const updatePosition = (position) => {
     _position.copy(position).multiplyScalar(window.positionScalar);
-    targetPositionEntity.object3D.position.lerp(_position, window.interpolationSmoothing);
+    targetPositionEntity.object3D.position.lerp(
+      _position,
+      window.interpolationSmoothing
+    );
   };
 
   devicePair.addEventListener("deviceAcceleration", (event) => {
@@ -326,7 +363,10 @@ function onIFrameLoaded(gloveContainer) {
     if (applyOffset) {
       targetQuaternion.premultiply(offsetQuaternion);
     }
-    targetRotationEntity.object3D.quaternion.slerp(targetQuaternion, window.interpolationSmoothing);
+    targetRotationEntity.object3D.quaternion.slerp(
+      targetQuaternion,
+      window.interpolationSmoothing
+    );
   };
   devicePair.addEventListener("deviceGameRotation", (event) => {
     const device = event.message.device;
@@ -360,7 +400,9 @@ function onIFrameLoaded(gloveContainer) {
     }
 
     const orientation = event.message.orientation;
-    orientationVector3.set(orientation.pitch, orientation.heading, orientation.roll).multiplyScalar(Math.PI / 180);
+    orientationVector3
+      .set(orientation.pitch, orientation.heading, orientation.roll)
+      .multiplyScalar(Math.PI / 180);
     orientationEuler.setFromVector3(orientationVector3);
     orientationQuaternion.setFromEuler(orientationEuler);
     updateQuaternion(orientationQuaternion);
@@ -395,10 +437,11 @@ function onIFrameLoaded(gloveContainer) {
   const setIsPressureEnabled = (newIsPressureEnabled) => {
     /** @type {BS.SensorConfiguration} */
     const configuration = { pressure: newIsPressureEnabled ? 20 : 0 };
-    devicePair[side].setSensorConfiguration(configuration);
+    devicePair[side]?.setSensorConfiguration(configuration);
   };
   const togglePressure = () => {
-    const isPressureEnabled = devicePair[side].sensorConfiguration.pressure != 0;
+    const isPressureEnabled =
+      devicePair[side].sensorConfiguration.pressure != 0;
     setIsPressureEnabled(!isPressureEnabled);
   };
   devicePair.addEventListener("deviceGetSensorConfiguration", (event) => {
@@ -406,7 +449,10 @@ function onIFrameLoaded(gloveContainer) {
       return;
     }
     const { sensorConfiguration } = event.message;
-    togglePressureButton.innerText = sensorConfiguration.pressure == 0 ? "enable pressure" : "disable pressure";
+    togglePressureButton.innerText =
+      sensorConfiguration.pressure == 0
+        ? "enable pressure"
+        : "disable pressure";
   });
   /** @type {HTMLButtonElement} */
   const resetPressureButton = gloveContainer.querySelector(".resetPressure");
@@ -429,7 +475,7 @@ function onIFrameLoaded(gloveContainer) {
     }
     const { pressure } = event.message;
     pressure.sensors.forEach((sensor, index) => {
-      pressureEntities[index].setAttribute("opacity", sensor.normalizedValue);
+      pressureEntities[index]?.setAttribute("opacity", sensor.normalizedValue);
     });
   });
 
@@ -440,23 +486,93 @@ function onIFrameLoaded(gloveContainer) {
   toggleCursorButton.addEventListener("click", () => {
     setIsCursorEnabled(!isCursorEnabled);
   });
+  /** @type {HTMLButtonElement} */
+  const resetCursorButton = gloveContainer.querySelector(".resetCursor");
+  resetCursorButton.addEventListener("click", () => {
+    cursorIntersectableEntities.forEach((entity) => {
+      entity.removeAttribute("dynamic-body");
+      entity.object3D.position.set(0, 1, -20);
+      entity.setAttribute("dynamic-body", "");
+    });
+  });
+
+  let checkCursorIntersectableEntitiesIntervalId;
+  const checkCursorIntersectableEntitiesInterval = 1000;
+  const xThreshold = 4.5;
+  const checkCursorIntersectableEntities = () => {
+    cursorIntersectableEntities.forEach((entity) => {
+      const position = entity.object3D.position;
+      if (!isCursorDown && Math.abs(position.x) > xThreshold) {
+        entity.removeAttribute("dynamic-body");
+        entity.object3D.position.set(0, 1, -20);
+        entity.setAttribute("dynamic-body", "");
+      }
+    });
+  };
   const setIsCursorEnabled = (newIsCursorEnabled) => {
     isCursorEnabled = newIsCursorEnabled;
-    toggleCursorButton.innerText = isCursorEnabled ? "disable cursor" : "enable cursor";
+    toggleCursorButton.innerText = isCursorEnabled
+      ? "disable cursor"
+      : "enable cursor";
+
+    if (devicePair[side]?.isConnected) {
+      const device = devicePair[side];
+      if (device.isUkaton) {
+        if (isCursorEnabled) {
+          device.setSensorConfiguration(pinchSensorConfiguration);
+        } else {
+          device.clearSensorConfiguration();
+        }
+      } else {
+        if (isCursorEnabled) {
+          orientationSelect.value = "gyroscope";
+        } else {
+          orientationSelect.value = "none";
+        }
+        orientationSelect.dispatchEvent(new Event("input"));
+        setIsPressureEnabled(isCursorEnabled);
+      }
+
+      if (devicePair[side]?.isUkaton) {
+        if (isCursorEnabled) {
+          positionSelect.value = "linearAcceleration";
+        } else {
+          positionSelect.value = "none";
+        }
+        positionSelect.dispatchEvent(new Event("input"));
+      } else {
+        setIsPressureEnabled(isCursorEnabled);
+      }
+    }
+    onCursorIsEnabled();
+
     if (isCursorEnabled) {
-      orientationSelect.value = "gyroscope";
+      checkCursorIntersectableEntitiesIntervalId = setInterval(
+        () => checkCursorIntersectableEntities(),
+        checkCursorIntersectableEntitiesInterval
+      );
     } else {
-      orientationSelect.value = "none";
+      clearInterval(checkCursorIntersectableEntitiesIntervalId);
     }
-    orientationSelect.dispatchEvent(new Event("input"));
-    setIsPressureEnabled(isCursorEnabled);
-    onCursorIsEnabled();
   };
+  window.addEventListener("pinch", () => {
+    if (isCursorDown || intersectedEntities[0]) {
+      setIsCursorDown(!isCursorDown);
+      devicePair[side]?.triggerVibration([
+        {
+          type: "waveformEffect",
+          locations: ["rear"],
+          segments: [{ effect: "buzz100" }],
+        },
+      ]);
+    }
+  });
+
   const onCursorIsEnabled = () => {
     if (isCursorEnabled) {
       targetEntity.setAttribute("visible", "false");
       cursorExample.setAttribute("visible", "true");
-      cameraEntity.setAttribute("orbit-controls", { enabled: false });
+      //cameraEntity.setAttribute("orbit-controls", { enabled: false });
       cameraEntity.setAttribute("camera", { active: false });
       cursorCameraEntity.setAttribute("camera", { active: true });
     } else {
@@ -464,7 +580,7 @@ function onIFrameLoaded(gloveContainer) {
       cursorExample.setAttribute("visible", "false");
       cursorCameraEntity.setAttribute("camera", { active: false });
       cameraEntity.setAttribute("camera", { active: true });
-      cameraEntity.setAttribute("orbit-controls", { enabled: true });
+      //cameraEntity.setAttribute("orbit-controls", { enabled: true });
     }
   };
 
@@ -473,7 +589,7 @@ function onIFrameLoaded(gloveContainer) {
     if (device.side != side) {
       return;
     }
-    toggleCursorButton.disabled = !device.isConnected;
+    //toggleCursorButton.disabled = !device.isConnected;
   });
 
   const cameraEntity = scene.querySelector(".camera");
@@ -492,7 +608,7 @@ function onIFrameLoaded(gloveContainer) {
     const { gyroscope } = event.message;
     const { x: yawDegrees, y: pitchDegrees, z: rollDegrees } = gyroscope;
     // console.log({ yawDegrees, pitchDegrees, rollDegrees });
-    setCursorPosition(yawDegrees * 0.001, pitchDegrees * 0.001, true);
+    setCursorPosition(yawDegrees * 0.002, pitchDegrees * 0.003, true);
   });
   const cursorRaycaster = new THREE.Raycaster();
   const cursor2DPosition = new THREE.Vector2();
@@ -514,11 +630,16 @@ function onIFrameLoaded(gloveContainer) {
     }
   };
   const updateCursorEntity = () => {
-    cursorRaycaster.setFromCamera(cursor2DPosition, cursorCameraEntity.object3D.children[0]);
+    cursorRaycaster.setFromCamera(
+      cursor2DPosition,
+      cursorCameraEntity.object3D.children[0]
+    );
     cursorRaycaster.ray.at(1, cursor3DPosition);
     cursorEntity.object3D.position.copy(cursor3DPosition);
   };
-  const cursorIntersectableEntities = Array.from(scene.querySelectorAll(".intersectable"));
+  const cursorIntersectableEntities = Array.from(
+    scene.querySelectorAll(".intersectable")
+  );
 
   const dragEntityPosition = new THREE.Vector3();
   const dragEntity = () => {
@@ -531,7 +652,10 @@ function onIFrameLoaded(gloveContainer) {
   const intersectEntities = () => {
     intersectedEntities.length = 0;
     cursorIntersectableEntities.forEach((entity) => {
-      const intersections = cursorRaycaster.intersectObject(entity.object3D, true);
+      const intersections = cursorRaycaster.intersectObject(
+        entity.object3D,
+        true
+      );
       const intersection = intersections[0];
       if (intersection) {
         intersectedEntities.push(entity);
@@ -559,13 +683,19 @@ function onIFrameLoaded(gloveContainer) {
   let draggingEntity;
   const setIsCursorDown = (newIsCursorDown) => {
     isCursorDown = newIsCursorDown;
-    cursorMeshEntity.setAttribute("color", isCursorDown ? "black" : cursorMeshEntity.dataset.color);
+    cursorMeshEntity.setAttribute(
+      "color",
+      isCursorDown ? "black" : cursorMeshEntity.dataset.color
+    );
     if (isCursorDown && intersectedEntities[0]) {
       draggingEntity = intersectedEntities[0];
       console.log("dragging entity");
       draggingEntity.setAttribute("color", "green");
       cursorHandleEntity.setAttribute("static-body", "");
-      draggingEntity.setAttribute("constraint", "target: .cursorHandle; collideConnected: false; type: pointToPoint;");
+      draggingEntity.setAttribute(
+        "constraint",
+        "target: .cursorHandle; collideConnected: false; type: pointToPoint;"
+      );
     }
     if (!isCursorDown && draggingEntity) {
       console.log("removing draggingEntity");
@@ -592,12 +722,16 @@ function onIFrameLoaded(gloveContainer) {
 
 const websocketClient = new BS.WebSocketClient();
 /** @type {HTMLButtonElement} */
-const toggleServerConnectionButton = document.getElementById("toggleServerConnection");
+const toggleServerConnectionButton = document.getElementById(
+  "toggleServerConnection"
+);
 toggleServerConnectionButton.addEventListener("click", () => {
   websocketClient.toggleConnection();
 });
 websocketClient.addEventListener("isConnected", () => {
-  toggleServerConnectionButton.innerText = websocketClient.isConnected ? "disconnect from server" : "connect to server";
+  toggleServerConnectionButton.innerText = websocketClient.isConnected
+    ? "disconnect from server"
+    : "connect to server";
 });
 websocketClient.addEventListener("connectionStatus", () => {
   let disabled;
@@ -613,3 +747,185 @@ websocketClient.addEventListener("connectionStatus", () => {
   }
   toggleServerConnectionButton.disabled = disabled;
 });
+
+// PINCH CONFIG
+
+const pinchSensorRate = 20;
+/** @type {BS.TfliteSensorType[]} */
+const pinchSensorTypes = ["linearAcceleration", "gyroscope"];
+/** @type {BS.SensorConfiguration} */
+const pinchSensorConfiguration = {};
+pinchSensorTypes.forEach((sensorType) => {
+  pinchSensorConfiguration[sensorType] = pinchSensorRate;
+});
+
+/** @param {BS.DeviceEventMap["sensorData"]} event */
+const onDeviceSensorData = (event) => {
+  let data = [];
+  switch (event.message.sensorType) {
+    case "pressure":
+      data = event.message.pressure.sensors.map((sensor) => sensor.rawValue);
+      break;
+    case "linearAcceleration":
+      {
+        const { x, y, z } = event.message.linearAcceleration;
+        data = [x, y, z];
+      }
+      break;
+    case "gyroscope":
+      {
+        const { x, y, z } = event.message.gyroscope;
+        data = [x, y, z];
+      }
+      break;
+    case "magnetometer":
+      {
+        const { x, y, z } = event.message.magnetometer;
+        data = [x, y, z];
+      }
+      break;
+  }
+  data = data.map(
+    (value) => value * pinchSensorScalars[event.message.sensorType]
+  );
+  appendData(event.message.timestamp, event.message.sensorType, data);
+};
+devicePair.addEventListener("deviceIsConnected", (event) => {
+  const { device, isConnected, side } = event.message;
+  if (side != "right") {
+    return;
+  }
+  if (isConnected) {
+    device.addEventListener("sensorData", onDeviceSensorData);
+  } else {
+    device.removeEventListener("sensorData", onDeviceSensorData);
+  }
+});
+
+const pinchSensorScalars = {
+  pressure: 1 / (2 ** 16 - 1),
+  linearAcceleration: 1 / 4,
+  gyroscope: 1 / 720,
+  magnetometer: 1 / 2500,
+};
+
+// MODEL
+
+let classifier;
+async function loadClassifier() {
+  if (classifier) {
+    return;
+  }
+  classifier = new EdgeImpulseClassifier();
+  await classifier.init();
+
+  let project = classifier.getProjectInfo();
+  console.log("loaded classifier", project);
+
+  window.classifier = classifier;
+}
+
+devicePair.addEventListener("deviceIsConnected", (event) => {
+  if (event.message.device.isUkaton) {
+    loadClassifier();
+  }
+});
+
+/** @param {number[]} features */
+function classify(features) {
+  try {
+    let res = classifier.classify(features);
+    // console.log(res);
+    const didPinch = res.results[1].value > 0.5;
+    if (didPinch) {
+      console.log("pinch");
+      window.dispatchEvent(new Event("pinch"));
+      lastTimeGestureRecognized = Date.now();
+    }
+  } catch (ex) {
+    console.error("Failed to classify", ex);
+  }
+}
+
+// PINCH MODEL BUFFER
+const time = 600; // ms
+const numberOfSamples = time / pinchSensorRate;
+const numberOfFeaturesInEachSensorType = {};
+BS.TfliteSensorTypes.forEach((sensorType) => {
+  switch (sensorType) {
+    case "pressure":
+      numberOfFeaturesInEachSensorType[sensorType] = 8; // change to 16 for ukaton
+      break;
+    case "linearAcceleration":
+    case "gyroscope":
+    case "magnetometer":
+      numberOfFeaturesInEachSensorType[sensorType] = 3;
+      break;
+  }
+});
+let numberOfFeaturesInOneSample = 0;
+pinchSensorTypes.forEach((sensorType) => {
+  numberOfFeaturesInOneSample += numberOfFeaturesInEachSensorType[sensorType];
+});
+const numberOfFeatures = numberOfFeaturesInOneSample * numberOfSamples;
+console.log({
+  time,
+  numberOfSamples,
+  numberOfFeaturesInOneSample,
+  numberOfFeatures,
+});
+const samples = [];
+let pendingSample;
+let lastTimeClassified = 0;
+let lastTimeGestureRecognized = 0;
+let classificationDelay = 0;
+let gestureDelay = 1000;
+let isClassifying = false;
+/**
+ * @param {number} timestamp
+ * @param {BS.TfliteSensorType} sensorType
+ * @param {number[]} data
+ */
+function appendData(timestamp, sensorType, data) {
+  //console.log({ timestamp, sensorType, data });
+  if (!pendingSample || timestamp != pendingSample.timestamp) {
+    pendingSample = { timestamp };
+    //console.log("pendingSample", pendingSample);
+  }
+  pendingSample[sensorType] = data;
+  const gotAllSensorSamples = pinchSensorTypes.every(
+    (sensorType) => sensorType in pendingSample
+  );
+  if (gotAllSensorSamples) {
+    //console.log("got all samples");
+    samples.push(pendingSample);
+    pendingSample = undefined;
+  }
+
+  while (samples.length > numberOfSamples) {
+    samples.shift();
+  }
+
+  if (!isClassifying && samples.length == numberOfSamples) {
+    const now = Date.now();
+    if (
+      now - lastTimeGestureRecognized < gestureDelay ||
+      now - lastTimeClassified < classificationDelay
+    ) {
+      return;
+    }
+    const features = [];
+    samples.forEach((sample) => {
+      const _features = [];
+      pinchSensorTypes.forEach((sensorType) => {
+        _features.push(...sample[sensorType]);
+        features.push(..._features);
+      });
+    });
+    isClassifying = true;
+    //console.log("classifying", features);
+    classify(features);
+    isClassifying = false;
+    lastTimeClassified = now;
+  }
+}