Refactor heatmap UI: update styles and improve label rendering for better clarity

Author: RIGAT-Pierre-andre-2326090par

_includes/heatmap.html

@@ -345,16 +345,6 @@
         }
     }
 
-    // close the hand select if the finger one is open
-    /*fingerCheckbox.addEventListener('change', () => {
-        handCheckbox.checked = false;
-    })
-
-    // close the finger select if the hand one is open
-    handCheckbox.addEventListener('change', () => {
-        fingerCheckbox.checked = false;
-    })*/
-
     // the first select options start the first select handler
     handOptions.forEach(elem => {
         elem.addEventListener('click', () => {

assets/css/heatmap.css

@@ -1,3 +1,4 @@
+/* 3d render style */
 #model-container {
     width: -webkit-calc(100% - 100px);
     width: calc(100% - 100px);
@@ -42,6 +43,7 @@
     cursor: grabbing;
 }
 
+/* IU style */
 #interface {
     display: flex;
     justify-content: center;
@@ -176,18 +178,4 @@ label {
     cursor: pointer;
     pointer-events: auto;
     user-select: none;
-}
-
-/* Responsive */
-@media (max-width: 900px) {
-}
-
-@media (max-width: 768px) {
-    .bottom-bar { padding: 10px 14px; }
-}
-
-@media (max-width: 480px) {
-    .bottom-bar { gap: 6px; padding: 8px 10px; }
-    .heatmap-legend { font-size: 10px; }
-    .heatmap-gradient { width: 60px; height: 8px; }
 }

assets/js/model-viewer.js

@@ -237,14 +237,14 @@ export class Keycube {
     createTextLabel(text, axis, sign) {
         const {mesh, canvas, texture} = this.createLabelPlane(0.13, 256, axis, sign);
         const ctx = canvas.getContext('2d');
-        ctx.font = 'bold 224px Arial';
+        ctx.font = 'bold 112px Arial';
         ctx.textAlign = 'center';
         ctx.textBaseline = 'middle';
         ctx.strokeStyle = 'rgba(0,0,0,0.7)';
         ctx.lineWidth = 16;
-        ctx.strokeText(text, 256, 256);
+        ctx.strokeText(text, 128, 128);
         ctx.fillStyle = 'white';
-        ctx.fillText(text, 256, 256);
+        ctx.fillText(text, 128, 128);
         texture.needsUpdate = true;
         mesh.userData = {isLabel: true};
         return mesh;
@@ -314,7 +314,7 @@ export class Keycube {
         const bbox = new THREE.Box3().setFromObject(object);
         const sphere = new THREE.Sphere();
         bbox.getBoundingSphere(sphere);
-        return sphere; // { center: Vector3, radius: Number }
+        return sphere;
     }
 
     /**