Skip to content

Commit 01d7659

Browse files
author
Léna Voinchet
committed
Add lidar shape
1 parent 376a4ec commit 01d7659

File tree

6 files changed

+238
-95
lines changed

6 files changed

+238
-95
lines changed

‎js/UI/LidarUI.js‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -18,48 +18,48 @@ class LidarUI{
1818
const lidarUIdiv = document.createElement('div');
1919
lidarUIdiv.classList.add("sensorUI");
2020

21-
lidarUIdiv.id = 'lidar-' + (lidar.id) + '-UI';
21+
lidarUIdiv.id = `lidar-${lidar.id}-UI`;
2222
lidarUIdiv.innerHTML = `
23-
<div id="lidar-` + (lidar.id) + `-UI-header" class="row center-x-spaced center-y">
23+
<div id="lidar-${lidar.id}-UI-header" class="row center-x-spaced center-y">
2424
<div class="row center-y">
25-
<div class="sensor-color" style="background-color: #`+ lidar.color.getHexString() + `;"></div>
26-
<p class="main-text">LiDAR ` + (lidar.id + 1) + `</p>
25+
<div class="sensor-color" style="background-color: #${lidar.color.getHexString()};"></div>
26+
<p class="main-text">LiDAR ${lidar.id + 1}</p>
2727
</div>
2828
<div class="row center-y">
29-
<!-- <div id="lidar-` + (lidar.id) + `-solo-button"><span class="iconify" data-icon="bx:search-alt-2"></span></div> -->
30-
<div id="lidar-` + (lidar.id) + `-hide-UI"><span class="iconify" data-icon="bx:minus"></span></div>
31-
<div id="lidar-` + (lidar.id) + `-visible"><span class="iconify" data-icon="akar-icons:eye-open"></span></div>
29+
<!-- <div id="lidar-${lidar.id}-solo-button"><span class="iconify" data-icon="bx:search-alt-2"></span></div> -->
30+
<div id="lidar-${lidar.id}-hide-UI"><span class="iconify" data-icon="bx:minus"></span></div>
31+
<div id="lidar-${lidar.id}-visible"><span class="iconify" data-icon="akar-icons:eye-open"></span></div>
3232
<!-- <div><span class="iconify" data-icon="fluent:lock-open-16-regular"></span></div> -->
33-
<div id="lidar-` + (lidar.id) + `-delete"><span class="iconify" data-icon="fluent:delete-16-filled"></span></div>
33+
<div id="lidar-${lidar.id}-delete"><span class="iconify" data-icon="fluent:delete-16-filled"></span></div>
3434
</div>
3535
</div>
36-
<div id="lidar-infos-` + (lidar.id) + `-UI" class="column sections-container space-y">
36+
<div id="lidar-infos-${lidar.id}-UI" class="column sections-container space-y">
3737
<div id="select-lidar-type" class="row center-y">
38-
<select title="lidarType-` + (lidar.id) + `" name="lidarType-` + (lidar.id) + `" id="lidar-type-` + (lidar.id) + `">
39-
` + lidarTypesOptions + `
38+
<select title="lidarType-${lidar.id}" name="lidarType-${lidar.id}" id="lidar-type-${lidar.id}">
39+
${lidarTypesOptions}
4040
</select>
4141
</div>
4242
<div class="row sensor-transformations">
4343
<p class="main-text">Transf.</p>
4444
<div>
45-
<p id="lidar-x-pos-`+ lidar.id +`" class="draggable">Pos. X <strong data-unit=` + sceneManager.currentUnit.value + `>` + Math.round(lidar.xPos * sceneManager.currentUnit.value * 100) /100.0 + `</strong><span data-unittext=` + sceneManager.currentUnit.value + `>` + sceneManager.currentUnit.label +`</span></p>
45+
<p id="lidar-x-pos-${lidar.id}" class="draggable">Pos. X <strong data-unit=${sceneManager.currentUnit.value}>${(lidar.xPos * sceneManager.currentUnit.value).toFixed(2)}</strong><span data-unittext=${sceneManager.currentUnit.value}>${sceneManager.currentUnit.label}</span></p>
4646
</div>
4747
<div>
48-
<p id="lidar-z-pos-`+ lidar.id +`" class="draggable">Pos. Z <strong data-unit=` + sceneManager.currentUnit.value + `>` + Math.round(lidar.zPos * sceneManager.currentUnit.value * 100) /100.0 + `</strong><span data-unittext=` + sceneManager.currentUnit.value + `>` + sceneManager.currentUnit.label +`</span></p>
48+
<p id="lidar-z-pos-${lidar.id}" class="draggable">Pos. Z <strong data-unit=${sceneManager.currentUnit.value}>${(lidar.zPos * sceneManager.currentUnit.value).toFixed(2)}</strong><span data-unittext=${sceneManager.currentUnit.value}>${sceneManager.currentUnit.label}</span></p>
4949
</div>
5050
<div>
51-
<p id="lidar-y-rot-`+ lidar.id +`" class="draggable">Rot. Y <strong>` + Math.round(lidar.yRot*180/Math.PI) + `</strong>° </p>
51+
<p id="lidar-y-rot-${lidar.id}" class="draggable">Rot. Y <strong>${Math.round(lidar.yRot * 180 / Math.PI)}</strong>° </p>
5252
</div>
5353
</div>
5454
<div class="row cam-spec">
5555
<p class="spec-title main-text">Angular</p>
56-
<p>FOV</p><p id="lidar-fov` + lidar.id + `">` + lidar.lidarType.fov + `°</p>
57-
<p>Res</p><p id="lidar-res` + lidar.id + `">` + lidar.lidarType.angularResolution + `°</p>
56+
<p>FOV</p><p id="lidar-fov${lidar.id}">${lidar.lidarType.fov}°</p>
57+
<p>Res</p><p id="lidar-res${lidar.id}">${lidar.lidarType.angularResolution}°</p>
5858
</div>
5959
<div class="row cam-spec">
6060
<p class="spec-title main-text">Distance</p>
61-
<p>Near</p><p><span id="lidar-near` + lidar.id + `" data-unit=` + sceneManager.currentUnit.value + `>` + (Math.round(lidar.lidarType.rangeNear*sceneManager.currentUnit.value * 100) / 100.0) + `</span> <span data-unittext=` + sceneManager.currentUnit.value + `>` + sceneManager.currentUnit.label + `</span></p>
62-
<p>Far</p><p><span id="lidar-far` + lidar.id + `" data-unit=` + sceneManager.currentUnit.value + `>` + (Math.round(lidar.lidarType.rangeFar*sceneManager.currentUnit.value * 100) / 100.0) + `</span> <span data-unittext=` + sceneManager.currentUnit.value + `>` + sceneManager.currentUnit.label + `</span></p>
61+
<p>Near</p><p><span id="lidar-near${lidar.id}" data-unit=${sceneManager.currentUnit.value}>${(lidar.lidarType.rangeNear * sceneManager.currentUnit.vale).toFixed(2)}</span> <span data-unittext=${sceneManager.currentUnit.value}>${sceneManager.currentUnit.label}</span></p>
62+
<p>Far</p><p><span id="lidar-far${lidar.id}" data-unit=${sceneManager.currentUnit.value}>${(lidar.lidarType.rangeFar * sceneManager.currentUnit.vale).toFixed(2)}</span> <span data-unittext=${sceneManager.currentUnit.value}>${sceneManager.currentUnit.label}</span></p>
6363
</div>
6464
</div>`;
6565

@@ -73,16 +73,16 @@ class LidarUI{
7373

7474
function bindEventListeners()
7575
{
76-
makeElementDraggable(document.getElementById("lidar-x-pos-" + lidar.id));
77-
makeElementDraggable(document.getElementById("lidar-z-pos-" + lidar.id));
78-
makeElementDraggable(document.getElementById("lidar-y-rot-" + lidar.id));
76+
makeElementDraggable(document.getElementById(`lidar-x-pos-${lidar.id}`));
77+
makeElementDraggable(document.getElementById(`lidar-z-pos-${lidar.id}`));
78+
makeElementDraggable(document.getElementById(`lidar-y-rot-${lidar.id}`));
7979

8080

81-
document.getElementById('lidar-' + (lidar.id) + '-hide-UI').addEventListener('click', () => hideUILidar());
82-
document.getElementById('lidar-' + (lidar.id) + '-visible').addEventListener('click', () => lidar.changeVisibility());
83-
document.getElementById('lidar-' + (lidar.id) + '-delete').addEventListener('click', () => sceneManager.objects.removeLidar(lidar));
81+
document.getElementById(`lidar-${lidar.id}-hide-UI`).addEventListener('click', () => hideUILidar());
82+
document.getElementById(`lidar-${lidar.id}-visible`).addEventListener('click', () => lidar.changeVisibility());
83+
document.getElementById(`lidar-${lidar.id}-delete`).addEventListener('click', () => sceneManager.objects.removeLidar(lidar));
8484

85-
document.getElementById('lidar-type-' + lidar.id).addEventListener('change', () => changeLidarType());
85+
document.getElementById(`lidar-type-${lidar.id}`).addEventListener('change', () => changeLidarType());
8686
}
8787

8888
function makeElementDraggable(element) {
@@ -202,11 +202,11 @@ class LidarUI{
202202

203203
function hideUILidar()
204204
{
205-
const lidarInfosUI = document.getElementById('lidar-infos-' + (lidar.id) + '-UI');
206-
const lidarUIheader = document.getElementById('lidar-' + (lidar.id) + '-UI-header');
205+
const lidarInfosUI = document.getElementById(`lidar-infos-${lidar.id}-UI`);
206+
const lidarUIheader = document.getElementById(`lidar-${lidar.id}-UI-header`);
207207
const hidden = lidarInfosUI.classList.contains('hidden');
208208
hidden ? lidarInfosUI.classList.remove('hidden') : lidarInfosUI.classList.add('hidden');
209-
const iconElem = document.getElementById('lidar-' + (lidar.id) + '-hide-UI').firstChild;
209+
const iconElem = document.getElementById(`lidar-${lidar.id}-hide-UI`).firstChild;
210210
iconElem.dataset.icon = hidden ? "bx:minus" : "bx:plus";
211211
}
212212

@@ -226,29 +226,29 @@ class LidarUI{
226226
lidar.buildRays();
227227
sceneManager.scene.add(lidar.rays);
228228

229-
document.getElementById('lidar-fov' + lidar.id).innerHTML = lidar.lidarType.fov + '°';
230-
document.getElementById('lidar-res' + lidar.id).innerHTML = lidar.lidarType.angularResolution + '°';
231-
document.getElementById('lidar-near' + lidar.id).innerHTML = (Math.round(lidar.lidarType.rangeNear*document.getElementById('lidar-near' + lidar.id).dataset.unit * 100) / 100.0);
232-
document.getElementById('lidar-far' + lidar.id).innerHTML = (Math.round(lidar.lidarType.rangeFar*document.getElementById('lidar-far' + lidar.id).dataset.unit * 100) / 100.0);
229+
document.getElementById(`lidar-fov${lidar.id}`).innerHTML = lidar.lidarType.fov + '°';
230+
document.getElementById(`lidar-res${lidar.id}`).innerHTML = lidar.lidarType.angularResolution + '°';
231+
document.getElementById(`lidar-near${lidar.id}`).innerHTML = (Math.round(lidar.lidarType.rangeNear*document.getElementById('lidar-near' + lidar.id).dataset.unit * 100) / 100.0);
232+
document.getElementById(`lidar-far${lidar.id}`).innerHTML = (Math.round(lidar.lidarType.rangeFar*document.getElementById('lidar-far' + lidar.id).dataset.unit * 100) / 100.0);
233233

234234
sceneManager.objects.populateStorage();
235235
}
236236

237237
this.changeVisibilityUIOnly = function(visible)
238238
{
239-
const iconElem = document.getElementById('lidar-' + (lidar.id) + '-visible').firstElementChild;
239+
const iconElem = document.getElementById(`lidar-${lidar.id}-visible`).firstElementChild;
240240
iconElem.dataset.icon = visible ? "akar-icons:eye-open" : "akar-icons:eye-slashed";
241241
}
242242

243243
this.updatePosition = function(x, z, currentUnitValue)
244244
{
245-
document.getElementById('lidar-x-pos-'+ lidar.id).getElementsByTagName('strong')[0].innerHTML = Math.round(x * currentUnitValue * 100)/100.0;
246-
document.getElementById('lidar-z-pos-'+ lidar.id).getElementsByTagName('strong')[0].innerHTML = Math.round(z * currentUnitValue * 100)/100.0;
245+
document.getElementById(`lidar-x-pos-${lidar.id}`).getElementsByTagName('strong')[0].innerHTML = Math.round(x * currentUnitValue * 100)/100.0;
246+
document.getElementById(`lidar-z-pos-${lidar.id}`).getElementsByTagName('strong')[0].innerHTML = Math.round(z * currentUnitValue * 100)/100.0;
247247
}
248248

249249
this.dispose = function()
250250
{
251-
let lidarUI = document.getElementById('lidar-' + lidar.id + '-UI');
251+
let lidarUI = document.getElementById(`lidar-${lidar.id}-UI`);
252252
//Check if wasn't removed singularly yet
253253
if(lidarUI) lidarUI.remove();
254254
}

‎js/UI/NodeUI.js‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,8 @@ class NodeUI {
6868
inspectorDiv.appendChild(nodeUIdiv);
6969
}
7070

71-
function bindEventListeners() {
71+
function bindEventListeners()
72+
{
7273
makeElementDraggable(document.getElementById(`node-x-pos-${node.id}`));
7374
makeElementDraggable(document.getElementById(`node-y-pos-${node.id}`));
7475
makeElementDraggable(document.getElementById(`node-z-pos-${node.id}`));
@@ -84,7 +85,8 @@ class NodeUI {
8485
document.getElementById(`cam-type-${node.id}`).addEventListener('change', changeCameraType);
8586
}
8687

87-
function makeElementDraggable(element) {
88+
function makeElementDraggable(element)
89+
{
8890
let valueElement = element.getElementsByTagName('strong')[0];
8991
let valueDisplayed = 0;
9092
let originalValueForClick = 0; // To restore the right value if there was no drag
@@ -176,7 +178,8 @@ class NodeUI {
176178
}
177179
}
178180

179-
function hideUICam() {
181+
function hideUICam()
182+
{
180183
const camInfosUI = document.getElementById(`node-infos-${node.id}-UI`);
181184
const camUIheader = document.getElementById(`node-${node.id}-UI-header`);
182185
const iconElem = document.getElementById(`node-${node.id}-hide-UI`).firstElementChild;
@@ -186,7 +189,8 @@ class NodeUI {
186189
if (iconElem) iconElem.dataset.icon = isHidden ? "bx:plus" : "bx:minus";
187190
}
188191

189-
function changeCameraType() {
192+
function changeCameraType()
193+
{
190194
const newTypeName = document.getElementById(`cam-type-${node.id}`).value;
191195
const newCameraTypeData = getCamerasTypes().find(type => type.name === newTypeName);
192196

@@ -237,7 +241,8 @@ class NodeUI {
237241

238242
}
239243

240-
this.changeFar = function() {
244+
this.changeFar = function()
245+
{
241246
const farUnitElement = document.getElementById(`node-far${node.id}`);
242247
if (farUnitElement) {
243248
const displayUnitValue = parseFloat(farUnitElement.dataset.unit) || sceneManager.currentUnit.value;
@@ -246,12 +251,14 @@ class NodeUI {
246251
};
247252

248253
// Change Icon according to visibility
249-
this.changeVisibilityUIOnly = function(visible) {
254+
this.changeVisibilityUIOnly = function(visible)
255+
{
250256
const iconElem = document.getElementById(`node-${node.id}-visible`)?.firstElementChild;
251-
if (iconElem) iconElem.dataset.icon = visible ? "akar-icons:eye-open" : "akar-icons:eye-slashed";
257+
iconElem.dataset.icon = visible ? "akar-icons:eye-open" : "akar-icons:eye-slashed";
252258
};
253259

254-
this.updatePosition = function(xNode, yNode, zNode, currentUnitValue) {
260+
this.updatePosition = function(xNode, yNode, zNode, currentUnitValue)
261+
{
255262
const xPosStrong = document.getElementById(`node-x-pos-${node.id}`)?.getElementsByTagName('strong')[0];
256263
const yPosStrong = document.getElementById(`node-y-pos-${node.id}`)?.getElementsByTagName('strong')[0];
257264
const zPosStrong = document.getElementById(`node-z-pos-${node.id}`)?.getElementsByTagName('strong')[0];
@@ -261,7 +268,8 @@ class NodeUI {
261268
if (zPosStrong) zPosStrong.innerHTML = (zNode * currentUnitValue).toFixed(2);
262269
};
263270

264-
this.dispose = function() {
271+
this.dispose = function()
272+
{
265273
const nodeUIElement = document.getElementById(`node-${node.id}-UI`);
266274
if (nodeUIElement) nodeUIElement.remove();
267275

‎js/scene/SceneManager.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -550,7 +550,7 @@ class SceneManager{
550550
const wallXPlane = new Plane(wallXNormal, -this.wallX.position.x);
551551
const wallYPlane = new Plane(wallYNormal, -this.wallY.position.z);
552552

553-
if(node.areaAppear)
553+
if(node.toggleFrustumOrNot && node.cameraAppear)
554554
{
555555

556556
const floorRays = [];

‎js/scene/objects/SceneObjects.js‎

Lines changed: 32 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -193,17 +193,27 @@ class SceneObjects{
193193

194194
this.displayFrustums = function()
195195
{
196-
const visibles = nodes.filter(n => n.areaAppear);
197-
nodes.forEach(n => n.changeFrustumVisibility(visibles.length != nodes.length));
198-
const iconElem = document.getElementById('display-frustums-button-icon');
199-
if(iconElem) iconElem.dataset.icon = visibles.length != nodes.length ? "akar-icons:eye-open" : "akar-icons:eye-slashed";
196+
nodes.forEach(n => n.changeFrustumVisibility());
197+
this.updateFrustumIcon();
200198
}
201199

202200
this.updateFrustumIcon = function()
203201
{
204-
const visibles = nodes.filter(n => n.areaAppear);
205202
const iconElem = document.getElementById('display-frustums-button-icon');
206-
if(iconElem) iconElem.dataset.icon = visibles.length != 0 ? "akar-icons:eye-open" : "akar-icons:eye-slashed";
203+
204+
let currentlyShowingFrustums = true;
205+
if(nodes && nodes.length > 0) {
206+
if (nodes[0] && typeof nodes[0].toggleFrustumOrNot !== 'undefined') {
207+
currentlyShowingFrustums = nodes[0].toggleFrustumOrNot;
208+
}
209+
210+
if (currentlyShowingFrustums) {
211+
iconElem.dataset.icon = "akar-icons:eye-open";
212+
} else {
213+
iconElem.dataset.icon = "akar-icons:eye-slashed";
214+
}
215+
}
216+
207217
}
208218

209219
this.removeNodes = function()
@@ -290,17 +300,27 @@ class SceneObjects{
290300

291301
this.displayRays = function()
292302
{
293-
const visibles = lidars.filter(l => l.raysAppear);
294-
lidars.forEach(l => l.changeRaysVisibility(visibles.length != lidars.length));
295-
const iconElem = document.getElementById('display-lidars-rays-button-icon');
296-
if(iconElem) iconElem.dataset.icon = visibles.length != lidars.length ? "akar-icons:eye-open" : "akar-icons:eye-slashed";
303+
lidars.forEach(l => l.changeRaysVisibility());
304+
this.updateRaysIcon();
297305
}
298306

299307
this.updateRaysIcon = function()
300308
{
301-
const visibles = lidars.filter(l => l.raysAppear);
302309
const iconElem = document.getElementById('display-lidars-rays-button-icon');
303-
if(iconElem) iconElem.dataset.icon = visibles.length != 0 ? "akar-icons:eye-slashed" : "akar-icons:eye-open";
310+
311+
let currentlyShowingIndividualRays = true;
312+
if (lidars && lidars.length > 0) {
313+
if (lidars[0] && typeof lidars[0].toggleRaysToShape !== 'undefined') {
314+
currentlyShowingIndividualRays = lidars[0].toggleRaysToShape;
315+
}
316+
317+
if (currentlyShowingIndividualRays) {
318+
iconElem.dataset.icon = "akar-icons:eye-open";
319+
} else {
320+
iconElem.dataset.icon = "akar-icons:eye-slashed";
321+
}
322+
}
323+
304324
}
305325

306326
this.removeLidars = function()

0 commit comments

Comments
 (0)