Beautiful

This commit is contained in:
Thomas Forgione 2024-06-19 15:13:27 +02:00
parent be6a6316c2
commit 75587e697b
3 changed files with 47 additions and 16 deletions

5
app.py
View File

@ -32,3 +32,8 @@ def calibration_data():
@app.route('/static/<path:path>') @app.route('/static/<path:path>')
def send_static(path): def send_static(path):
return send_from_directory('static', path) return send_from_directory('static', path)
@app.route('/data/<path:path>')
def send_data(path):
return send_from_directory('data', path)

View File

@ -102,7 +102,7 @@ class Pyramid extends THREE.Object3D {
} }
} }
let renderer, scene, camera, controls, leds, cameraObject, domElement, raycaster, pointer, selectedObject; let renderer, scene, camera, controls, leds, cameraObject, domElement, raycaster, pointer, selectedObject, ledView;
async function init(dataPath, domElementArg = document.body) { async function init(dataPath, domElementArg = document.body) {
let request = await fetch('/api/calibration-data'); let request = await fetch('/api/calibration-data');
@ -126,8 +126,8 @@ async function init(dataPath, domElementArg = document.body) {
const geometry = new THREE.SphereGeometry(1, 32, 16); const geometry = new THREE.SphereGeometry(1, 32, 16);
const material = new THREE.MeshPhongMaterial({ color: 0xffff00 }); const material = new THREE.MeshPhongMaterial({ color: 0xffff00 });
let sphere = new THREE.Mesh(geometry, material); let sphere = new THREE.Mesh(geometry, material);
sphere.position.x = row[0]; sphere.position.x = -row[1];
sphere.position.y = row[1]; sphere.position.y = -row[0];
sphere.position.z = row[2]; sphere.position.z = row[2];
sphere.name = key sphere.name = key
leds.add(sphere); leds.add(sphere);
@ -151,12 +151,14 @@ async function init(dataPath, domElementArg = document.body) {
renderer.setAnimationLoop(animate); renderer.setAnimationLoop(animate);
selectedObject = document.getElementById('selected-object'); selectedObject = document.getElementById('selected-object');
ledView = document.getElementById('led-view');
// Add listeners // Add listeners
controls = new OrbitControls(camera, renderer.domElement); controls = new OrbitControls(camera, renderer.domElement);
controls.update(); controls.update();
window.addEventListener('pointermove', onPointerMove); window.addEventListener('pointermove', onPointerMove);
window.addEventListener('pointerup', onPointerUp);
window.addEventListener('resize', onWindowResize, false); window.addEventListener('resize', onWindowResize, false);
onWindowResize(); onWindowResize();
@ -169,14 +171,12 @@ function animate(time) {
if (pointer !== undefined) { if (pointer !== undefined) {
raycaster.setFromCamera(pointer, camera); raycaster.setFromCamera(pointer, camera);
const intersects = raycaster.intersectObjects(leds.children); const intersects = raycaster.intersectObjects(leds.children);
if (intersects.length > 0) { const intersection = intersects.length > 0 ? intersects[0].object : undefined;
for (let led of leds.children) { for (let led of leds.children) {
if (led === intersects[0].object) { if (led === intersection) {
led.material.color.setHex(0xff0000); led.scale.set(1.5, 1.5, 1.5);
selectedObject.innerText = led.name; } else {
} else { led.scale.set(1, 1, 1);
led.material.color.setHex(0xffff00);
}
} }
} }
} }
@ -207,4 +207,20 @@ function onPointerMove(event) {
pointer.y = - (event.offsetY / h) * 2 + 1; pointer.y = - (event.offsetY / h) * 2 + 1;
} }
function onPointerUp(event) {
raycaster.setFromCamera(pointer, camera);
const intersects = raycaster.intersectObjects(leds.children);
if (intersects.length > 0) {
for (let led of leds.children) {
if (led === intersects[0].object) {
ledView.src = 'data/small/' + led.name + '.PNG';
led.material.color.setHex(0xff0000);
selectedObject.innerText = led.name;
} else {
led.material.color.setHex(0xffff00);
}
}
}
}
export { init }; export { init };

View File

@ -3,11 +3,21 @@
{% block content %} {% block content %}
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<h1 class="title">Visualisation de l'étalonnage</h1> <div class="columns">
<div id="visualiser-container"> <div class="column">
<div id="visualiser"> <h1 class="title">Positions 3D des LEDs</h1>
<div id="info"> <div id="visualiser-container">
Objet sélectionné : <span id="selected-object">aucun</span> <div id="visualiser">
<div id="info">
Objet sélectionné : <span id="selected-object">aucun</span>
</div>
</div>
</div>
</div>
<div class="column">
<h1 class="title">Vue de la LED selectionnée</h1>
<div>
<img id="led-view">
</div> </div>
</div> </div>
</div> </div>