fix sensor

src/controller/controller.ts

@@ -1,7 +1,6 @@
 import * as THREE from 'three';
 // @ts-ignore
 import { UpdateRequest, Update } from "/proto/mmelodies.proto";
-import { radToDeg } from 'three/src/math/MathUtils';
 
 // Subscribe to the audioprocess event
 let socket: WebSocket | null = null;
@@ -64,18 +63,6 @@ sliders.forEach((slider, i) => {
 	});
 });
 
-// Select all checkbox input elements
-const switches = document.querySelectorAll(
-	"input[type=checkbox]",
-) as NodeListOf<HTMLInputElement>;
-
-// Add an event listener to each switch
-switches.forEach((switchElement) => {
-	switchElement.addEventListener("change", function () {
-		console.log(`Switch ${this.id} state: ${this.checked}`);
-	});
-});
-
 // Declare a global interface for the window object
 declare global {
 	interface Window {
@@ -85,6 +72,7 @@ declare global {
 	}
 }
 
+// Show elements hidden by default
 function show(element: HTMLElement) {
 	if (element) {
 		element.style.display = "flex";
@@ -119,20 +107,20 @@ function checkPerms() {
 			show(warning)
 			console.log("shown")
 		} else {
-			if (isAccelerometerSupported) {
+			if (isAccelerometerSupported && false) {
 				console.log("Accelerometer is supported.");
 				show(accel)
-				sensorStart("Accelerometer", "accelBox", "accel");
+				sensorStart("Accelerometer", accel, "accel");
 			}
-			if (isGyroscopeSupported) {
+			if (isGyroscopeSupported && false) {
 				console.log("Gyroscope is supported.");
 				show(gyro)
-				sensorStart("Gyroscope", "gyroBox", "gyro");
+				sensorStart("Gyroscope", gyro, "gyro");
 			}
 			if (isAccelerometerSupported) {
 				console.log("AbsoluteOrientationSensor is supported.");
 				show(orient)
-				sensorStart("AbsoluteOrientationSensor", "orientBox", "orient");
+				sensorStart("AbsoluteOrientationSensor", orient, "orient");
 			}
 
 			if (!isAccelerometerSupported && !isGyroscopeSupported && !isAbsoluteOrientationSensorSupported) {
@@ -166,8 +154,11 @@ function handleSensorReading(
 	calibratedDirection: THREE.Vector3 | null,
 	currentDirection: THREE.Vector3 | null,
 	relativeDirection: THREE.Vector3 | null,
-	render: (direction: THREE.Quaternion | null) => void
+	render: (direction: THREE.Quaternion | null) => void,
+	checkbox: HTMLInputElement | null
 ) {
+	let fps = 0;
+	const setFPS = 60;
 	sensor.addEventListener('reading', () => {
 		// Apply the sensor's quaternion to the vector
 		const orientation = new THREE.Quaternion(...sensor.quaternion).normalize();
@@ -177,29 +168,50 @@ function handleSensorReading(
 			calibratedDirection = currentDirection;
 			console.log("cal", calibratedDirection);
 		}
+		console.log("debug")
 		relativeDirection = calibratedDirection.clone().sub(currentDirection).normalize();
 		const relativeOrientation = new THREE.Quaternion().setFromUnitVectors(calibratedDirection, currentDirection);
 		render(relativeOrientation);
 	});
+
+	// Check if the button was found
+	if (checkbox) {
+		// Add a click event listener to the button
+		checkbox.addEventListener('change', function () {
+			// If sensor is already running, stop it
+			if (!this.checked) {
+				sensor.stop();
+				console.log("stopped");
+				fps = 0;
+				render(null);
+			} else {
+				// Otherwise, start the sensor
+				sensor.start();
+				console.log("started");
+				calibratedDirection = null;
+				fps = setFPS;
+			}
+		});
+	}
+	else {
+		console.log(checkbox)
+	}
 }
 
 type sensorType = "Accelerometer" | "Gyroscope" | "AbsoluteOrientationSensor";
-
+function sensorStart(sensorName: sensorType, box: HTMLElement, checkboxId: string) {
-const sensorConstructors: { [K in sensorType]: any } = {
+	const sensorConstructors: { [K in sensorType]: any } = {
-	"Accelerometer": window.Accelerometer,
+		"Accelerometer": window.Accelerometer,
-	"Gyroscope": window.Gyroscope,
+		"Gyroscope": window.Gyroscope,
-	"AbsoluteOrientationSensor": window.AbsoluteOrientationSensor
+		"AbsoluteOrientationSensor": window.AbsoluteOrientationSensor
-};
+	};
-
-// Then in your sensorStart function:
-
-function sensorStart(sensorName: sensorType, boxId: string, checkboxId: string) {
 	const SensorConstructor = sensorConstructors[sensorName];
 	if (SensorConstructor) {
 		const sensor = new SensorConstructor({ frequency: 60, referenceFrame: 'device' });
 
 		// Set up Three.js scene
 		const { renderer, scene, axes, camera } = setupThreeJsScene();
+		box.appendChild(renderer.domElement)
 
 		// Define render function
 		const render = (direction: THREE.Quaternion | null) => {
@@ -208,7 +220,6 @@ function sensorStart(sensorName: sensorType, boxId: string, checkboxId: string)
 			}
 
 			axes.setRotationFromQuaternion(direction);
-
 			renderer.render(scene, camera);
 		}
 
@@ -217,16 +228,19 @@ function sensorStart(sensorName: sensorType, boxId: string, checkboxId: string)
 		let currentDirection: THREE.Vector3 | null = null;
 		let relativeDirection: THREE.Vector3 | null = null;
 
+		var checkbox = document.getElementById(checkboxId) as HTMLInputElement;
+
 		// Handle sensor readings
-		handleSensorReading(sensor, scene, calibratedDirection, currentDirection, relativeDirection, render);
+		handleSensorReading(sensor, scene, calibratedDirection, currentDirection, relativeDirection, render, checkbox);
+		render(null);
 
 		// Render the first frame
-		render(null);
 	} else {
 		console.log(`No constructor found for sensor: ${sensorName}`);
 	}
 }
 
+
 function gyroStart() {
 	// Create an AbsoluteOrientationSensor object
 	const sensor = new window.AbsoluteOrientationSensor({ frequency: 60, referenceFrame: 'device' });
@@ -301,28 +315,7 @@ function gyroStart() {
 		else { sampleCount++; }
 	});
 
-	// Check if the button was found
+
-	if (checkbox) {
-		// Add a click event listener to the button
-		checkbox.addEventListener('change', function () {
-			// If sensor is already running, stop it
-			if (!this.checked) {
-				sensor.stop();
-				console.log("stopped");
-				fps = 0;
-				render(null);
-			} else {
-				// Otherwise, start the sensor
-				sensor.start();
-				console.log("started");
-				calibratedDirection = null;
-				fps = setFPS;
-			}
-		});
-	}
-	else {
-		console.log(checkbox)
-	}
 
 	// Render the first frame
 	render(null);