Improve UI for 125x2 controls

glue-viz · Jan 19, 2025 · b6f5870 · b6f5870
1 parent fa486af
commit b6f5870
Showing 1 changed file with 26 additions and 4 deletions.
diff --git a/docs/examples/125_x2.html b/docs/examples/125_x2.html
@@ -68,10 +68,25 @@
   top: 50%;
 }
 
+h3 {
+  color: white;
+}
+
 #layer-controls {
   position: relative;
   top: 20px;
   left: 20px;
+  width: 150px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 2px solid white;
+  border-radius: 5px;
+  background-color: transparent;
+}
+
+#layer-controls button {
+  width: 100%;
 }
 
 </style>
@@ -90,36 +105,43 @@
         View in AR
       </button>
       <div class="controls" id="layer-controls">
+        <h3>Toggle Layers</h3>
         <button data-layer="0">Density</button>
         <button data-layer="1">Momentum</button>
       </div>
     </model-viewer>
     <script>
       function componentToHex(c) {
-        var hex = Math.round(c * 256).toString(16);
-        return hex.length == 1 ? "0" + hex : hex;
+        return Math.round(c * 256).toString(16).padStart(2, "0");
       }
 
       function rgbToHex(r, g, b) {
         return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
       }
 
+      function updateButtonStyle(button, on, color) {
+        button.style.color = on ? color : "black";
+        button.style.border = on ? `1px solid ${color}` : "none";
+        button.style.borderRadius = "2px";
+      }
+
       const modelViewer = document.querySelector("model-viewer");
       modelViewer.addEventListener("load", (_event) => {
         const colors = modelViewer.model.materials.map(material => material.pbrMetallicRoughness.baseColorFactor);
         const originalOpacities = colors.map(color => color[3]);
         const layersOn = colors.map(_ => true);
 
         const layerControls = document.querySelector("#layer-controls");
+        const buttons = [...layerControls.querySelectorAll("button")];
         const hexColors = colors.map(color => rgbToHex(...color.slice(0, 3)));
-        [...layerControls.children].forEach((button, index) => button.style.color = hexColors[index]);
+        buttons.forEach((button, index) => updateButtonStyle(button, true, hexColors[index]));
         layerControls.addEventListener("click", (event) => {
           const index = Number(event.target.dataset.layer);
           const material = modelViewer.model.materials[index];
           const rgb = material.pbrMetallicRoughness.baseColorFactor.slice(0, 3);
           const wasOn = layersOn[index];
           material.pbrMetallicRoughness.setBaseColorFactor([...rgb, wasOn ? 0.0 : originalOpacities[index]]);
-          layerControls.children[index].style.color = wasOn ? "black" : hexColors[index];
+          updateButtonStyle(buttons[index], !wasOn, hexColors[index]);
           layersOn[index] = !wasOn;
         });
       });