Beautiful
This commit is contained in:
parent
be6a6316c2
commit
75587e697b
5
app.py
5
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)
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue