Port Pleiades view cube camera controls

README.md

@@ -36,9 +36,10 @@ Three.js renders:
 - cluster/point-cloud pairs in distinct colors chosen from a curated palette;
 - point clouds;
 - scene bounds and box/cylinder/sphere zones, with live presence labels shown below occupied zones and slider-volume fill on round zones;
-- a Pleiades-style orbit camera, 1 × 1 m floor grid and axes.
+- a Pleiades-style orbit camera, 1 × 1 m floor grid and axes;
+- the Pleiades view cube: clickable Front/Back/Left/Right/Top/Bottom orthographic views plus an Iso shortcut back to perspective, with the cube orientation following manual camera movement.
 
-Mouse navigation follows the Pleiades viewer philosophy: left-drag orbits, right-drag pans parallel to the floor, middle-drag/wheel zooms, and the orbit is constrained above the floor plane. The camera view is persisted after navigation and restored on refresh; setup updates do not overwrite a restored/user-controlled view. **Reset camera** explicitly returns the viewer to automatic framing, so a later full setup can frame its new bounds normally. Without a saved/user-controlled view, a successful connection setup initializes the same centered framing used by **Reset camera**. **Simulate data**, **Reset camera**, or a left-button double-click reframes the displayed setup. The sidebar uses two lightweight levels of disclosure: each main section can be folded to a compact status row, and each section can expose a denser **Advanced** subsection for less-used controls. In **Connection**, the server address, Connect/Simulate controls, and live connection log stay primary while Port, Protocol and Point downsample live under Advanced. **Display** keeps the Scene plus common visibility toggles primary, with **Reset camera** beside the Scene label and Velocity vectors under Advanced. **Live debug data** stays readable as the main content with a lightweight **Clear data** action above the inspector. While the Live debug data section is folded, only its compact summary is refreshed; the detailed debug HTML is not rebuilt until the section is opened again. While interacting with Frame / Objects / Zones / Control disclosures, debug DOM refreshes briefly pause so a live 4 Hz update cannot replace the clicked disclosure between pointer-down and click. The Display panel exposes **All scenes** plus every Scene received in the current World, with independent **Scenes** and **Zones** visibility toggles. On desktop, the translucent panel overlays the 3D view: use the edge arrow to hide/show it, or drag its left edge to resize it. On phone/touch layouts, the same control becomes a small horizontal handle at the viewer/menu boundary; folding the menu expands the viewer to the full viewport while keeping the handle available to reopen it. **Escape** folds the panel. **H** toggles the viewer title/subtitle as a transient display shortcut; unlike the other UI/display preferences, this title visibility is intentionally not persisted. On desktop, after 3 seconds without mouse movement or keyboard input, the handle fades whether the panel is unfolded or folded; activity brings it back quickly. On phone/touch layouts, the handle stays visible so the folded menu can always be reopened. When folded, the sidebar is removed from keyboard navigation; on desktop the hidden QR is inert as well, while on phone/touch layouts the visible QR remains usable. The camera projection follows the panel width so the orbit target remains centered in the unobscured part of the view.
+Mouse navigation follows the Pleiades viewer philosophy: left-drag orbits, right-drag pans parallel to the floor, middle-drag/wheel zooms, and the free perspective orbit is constrained above the floor plane. Clicking a view-cube face switches to the matching orthographic view; **Iso** returns to the default perspective view. The selected projection, orthographic zoom, camera position and orbit target are persisted after navigation and restored on refresh; setup updates do not overwrite a restored/user-controlled view. **Reset camera** explicitly returns the viewer to automatic framing, so a later full setup can frame its new bounds normally. Without a saved/user-controlled view, a successful connection setup initializes the same centered framing used by **Reset camera**. **Simulate data**, **Reset camera**, or a left-button double-click reframes the displayed setup. The sidebar uses two lightweight levels of disclosure: each main section can be folded to a compact status row, and each section can expose a denser **Advanced** subsection for less-used controls. In **Connection**, the server address, Connect/Simulate controls, and live connection log stay primary while Port, Protocol and Point downsample live under Advanced. **Display** keeps the Scene plus common visibility toggles primary, with **Reset camera** beside the Scene label and Velocity vectors under Advanced. **Live debug data** stays readable as the main content with a lightweight **Clear data** action above the inspector. While the Live debug data section is folded, only its compact summary is refreshed; the detailed debug HTML is not rebuilt until the section is opened again. While interacting with Frame / Objects / Zones / Control disclosures, debug DOM refreshes briefly pause so a live 4 Hz update cannot replace the clicked disclosure between pointer-down and click. The Display panel exposes **All scenes** plus every Scene received in the current World, with independent **Scenes** and **Zones** visibility toggles. On desktop, the translucent panel overlays the 3D view: use the edge arrow to hide/show it, or drag its left edge to resize it. On phone/touch layouts, the same control becomes a small horizontal handle at the viewer/menu boundary; folding the menu expands the viewer to the full viewport while keeping the handle available to reopen it. **Escape** folds the panel. **H** toggles the viewer title/subtitle as a transient display shortcut; unlike the other UI/display preferences, this title visibility is intentionally not persisted. On desktop, after 3 seconds without mouse movement or keyboard input, the handle fades whether the panel is unfolded or folded; activity brings it back quickly. On phone/touch layouts, the handle stays visible so the folded menu can always be reopened. When folded, the sidebar is removed from keyboard navigation; on desktop the hidden QR is inert as well, while on phone/touch layouts the visible QR remains usable. The camera projection follows the panel width so the orbit target remains centered in the unobscured part of the view.
 
 Partial setup updates are merged into the cached hierarchy before rendering, so a Scene update that omits its Zone children does not erase them. Updates that race ahead of the initial full setup are ignored rather than promoted to an incomplete root. When a specific Scene is selected, live setup updates still render from the World root so ancestor transforms remain intact. Zone-event caches are pruned against the latest setup hierarchy so renamed/removed addresses do not accumulate stale visual state. A zone stops rendering 50 ms after its live event heartbeat disappears, so disabled zones vanish quickly while their setup definition remains available. Scene selection and scene-size debug information therefore always use the latest valid merged setup.
 

index.html

@@ -37,6 +37,28 @@ <h1>Augmenta × Three.js</h1>
         </div>
       </div>
 
+      <div id="view-cube" class="view-cube" aria-label="View controls">
+        <div id="view-cube-scene" class="view-cube-scene">
+          <div id="view-cube-object" class="view-cube-object">
+            <button class="cube-face cube-face-front" type="button" data-view="front" title="Front view">Front</button>
+            <button class="cube-face cube-face-back" type="button" data-view="back" title="Back view">Back</button>
+            <button class="cube-face cube-face-right" type="button" data-view="right" title="Right view">Right</button>
+            <button class="cube-face cube-face-left" type="button" data-view="left" title="Left view">Left</button>
+            <button class="cube-face cube-face-top" type="button" data-view="top" title="Top view">Top</button>
+            <button class="cube-face cube-face-bottom" type="button" data-view="bottom" title="Bottom view">Bottom</button>
+          </div>
+        </div>
+        <div class="view-cube-actions">
+          <button type="button" data-view="home" title="Isometric perspective view" aria-label="Isometric perspective view">Iso</button>
+          <button type="button" data-view="top" title="Top view" aria-label="Top view">Top</button>
+          <button type="button" data-view="front" title="Front view" aria-label="Front view">Front</button>
+          <button type="button" data-view="right" title="Right view" aria-label="Right view">Right</button>
+          <button type="button" data-view="left" title="Left view" aria-label="Left view">Left</button>
+          <button type="button" data-view="back" title="Back view" aria-label="Back view">Back</button>
+          <button type="button" data-view="bottom" title="Bottom view" aria-label="Bottom view">Bot</button>
+        </div>
+      </div>
+
       <div class="connection-qr-visibility">
         <a
           id="connection-qr"

src/main.js

@@ -2,6 +2,7 @@ import { APP_VERSION } from './app-info.js';
 import { createConnectionController } from './connection.js';
 import { createSetupStore } from './setup-store.js';
 import { createViewer } from './viewer.js';
+import { createViewCube } from './view-cube.js';
 import { createDebugPanel } from './debug.js';
 import { makeDemoFrame, makeDemoSetup } from './demo.js';
 import {
@@ -49,6 +50,7 @@ const ui = {
 ui.appVersion.textContent = `Version ${APP_VERSION}`;
 
 const viewer = createViewer($('#canvas-host'));
+createViewCube($('#view-cube'), viewer);
 const debug = createDebugPanel(ui.summary, ui.debug);
 
 let disconnectCleanupTimer;

src/styles.css

@@ -58,6 +58,139 @@ button, input, select { font: inherit; }
 .viewer-overlay h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
 .viewer-overlay p { margin: 4px 0 0; color: #aeb6c5; font-size: 12px; }
 
+.view-cube {
+  position: absolute;
+  z-index: 13;
+  top: 14px;
+  right: calc(var(--sidebar-width) + 14px);
+  width: 214px;
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  padding: 12px;
+  overflow: hidden;
+  border-radius: 16px;
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(98, 213, 200, .055) 42%, rgba(8, 12, 13, .38)),
+    rgba(8, 12, 13, .46);
+  box-shadow:
+    0 18px 46px rgba(0, 0, 0, .36),
+    inset 0 1px 0 rgba(255, 255, 255, .12);
+  backdrop-filter: blur(18px) saturate(150%);
+  -webkit-backdrop-filter: blur(18px) saturate(150%);
+  transition: right var(--sidebar-transition-duration) ease;
+}
+
+#app.sidebar-hidden .view-cube {
+  right: 14px;
+}
+
+.view-cube-scene {
+  width: 116px;
+  height: 108px;
+  display: grid;
+  place-items: center;
+  perspective: 560px;
+  perspective-origin: 50% 42%;
+}
+
+.view-cube-object {
+  --cube-size: 74px;
+  --cube-transform: rotateX(-28deg) rotateY(-36deg) rotateZ(0deg);
+  position: relative;
+  width: var(--cube-size);
+  height: var(--cube-size);
+  transform: var(--cube-transform);
+  transform-style: preserve-3d;
+  will-change: transform;
+}
+
+.cube-face {
+  position: absolute;
+  inset: 0;
+  width: var(--cube-size);
+  height: var(--cube-size);
+  min-height: 0;
+  display: grid;
+  place-items: center;
+  appearance: none;
+  border: 1px solid rgba(227, 244, 242, .26);
+  border-radius: 6px;
+  background:
+    linear-gradient(145deg, rgba(245, 255, 253, .18), rgba(95, 161, 154, .13) 48%, rgba(5, 10, 11, .32)),
+    rgba(30, 48, 50, .94);
+  color: rgba(242, 250, 249, .86);
+  padding: 0;
+  font-size: 10px;
+  font-weight: 720;
+  text-align: center;
+  text-transform: uppercase;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .18),
+    inset 0 -16px 22px rgba(0, 0, 0, .18);
+  backface-visibility: hidden;
+  cursor: pointer;
+}
+
+.cube-face::after {
+  content: "";
+  position: absolute;
+  inset: 5px;
+  border: 1px solid rgba(255, 255, 255, .08);
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+.cube-face:hover,
+.cube-face.active {
+  color: #f5f7fb;
+  border-color: rgba(98, 213, 200, .82);
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, .24), rgba(98, 213, 200, .3) 54%, rgba(9, 26, 27, .42)),
+    rgba(42, 91, 88, .96);
+}
+
+.cube-face-front { transform: translateZ(calc(var(--cube-size) / 2)); }
+.cube-face-back { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
+.cube-face-right { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
+.cube-face-left { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
+.cube-face-top { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
+.cube-face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }
+
+.view-cube-actions {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 5px;
+}
+
+.view-cube-actions button {
+  min-width: 0;
+  min-height: 0;
+  height: 26px;
+  appearance: none;
+  border: 1px solid rgba(255, 255, 255, .14);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, .075);
+  color: rgba(225, 235, 233, .72);
+  padding: 0 4px;
+  font-size: 10px;
+  font-weight: 650;
+  text-transform: uppercase;
+}
+
+.view-cube-actions button:hover,
+.view-cube-actions button.active {
+  color: #f5f7fb;
+  border-color: rgba(98, 213, 200, .58);
+  background: rgba(98, 213, 200, .2);
+}
+
+.view-cube button:focus-visible {
+  outline: 2px solid rgba(98, 213, 200, .86);
+  outline-offset: 2px;
+}
+
 .connection-qr-visibility {
   position: absolute;
   z-index: 12;
@@ -837,6 +970,28 @@ button.subtle-button.active {
   }
 
   .viewer-overlay { padding: 16px; }
+  .view-cube,
+  #app.sidebar-hidden .view-cube {
+    top: 10px;
+    right: 10px;
+    width: 166px;
+    gap: 8px;
+    padding: 10px;
+  }
+  .view-cube-scene {
+    width: 94px;
+    height: 86px;
+  }
+  .view-cube-object {
+    --cube-size: 58px;
+  }
+  .cube-face,
+  .view-cube-actions button {
+    font-size: 9px;
+  }
+  .view-cube-actions button {
+    height: 22px;
+  }
   .connection-qr-visibility {
     left: 12px;
     bottom: 12px;

src/view-cube.js

@@ -0,0 +1,34 @@
+const VIEW_IDS = new Set(['home', 'front', 'back', 'right', 'left', 'top', 'bottom']);
+
+export function createViewCube(root, viewer) {
+  if (!root) return { refresh() {} };
+
+  const cube = root.querySelector('.view-cube-object');
+  const buttons = [...root.querySelectorAll('[data-view]')];
+
+  function render(state = {}) {
+    if (cube && typeof state.cubeTransform === 'string') {
+      cube.style.setProperty('--cube-transform', state.cubeTransform);
+    }
+
+    const activeView = VIEW_IDS.has(state.activeView) ? state.activeView : 'home';
+    for (const button of buttons) {
+      button.classList.toggle('active', button.dataset.view === activeView);
+      button.setAttribute('aria-pressed', String(button.dataset.view === activeView));
+    }
+
+    root.dataset.projection = state.mode === 'orthographic' ? 'orthographic' : 'perspective';
+  }
+
+  root.addEventListener('click', (event) => {
+    if (!(event.target instanceof Element)) return;
+    const button = event.target.closest('[data-view]');
+    if (!button || !root.contains(button)) return;
+    const view = button.dataset.view;
+    if (!VIEW_IDS.has(view)) return;
+    viewer.setView(view);
+  });
+
+  viewer.setViewStateChangeHandler(render);
+  return { refresh: render };
+}