Skip to content

Commit 2c81fa2

Browse files
RIGAT-Pierre-andre-2326090parRIGAT-Pierre-andre-2326090par
committed
Refactor heatmap UI: integrate participants data from CSV and adjust layout for improved responsiveness
1 parent 1feab9a commit 2c81fa2

8 files changed

Lines changed: 66 additions & 64 deletions

File tree

‎_data/en/heatmap-ui.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ preferred_button: Preferred
2828
total: All Fingers
2929

3030
# context and legend
31-
finger_context: Combined reachability across all 10 fingers and 22 participants.
31+
finger_context: Combined reachability across all 10 fingers and 22 participants. Figure 7 left.
3232

3333
reachable: Reachable
3434
unreachable: Unreachable

‎_data/fr/heatmap-ui.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ preferred_button: Préféré
2828
total: Tous les doigts
2929

3030
# context and legend
31-
finger_context: Accessibilité combinée des 10 doigts et 22 participants.
31+
finger_context: Accessibilité combinée des 10 doigts et 22 participants. Figure 7 gauche.
3232

3333
reachable: Accessible
3434
unreachable: Inaccessible

‎_includes/dataviz-data.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,25 @@
11
<script>
2+
// Données CSV intégrées (généré par Jekyll)
3+
let participantsData = [
4+
{% for row in site.data.preferences %}
5+
{
6+
number: {{ row.Number }},
7+
handedness: "{{ row.Handedness }}",
8+
circumferenceLeft: {{ row.CircumferenceLeftHand }},
9+
circumferenceRight: {{ row.CircumferenceRightHand }},
10+
lengthLeft: {{ row.LengthLeftHand }},
11+
lengthRight: {{ row.LengthRightHand }},
12+
spanLeft: {{ row.SpanLeftHand }},
13+
spanRight: {{ row.SpanRightHand }},
14+
R: [{{ row.R1 }},{{ row.R2 }},{{ row.R3 }},{{ row.R4 }},{{ row.R5 }},{{ row.R6 }},{{ row.R7 }},{{ row.R8 }},{{ row.R9 }},{{ row.R10 }},{{ row.R11 }},{{ row.R12 }},{{ row.R13 }},{{ row.R14 }},{{ row.R15 }},{{ row.R16 }}],
15+
B: [{{ row.B1 }},{{ row.B2 }},{{ row.B3 }},{{ row.B4 }},{{ row.B5 }},{{ row.B6 }},{{ row.B7 }},{{ row.B8 }},{{ row.B9 }},{{ row.B10 }},{{ row.B11 }},{{ row.B12 }},{{ row.B13 }},{{ row.B14 }},{{ row.B15 }},{{ row.B16 }}],
16+
G: [{{ row.G1 }},{{ row.G2 }},{{ row.G3 }},{{ row.G4 }},{{ row.G5 }},{{ row.G6 }},{{ row.G7 }},{{ row.G8 }},{{ row.G9 }},{{ row.G10 }},{{ row.G11 }},{{ row.G12 }},{{ row.G13 }},{{ row.G14 }},{{ row.G15 }},{{ row.G16 }}],
17+
W: [{{ row.W1 }},{{ row.W2 }},{{ row.W3 }},{{ row.W4 }},{{ row.W5 }},{{ row.W6 }},{{ row.W7 }},{{ row.W8 }},{{ row.W9 }},{{ row.W10 }},{{ row.W11 }},{{ row.W12 }},{{ row.W13 }},{{ row.W14 }},{{ row.W15 }},{{ row.W16 }}],
18+
Y: [{{ row.Y1 }},{{ row.Y2 }},{{ row.Y3 }},{{ row.Y4 }},{{ row.Y5 }},{{ row.Y6 }},{{ row.Y7 }},{{ row.Y8 }},{{ row.Y9 }},{{ row.Y10 }},{{ row.Y11 }},{{ row.Y12 }},{{ row.Y13 }},{{ row.Y14 }},{{ row.Y15 }},{{ row.Y16 }}]
19+
}{% unless forloop.last %},{% endunless %}
20+
{% endfor %}
21+
];
22+
223
// Reachability data (total per key, summed across all fingers per participant)
324
{% assign fingers = "LT,LI,LM,LR,LL,RT,RI,RM,RR,RL" | split: "," %}
425
{% assign faceNames = "R,B,G,W,Y" | split: "," %}

‎_includes/heatmap.html‎

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -19,39 +19,41 @@
1919
</style>
2020

2121
<!-- the interface of the 3d render, with 2 home-made select -->
22-
<div id="interface">
23-
<!-- the first select -->
24-
<div class="select active" id="hand-select" role="select">
25-
<input class="select-checkbox" id="hand-select-checkbox" type="checkbox">
26-
<!-- the select content, the checkbox allow the switch for the display of the options -->
27-
<label for="hand-select-checkbox" style="display: flex; justify-content: space-between">
28-
<span id="hand-selected">{{ e.total }}</span>
29-
<img alt="arrow_down" src="/assets/img/arrow_down.png" style="aspect-ratio: 1 / 1; height: 1.6em;">
30-
</label>
31-
<!-- the select options -->
32-
<div class="select-options" id="hand-select-options">
33-
<span class="select-option choose">{{ e.total }}</span>
34-
<span class="select-option">{{ e.preferred }}</span>
35-
<span class="select-option">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.hand }}</span>
36-
<span class="select-option">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.hand }}</span>
22+
<div class="buffer">
23+
<div id="interface">
24+
<!-- the first select -->
25+
<div class="select active" id="hand-select" role="select">
26+
<input class="select-checkbox" id="hand-select-checkbox" type="checkbox">
27+
<!-- the select content, the checkbox allow the switch for the display of the options -->
28+
<label for="hand-select-checkbox" style="display: flex; justify-content: space-between">
29+
<span id="hand-selected">{{ e.total }}</span>
30+
<img alt="arrow_down" src="/assets/img/arrow_down.png" style="aspect-ratio: 1 / 1; height: 1.6em;">
31+
</label>
32+
<!-- the select options -->
33+
<div class="select-options" id="hand-select-options">
34+
<span class="select-option choose">{{ e.total }}</span>
35+
<span class="select-option">{{ e.preferred }}</span>
36+
<span class="select-option">{{ e.hf_format | replace: '%h%', e.left | replace: '%f%', e.hand }}</span>
37+
<span class="select-option">{{ e.hf_format | replace: '%h%', e.right | replace: '%f%', e.hand }}</span>
38+
</div>
3739
</div>
38-
</div>
39-
<!-- the second select -->
40-
<div class="select" id="finger-select" role="select">
41-
<input class="select-checkbox" id="finger-select-checkbox" type="checkbox">
42-
<!-- the select content, the checkbox allow the switch for the display of the options -->
43-
<label for="finger-select-checkbox" style="display: flex; justify-content: space-between">
44-
<span id="finger-selected">{{ e.all_button }}</span>
45-
<img alt="arrow_down" src="/assets/img/arrow_down.png" style="aspect-ratio: 1 / 1; height: 1.6em;">
46-
</label>
47-
<!-- the select options -->
48-
<div class="select-options" id="finger-select-options">
49-
<span class="select-option choose">{{ e.all_button }}</span>
50-
<span class="select-option">{{ e.thumb }}</span>
51-
<span class="select-option">{{ e.index }}</span>
52-
<span class="select-option">{{ e.middle }}</span>
53-
<span class="select-option">{{ e.ring }}</span>
54-
<span class="select-option">{{ e.little }}</span>
40+
<!-- the second select -->
41+
<div class="select" id="finger-select" role="select">
42+
<input class="select-checkbox" id="finger-select-checkbox" type="checkbox">
43+
<!-- the select content, the checkbox allow the switch for the display of the options -->
44+
<label for="finger-select-checkbox" style="display: flex; justify-content: space-between">
45+
<span id="finger-selected">{{ e.all_button }}</span>
46+
<img alt="arrow_down" src="/assets/img/arrow_down.png" style="aspect-ratio: 1 / 1; height: 1.6em;">
47+
</label>
48+
<!-- the select options -->
49+
<div class="select-options" id="finger-select-options">
50+
<span class="select-option choose">{{ e.all_button }}</span>
51+
<span class="select-option">{{ e.thumb }}</span>
52+
<span class="select-option">{{ e.index }}</span>
53+
<span class="select-option">{{ e.middle }}</span>
54+
<span class="select-option">{{ e.ring }}</span>
55+
<span class="select-option">{{ e.little }}</span>
56+
</div>
5557
</div>
5658
</div>
5759
</div>
@@ -90,12 +92,11 @@
9092

9193
<!-- process the data and handle the interface to display the Keycube -->
9294
<script type="module">
93-
import { Keycube } from '/assets/js/model-viewer.js';
95+
import {Keycube} from '/assets/js/model-viewer.js';
96+
import langFinger from '/assets/js/ui-lang.json' with {type: 'json'};
9497

9598
const heatmap = new Keycube(document.getElementById('model-container'), true, 'integer')
9699

97-
import langFinger from '/assets/js/ui-lang.json' with {type: 'json'};
98-
99100
// select element
100101
const handLabel = document.getElementById('hand-selected');
101102
const fingerLabel = document.getElementById('finger-selected');

‎assets/css/heatmap.css‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
justify-content: center;
88
align-items: center;
99
box-sizing: border-box;
10-
margin: 4rem auto 0;
10+
margin: auto;
1111
overflow: visible;
1212
object-fit: cover;
1313

@@ -43,6 +43,10 @@
4343
cursor: grabbing;
4444
}
4545

46+
.buffer {
47+
height: 4rem;
48+
}
49+
4650
#interface {
4751
position: absolute;
4852
left: 50%;
@@ -54,14 +58,6 @@
5458
user-select: none;
5559
}
5660

57-
/*#hand-select {
58-
width: 13em
59-
}
60-
61-
#finger-select {
62-
width: 7em
63-
}*/
64-
6561
.select-option:hover, .select-option.choose, #reset-view-btn:hover {
6662
color: #111;
6763
text-decoration: underline;
@@ -160,29 +156,13 @@
160156
}
161157

162158
#reset-view-btn {
163-
/*background: rgba(255, 255, 255, 0.82);
164-
backdrop-filter: blur(10px);
165-
-webkit-backdrop-filter: blur(10px);
166-
border: 1px solid rgba(0, 0, 0, 0.08);
167-
border-radius: 10px;
168-
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);*/
169159
font-size: 12px;
170160
font-weight: 600;
171-
/*color: #1a1a2e;
172-
transition: all 0.3s;*/
173161
cursor: pointer;
174-
/*padding: 7px 14px;*/
175162
pointer-events: auto;
176163
user-select: none;
177164
}
178165

179-
#reset-view-btn:active {
180-
/*background: rgba(74, 158, 255, 0.9);
181-
color: white;
182-
transform: translateY(-2px);
183-
border-color: rgba(74, 158, 255, 0.4);*/
184-
}
185-
186166
/* Responsive */
187167
@media (max-width: 900px) {
188168
select { min-width: 180px; font-size: 12px; }

‎assets/img/k3-loading.png‎

-2.78 KB
Loading

‎assets/img/keycube-loading.png‎

-86.6 KB
Binary file not shown.

‎assets/js/model-viewer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export class Keycube {
7373

7474
// Autorotation settings (integrated with OrbitControls)
7575
this.controls.autoRotate = true;
76-
this.controls.autoRotateSpeed = 0.5; // Slightly slower idle rotation
76+
this.controls.autoRotateSpeed = 0.5 // Slightly slower idle rotation
7777
this.autoRotateStoppedByUser = false;
7878

7979
this.renderer.domElement.addEventListener('touchmove', this.captureViewerGesture, {passive: false});
@@ -478,7 +478,7 @@ export class Keycube {
478478
if (data.lightingIntensity !== undefined) this.directionalLight.intensity = data.lightingIntensity;
479479

480480
// Heatmap color: invert=true → low=green (preference), invert=false → high=green (reachability)
481-
const heatmapColor = (norm, invert) => new THREE.Color().setHSL((invert ? 1 - norm : norm) * 0.33, 0.9, 0.5);
481+
const heatmapColor = (norm, invert) => new THREE.Color().setHSL((invert ? 1 - norm : norm) * 0.33, 1, 0.5);
482482

483483
// Apply heatmap to keys
484484
const applyHeatmap = (heatmapData, min, max, invert, dimOthers) => {

0 commit comments

Comments
 (0)