Skip to content

Commit 1e27f8f

Browse files
author
Léna Voinchet
committed
Add m - feet toggle in popup
1 parent 295a683 commit 1e27f8f

File tree

4 files changed

+96
-33
lines changed

4 files changed

+96
-33
lines changed

‎css/main.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1169,6 +1169,41 @@ a:hover {
11691169
transition: 0.3s ease all;
11701170
}
11711171

1172+
/* Button 3 */
1173+
#button-3 .knobs:before {
1174+
content: "";
1175+
position: absolute;
1176+
top: 4px;
1177+
left: 4px;
1178+
width: 20px;
1179+
height: 10px;
1180+
color: #fff;
1181+
font-size: 10px;
1182+
font-weight: bold;
1183+
text-align: center;
1184+
line-height: 1;
1185+
padding: 9px 4px;
1186+
background-color: #03a9f4;
1187+
border-radius: 50%;
1188+
transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
1189+
}
1190+
1191+
#button-3 .checkbox:checked + .knobs:before {
1192+
content: "";
1193+
left: 42px;
1194+
background-color: rgb(34, 221, 65);
1195+
}
1196+
1197+
#button-3 .checkbox:checked ~ .layer {
1198+
background-color: #e5fde5;
1199+
}
1200+
1201+
#button-3 .knobs,
1202+
#button-3 .knobs:before,
1203+
#button-3 .layer {
1204+
transition: 0.3s ease all;
1205+
}
1206+
11721207
.button-toggle.r,
11731208
.button-toggle.r .layer {
11741209
border-radius: 100px;

‎index.html‎

Lines changed: 43 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -118,44 +118,54 @@ <h3>Hardware</h3>
118118
<div id="gizmo-helper-image" class="row center-x center-y">
119119
<img src="img/gizmo-helper.png" alt="Gizmo helper">
120120
</div>
121-
<div id="dimensions-inputs" class="row wrap center-x center-y dimensions-inputs">
122-
<div id="dimensions-width" class="column">
123-
<div class="column">
124-
<p id="dimensions-width-text">Width (<span data-unittext="1">m</span>)</p>
125-
</div>
126-
<div class="column">
127-
<input id="dimensions-width-input" type="text" placeholder="Width" min="0" max="100" step="0.1" data-unit="1">
128-
</div>
129-
</div>
130-
<div id="dimensions-length" class="column">
131-
<div class="column">
132-
<p id="dimensions-length-text">Length (<span data-unittext="1">m</span>)</p>
133-
</div>
134-
<div class="column">
135-
<input id="dimensions-length-input" type="text" placeholder="Length" min="0" max="100" step="0.1" data-unit="1">
121+
<div class="row center-x center-y">
122+
<div id="dimensions-inputs" class="row wrap center-x center-y dimensions-inputs">
123+
<div id="dimensions-width" class="column">
124+
<div class="column">
125+
<p id="dimensions-width-text">Width (<span data-unittext="1">m</span>)</p>
126+
</div>
127+
<div class="column">
128+
<input id="dimensions-width-input" type="text" placeholder="Width" min="0" max="100" step="0.1" data-unit="1">
129+
</div>
136130
</div>
137-
</div>
138-
<div id="dimensions-distance" class="column">
139-
<div class="column">
140-
<p id="dimensions-distance-text-default">Sensor height (<span data-unittext="1">m</span>)</p>
141-
<p id="dimensions-distance-text-hand-tracking" class="hidden">Sensor height (<span data-unittext="1">m</span>) <span id="sensor-height-infos" class="iconify" data-icon="el:info-circle"></span></p>
142-
<div id="sensor-height-infos-text" class="hidden">
143-
<p>Please indicate the distance between the sensor and the table.</p>
131+
<div id="dimensions-length" class="column">
132+
<div class="column">
133+
<p id="dimensions-length-text">Length (<span data-unittext="1">m</span>)</p>
134+
</div>
135+
<div class="column">
136+
<input id="dimensions-length-input" type="text" placeholder="Length" min="0" max="100" step="0.1" data-unit="1">
144137
</div>
145-
<p id="dimensions-distance-text-wall-tracking" class="hidden">Height (<span data-unittext="1">m</span>)</p>
146138
</div>
147-
<div class="column">
148-
<input id="dimensions-distance-input" type="text" placeholder="Sensor height" min="0" max="20" step="0.1" data-unit="1">
139+
<div id="dimensions-distance" class="column">
140+
<div class="column">
141+
<p id="dimensions-distance-text-default">Sensor height (<span data-unittext="1">m</span>)</p>
142+
<p id="dimensions-distance-text-hand-tracking" class="hidden">Sensor height (<span data-unittext="1">m</span>) <span id="sensor-height-infos" class="iconify" data-icon="el:info-circle"></span></p>
143+
<div id="sensor-height-infos-text" class="hidden">
144+
<p>Please indicate the distance between the sensor and the table.</p>
145+
</div>
146+
<p id="dimensions-distance-text-wall-tracking" class="hidden">Height (<span data-unittext="1">m</span>)</p>
147+
</div>
148+
<div class="column">
149+
<input id="dimensions-distance-input" type="text" placeholder="Sensor height" min="0" max="20" step="0.1" data-unit="1">
150+
</div>
149151
</div>
152+
<!--<div id="dimensions-table-height" class="column">
153+
<div class="column">
154+
<p id="dimensions-table-height-text">Table height (<span data-unittext="1">m</span>)</p>
155+
</div>
156+
<div class="column">
157+
<input id="dimensions-table-height-input" type="text" placeholder="Width" min="0" max="2" step="0.1" data-unit="1">
158+
</div>
159+
</div>-->
150160
</div>
151-
<!--<div id="dimensions-table-height" class="column">
152-
<div class="column">
153-
<p id="dimensions-table-height-text">Table height (<span data-unittext="1">m</span>)</p>
154-
</div>
155-
<div class="column">
156-
<input id="dimensions-table-height-input" type="text" placeholder="Width" min="0" max="2" step="0.1" data-unit="1">
161+
<div id="new-toggle">
162+
<p id="button-toggle-unit">METERS</p>
163+
<div class="button-toggle r" id="button-3">
164+
<input id="toggle-feet-meter" type="checkbox" class="checkbox" />
165+
<div class="knobs"></div>
166+
<div class="layer"></div>
157167
</div>
158-
</div>-->
168+
</div>
159169
</div>
160170
<div id="dimensions-warning-message" class="row center-x wrap hidden">
161171
<p id="dimensions-warning-text" class="warning-text">No hardware setup found,</p><p id="dimensions-warning-button" class="text-button">click here to get in touch with our experts.</p>
@@ -409,7 +419,7 @@ <h1 id="website-title">Augmenta Designer (beta)</h1>
409419
<!-- LIDARS RAYS BUTTON -->
410420
<div id="display-lidars-rays-button" class="button main-button">
411421
<span id="display-lidars-rays-button-icon" class="iconify main-icon" data-icon="akar-icons:eye-open"></span>
412-
<p id="display-lidars-rays-button-text">Lidars rays</p>
422+
<p id="display-lidars-rays-button-text">LiDARs rays</p>
413423
</div>
414424

415425

‎js/UI/Popup.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -401,6 +401,14 @@ class Popup{
401401
}
402402
}
403403
}
404+
405+
// INIT TEXT FOR TOGGLE
406+
const toggleElemFeetMeter = document.getElementById("toggle-feet-meter");
407+
if(toggleElemFeetMeter.checked){
408+
document.getElementById("button-toggle-unit").innerHTML = "FEETS";
409+
} else {
410+
document.getElementById("button-toggle-unit").innerHTML = "METERS";
411+
}
404412
}
405413

406414
function getDimensions()
@@ -410,6 +418,8 @@ class Popup{
410418
givenHeight = Math.floor(parseFloat(document.getElementById('dimensions-distance-input').value) / sceneManager.currentUnit.value * 100) / 100;
411419
}
412420

421+
document.getElementById("toggle-feet-meter").addEventListener('change', () => {sceneManager.toggleUnit();});
422+
413423
document.getElementById('next-button-dimensions').addEventListener('click', () =>
414424
{
415425
resetWarnings();

‎js/scene/SceneManager.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,14 @@ class SceneManager{
312312
if(toggleUnitButtonUnit) toggleUnitButtonUnit.classList.remove("normal-font");
313313
if(toggleUnitButtonUnit) toggleUnitButtonUnit.classList.add("bold-font");
314314

315+
if (this.currentUnit.label === 'm' && unit.label === 'ft') {
316+
document.getElementById("toggle-feet-meter").checked = true;
317+
document.getElementById("button-toggle-unit").innerHTML = "FEETS"
318+
} else if (this.currentUnit.label === 'ft' && unit.label === 'm') {
319+
document.getElementById("toggle-feet-meter").checked = false;
320+
document.getElementById("button-toggle-unit").innerHTML = "METERS"
321+
}
322+
315323
this.currentUnit = unit;
316324

317325
this.objects.populateStorage();

0 commit comments

Comments
 (0)