mmelodies
/
mmelodies
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix sensor

This commit is contained in:
Bit Borealis 2023-10-05 14:13:38 +00:00
parent 246401baa6
commit 74f8a59366
Signed by: theotheroracle
GPG Key ID: 2D816A2DCA6E5649
1 changed files with 47 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/controller/controller.ts
View File

@ -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";
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);