Skip to content

Commit 50cf2c5

Browse files
author
Léna Voinchet
committed
Add finger tracking to lidars
1 parent 927aad0 commit 50cf2c5

File tree

9 files changed

+183
-86
lines changed

9 files changed

+183
-86
lines changed

‎index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,8 @@ <h3>Hardware</h3>
8484
<div id="setup-target-overlap-wall" class="popup-target-overlap-select hidden">
8585
<p>Target overlap detection</p>
8686
<select title="overlap-wall-popup" name="overlap-wall-popup" id="overlap-wall-selection-popup">
87-
<option value="1.2" selected>Hand tracking</option>
88-
<option value="1.6">Finger tracking</option>
89-
<option value="2">Large objects</option>
87+
<option value="0.1" selected>Hand tracking</option>
88+
<option value="0.02">Finger tracking</option>
9089
</select>
9190
</div>
9291
<div id="setup-target-overlap-table" class="popup-target-overlap-select hidden">
@@ -560,7 +559,8 @@ <h3>Choose the type.s of sensor.s you want to use</h3>
560559
<!-- END WIZARD MODAL -->
561560

562561
<img id="tracking-img" src="img/human-tracking.png" alt="Tracking image" class="tracking-img">
563-
<h3 id="height-detection-text">Target overlap height detection: Hips</h3>
562+
<h3 id="height-detection-text">Target overlap height detection : Hips</h3>
563+
<h3 id="size-detection-text">Target size detection : Hands</h3>
564564

565565
<!-- TRACKING SECTION IN INSPECTOR -->
566566
<div id="tracking-section-inspector" class="hidden">

‎js/UI/LidarUI.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ class LidarUI{
88

99
function buildUIDiv()
1010
{
11+
const rangeNear = lidar.lidarType.rangeNear;
12+
const rangeFar = sceneManager.sizeDetected === 0.1 ? lidar.lidarType.handFar : lidar.lidarType.fingerFar;
13+
1114
let lidarTypesOptions = ``;
1215
getLidarsTypes().filter(c => c.recommended).forEach(type => {
1316
const optionElement = `<option value="` + type.name + `" ` + (lidar.lidarType.name === type.name ? `selected` : ``) + `>` + type.name;
@@ -58,8 +61,8 @@ class LidarUI{
5861
</div>
5962
<div class="row cam-spec">
6063
<p class="spec-title main-text">Distance</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>
64+
<p>Near</p><p><span id="lidar-near${lidar.id}" data-unit=${sceneManager.currentUnit.value}>${(rangeNear * sceneManager.currentUnit.value).toFixed(2)}</span> <span data-unittext=${sceneManager.currentUnit.value}>${sceneManager.currentUnit.label}</span></p>
65+
<p>Far</p><p><span id="lidar-far${lidar.id}" data-unit=${sceneManager.currentUnit.value}>${(rangeFar * sceneManager.currentUnit.value).toFixed(2)}</span> <span data-unittext=${sceneManager.currentUnit.value}>${sceneManager.currentUnit.label}</span></p>
6366
</div>
6467
</div>`;
6568

@@ -224,10 +227,13 @@ class LidarUI{
224227
lidar.setType(newLidarTypeData, sceneManager);
225228

226229
// STEP 2 : Update UI with new camera properties
230+
const rangeNear = lidar.lidarType.rangeNear;
231+
const rangeFar = sceneManager.sizeDetected === 0.1 ? lidar.lidarType.handFar : lidar.lidarType.fingerFar;
232+
227233
document.getElementById(`lidar-fov${lidar.id}`).innerHTML = lidar.lidarType.fov + '°';
228234
document.getElementById(`lidar-res${lidar.id}`).innerHTML = lidar.lidarType.angularResolution + '°';
229-
document.getElementById(`lidar-near${lidar.id}`).innerHTML = (Math.round(lidar.lidarType.rangeNear*document.getElementById(`lidar-near${lidar.id}`).dataset.unit * 100) / 100.0);
230-
document.getElementById(`lidar-far${lidar.id}`).innerHTML = (Math.round(lidar.lidarType.rangeFar*document.getElementById(`lidar-far${lidar.id}`).dataset.unit * 100) / 100.0);
235+
document.getElementById(`lidar-near${lidar.id}`).innerHTML = (Math.round(rangeNear*document.getElementById(`lidar-near${lidar.id}`).dataset.unit * 100) / 100.0);
236+
document.getElementById(`lidar-far${lidar.id}`).innerHTML = (Math.round(rangeFar*document.getElementById(`lidar-far${lidar.id}`).dataset.unit * 100) / 100.0);
231237

232238
// STEP 3 : Save changes
233239
sceneManager.objects.populateStorage();

‎js/UI/Popup.js‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ class Popup{
1010
let trackingMode = this.trackingMode;
1111
this.heightDetected = 1.2;
1212
let heightDetected = this.heightDetected;
13+
this.sizeDetected = 0.1;
14+
let sizeDetected = this.sizeDetected;
1315
this.givenWidth = 0;
1416
let givenWidth = this.givenWidth;
1517
this.givenLength = 0;
@@ -111,8 +113,6 @@ class Popup{
111113
document.getElementById("setup-target-overlap-table").classList.remove("hidden");
112114
document.getElementById("setup-target-overlap").classList.add("hidden");
113115
document.getElementById("setup-target-overlap-wall").classList.add("hidden");
114-
sceneManager.heightDetectedObservable.set(0.25);
115-
//sceneManager.sceneElevation = 0.75;
116116
break;
117117
case 'human-tracking':
118118
document.getElementById("setup-target-overlap").classList.remove("hidden");
@@ -130,6 +130,12 @@ class Popup{
130130
if(trackingMode == "human-tracking") document.getElementById("overlap-height-selection-popup").value = heightDetected;
131131
}
132132

133+
this.setSizeDetected = function(value){
134+
//console.log("Setting detected size to ", value);
135+
sizeDetected = value;
136+
if(trackingMode == "wall-tracking") document.getElementById('overlap-wall-selection-popup').value = sizeDetected;
137+
}
138+
133139
/** SETUP SECTION */
134140
function initSetupSection()
135141
{
@@ -161,6 +167,7 @@ class Popup{
161167
sceneManager.trackingModeObservable.set(trackingModeRadios[i].value)
162168
switch (trackingMode) {
163169
case "wall-tracking":
170+
sceneManager.sizeDetectedObservable.set(0.1)
164171
break;
165172
case "hand-tracking":
166173
sceneManager.heightDetectedObservable.set(0.25)
@@ -192,6 +199,10 @@ class Popup{
192199
sceneManager.heightDetectedObservable.set(parseFloat(document.getElementById("overlap-height-selection-popup").value));
193200
});
194201

202+
document.getElementById('overlap-wall-selection-popup').addEventListener('change', () => {
203+
sceneManager.sizeDetectedObservable.set(parseFloat(document.getElementById('overlap-wall-selection-popup').value));
204+
});
205+
195206
document.getElementById('next-button-setup').addEventListener('click', () =>
196207
{
197208
const trackingModeRadios = document.getElementsByName("tracking-mode-selection-builder");
@@ -534,7 +545,8 @@ class Popup{
534545
if(trackingMode === "wall-tracking")
535546
{
536547
getLidarsTypes().filter(l => l.recommended).forEach(l => {
537-
if(checkLidarCoherence(givenWidth, givenHeight, l.rangeFar))
548+
const rangeFar = sizeDetected === 0.1 ? l.handFar : l.fingerFar;
549+
if(checkLidarCoherence(givenWidth, givenHeight, rangeFar))
538550
{ sensorsCompatible.push(l) }
539551
})
540552
}
@@ -581,8 +593,21 @@ class Popup{
581593
//sensorChoice.id = "hardware-input-" + s.textId;
582594
//sensorChoice.classList.add("row", "center-x", "hardware-sensors-type", "hardware-radio-label");
583595

584-
const near = Math.floor(s.rangeNear * sceneManager.currentUnit.value * 100) / 100;
585-
const far = Math.floor((trackingMode === 'hand-tracking' ? s.handFar : s.rangeFar) * sceneManager.currentUnit.value * 100) / 100;
596+
let near = Math.floor(s.rangeNear * sceneManager.currentUnit.value * 100) / 100;
597+
let far;
598+
599+
switch(trackingMode) {
600+
case 'hand-tracking' :
601+
far = Math.floor(s.handFar * sceneManager.currentUnit.value * 100) / 100;
602+
break;
603+
case 'human-tracking' :
604+
far = Math.floor(s.rangeFar * sceneManager.currentUnit.value * 100) / 100;
605+
break;
606+
case 'wall-tracking' :
607+
const rangeFar = sizeDetected === 0.1 ? s.handFar : s.fingerFar;
608+
far = Math.floor(rangeFar * sceneManager.currentUnit.value * 100) / 100;
609+
break;
610+
}
586611
sensorChoice.innerHTML = `<p>` + s.name + ` (<span data-unit=` + sceneManager.currentUnit.value + `>` + near + `</span> - <span data-unit=` + sceneManager.currentUnit.value + `>` + far + `</span><span data-unittext=` + sceneManager.currentUnit.value + `>` + sceneManager.currentUnit.label +`</span>)</p>`;
587612
sensorsDiv.appendChild(sensorChoice);
588613
});
@@ -727,7 +752,7 @@ class Popup{
727752
case 'wall-tracking':
728753
{
729754
const sensor = getLidarsTypes().find(sensorType => sensorType.textId === sensorTextId);
730-
const config = calculateLidarConfig(sensor, givenWidth, givenHeight);
755+
const config = calculateLidarConfig(sensor, givenWidth, givenHeight, sceneManager.sizeDetected);
731756
if(!config){
732757
console.error('no config found with this setup');
733758
return;

‎js/UI/UIManager.js‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -190,16 +190,19 @@ class UIManager{
190190
case 'hand-tracking':
191191
document.getElementById("coverage-section").classList.remove("hidden");
192192
document.getElementById("height-detection-text").classList.add("hidden");
193+
document.getElementById("size-detection-text").classList.add("hidden");
193194
sceneManager.updateSceneSizeText(trackingMode);
194195
break;
195196
case 'wall-tracking':
196197
document.getElementById("coverage-section").classList.add("hidden");
197198
document.getElementById("height-detection-text").classList.add("hidden");
199+
document.getElementById("size-detection-text").classList.remove("hidden");
198200
sceneManager.updateSceneSizeText(trackingMode);
199201
break;
200202
case 'human-tracking':
201203
document.getElementById("coverage-section").classList.remove("hidden");
202204
document.getElementById("height-detection-text").classList.remove("hidden");
205+
document.getElementById("size-detection-text").classList.add("hidden");
203206
sceneManager.updateSceneSizeText(trackingMode);
204207
break;
205208
default:
@@ -262,13 +265,13 @@ class UIManager{
262265
let text;
263266
switch (value) {
264267
case 1.2:
265-
text = "Target overlap height detection: Hips"
268+
text = "Target overlap height detection : Hips"
266269
break;
267270
case 1.6:
268-
text = "Target overlap height detection: Shoulders"
271+
text = "Target overlap height detection : Shoulders"
269272
break;
270273
case 2:
271-
text = "Target overlap height detection: Entire body"
274+
text = "Target overlap height detection : Entire body"
272275
break;
273276
default:
274277
text = ""
@@ -278,6 +281,22 @@ class UIManager{
278281
//document.getElementById('overlap-height-selection-inspector').value = value;
279282
}
280283

284+
this.changeSizeDetected = function(value) {
285+
let text;
286+
switch (value) {
287+
case 0.1:
288+
text = "Target size detection : Hands"
289+
break;
290+
case 0.02:
291+
text = "Target size detection : Fingers"
292+
break;
293+
default:
294+
text = ""
295+
break;
296+
}
297+
document.getElementById('size-detection-text').innerText = text;
298+
}
299+
281300
/* UPDATE */
282301
function isAreaCoveredUI(sceneManager)
283302
{

0 commit comments

Comments
 (0)