diff --git a/src/controller/controller.ts b/src/controller/controller.ts index 3ddfc3a..86bbaa5 100644 --- a/src/controller/controller.ts +++ b/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; - -// 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"; - -const sensorConstructors: { [K in sensorType]: any } = { - "Accelerometer": window.Accelerometer, - "Gyroscope": window.Gyroscope, - "AbsoluteOrientationSensor": window.AbsoluteOrientationSensor -}; - -// Then in your sensorStart function: - -function sensorStart(sensorName: sensorType, boxId: string, checkboxId: string) { +function sensorStart(sensorName: sensorType, box: HTMLElement, checkboxId: string) { + const sensorConstructors: { [K in sensorType]: any } = { + "Accelerometer": window.Accelerometer, + "Gyroscope": window.Gyroscope, + "AbsoluteOrientationSensor": window.AbsoluteOrientationSensor + }; 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);