diff --git a/index.html b/index.html index 59fcfe0..506a746 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,192 @@ - - - - + + + Vite App - - - -
- -
- - + + + + + + + +
+
+
+

Select an Alignment Position

+
+ +
+ +
+
+ +
+
+ Center + +
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+ + +
+
+ + +
+
+
+ +
+ +
+
+ + +
+
+ + +
+
+
+
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+ + diff --git a/src/main.js b/src/main.js index f17b258..e787dc3 100644 --- a/src/main.js +++ b/src/main.js @@ -1,8 +1,16 @@ import './index.css' +import './updated-alignment-position-fields' import * as THREE from 'three'; import {OrbitControls} from 'three/addons/controls/OrbitControls.js'; import WebGL from 'three/addons/capabilities/WebGL.js'; import {CSS2DRenderer, CSS2DObject} from 'three/addons/renderers/CSS2DRenderer.js'; +class Location { + constructor(x, y, z) { + this.x = x; + this.y = y; + this.z = z; + } +} // SETUP const scene = new THREE.Scene(); @@ -16,36 +24,24 @@ setupControls(); addAxes(); const labelRenderer = addAxesLabels(); +// PAGE ELEMENTS +const subConfigCheckbox = document.getElementById("subConfigCheckbox"); +const subDepthInput = document.getElementById("sx"); + // OBJECTS -const geometry = new THREE.BoxGeometry(); -const material = new THREE.MeshBasicMaterial({color: 0xff0000}); -const main = new THREE.Mesh(geometry, material); -const edges = new THREE.EdgesGeometry(geometry); -const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color: 0x000000})); -main.add(line); -let mainY = 20; -main.position.set(0, mainY, 10); -scene.add(main); - -const mirroredMainMaterial = new THREE.MeshBasicMaterial({color: 0xff0000}); -const mirroredMain = new THREE.Mesh(geometry, mirroredMainMaterial); -const edgesMirroredMain = new THREE.EdgesGeometry(geometry); -const lineMirroredMain = new THREE.LineSegments(edgesMirroredMain, new THREE.LineBasicMaterial({color: 0x000000})); -mirroredMain.add(lineMirroredMain); -mirroredMain.position.set(0, -mainY, 10); -scene.add(mirroredMain); - -let subLocationX = 1.5; +let mainLocation = new Location(0, 20, 10); +createCube(mainLocation, 0xff0000); + +let mainMirrorLocation = new Location(0, -20, 10); +createCube(mainMirrorLocation, 0xff0000); + +let subConfigurationLR = subConfigCheckbox.checked; const subDimensions = {depth: 1, width: 1, height: 1}; -const subGeometry = new THREE.BoxGeometry(subDimensions.width, subDimensions.height, subDimensions.depth); -const subMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff}); -const sub = new THREE.Mesh(subGeometry, subMaterial); -const edgesSub = new THREE.EdgesGeometry(geometry); -const lineSub = new THREE.LineSegments(edgesSub, new THREE.LineBasicMaterial({color: 0x000000})); -sub.add(lineSub); -sub.position.set(-subDimensions.depth / 2 + subLocationX, 0, subDimensions.height / 2); -scene.add(sub); +let subLocation = new Location(-subDimensions.depth / 2, 0, subDimensions.height / 2) +setSubLocationY(subConfigurationLR); +let sub = createCube(subLocation, 0x0000ff); +// FUNCTIONS function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); @@ -63,8 +59,6 @@ if (WebGL.isWebGLAvailable()) { } -window.addEventListener('resize', onWindowResize, false); - function setupCamera(container) { const camera = new THREE.PerspectiveCamera(75, container.offsetWidth / container.offsetHeight, 0.1, 1000); camera.up.set(0, 0, 1); @@ -124,8 +118,43 @@ function addAxesLabels() { return labelRenderer; } +function createCube(location, color) { + const geometry = new THREE.BoxGeometry(); + const material = new THREE.MeshBasicMaterial({color: color}); + const mesh = new THREE.Mesh(geometry, material); + const edges = new THREE.EdgesGeometry(geometry); + const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color: 0x000000})); + mesh.add(line); + mesh.position.set(location.x, location.y, location.z); + scene.add(mesh); + return mesh; +} + +function setSubLocationY(subConfigurationLR) { + if (subConfigurationLR) { + return mainLocation.y; + } else { + return 0; + } +} + function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); -} \ No newline at end of file +} + +// EVENT LISTENERS +window.addEventListener('resize', onWindowResize, false); + +subConfigCheckbox.addEventListener('change', (event) => { + subConfigurationLR = event.target.checked; + sub.position.y = setSubLocationY(subConfigurationLR); + animate(); +}); + +subDepthInput.addEventListener('input', (event) => { + let subLocationX = Number(event.target.value); + sub.position.x = -subDimensions.depth / 2 + subLocationX; // Update sub's x position here. + animate(); +}); \ No newline at end of file diff --git a/src/updated-alignment-position-fields.js b/src/updated-alignment-position-fields.js new file mode 100644 index 0000000..1c0a7db --- /dev/null +++ b/src/updated-alignment-position-fields.js @@ -0,0 +1,42 @@ +document.addEventListener("DOMContentLoaded", function() { + const metersRadio = document.getElementById("meters-radio"); + const feetRadio = document.getElementById("feet-radio"); + const seatedRadio = document.getElementById("seated-radio"); + const standingRadio = document.getElementById("standing-radio"); + const form = document.getElementById('alignment-position-form'); + const xoffCheckbox = document.getElementById('xoff'); + + function updateRadioValues() { + if (metersRadio.checked) { + seatedRadio.value = "1.26"; + standingRadio.value = "1.623"; + } else if (feetRadio.checked) { + seatedRadio.value = "4.13"; + standingRadio.value = "5.32"; + } + } + metersRadio.addEventListener("change", updateRadioValues); + feetRadio.addEventListener("change", updateRadioValues); + + updateRadioValues(); // Initialize the radio button values on page load + + form.addEventListener('submit', function(event) { + event.preventDefault(); + const formData = new FormData(form); + const searchParams = new URLSearchParams(formData); + if (!form.querySelector('#subConfigCheckbox').checked) { + const fields = ["as", "abz", "sy", "axf", "axl", "az"]; // replace with actual ids of your inputs + fields.forEach(field => { + if (searchParams.has(field)) { + searchParams.delete(field); + } + }); + } + + if (!xoffCheckbox.checked) { + searchParams.delete('ad'); + } + + window.location = form.getAttribute('action') + '?' + searchParams.toString(); + }); +}); \ No newline at end of file