Web Viewer UI Improvements (#2798)

kwokcb · web-flow · commit 2cecaadb2a2d · 2026-03-04T17:25:03.000-08:00
- Add FPS timer. Toggles via T / t(imer). ( SHIFT-f / F already used for frame-grab so don't want to mix things up ).
- Make UI consistent for font, and color
- Make menus not be file names but try and parse out useful words. Remove extensions.
- Prevent UI from overlapping and wrapping when page is narrow (mobile and desktop).
diff --git a/javascript/MaterialXView/index.ejs b/javascript/MaterialXView/index.ejs
@@ -8,9 +8,43 @@
     <style>
       body {
         margin: 0;
-        font-family: Arial
+        font-family: "Segoe UI", Roboto, Arial, sans-serif;
+        font-size: 12px;
       }
 
+      /* Responsive select menus */
+      select {
+        max-width: 40vw;
+        width: 100%;
+        box-sizing: border-box;
+        white-space: normal;
+        overflow-wrap: break-word;
+        word-break: break-word;
+        background: #000;
+        color: #fff;
+        border: 1px solid #444;
+        font-family: inherit;
+        font-size: inherit;
+      }
+
+      select option {
+        background: #000;
+        color: #fff;
+        font-family: inherit;
+        font-size: inherit;
+      }
+
+      .select-row {
+        color: rgb(255, 255, 255);
+        background: rgba(0,0,0,0.4);
+        position: absolute;
+        margin: 1em;
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+      }
+
+
       /* Property editor item color */
       .peditoritem {
         background-color: #334444;
@@ -20,32 +54,51 @@
         background-color: #333333;
       }
 
+      /* Move property editor down to align with Material row */
+      .lil-gui {
+        top: 1.0em !important;
+      }
+
      .peditor_material_assigned {
         background-color: #006cb8;
       }
       .peditor_material_assigned:hover {
         background-color: #32adff;
       }
+
+      .fps-overlay {
+        position: fixed;
+        left: 10px;
+        bottom: 10px;
+        padding: 4px 10px;
+        background: rgba(0,0,0,0.4);
+        color: rgb(255, 255, 255);
+        font-family: inherit;
+        font-size: inherit;
+        z-index: 1000;
+        pointer-events: none;
+      }
+
     </style>
   </head>
   <body style="margin: 0px; overflow: hidden;">
     <div id="container">
-      <div style="color:white; position: absolute; top: 0em; margin: 1em">
-        <label for="materials">Material:</label>
-        <select name="materials" id="materials">
+      <div class="select-row" style="top: 0em;">
+        <label for="materials" style="margin: 0; padding: 0 0.2em; font-family: inherit; font-size: inherit;">Material:</label>
+        <select name="materials" id="materials" style="flex: 1 1 0; min-width: 0;">
           <% materials.forEach(function(m){ %>
             <option value="<%-m.value%>">
-              <%-m.name%>
+              <%- m.name.replace(/_/g, ' ').replace(/\.(mtlx|glb)$/, '').replace(/\w\S*/g, function(txt){return ' ' + txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) %>
             </option>
             <% }); %>
         </select>
       </div>
-      <div style="color:white; position: absolute; top: 1.5em; margin: 1em">
-        <label for="geometry">Geometry:</label>
-        <select name="geometry" id="geometry">
+      <div class="select-row" style="top: 1.5em;">
+        <label for="geometry" style="margin: 0; padding: 0 0.2em; font-family: inherit; font-size: inherit;">Geometry:</label>
+        <select name="geometry" id="geometry" style="flex: 1 1 0; min-width: 0;">
           <% geometry.forEach(function(m){ %>
             <option value="<%-m.value%>">
-              <%-m.name%>
+              <%- m.name.replace(/_/g, ' ').replace(/\.(mtlx|glb)$/, '').replace(/\w\S*/g, function(txt){return ' ' + txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) %>
             </option>
             <% }); %>
         </select>
diff --git a/javascript/MaterialXView/source/index.js b/javascript/MaterialXView/source/index.js
@@ -10,6 +10,13 @@ import { dropHandler, dragOverHandler, setLoadingCallback, setSceneLoadingCallba
 
 let renderer, orbitControls;
 
+// FPS overlay state
+let fpsOverlay = null;
+let showFPS = true; 
+let lastFrameTime = performance.now();
+let frameCount = 0;
+let fps = 0;
+
 // Turntable option. For now the step size is fixed.
 let turntableEnabled = false;
 let turntableSteps = 360;
@@ -25,6 +32,24 @@ if (!materialFilename)
 }
 
 let viewer = Viewer.create();
+
+// Create FPS overlay
+function createFPSOverlay() {
+    fpsOverlay = document.createElement('div');
+    fpsOverlay.className = 'fps-overlay';
+    fpsOverlay.innerText = 'FPS: 0';
+    document.body.appendChild(fpsOverlay);
+}
+
+function setFPSOverlayVisible(visible) {
+    if (fpsOverlay) {
+        fpsOverlay.style.display = visible ? 'block' : 'none';
+    }
+}
+
+createFPSOverlay();
+setFPSOverlayVisible(showFPS);
+
 init();
 viewer.getEditor().updateProperties(0.9);
 
@@ -81,10 +106,16 @@ function init()
 
     // Add hotkey 'f' to capture the current frame and save an image file.
     // See check inside the render loop when a capture can be performed.
-    document.addEventListener('keydown', (event) =>
-    {
-        if (event.key === 'f')
-        {
+
+    document.addEventListener('keydown', (event) => {
+        // Toggle FPS timer with T key
+        if (event.key === 't' || event.key === 'T') {
+            showFPS = !showFPS;
+            setFPSOverlayVisible(showFPS);
+            event.preventDefault();
+        }
+        // Capture frame with Shift+F
+        else if ((event.key === 'f' || event.key === 'F') && event.shiftKey) {
             captureRequested = true;
         }
     });
@@ -165,6 +196,18 @@ function animate()
     requestAnimationFrame(animate);
     const scene = viewer.getScene();
 
+    // Compute FPS and update overlay every 1/2 second.
+    const now = performance.now();
+    frameCount++;
+    if (now - lastFrameTime >= 500) { 
+        fps = Math.round((frameCount * 1000) / (now - lastFrameTime));
+        if (fpsOverlay && showFPS) {
+            fpsOverlay.innerText = `FPS: ${fps}`;
+        }
+        lastFrameTime = now;
+        frameCount = 0;
+    }
+
     if (turntableEnabled)
     {
         turntableStep = (turntableStep + 1) % 360;
