From 75587e697b9bc45290772da5eb8c83c30548a773 Mon Sep 17 00:00:00 2001
From: Thomas Forgione <thomas@forgione.fr>
Date: Wed, 19 Jun 2024 15:13:27 +0200
Subject: [PATCH] Beautiful

---
 app.py                           |  5 +++++
 static/calibration-visualiser.js | 38 +++++++++++++++++++++++---------
 templates/calibration.html       | 20 ++++++++++++-----
 3 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/app.py b/app.py
index bf30633..456c440 100755
--- a/app.py
+++ b/app.py
@@ -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)
diff --git a/static/calibration-visualiser.js b/static/calibration-visualiser.js
index 76cfb21..2f54290 100644
--- a/static/calibration-visualiser.js
+++ b/static/calibration-visualiser.js
@@ -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) {
-            for (let led of leds.children) {
-                if (led === intersects[0].object) {
-                    led.material.color.setHex(0xff0000);
-                    selectedObject.innerText = led.name;
-                } else {
-                    led.material.color.setHex(0xffff00);
-                }
+        const intersection = intersects.length > 0 ? intersects[0].object : undefined;
+        for (let led of leds.children) {
+            if (led === intersection) {
+                led.scale.set(1.5, 1.5, 1.5);
+            } else {
+                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 };
diff --git a/templates/calibration.html b/templates/calibration.html
index 8fee4cd..e8c3c89 100644
--- a/templates/calibration.html
+++ b/templates/calibration.html
@@ -3,11 +3,21 @@
 {% block content %}
 <section class="section">
     <div class="container">
-        <h1 class="title">Visualisation de l'étalonnage</h1>
-        <div id="visualiser-container">
-            <div id="visualiser">
-                <div id="info">
-                    Objet sélectionné : <span id="selected-object">aucun</span>
+        <div class="columns">
+            <div class="column">
+                <h1 class="title">Positions 3D des LEDs</h1>
+                <div id="visualiser-container">
+                    <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>