Show or don't show lines

static/calibration-visualiser.js

@@ -120,6 +120,7 @@ class Led extends THREE.Mesh {
         const material = new THREE.LineBasicMaterial({
             color: 0x0000ff
         });
+        this.lines = new THREE.Object3D();
         for (let index = 0; index < lines.length; index++) {
             let line = lines[index];
             let sphere = spheres[index];
@@ -132,9 +133,10 @@ class Led extends THREE.Mesh {
             let geometry = new THREE.BufferGeometry();
             geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
             let mesh = new THREE.Line(geometry, material);
-            mesh.visible = false;
+            this.lines.add(mesh);
-            this.add(mesh);
         }
+        this.lines.visible = false;
+        this.add(this.lines);
     }
 
     hover() {
@@ -160,27 +162,35 @@ class Led extends THREE.Mesh {
         this.refreshColor();
     }
 
-    turnOn() {
+    turnOn(showLines) {
         this.on = true;
         for (let child of this.children) {
             child.visible = true;
         }
         this.refreshColor();
-    }
+        this.lines.visible = showLines;
+    };
 
 
-    turnOff() {
+    turnOff(showLines) {
         this.on = false;
         for (let child of this.children) {
             child.visible = false;
         }
         this.refreshColor();
+        this.lines.visible = false;
     }
 
     refreshColor() {
         this.material.color.setHex(this.getColor());
     }
 
+    showLines(showLines) {
+        if (this.on) {
+            this.lines.visible = showLines;
+        }
+    }
+
     getColor() {
         if (this.on) {
             return 0xffff00;
@@ -192,9 +202,17 @@ class Led extends THREE.Mesh {
     }
 }
 
-let center, renderer, scene, camera, controls, pointLight, leds, spheres, cameraObject, domElement, raycaster, pointer, selectedObject, ledView, animationStep, beforeAnimationPosition, beforeAnimationTarget;
+let center, renderer, scene, camera, controls, pointLight, leds, spheres, cameraObject, domElement, raycaster, pointer, selectedObject, ledView, animationStep, beforeAnimationPosition, beforeAnimationTarget, showLinesCheckbox;
 
 async function init(dataPath, domElementArg = document.body) {
+
+    showLinesCheckbox = document.getElementById('show-lines');
+    showLinesCheckbox.addEventListener('change', () => {
+        for (let led of leds.children) {
+            led.showLines(showLinesCheckbox.checked);
+        }
+    });
+
     center = new THREE.Vector3(0, 0, 10);
     animationStep = NaN;
     beforeAnimationPosition = new THREE.Vector3();
@@ -415,12 +433,12 @@ function selectLed(led) {
     for (let child of leds.children) {
         if (led === child) {
             if (led.on) {
-                led.turnOff();
+                led.turnOff(showLinesCheckbox.checked);
                 pointLight.intensity = 0;
                 ledView.style.display = "none";
                 selectedObject.innerText = 'aucune';
             } else {
-                led.turnOn();
+                led.turnOn(showLinesCheckbox.checked);
                 pointLight.intensity = 100;
                 pointLight.position.copy(led.position);
                 ledView.src = 'data/small/' + led.name;
@@ -428,7 +446,7 @@ function selectLed(led) {
                 selectedObject.innerText = led.name;
             }
         } else {
-            child.turnOff();
+            child.turnOff(showLinesCheckbox.checked);
         }
     }
 }

templates/calibration.html

@@ -21,6 +21,12 @@
                 </div>
             </div>
         </div>
+        <div>
+            <label class="checkbox">
+                <input type="checkbox" id="show-lines">
+                Afficher les droites
+            </label>
+        </div>
     </div>
 </section>
 {% endblock content %}