berkus
/
wifi-densepose
mirror of https://github.com/ruvnet/wifi-densepose.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(ui): unbreak viz.html — OrbitControls importmap, WS URL, toast NPE (#760) (#773) 

* fix(ui): unbreak viz.html — OrbitControls importmap, WS URL, toast NPE (#760)

Three independent bugs were stacking to make ui/viz.html unusable from `main`:

1. Three.js r160 removed `examples/js/OrbitControls.js`, so the script-tag
   load 404'd and `new THREE.OrbitControls(...)` threw. Switch to an
   importmap that pulls the ES module build, then re-expose
   `window.THREE` and `THREE.OrbitControls` so the existing component
   modules (scene.js, body-model.js, …) keep working without a wider
   refactor.

2. The WebSocket client was hardcoded to `ws://localhost:8000/ws/pose`,
   but the sensing-server listens on `--ws-port` (8765 default, 3001 in
   the Docker image) at `/ws/sensing`. Reuse the existing
   `buildSensingWsUrl()` helper from `sensing.service.js` so port
   pairings are handled centrally, and add a `?ws=…` query-string
   override for non-standard setups. The websocket-client.js default is
   also updated to derive from `window.location` instead of the dead
   `:8000/ws/pose` literal.

3. `ToastManager.show()` called `this.container.appendChild(...)` even
   when `init()` had never been called, throwing a TypeError that
   killed the rest of page initialization. Auto-init the container
   lazily on first show (patch from issue reporter).

Closes #760.

Co-Authored-By: claude-flow <ruv@ruv.net>

* fix(ui): single module script + mutable THREE — OrbitControls validated

Browser validation against the previous commit caught two stacked issues:

1. `import * as THREE from 'three'` returns a frozen Module Namespace
   Object — assignment `THREE.OrbitControls = OrbitControls` silently
   no-ops, so the global never gets the OrbitControls reference.

2. Two separate `<script type="module">` blocks (one installing the
   THREE global, one consuming it via Scene) are independently
   async-resolved. The second can finish dependency loading first and
   call `new THREE.OrbitControls(...)` before the first script has run.

Fixed by spreading the namespace into a plain mutable object and merging
all initialization into a single module script with `await import()` for
component modules. Order is now strictly: import THREE → install
window.THREE → import components → run init().

Validated via agent-browser: page logs `[VIZ] Initialization complete`,
WebSocket targets the correct `ws://127.0.0.1:3001/ws/sensing` endpoint
(derived from buildSensingWsUrl), toast lazy-init confirmed via eval.

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
rUv 2026-05-23 10:48:04 -04:00 committed by GitHub
parent 004a63e82d
commit 5d544126ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 50 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui/services/websocket-client.js
View File

@ -1,9 +1,19 @@
// WebSocket Client for Three.js Visualization - WiFi DensePose
// Connects to ws://localhost:8000/ws/pose and manages real-time data flow
// Default endpoint is `/ws/sensing` on the same host the page was served from.
// Callers (e.g. viz.html) usually pass an explicit `url` derived from
// `buildSensingWsUrl()` so HTTP/WS port pairings are handled centrally.
function _defaultWsUrl() {
if (typeof window === 'undefined' || !window.location) {
return 'ws://localhost:8765/ws/sensing';
}
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
return `${protocol}//${window.location.host}/ws/sensing`;
}
export class WebSocketClient {
constructor(options = {}) {
this.url = options.url || 'ws://localhost:8000/ws/pose';
this.url = options.url || _defaultWsUrl();
this.ws = null;
this.state = 'disconnected'; // disconnected, connecting, connected, error
this.isRealData = false;

2
ui/utils/toast.js
View File

@ -27,6 +27,8 @@ export class ToastManager {
action = null
} = options;
if (!this.container) this.init();
const id = ++this.idCounter;
const toast = document.createElement('div');
toast.className = `toast toast-${type}`;

50
ui/viz.html
View File

@ -84,22 +84,41 @@
<div id="stats-container"></div>
</div>
<!-- Three.js and OrbitControls from CDN -->
<script src="https://unpkg.com/three@0.160.0/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.160.0/examples/js/controls/OrbitControls.js"></script>
<!-- Three.js r160 dropped examples/js/ UMD builds. Load via importmap and
expose THREE + OrbitControls as a mutable global so the existing
component modules (scene.js, body-model.js, …) keep working without
a wider refactor. Note: `import * as THREE` returns a frozen Module
Namespace Object — spread it into a plain object before attaching
OrbitControls, otherwise the assignment silently no-ops. -->
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.160.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
}
}
</script>
<!-- Stats.js for performance monitoring -->
<script src="https://unpkg.com/stats.js@0.17.0/build/stats.min.js"></script>
<!-- Application modules loaded as ES modules via importmap workaround -->
<!-- All app code lives in one module so global THREE is installed before
the component modules run. Two separate module scripts would race
since each is independently async-resolved. -->
<script type="module">
// Import all modules
import { Scene } from './components/scene.js';
import { BodyModel, BodyModelManager } from './components/body-model.js';
import { SignalVisualization } from './components/signal-viz.js';
import { Environment } from './components/environment.js';
import { DashboardHUD } from './components/dashboard-hud.js';
import { WebSocketClient } from './services/websocket-client.js';
import { DataProcessor } from './services/data-processor.js';
import * as ThreeNS from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const THREE = { ...ThreeNS, OrbitControls };
window.THREE = THREE;
// Component modules use `THREE.*` as a global — must be installed first.
const { Scene } = await import('./components/scene.js');
const { BodyModel, BodyModelManager } = await import('./components/body-model.js');
const { SignalVisualization } = await import('./components/signal-viz.js');
const { Environment } = await import('./components/environment.js');
const { DashboardHUD } = await import('./components/dashboard-hud.js');
const { WebSocketClient } = await import('./services/websocket-client.js');
const { DataProcessor } = await import('./services/data-processor.js');
const { buildSensingWsUrl } = await import('./services/sensing.service.js');
// -- Application State --
const state = {
@ -175,9 +194,12 @@
state.stats = initStats();
setLoadingProgress(85, 'Connecting to server...');
// 8. WebSocket client
// 8. WebSocket client — derive URL from window.location so the page
// works on both default (HTTP 8080 / WS 8765) and Docker (3000/3001)
// port pairings. `?ws=…` query overrides for advanced setups.
const wsOverride = new URLSearchParams(window.location.search).get('ws');
state.wsClient = new WebSocketClient({
url: 'ws://localhost:8000/ws/pose',
url: wsOverride || buildSensingWsUrl(),
onMessage: (msg) => handleWebSocketMessage(msg),
onStateChange: (newState, oldState) => handleConnectionStateChange(newState, oldState),
onError: (err) => console.error('[VIZ] WebSocket error:', err)