diff --git a/static/calibration-visualiser.js b/static/calibration-visualiser.js index 9ed9f13..49757ac 100644 --- a/static/calibration-visualiser.js +++ b/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.add(mesh); + this.lines.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); } } } diff --git a/templates/calibration.html b/templates/calibration.html index 737ed87..aeaed64 100644 --- a/templates/calibration.html +++ b/templates/calibration.html @@ -21,6 +21,12 @@ +
+ +
{% endblock content %}