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>')
def send_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) {
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 material = new THREE.MeshPhongMaterial({ color: 0xffff00 });
let sphere = new THREE.Mesh(geometry, material);
sphere.position.x = row[0];
sphere.position.y = row[1];
sphere.position.x = -row[1];
sphere.position.y = -row[0];
sphere.position.z = row[2];
sphere.name = key
leds.add(sphere);
@ -151,12 +151,14 @@ async function init(dataPath, domElementArg = document.body) {
renderer.setAnimationLoop(animate);
selectedObject = document.getElementById('selected-object');
ledView = document.getElementById('led-view');
// Add listeners
controls = new OrbitControls(camera, renderer.domElement);
controls.update();
window.addEventListener('pointermove', onPointerMove);
window.addEventListener('pointerup', onPointerUp);
window.addEventListener('resize', onWindowResize, false);
onWindowResize();
@ -169,14 +171,12 @@ function animate(time) {
if (pointer !== undefined) {
raycaster.setFromCamera(pointer, camera);
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) {
if (led === intersects[0].object) {
led.material.color.setHex(0xff0000);
selectedObject.innerText = led.name;
if (led === intersection) {
led.scale.set(1.5, 1.5, 1.5);
} else {
led.material.color.setHex(0xffff00);
}
led.scale.set(1, 1, 1);
}
}
}
@ -207,4 +207,20 @@ function onPointerMove(event) {
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 };

View File

@ -3,7 +3,9 @@
{% block content %}
<section class="section">
<div class="container">
<h1 class="title">Visualisation de l'étalonnage</h1>
<div class="columns">
<div class="column">
<h1 class="title">Positions 3D des LEDs</h1>
<div id="visualiser-container">
<div id="visualiser">
<div id="info">
@ -12,6 +14,14 @@
</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>
</section>
{% endblock content %}