dearsky/wifi-densepose
1
0
Fork 0
Code Issues 20 Pull Requests 5 Actions Packages Projects Releases 1 Wiki Activity

feat: Phase 4 — Live, Vitals, Zones, MAT, Settings screens

Browse Source 
LiveScreen: GaussianSplatWebView + gaussian-splats.html (Three.js 3D viz), LiveHUD
VitalsScreen: BreathingGauge, HeartRateGauge, MetricCard (Reanimated arcs)
ZonesScreen: FloorPlanSvg (SVG heatmap 20x20), ZoneLegend, useOccupancyGrid
MATScreen: MatWebView + mat-dashboard.html (pure-JS disaster response), AlertCard/List, SurvivorCounter
SettingsScreen: ServerUrlInput (URL validation + test), ThemePicker, RssiToggle

Verified: tsc 0 errors, jest passes
This commit is contained in:
Yossi Elkrief
2026-03-02 13:00:49 +02:00
parent 779bf8ff43
commit 47861de821
26 changed files with 3395 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

585
mobile/src/assets/webview/gaussian-splats.html
View File

@@ -0,0 +1,585 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'"
/>
<title>WiFi DensePose Splat Viewer</title>
<style>
html,
body,
#gaussian-splat-root {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #0a0e1a;
touch-action: none;
}
#gaussian-splat-root {
position: relative;
}
</style>
</head>
<body>
<div id="gaussian-splat-root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r165/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.165.0/examples/js/controls/OrbitControls.js"></script>
<script>
(function () {
const postMessageToRN = (message) => {
if (!window.ReactNativeWebView || typeof window.ReactNativeWebView.postMessage !== 'function') {
return;
}
try {
window.ReactNativeWebView.postMessage(JSON.stringify(message));
} catch (error) {
console.error('Failed to post RN message', error);
}
};
const postError = (message) => {
postMessageToRN({
type: 'ERROR',
payload: {
message: typeof message === 'string' ? message : 'Unknown bridge error',
},
});
};
// Use global THREE from CDN
const getThree = () => window.THREE;
// ---- Custom Splat Shaders --------------------------------------------
const SPLAT_VERTEX = `
attribute float splatSize;
attribute vec3 splatColor;
attribute float splatOpacity;
varying vec3 vColor;
varying float vOpacity;
void main() {
vColor = splatColor;
vOpacity = splatOpacity;
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
gl_PointSize = splatSize * (300.0 / -mvPosition.z);
gl_Position = projectionMatrix * mvPosition;
}
`;
const SPLAT_FRAGMENT = `
varying vec3 vColor;
varying float vOpacity;
void main() {
// Circular soft-edge disc
float dist = length(gl_PointCoord - vec2(0.5));
if (dist > 0.5) discard;
float alpha = smoothstep(0.5, 0.2, dist) * vOpacity;
gl_FragColor = vec4(vColor, alpha);
}
`;
// ---- Color helpers ---------------------------------------------------
/** Map a scalar 0-1 to blue -> green -> red gradient */
function valueToColor(v) {
const clamped = Math.max(0, Math.min(1, v));
// blue(0) -> cyan(0.25) -> green(0.5) -> yellow(0.75) -> red(1)
let r;
let g;
let b;
if (clamped < 0.5) {
const t = clamped * 2;
r = 0;
g = t;
b = 1 - t;
} else {
const t = (clamped - 0.5) * 2;
r = t;
g = 1 - t;
b = 0;
}
return [r, g, b];
}
// ---- GaussianSplatRenderer -------------------------------------------
class GaussianSplatRenderer {
/** @param {HTMLElement} container - DOM element to attach the renderer to */
constructor(container, opts = {}) {
const THREE = getThree();
if (!THREE) {
throw new Error('Three.js not loaded');
}
this.container = container;
this.width = opts.width || container.clientWidth || 800;
this.height = opts.height || 500;
// Scene
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0x0a0e1a);
// Camera — perspective looking down at the room
this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 0.1, 200);
this.camera.position.set(0, 10, 12);
this.camera.lookAt(0, 0, 0);
// Renderer
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setSize(this.width, this.height);
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
container.appendChild(this.renderer.domElement);
// Lights
const ambient = new THREE.AmbientLight(0x9ec7ff, 0.35);
this.scene.add(ambient);
const directional = new THREE.DirectionalLight(0x9ec7ff, 0.65);
directional.position.set(4, 10, 6);
directional.castShadow = false;
this.scene.add(directional);
// Grid & room
this._createRoom(THREE);
// Signal field splats (20x20 = 400 points on the floor plane)
this.gridSize = 20;
this._createFieldSplats(THREE);
// Node markers (ESP32 / router positions)
this._createNodeMarkers(THREE);
// Body disruption blob
this._createBodyBlob(THREE);
// Orbit controls for drag + pinch zoom
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.target.set(0, 0, 0);
this.controls.minDistance = 6;
this.controls.maxDistance = 40;
this.controls.enableDamping = true;
this.controls.dampingFactor = 0.08;
this.controls.update();
// Animation state
this._animFrame = null;
this._lastData = null;
this._fpsFrames = [];
this._lastFpsReport = 0;
// Start render loop
this._animate();
}
// ---- Scene setup ---------------------------------------------------
_createRoom(THREE) {
// Floor grid (on y = 0), 20 units
const grid = new THREE.GridHelper(20, 20, 0x1a3a4a, 0x0d1f28);
grid.position.y = 0;
this.scene.add(grid);
// Room boundary wireframe
const boxGeo = new THREE.BoxGeometry(20, 6, 20);
const edges = new THREE.EdgesGeometry(boxGeo);
const line = new THREE.LineSegments(
edges,
new THREE.LineBasicMaterial({ color: 0x1a4a5a, opacity: 0.3, transparent: true }),
);
line.position.y = 3;
this.scene.add(line);
}
_createFieldSplats(THREE) {
const count = this.gridSize * this.gridSize;
const positions = new Float32Array(count * 3);
const sizes = new Float32Array(count);
const colors = new Float32Array(count * 3);
const opacities = new Float32Array(count);
// Lay splats on the floor plane (y = 0.05 to sit just above grid)
for (let iz = 0; iz < this.gridSize; iz++) {
for (let ix = 0; ix < this.gridSize; ix++) {
const idx = iz * this.gridSize + ix;
positions[idx * 3 + 0] = (ix - this.gridSize / 2) + 0.5; // x
positions[idx * 3 + 1] = 0.05; // y
positions[idx * 3 + 2] = (iz - this.gridSize / 2) + 0.5; // z
sizes[idx] = 1.5;
colors[idx * 3] = 0.1;
colors[idx * 3 + 1] = 0.2;
colors[idx * 3 + 2] = 0.6;
opacities[idx] = 0.15;
}
}
const geo = new THREE.BufferGeometry();
geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geo.setAttribute('splatSize', new THREE.BufferAttribute(sizes, 1));
geo.setAttribute('splatColor', new THREE.BufferAttribute(colors, 3));
geo.setAttribute('splatOpacity', new THREE.BufferAttribute(opacities, 1));
const mat = new THREE.ShaderMaterial({
vertexShader: SPLAT_VERTEX,
fragmentShader: SPLAT_FRAGMENT,
transparent: true,
depthWrite: false,
blending: THREE.AdditiveBlending,
});
this.fieldPoints = new THREE.Points(geo, mat);
this.scene.add(this.fieldPoints);
}
_createNodeMarkers(THREE) {
// Router at center — green sphere
const routerGeo = new THREE.SphereGeometry(0.3, 16, 16);
const routerMat = new THREE.MeshBasicMaterial({ color: 0x00ff88, transparent: true, opacity: 0.8 });
this.routerMarker = new THREE.Mesh(routerGeo, routerMat);
this.routerMarker.position.set(0, 0.5, 0);
this.scene.add(this.routerMarker);
// ESP32 node — cyan sphere (default position, updated from data)
const nodeGeo = new THREE.SphereGeometry(0.25, 16, 16);
const nodeMat = new THREE.MeshBasicMaterial({ color: 0x00ccff, transparent: true, opacity: 0.8 });
this.nodeMarker = new THREE.Mesh(nodeGeo, nodeMat);
this.nodeMarker.position.set(2, 0.5, 1.5);
this.scene.add(this.nodeMarker);
}
_createBodyBlob(THREE) {
// A cluster of splats representing body disruption
const count = 64;
const positions = new Float32Array(count * 3);
const sizes = new Float32Array(count);
const colors = new Float32Array(count * 3);
const opacities = new Float32Array(count);
for (let i = 0; i < count; i++) {
// Random sphere distribution
const theta = Math.random() * Math.PI * 2;
const phi = Math.acos(2 * Math.random() - 1);
const r = Math.random() * 1.5;
positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
positions[i * 3 + 1] = r * Math.cos(phi) + 2;
positions[i * 3 + 2] = r * Math.sin(phi) * Math.sin(theta);
sizes[i] = 2 + Math.random() * 3;
colors[i * 3] = 0.2;
colors[i * 3 + 1] = 0.8;
colors[i * 3 + 2] = 0.3;
opacities[i] = 0.0; // hidden until presence detected
}
const geo = new THREE.BufferGeometry();
geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geo.setAttribute('splatSize', new THREE.BufferAttribute(sizes, 1));
geo.setAttribute('splatColor', new THREE.BufferAttribute(colors, 3));
geo.setAttribute('splatOpacity', new THREE.BufferAttribute(opacities, 1));
const mat = new THREE.ShaderMaterial({
vertexShader: SPLAT_VERTEX,
fragmentShader: SPLAT_FRAGMENT,
transparent: true,
depthWrite: false,
blending: THREE.AdditiveBlending,
});
this.bodyBlob = new THREE.Points(geo, mat);
this.scene.add(this.bodyBlob);
}
// ---- Data update --------------------------------------------------
/**
* Update the visualization with new sensing data.
* @param {object} data - sensing_update JSON from ws_server
*/
update(data) {
this._lastData = data;
if (!data) return;
const features = data.features || {};
const classification = data.classification || {};
const signalField = data.signal_field || {};
const nodes = data.nodes || [];
// -- Update signal field splats ------------------------------------
if (signalField.values && this.fieldPoints) {
const geo = this.fieldPoints.geometry;
const clr = geo.attributes.splatColor.array;
const sizes = geo.attributes.splatSize.array;
const opac = geo.attributes.splatOpacity.array;
const vals = signalField.values;
const count = Math.min(vals.length, this.gridSize * this.gridSize);
for (let i = 0; i < count; i++) {
const v = vals[i];
const [r, g, b] = valueToColor(v);
clr[i * 3] = r;
clr[i * 3 + 1] = g;
clr[i * 3 + 2] = b;
sizes[i] = 1.0 + v * 4.0;
opac[i] = 0.1 + v * 0.6;
}
geo.attributes.splatColor.needsUpdate = true;
geo.attributes.splatSize.needsUpdate = true;
geo.attributes.splatOpacity.needsUpdate = true;
}
// -- Update body blob ----------------------------------------------
if (this.bodyBlob) {
const bGeo = this.bodyBlob.geometry;
const bOpac = bGeo.attributes.splatOpacity.array;
const bClr = bGeo.attributes.splatColor.array;
const bSize = bGeo.attributes.splatSize.array;
const presence = classification.presence || false;
const motionLvl = classification.motion_level || 'absent';
const confidence = classification.confidence || 0;
const breathing = features.breathing_band_power || 0;
// Breathing pulsation
const breathPulse = 1.0 + Math.sin(Date.now() * 0.004) * Math.min(breathing * 3, 0.4);
for (let i = 0; i < bOpac.length; i++) {
if (presence) {
bOpac[i] = confidence * 0.4;
// Color by motion level
if (motionLvl === 'active') {
bClr[i * 3] = 1.0;
bClr[i * 3 + 1] = 0.2;
bClr[i * 3 + 2] = 0.1;
} else {
bClr[i * 3] = 0.1;
bClr[i * 3 + 1] = 0.8;
bClr[i * 3 + 2] = 0.4;
}
bSize[i] = (2 + Math.random() * 2) * breathPulse;
} else {
bOpac[i] = 0.0;
}
}
bGeo.attributes.splatOpacity.needsUpdate = true;
bGeo.attributes.splatColor.needsUpdate = true;
bGeo.attributes.splatSize.needsUpdate = true;
}
// -- Update node positions -----------------------------------------
if (nodes.length > 0 && nodes[0].position && this.nodeMarker) {
const pos = nodes[0].position;
this.nodeMarker.position.set(pos[0], 0.5, pos[2]);
}
}
// ---- Render loop -------------------------------------------------
_animate() {
this._animFrame = requestAnimationFrame(() => this._animate());
const now = performance.now();
// Gentle router glow pulse
if (this.routerMarker) {
const pulse = 0.6 + 0.3 * Math.sin(now * 0.003);
this.routerMarker.material.opacity = pulse;
}
this.controls.update();
this.renderer.render(this.scene, this.camera);
this._fpsFrames.push(now);
while (this._fpsFrames.length > 0 && this._fpsFrames[0] < now - 1000) {
this._fpsFrames.shift();
}
if (now - this._lastFpsReport >= 1000) {
const fps = this._fpsFrames.length;
this._lastFpsReport = now;
postMessageToRN({
type: 'FPS_TICK',
payload: { fps },
});
}
}
// ---- Resize / cleanup --------------------------------------------
resize(width, height) {
if (!width || !height) return;
this.width = width;
this.height = height;
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height);
}
dispose() {
if (this._animFrame) {
cancelAnimationFrame(this._animFrame);
}
this.controls?.dispose();
this.renderer.dispose();
if (this.renderer.domElement.parentNode) {
this.renderer.domElement.parentNode.removeChild(this.renderer.domElement);
}
}
}
// Expose renderer constructor for debugging/interop
window.GaussianSplatRenderer = GaussianSplatRenderer;
let renderer = null;
let pendingFrame = null;
let pendingResize = null;
const postSafeReady = () => {
postMessageToRN({ type: 'READY' });
};
const routeMessage = (event) => {
let raw = event.data;
if (typeof raw === 'object' && raw != null && 'data' in raw) {
raw = raw.data;
}
let message = raw;
if (typeof raw === 'string') {
try {
message = JSON.parse(raw);
} catch (err) {
postError('Failed to parse RN message payload');
return;
}
}
if (!message || typeof message !== 'object') {
return;
}
if (message.type === 'FRAME_UPDATE') {
const payload = message.payload || null;
if (!payload) {
return;
}
if (!renderer) {
pendingFrame = payload;
return;
}
try {
renderer.update(payload);
} catch (error) {
postError((error && error.message) || 'Failed to update frame');
}
return;
}
if (message.type === 'RESIZE') {
const dims = message.payload || {};
const w = Number(dims.width);
const h = Number(dims.height);
if (!Number.isFinite(w) || !Number.isFinite(h) || !w || !h) {
return;
}
if (!renderer) {
pendingResize = { width: w, height: h };
return;
}
try {
renderer.resize(w, h);
} catch (error) {
postError((error && error.message) || 'Failed to resize renderer');
}
return;
}
if (message.type === 'DISPOSE') {
if (!renderer) {
return;
}
try {
renderer.dispose();
} catch (error) {
postError((error && error.message) || 'Failed to dispose renderer');
}
renderer = null;
return;
}
};
const buildRenderer = () => {
const container = document.getElementById('gaussian-splat-root');
if (!container) {
return;
}
try {
renderer = new GaussianSplatRenderer(container, {
width: container.clientWidth || window.innerWidth,
height: container.clientHeight || window.innerHeight,
});
if (pendingFrame) {
renderer.update(pendingFrame);
pendingFrame = null;
}
if (pendingResize) {
renderer.resize(pendingResize.width, pendingResize.height);
pendingResize = null;
}
postSafeReady();
} catch (error) {
renderer = null;
postError((error && error.message) || 'Failed to initialize renderer');
}
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', buildRenderer);
} else {
buildRenderer();
}
window.addEventListener('message', routeMessage);
window.addEventListener('resize', () => {
if (!renderer) {
pendingResize = {
width: window.innerWidth,
height: window.innerHeight,
};
return;
}
renderer.resize(window.innerWidth, window.innerHeight);
});
})();
</script>
</body>
</html>

505
mobile/src/assets/webview/mat-dashboard.html
View File

@@ -0,0 +1,505 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MAT Dashboard</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
background: #0a0e1a;
color: #e5e7eb;
font-family: 'Courier New', 'Consolas', monospace;
overflow: hidden;
}
#app {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
height: 100%;
padding: 8px;
}
#status {
color: #6dd4df;
font-size: 12px;
letter-spacing: 0.5px;
}
#mapCanvas {
flex: 1;
width: 100%;
border: 1px solid #1e293b;
border-radius: 8px;
min-height: 180px;
background: #0a0e1a;
}
</style>
</head>
<body>
<div id="app">
<div id="status">Initializing MAT dashboard...</div>
<canvas id="mapCanvas"></canvas>
</div>
<script>
(function () {
const TRIAGE = {
Immediate: 0,
Delayed: 1,
Minimal: 2,
Expectant: 3,
Unknown: 4,
};
const TRIAGE_COLOR = ['#ff0000', '#ffcc00', '#00cc00', '#111111', '#888888'];
const PRIORITY = { Critical: 0, High: 1, Medium: 2, Low: 3 };
const toRgba = (status) => TRIAGE_COLOR[status] || TRIAGE_COLOR[4];
const safeId = () =>
typeof crypto !== 'undefined' && crypto.randomUUID
? crypto.randomUUID()
: `id-${Date.now()}-${Math.floor(Math.random() * 1e6)}`;
const isNumber = (value) => typeof value === 'number' && Number.isFinite(value);
class MatDashboard {
constructor() {
this.event = null;
this.zones = new Map();
this.survivors = new Map();
this.alerts = new Map();
this.motionVector = { x: 0, y: 0 };
}
createEvent(type, lat, lon, name) {
const eventId = safeId();
this.event = {
event_id: eventId,
disaster_type: type,
latitude: lat,
longitude: lon,
description: name,
createdAt: Date.now(),
};
this.zones.clear();
this.survivors.clear();
this.alerts.clear();
return eventId;
}
addRectangleZone(name, x, y, w, h) {
const id = safeId();
this.zones.set(id, {
id,
name,
zone_type: 'rectangle',
status: 0,
scan_count: 0,
detection_count: 0,
x,
y,
width: w,
height: h,
});
return id;
}
addCircleZone(name, cx, cy, radius) {
const id = safeId();
this.zones.set(id, {
id,
name,
zone_type: 'circle',
status: 0,
scan_count: 0,
detection_count: 0,
center_x: cx,
center_y: cy,
radius,
});
return id;
}
addZoneFromPayload(payload) {
if (!payload || typeof payload !== 'object') {
return;
}
const source = payload;
const type = source.zone_type || source.type || 'rectangle';
const name = source.name || `Zone-${safeId().slice(0, 4)}`;
if (type === 'circle' || source.center_x !== undefined) {
const cx = isNumber(source.center_x) ? source.center_x : 120;
const cy = isNumber(source.center_y) ? source.center_y : 120;
const radius = isNumber(source.radius) ? source.radius : 50;
return this.addCircleZone(name, cx, cy, radius);
}
const x = isNumber(source.x) ? source.x : 40;
const y = isNumber(source.y) ? source.y : 40;
const width = isNumber(source.width) ? source.width : 100;
const height = isNumber(source.height) ? source.height : 100;
return this.addRectangleZone(name, x, y, width, height);
}
inferTriage(vitalSigns, confidence) {
const breathing = isNumber(vitalSigns?.breathing_rate) ? vitalSigns.breathing_rate : 14;
const heart = isNumber(vitalSigns?.heart_rate)
? vitalSigns.heart_rate
: isNumber(vitalSigns?.hr)
? vitalSigns.hr
: 70;
if (!isNumber(confidence) || confidence > 0.82) {
if (breathing < 10 || breathing > 35 || heart > 150) {
return TRIAGE.Immediate;
}
if (breathing >= 8 && breathing <= 34) {
return TRIAGE.Delayed;
}
}
if (breathing >= 6 && breathing <= 28 && heart > 45 && heart < 180) {
return TRIAGE.Minimal;
}
return TRIAGE.Expectant;
}
locateZoneForPoint(x, y) {
for (const [id, zone] of this.zones.entries()) {
if (zone.zone_type === 'circle') {
const dx = x - zone.center_x;
const dy = y - zone.center_y;
const inside = Math.sqrt(dx * dx + dy * dy) <= zone.radius;
if (inside) {
return id;
}
continue;
}
if (x >= zone.x && x <= zone.x + zone.width && y >= zone.y && y <= zone.y + zone.height) {
return id;
}
}
return this.zones.size > 0 ? this.zones.keys().next().value : safeId();
}
processSurvivorDetection(zone, confidence = 0.6, vital_signs = {}) {
const zoneKey =
typeof zone === 'string'
? [...this.zones.values()].find((entry) => entry.id === zone || entry.name === zone)
: null;
const selectedZone =
zoneKey
|| (this.zones.size > 0
? [...this.zones.values()][Math.floor(Math.random() * Math.max(1, this.zones.size))]
: null);
const bounds = this._pickPointInZone(selectedZone);
const triageStatus = this.inferTriage(vital_signs, confidence);
const breathingRate = isNumber(vital_signs?.breathing_rate)
? vital_signs.breathing_rate
: 10 + confidence * 28;
const heartRate = isNumber(vital_signs?.heart_rate)
? vital_signs.heart_rate
: isNumber(vital_signs?.hr)
? vital_signs.hr
: 55 + confidence * 60;
const id = safeId();
const zone_id = this.locateZoneForPoint(bounds.x, bounds.y);
const survivor = {
id,
zone_id,
x: bounds.x,
y: bounds.y,
depth: -Math.abs(isNumber(vital_signs.depth) ? vital_signs.depth : Math.random() * 3),
triage_status: triageStatus,
triage_color: toRgba(triageStatus),
confidence,
breathing_rate: breathingRate,
heart_rate: heartRate,
first_detected: new Date().toISOString(),
last_updated: new Date().toISOString(),
is_deteriorating: false,
};
this.survivors.set(id, survivor);
if (selectedZone) {
selectedZone.detection_count = (selectedZone.detection_count || 0) + 1;
}
if (typeof this.postMessage === 'function') {
this.postMessage({
type: 'SURVIVOR_DETECTED',
payload: survivor,
});
}
this.generateAlerts();
return id;
}
_pickPointInZone(zone) {
if (!zone) {
return {
x: 220 + Math.random() * 80,
y: 120 + Math.random() * 80,
};
}
if (zone.zone_type === 'circle') {
const angle = Math.random() * Math.PI * 2;
const radius = Math.random() * (zone.radius || 20);
return {
x: Math.max(10, Math.min(560, zone.center_x + Math.cos(angle) * radius)),
y: Math.max(10, Math.min(280, zone.center_y + Math.sin(angle) * radius)),
};
}
return {
x: Math.max(zone.x || 5, Math.min((zone.x || 5) + (zone.width || 40), (zone.x || 5) + Math.random() * (zone.width || 40))),
y: Math.max(zone.y || 5, Math.min((zone.y || 5) + (zone.height || 40), (zone.y || 5) + Math.random() * (zone.height || 40))),
};
}
generateAlerts() {
for (const survivor of this.survivors.values()) {
if ((survivor.triage_status !== TRIAGE.Immediate && survivor.triage_status !== TRIAGE.Delayed)) {
continue;
}
const alertId = `alert-${survivor.id}`;
if (this.alerts.has(alertId)) {
continue;
}
const priority =
survivor.triage_status === TRIAGE.Immediate ? PRIORITY.Critical : PRIORITY.High;
const message =
survivor.triage_status === TRIAGE.Immediate
? `Immediate rescue required at (${survivor.x.toFixed(0)}, ${survivor.y.toFixed(0)})`
: `High-priority rescue needed at (${survivor.x.toFixed(0)}, ${survivor.y.toFixed(0)})`;
const alert = {
id: alertId,
survivor_id: survivor.id,
priority,
title: survivor.triage_status === TRIAGE.Immediate ? 'URGENT' : 'HIGH',
message,
recommended_action: survivor.triage_status === TRIAGE.Immediate ? 'Dispatch now' : 'Coordinate rescue',
triage_status: survivor.triage_status,
location_x: survivor.x,
location_y: survivor.y,
created_at: new Date().toISOString(),
priority_color: survivor.triage_status === TRIAGE.Immediate ? '#ff0000' : '#ff8c00',
};
this.alerts.set(alertId, alert);
if (typeof this.postMessage === 'function') {
this.postMessage({
type: 'ALERT_GENERATED',
payload: alert,
});
}
}
}
processFrame(frame) {
const motion = Number(frame?.features?.motion_band_power || 0);
const xDelta = isNumber(motion) ? (motion - 0.1) * 4 : 0;
const yDelta = isNumber(frame?.features?.breathing_band_power || 0)
? (frame.features.breathing_band_power - 0.1) * 3
: 0;
this.motionVector = { x: xDelta || 0, y: yDelta || 0 };
for (const survivor of this.survivors.values()) {
const jitterX = (Math.random() - 0.5) * 2;
const jitterY = (Math.random() - 0.5) * 2;
survivor.x = Math.max(5, Math.min(560, survivor.x + this.motionVector.x + jitterX));
survivor.y = Math.max(5, Math.min(280, survivor.y + this.motionVector.y + jitterY));
survivor.last_updated = new Date().toISOString();
}
}
renderZones(ctx) {
for (const zone of this.zones.values()) {
const fill = 'rgba(0, 150, 255, 0.3)';
ctx.strokeStyle = '#0096ff';
ctx.fillStyle = fill;
ctx.lineWidth = 2;
if (zone.zone_type === 'circle') {
ctx.beginPath();
ctx.arc(zone.center_x, zone.center_y, zone.radius, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
ctx.fillStyle = '#ffffff';
ctx.font = '12px monospace';
ctx.fillText(zone.name, zone.center_x - 22, zone.center_y);
} else {
ctx.fillRect(zone.x, zone.y, zone.width, zone.height);
ctx.strokeRect(zone.x, zone.y, zone.width, zone.height);
ctx.fillStyle = '#ffffff';
ctx.font = '12px monospace';
ctx.fillText(zone.name, zone.x + 4, zone.y + 14);
}
}
}
renderSurvivors(ctx) {
for (const survivor of this.survivors.values()) {
const radius = survivor.is_deteriorating ? 11 : 9;
if (survivor.triage_status === TRIAGE.Immediate) {
ctx.fillStyle = 'rgba(255, 0, 0, 0.26)';
ctx.beginPath();
ctx.arc(survivor.x, survivor.y, radius + 6, 0, Math.PI * 2);
ctx.fill();
}
ctx.fillStyle = survivor.triage_color || toRgba(TRIAGE.Minimal);
ctx.font = 'bold 18px monospace';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('✦', survivor.x, survivor.y);
ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 1.5;
ctx.beginPath();
ctx.arc(survivor.x, survivor.y, radius, 0, Math.PI * 2);
ctx.stroke();
if (survivor.depth < 0) {
ctx.fillStyle = '#ffffff';
ctx.font = '9px monospace';
ctx.fillText(`${Math.abs(survivor.depth).toFixed(1)}m`, survivor.x + radius + 4, survivor.y + 4);
}
}
}
render(ctx, width, height) {
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = '#0a0e1a';
ctx.fillRect(0, 0, width, height);
ctx.strokeStyle = '#1f2a3d';
ctx.lineWidth = 1;
const grid = 40;
for (let x = 0; x <= width; x += grid) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, height);
ctx.stroke();
}
for (let y = 0; y <= height; y += grid) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(width, y);
ctx.stroke();
}
this.renderZones(ctx);
this.renderSurvivors(ctx);
ctx.fillStyle = '#ffffff';
ctx.font = '12px monospace';
const stats = {
survivors: this.survivors.size,
alerts: this.alerts.size,
};
ctx.fillText(`Survivors: ${stats.survivors}`, 12, 20);
ctx.fillText(`Alerts: ${stats.alerts}`, 12, 36);
}
postMessage(message) {
if (typeof window.ReactNativeWebView !== 'undefined' && window.ReactNativeWebView.postMessage) {
window.ReactNativeWebView.postMessage(JSON.stringify(message));
}
}
}
const dashboard = new MatDashboard();
const canvas = document.getElementById('mapCanvas');
const ctx = canvas.getContext('2d');
const status = document.getElementById('status');
const resize = () => {
canvas.width = Math.max(200, Math.floor(canvas.parentElement.clientWidth - 2));
canvas.height = Math.max(180, Math.floor(canvas.parentElement.clientHeight - 20));
};
const startup = () => {
dashboard.createEvent('earthquake', 37.7749, -122.4194, 'Training Scenario');
dashboard.addRectangleZone('Zone A', 60, 45, 170, 120);
dashboard.addCircleZone('Zone B', 300, 170, 70);
dashboard.processSurvivorDetection('Zone A', 0.94, { breathing_rate: 11, hr: 128 });
dashboard.processSurvivorDetection('Zone A', 0.88, { breathing_rate: 16, hr: 118 });
dashboard.processSurvivorDetection('Zone B', 0.71, { breathing_rate: 9, hr: 142 });
status.textContent = 'MAT dashboard ready';
dashboard.postMessage({ type: 'READY' });
};
const loop = () => {
if (dashboard.zones.size > 0) {
dashboard.render(ctx, canvas.width, canvas.height);
}
requestAnimationFrame(loop);
};
window.addEventListener('resize', resize);
window.addEventListener('message', (evt) => {
let incoming = evt.data;
try {
if (typeof incoming === 'string') {
incoming = JSON.parse(incoming);
}
} catch {
incoming = null;
}
if (!incoming || typeof incoming !== 'object') {
return;
}
if (incoming.type === 'CREATE_EVENT') {
const payload = incoming.payload || {};
dashboard.createEvent(
payload.type || payload.disaster_type || 'earthquake',
payload.latitude || 0,
payload.longitude || 0,
payload.name || payload.description || 'Disaster Event',
);
return;
}
if (incoming.type === 'ADD_ZONE') {
dashboard.addZoneFromPayload(incoming.payload || {});
return;
}
if (incoming.type === 'FRAME_UPDATE') {
dashboard.processFrame(incoming.payload || {});
}
});
resize();
startup();
loop();
})();
</script>
</body>
</html>

43
mobile/src/components/GaugeArc.tsx
View File

@@ -1,37 +1,58 @@
import { useEffect } from 'react'; import { useEffect, useMemo } from 'react';
import { StyleSheet, View } from 'react-native'; import { StyleSheet, View } from 'react-native';
import Animated, { useAnimatedProps, useSharedValue, withTiming } from 'react-native-reanimated'; import Animated, { interpolateColor, useAnimatedProps, useSharedValue, withSpring } from 'react-native-reanimated';
import Svg, { Circle, G, Text as SvgText } from 'react-native-svg'; import Svg, { Circle, G, Text as SvgText } from 'react-native-svg';
type GaugeArcProps = { type GaugeArcProps = {
value: number; value: number;
min?: number;
max: number; max: number;
label: string; label: string;
unit: string; unit: string;
color: string; color: string;
colorTo?: string;
size?: number; size?: number;
}; };
const AnimatedCircle = Animated.createAnimatedComponent(Circle); const AnimatedCircle = Animated.createAnimatedComponent(Circle);
export const GaugeArc = ({ value, max, label, unit, color, size = 140 }: GaugeArcProps) => { const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
export const GaugeArc = ({ value, min = 0, max, label, unit, color, colorTo, size = 140 }: GaugeArcProps) => {
const radius = (size - 20) / 2; const radius = (size - 20) / 2;
const circumference = 2 * Math.PI * radius; const circumference = 2 * Math.PI * radius;
const arcLength = circumference * 0.75; const arcLength = circumference * 0.75;
const strokeWidth = 12; const strokeWidth = 12;
const progress = useSharedValue(0); const progress = useSharedValue(0);
const normalized = Math.max(0, Math.min(max > 0 ? value / max : 0, 1)); const normalized = useMemo(() => {
const displayText = `${value.toFixed(1)} ${unit}`; const span = max - min;
const safeSpan = span > 0 ? span : 1;
return clamp((value - min) / safeSpan, 0, 1);
}, [value, min, max]);
const displayValue = useMemo(() => {
if (!Number.isFinite(value)) {
return '--';
}
return `${Math.max(min, Math.min(max, value)).toFixed(1)} ${unit}`;
}, [max, min, unit, value]);
useEffect(() => { useEffect(() => {
progress.value = withTiming(normalized, { duration: 600 }); progress.value = withSpring(normalized, {
damping: 16,
stiffness: 140,
mass: 1,
});
}, [normalized, progress]); }, [normalized, progress]);
const animatedStroke = useAnimatedProps(() => { const animatedStroke = useAnimatedProps(() => {
const dashOffset = arcLength - arcLength * progress.value; const dashOffset = arcLength - arcLength * progress.value;
const strokeColor = colorTo ? interpolateColor(progress.value, [0, 1], [color, colorTo]) : color;
return { return {
strokeDashoffset: dashOffset, strokeDashoffset: dashOffset,
stroke: strokeColor,
}; };
}); });
@@ -63,20 +84,20 @@ export const GaugeArc = ({ value, max, label, unit, color, size = 140 }: GaugeAr
</G> </G>
<SvgText <SvgText
x={size / 2} x={size / 2}
y={size / 2 - 4} y={size / 2 - 8}
fill="#E2E8F0" fill="#E2E8F0"
fontSize={18} fontSize={Math.round(size * 0.16)}
fontFamily="Courier New" fontFamily="Courier New"
fontWeight="700" fontWeight="700"
textAnchor="middle" textAnchor="middle"
> >
{displayText} {displayValue}
</SvgText> </SvgText>
<SvgText <SvgText
x={size / 2} x={size / 2}
y={size / 2 + 16} y={size / 2 + 18}
fill="#94A3B8" fill="#94A3B8"
fontSize={10} fontSize={Math.round(size * 0.085)}
fontFamily="Courier New" fontFamily="Courier New"
textAnchor="middle" textAnchor="middle"
letterSpacing="0.6" letterSpacing="0.6"

41
mobile/src/screens/LiveScreen/GaussianSplatWebView.tsx
View File

@@ -0,0 +1,41 @@
import { LayoutChangeEvent, StyleSheet } from 'react-native';
import type { RefObject } from 'react';
import { WebView, type WebViewMessageEvent } from 'react-native-webview';
import GAUSSIAN_SPLATS_HTML from '@/assets/webview/gaussian-splats.html';
type GaussianSplatWebViewProps = {
onMessage: (event: WebViewMessageEvent) => void;
onError: () => void;
webViewRef: RefObject<WebView | null>;
onLayout?: (event: LayoutChangeEvent) => void;
};
export const GaussianSplatWebView = ({
onMessage,
onError,
webViewRef,
onLayout,
}: GaussianSplatWebViewProps) => {
const html = typeof GAUSSIAN_SPLATS_HTML === 'string' ? GAUSSIAN_SPLATS_HTML : '';
return (
<WebView
ref={webViewRef}
source={{ html }}
originWhitelist={['*']}
allowFileAccess={false}
javaScriptEnabled
onMessage={onMessage}
onError={onError}
onLayout={onLayout}
style={styles.webView}
/>
);
};
const styles = StyleSheet.create({
webView: {
flex: 1,
backgroundColor: '#0A0E1A',
},
});

164
mobile/src/screens/LiveScreen/LiveHUD.tsx
View File

@@ -0,0 +1,164 @@
import { Pressable, StyleSheet, View } from 'react-native';
import { memo, useCallback, useState } from 'react';
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
import { StatusDot } from '@/components/StatusDot';
import { ModeBadge } from '@/components/ModeBadge';
import { ThemedText } from '@/components/ThemedText';
import { formatConfidence, formatRssi } from '@/utils/formatters';
import { colors, spacing } from '@/theme';
import type { ConnectionStatus } from '@/types/sensing';
type LiveMode = 'LIVE' | 'SIM' | 'RSSI';
type LiveHUDProps = {
rssi?: number;
connectionStatus: ConnectionStatus;
fps: number;
confidence: number;
personCount: number;
mode: LiveMode;
};
const statusTextMap: Record<ConnectionStatus, string> = {
connected: 'Connected',
simulated: 'Simulated',
connecting: 'Connecting',
disconnected: 'Disconnected',
};
const statusDotStatusMap: Record<ConnectionStatus, 'connected' | 'simulated' | 'disconnected' | 'connecting'> = {
connected: 'connected',
simulated: 'simulated',
connecting: 'connecting',
disconnected: 'disconnected',
};
export const LiveHUD = memo(
({ rssi, connectionStatus, fps, confidence, personCount, mode }: LiveHUDProps) => {
const [panelVisible, setPanelVisible] = useState(true);
const panelAlpha = useSharedValue(1);
const togglePanel = useCallback(() => {
const next = !panelVisible;
setPanelVisible(next);
panelAlpha.value = withTiming(next ? 1 : 0, { duration: 220 });
}, [panelAlpha, panelVisible]);
const animatedPanelStyle = useAnimatedStyle(() => ({
opacity: panelAlpha.value,
}));
const statusText = statusTextMap[connectionStatus];
return (
<Pressable style={StyleSheet.absoluteFill} onPress={togglePanel}>
<Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, animatedPanelStyle]}>
{/* App title */}
<View style={styles.topLeft}>
<ThemedText preset="labelLg" style={styles.appTitle}>
WiFi-DensePose
</ThemedText>
</View>
{/* Status + FPS */}
<View style={styles.topRight}>
<View style={styles.row}>
<StatusDot status={statusDotStatusMap[connectionStatus]} size={10} />
<ThemedText preset="labelMd" style={styles.statusText}>
{statusText}
</ThemedText>
</View>
{fps > 0 && (
<View style={styles.row}>
<ThemedText preset="labelMd">{fps} FPS</ThemedText>
</View>
)}
</View>
{/* Bottom panel */}
<View style={styles.bottomPanel}>
<View style={styles.bottomCell}>
<ThemedText preset="bodySm">RSSI</ThemedText>
<ThemedText preset="displayMd" style={styles.bigValue}>
{formatRssi(rssi)}
</ThemedText>
</View>
<View style={styles.bottomCell}>
<ModeBadge mode={mode} />
</View>
<View style={styles.bottomCellRight}>
<ThemedText preset="bodySm">Confidence</ThemedText>
<ThemedText preset="bodyMd" style={styles.metaText}>
{formatConfidence(confidence)}
</ThemedText>
<ThemedText preset="bodySm">People: {personCount}</ThemedText>
</View>
</View>
</Animated.View>
</Pressable>
);
},
);
const styles = StyleSheet.create({
topLeft: {
position: 'absolute',
top: spacing.md,
left: spacing.md,
},
appTitle: {
color: colors.textPrimary,
},
topRight: {
position: 'absolute',
top: spacing.md,
right: spacing.md,
alignItems: 'flex-end',
gap: 4,
},
row: {
flexDirection: 'row',
alignItems: 'center',
gap: spacing.sm,
},
statusText: {
color: colors.textPrimary,
},
bottomPanel: {
position: 'absolute',
left: spacing.sm,
right: spacing.sm,
bottom: spacing.sm,
minHeight: 72,
borderRadius: 12,
backgroundColor: 'rgba(10,14,26,0.72)',
borderWidth: 1,
borderColor: 'rgba(50,184,198,0.35)',
paddingHorizontal: spacing.md,
paddingVertical: spacing.sm,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
bottomCell: {
flex: 1,
alignItems: 'center',
},
bottomCellRight: {
flex: 1,
alignItems: 'flex-end',
},
bigValue: {
color: colors.accent,
marginTop: 2,
marginBottom: 2,
},
metaText: {
color: colors.textPrimary,
marginBottom: 4,
},
});
LiveHUD.displayName = 'LiveHUD';

215
mobile/src/screens/LiveScreen/index.tsx
View File

@@ -0,0 +1,215 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { Button, LayoutChangeEvent, StyleSheet, View } from 'react-native';
import type { WebView } from 'react-native-webview';
import type { WebViewMessageEvent } from 'react-native-webview';
import { ErrorBoundary } from '@/components/ErrorBoundary';
import { LoadingSpinner } from '@/components/LoadingSpinner';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { usePoseStream } from '@/hooks/usePoseStream';
import { colors, spacing } from '@/theme';
import type { ConnectionStatus, SensingFrame } from '@/types/sensing';
import { useGaussianBridge } from './useGaussianBridge';
import { GaussianSplatWebView } from './GaussianSplatWebView';
import { LiveHUD } from './LiveHUD';
type LiveMode = 'LIVE' | 'SIM' | 'RSSI';
const getMode = (
status: ConnectionStatus,
isSimulated: boolean,
frame: SensingFrame | null,
): LiveMode => {
if (isSimulated || frame?.source === 'simulated') {
return 'SIM';
}
if (status === 'connected') {
return 'LIVE';
}
return 'RSSI';
};
const dispatchWebViewMessage = (webViewRef: { current: WebView | null }, message: unknown) => {
const webView = webViewRef.current;
if (!webView) {
return;
}
const payload = JSON.stringify(message);
webView.injectJavaScript(
`window.dispatchEvent(new MessageEvent('message', { data: ${JSON.stringify(payload)} })); true;`,
);
};
export const LiveScreen = () => {
const webViewRef = useRef<WebView | null>(null);
const { lastFrame, connectionStatus, isSimulated } = usePoseStream();
const bridge = useGaussianBridge(webViewRef);
const [webError, setWebError] = useState<string | null>(null);
const [viewerKey, setViewerKey] = useState(0);
const sendTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const pendingFrameRef = useRef<SensingFrame | null>(null);
const lastSentAtRef = useRef(0);
const clearSendTimeout = useCallback(() => {
if (!sendTimeoutRef.current) {
return;
}
clearTimeout(sendTimeoutRef.current);
sendTimeoutRef.current = null;
}, []);
useEffect(() => {
if (!lastFrame) {
return;
}
pendingFrameRef.current = lastFrame;
const now = Date.now();
const flush = () => {
if (!bridge.isReady || !pendingFrameRef.current) {
return;
}
bridge.sendFrame(pendingFrameRef.current);
lastSentAtRef.current = Date.now();
pendingFrameRef.current = null;
};
const waitMs = Math.max(0, 500 - (now - lastSentAtRef.current));
if (waitMs <= 0) {
flush();
return;
}
clearSendTimeout();
sendTimeoutRef.current = setTimeout(() => {
sendTimeoutRef.current = null;
flush();
}, waitMs);
return () => {
clearSendTimeout();
};
}, [bridge.isReady, lastFrame, bridge.sendFrame, clearSendTimeout]);
useEffect(() => {
return () => {
dispatchWebViewMessage(webViewRef, { type: 'DISPOSE' });
clearSendTimeout();
pendingFrameRef.current = null;
};
}, [clearSendTimeout]);
const onMessage = useCallback(
(event: WebViewMessageEvent) => {
bridge.onMessage(event);
},
[bridge],
);
const onLayout = useCallback((event: LayoutChangeEvent) => {
const { width, height } = event.nativeEvent.layout;
if (width <= 0 || height <= 0 || Number.isNaN(width) || Number.isNaN(height)) {
return;
}
dispatchWebViewMessage(webViewRef, {
type: 'RESIZE',
payload: {
width: Math.max(1, Math.floor(width)),
height: Math.max(1, Math.floor(height)),
},
});
}, []);
const handleWebError = useCallback(() => {
setWebError('Live renderer failed to initialize');
}, []);
const handleRetry = useCallback(() => {
setWebError(null);
bridge.reset();
setViewerKey((value) => value + 1);
}, [bridge]);
const rssi = lastFrame?.features?.mean_rssi;
const personCount = lastFrame?.classification?.presence ? 1 : 0;
const mode = getMode(connectionStatus, isSimulated, lastFrame);
if (webError || bridge.error) {
return (
<ThemedView style={styles.fallbackWrap}>
<ThemedText preset="bodyLg">Live visualization failed</ThemedText>
<ThemedText preset="bodySm" color="textSecondary" style={styles.errorText}>
{webError ?? bridge.error}
</ThemedText>
<Button title="Retry" onPress={handleRetry} />
</ThemedView>
);
}
return (
<ErrorBoundary>
<View style={styles.container}>
<GaussianSplatWebView
key={viewerKey}
webViewRef={webViewRef}
onMessage={onMessage}
onError={handleWebError}
onLayout={onLayout}
/>
<LiveHUD
connectionStatus={connectionStatus}
fps={bridge.fps}
rssi={rssi}
confidence={lastFrame?.classification?.confidence ?? 0}
personCount={personCount}
mode={mode}
/>
{!bridge.isReady && (
<View style={styles.loadingWrap}>
<LoadingSpinner />
<ThemedText preset="bodyMd" style={styles.loadingText}>
Loading live renderer
</ThemedText>
</View>
)}
</View>
</ErrorBoundary>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.bg,
},
loadingWrap: {
...StyleSheet.absoluteFillObject,
backgroundColor: colors.bg,
alignItems: 'center',
justifyContent: 'center',
gap: spacing.md,
},
loadingText: {
color: colors.textSecondary,
},
fallbackWrap: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
gap: spacing.md,
padding: spacing.lg,
},
errorText: {
textAlign: 'center',
},
});

97
mobile/src/screens/LiveScreen/useGaussianBridge.ts
View File

@@ -0,0 +1,97 @@
import { useCallback, useState } from 'react';
import type { RefObject } from 'react';
import type { WebViewMessageEvent } from 'react-native-webview';
import { WebView } from 'react-native-webview';
import type { SensingFrame } from '@/types/sensing';
export type GaussianBridgeMessageType = 'READY' | 'FPS_TICK' | 'ERROR';
type BridgeMessage = {
type: GaussianBridgeMessageType;
payload?: {
fps?: number;
message?: string;
};
};
const toJsonScript = (message: unknown): string => {
const serialized = JSON.stringify(message);
return `window.dispatchEvent(new MessageEvent('message', { data: ${JSON.stringify(serialized)} })); true;`;
};
export const useGaussianBridge = (webViewRef: RefObject<WebView | null>) => {
const [isReady, setIsReady] = useState(false);
const [fps, setFps] = useState(0);
const [error, setError] = useState<string | null>(null);
const send = useCallback((message: unknown) => {
const webView = webViewRef.current;
if (!webView) {
return;
}
webView.injectJavaScript(toJsonScript(message));
}, [webViewRef]);
const sendFrame = useCallback(
(frame: SensingFrame) => {
send({
type: 'FRAME_UPDATE',
payload: frame,
});
},
[send],
);
const onMessage = useCallback((event: WebViewMessageEvent) => {
let parsed: BridgeMessage | null = null;
const raw = event.nativeEvent.data;
if (typeof raw === 'string') {
try {
parsed = JSON.parse(raw) as BridgeMessage;
} catch {
setError('Invalid bridge message format');
return;
}
} else if (typeof raw === 'object' && raw !== null) {
parsed = raw as BridgeMessage;
}
if (!parsed) {
return;
}
if (parsed.type === 'READY') {
setIsReady(true);
setError(null);
return;
}
if (parsed.type === 'FPS_TICK') {
const fpsValue = parsed.payload?.fps;
if (typeof fpsValue === 'number' && Number.isFinite(fpsValue)) {
setFps(Math.max(0, Math.floor(fpsValue)));
}
return;
}
if (parsed.type === 'ERROR') {
setError(parsed.payload?.message ?? 'Unknown bridge error');
setIsReady(false);
}
}, []);
return {
sendFrame,
onMessage,
isReady,
fps,
error,
reset: () => {
setIsReady(false);
setFps(0);
setError(null);
},
};
};

84
mobile/src/screens/MATScreen/AlertCard.tsx
View File

@@ -0,0 +1,84 @@
import { View } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { colors } from '@/theme/colors';
import { spacing } from '@/theme/spacing';
import { AlertPriority, type Alert } from '@/types/mat';
type SeverityLevel = 'URGENT' | 'HIGH' | 'NORMAL';
type AlertCardProps = {
alert: Alert;
};
type SeverityMeta = {
label: SeverityLevel;
icon: string;
color: string;
};
const resolveSeverity = (alert: Alert): SeverityMeta => {
if (alert.priority === AlertPriority.Critical) {
return {
label: 'URGENT',
icon: '‼',
color: colors.danger,
};
}
if (alert.priority === AlertPriority.High) {
return {
label: 'HIGH',
icon: '⚠',
color: colors.warn,
};
}
return {
label: 'NORMAL',
icon: '•',
color: colors.accent,
};
};
const formatTime = (value?: string): string => {
if (!value) {
return 'Unknown';
}
try {
return new Date(value).toLocaleTimeString();
} catch {
return 'Unknown';
}
};
export const AlertCard = ({ alert }: AlertCardProps) => {
const severity = resolveSeverity(alert);
return (
<View
style={{
backgroundColor: '#111827',
borderWidth: 1,
borderColor: `${severity.color}55`,
padding: spacing.md,
borderRadius: 10,
marginBottom: spacing.sm,
}}
>
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
<ThemedText preset="labelMd" style={{ color: severity.color }}>
{severity.icon} {severity.label}
</ThemedText>
<View style={{ flex: 1 }}>
<ThemedText preset="bodySm" style={{ color: colors.textSecondary }}>
{formatTime(alert.created_at)}
</ThemedText>
</View>
</View>
<ThemedText preset="bodyMd" style={{ color: colors.textPrimary, marginTop: 6 }}>
{alert.message}
</ThemedText>
</View>
);
};

41
mobile/src/screens/MATScreen/AlertList.tsx
View File

@@ -0,0 +1,41 @@
import { FlatList, View } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { colors } from '@/theme/colors';
import { spacing } from '@/theme/spacing';
import type { Alert } from '@/types/mat';
import { AlertCard } from './AlertCard';
type AlertListProps = {
alerts: Alert[];
};
export const AlertList = ({ alerts }: AlertListProps) => {
if (alerts.length === 0) {
return (
<View
style={{
alignItems: 'center',
justifyContent: 'center',
padding: spacing.md,
borderWidth: 1,
borderColor: colors.border,
borderRadius: 12,
backgroundColor: '#111827',
}}
>
<ThemedText preset="bodyMd">No alerts — system nominal</ThemedText>
</View>
);
}
return (
<FlatList
data={alerts}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <AlertCard alert={item} />}
contentContainerStyle={{ paddingBottom: spacing.md }}
showsVerticalScrollIndicator={false}
removeClippedSubviews={false}
/>
);
};

26
mobile/src/screens/MATScreen/MatWebView.tsx
View File

@@ -0,0 +1,26 @@
import { StyleProp, ViewStyle } from 'react-native';
import WebView, { type WebViewMessageEvent } from 'react-native-webview';
import type { RefObject } from 'react';
import MAT_DASHBOARD_HTML from '@/assets/webview/mat-dashboard.html';
type MatWebViewProps = {
webViewRef: RefObject<WebView | null>;
onMessage: (event: WebViewMessageEvent) => void;
style?: StyleProp<ViewStyle>;
};
export const MatWebView = ({ webViewRef, onMessage, style }: MatWebViewProps) => {
return (
<WebView
ref={webViewRef}
originWhitelist={["*"]}
style={style}
source={{ html: MAT_DASHBOARD_HTML }}
onMessage={onMessage}
javaScriptEnabled
domStorageEnabled
mixedContentMode="always"
overScrollMode="never"
/>
);
};

89
mobile/src/screens/MATScreen/SurvivorCounter.tsx
View File

@@ -0,0 +1,89 @@
import { View } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { colors } from '@/theme/colors';
import { spacing } from '@/theme/spacing';
import { TriageStatus, type Survivor } from '@/types/mat';
type SurvivorCounterProps = {
survivors: Survivor[];
};
type Breakdown = {
immediate: number;
delayed: number;
minor: number;
deceased: number;
unknown: number;
};
const getBreakdown = (survivors: Survivor[]): Breakdown => {
const output = {
immediate: 0,
delayed: 0,
minor: 0,
deceased: 0,
unknown: 0,
};
survivors.forEach((survivor) => {
if (survivor.triage_status === TriageStatus.Immediate) {
output.immediate += 1;
return;
}
if (survivor.triage_status === TriageStatus.Delayed) {
output.delayed += 1;
return;
}
if (survivor.triage_status === TriageStatus.Minor) {
output.minor += 1;
return;
}
if (survivor.triage_status === TriageStatus.Deceased) {
output.deceased += 1;
return;
}
output.unknown += 1;
});
return output;
};
const BreakoutChip = ({ label, value, color }: { label: string; value: number; color: string }) => (
<View
style={{
backgroundColor: '#0D1117',
borderRadius: 999,
borderWidth: 1,
borderColor: `${color}55`,
paddingHorizontal: spacing.sm,
paddingVertical: 4,
marginRight: spacing.sm,
marginTop: spacing.sm,
}}
>
<ThemedText preset="bodySm" style={{ color }}>
{label}: {value}
</ThemedText>
</View>
);
export const SurvivorCounter = ({ survivors }: SurvivorCounterProps) => {
const total = survivors.length;
const breakdown = getBreakdown(survivors);
return (
<View style={{ paddingBottom: spacing.md }}>
<ThemedText preset="displayLg" style={{ color: colors.textPrimary }}>
{total} SURVIVORS DETECTED
</ThemedText>
<View style={{ flexDirection: 'row', flexWrap: 'wrap', marginTop: spacing.sm }}>
<BreakoutChip label="Immediate" value={breakdown.immediate} color={colors.danger} />
<BreakoutChip label="Delayed" value={breakdown.delayed} color={colors.warn} />
<BreakoutChip label="Minimal" value={breakdown.minor} color={colors.success} />
<BreakoutChip label="Expectant" value={breakdown.deceased} color={colors.textSecondary} />
<BreakoutChip label="Unknown" value={breakdown.unknown} color="#a0aec0" />
</View>
</View>
);
};

138
mobile/src/screens/MATScreen/index.tsx
View File

@@ -0,0 +1,138 @@
import { useEffect, useRef } from 'react';
import { useWindowDimensions, View } from 'react-native';
import { ConnectionBanner } from '@/components/ConnectionBanner';
import { ThemedView } from '@/components/ThemedView';
import { colors } from '@/theme/colors';
import { spacing } from '@/theme/spacing';
import { usePoseStream } from '@/hooks/usePoseStream';
import { useMatStore } from '@/stores/matStore';
import { type ConnectionStatus } from '@/types/sensing';
import { Alert, type Survivor } from '@/types/mat';
import { AlertList } from './AlertList';
import { MatWebView } from './MatWebView';
import { SurvivorCounter } from './SurvivorCounter';
import { useMatBridge } from './useMatBridge';
const isAlert = (value: unknown): value is Alert => {
if (!value || typeof value !== 'object') {
return false;
}
const record = value as Record<string, unknown>;
return typeof record.id === 'string' && typeof record.message === 'string';
};
const isSurvivor = (value: unknown): value is Survivor => {
if (!value || typeof value !== 'object') {
return false;
}
const record = value as Record<string, unknown>;
return typeof record.id === 'string' && typeof record.zone_id === 'string';
};
const resolveBannerState = (status: ConnectionStatus): 'connected' | 'simulated' | 'disconnected' => {
if (status === 'connecting') {
return 'disconnected';
}
return status;
};
export const MATScreen = () => {
const { connectionStatus, lastFrame } = usePoseStream();
const { survivors, alerts, upsertSurvivor, addAlert, upsertEvent } = useMatStore((state) => ({
survivors: state.survivors,
alerts: state.alerts,
upsertSurvivor: state.upsertSurvivor,
addAlert: state.addAlert,
upsertEvent: state.upsertEvent,
}));
const { webViewRef, ready, onMessage, sendFrameUpdate, postEvent } = useMatBridge({
onSurvivorDetected: (survivor) => {
if (isSurvivor(survivor)) {
upsertSurvivor(survivor);
}
},
onAlertGenerated: (alert) => {
if (isAlert(alert)) {
addAlert(alert);
}
},
});
const seededRef = useRef(false);
useEffect(() => {
if (!ready || seededRef.current) {
return;
}
const createEvent = postEvent('CREATE_EVENT');
createEvent({
type: 'earthquake',
latitude: 37.7749,
longitude: -122.4194,
name: 'Training Scenario',
});
const addZone = postEvent('ADD_ZONE');
addZone({
name: 'Zone A',
zone_type: 'rectangle',
x: 60,
y: 60,
width: 180,
height: 120,
});
addZone({
name: 'Zone B',
zone_type: 'circle',
center_x: 300,
center_y: 170,
radius: 60,
});
upsertEvent({
event_id: 'training-scenario',
disaster_type: 1,
latitude: 37.7749,
longitude: -122.4194,
description: 'Training Scenario',
});
seededRef.current = true;
}, [postEvent, upsertEvent, ready]);
useEffect(() => {
if (ready && lastFrame) {
sendFrameUpdate(lastFrame);
}
}, [lastFrame, ready, sendFrameUpdate]);
const { height } = useWindowDimensions();
const webHeight = Math.max(240, Math.floor(height * 0.5));
return (
<ThemedView style={{ flex: 1, backgroundColor: colors.bg, padding: spacing.md }}>
<ConnectionBanner status={resolveBannerState(connectionStatus)} />
<View style={{ marginTop: 20 }}>
<SurvivorCounter survivors={survivors} />
</View>
<View style={{ height: webHeight }}>
<MatWebView
webViewRef={webViewRef}
onMessage={onMessage}
style={{ flex: 1, borderRadius: 12, overflow: 'hidden', backgroundColor: colors.surface }}
/>
</View>
<View style={{ flex: 1, marginTop: spacing.md }}>
<AlertList alerts={alerts} />
</View>
</ThemedView>
);
};
export default MATScreen;

118
mobile/src/screens/MATScreen/useMatBridge.ts
View File

@@ -0,0 +1,118 @@
import { useCallback, useRef, useState } from 'react';
import type { WebView, WebViewMessageEvent } from 'react-native-webview';
import type { Alert, Survivor } from '@/types/mat';
import type { SensingFrame } from '@/types/sensing';
type MatBridgeMessageType = 'CREATE_EVENT' | 'ADD_ZONE' | 'FRAME_UPDATE';
type MatIncomingType = 'READY' | 'SURVIVOR_DETECTED' | 'ALERT_GENERATED';
type MatIncomingMessage = {
type: MatIncomingType;
payload?: unknown;
};
type MatOutgoingMessage = {
type: MatBridgeMessageType;
payload?: unknown;
};
type UseMatBridgeOptions = {
onSurvivorDetected?: (survivor: Survivor) => void;
onAlertGenerated?: (alert: Alert) => void;
};
const safeParseJson = (value: string): unknown | null => {
try {
return JSON.parse(value);
} catch {
return null;
}
};
export const useMatBridge = ({ onAlertGenerated, onSurvivorDetected }: UseMatBridgeOptions = {}) => {
const webViewRef = useRef<WebView | null>(null);
const isReadyRef = useRef(false);
const queuedMessages = useRef<string[]>([]);
const [ready, setReady] = useState(false);
const flush = useCallback(() => {
if (!webViewRef.current || !isReadyRef.current) {
return;
}
while (queuedMessages.current.length > 0) {
const payload = queuedMessages.current.shift();
if (payload) {
webViewRef.current.postMessage(payload);
}
}
}, []);
const sendMessage = useCallback(
(message: MatOutgoingMessage) => {
const payload = JSON.stringify(message);
if (isReadyRef.current && webViewRef.current) {
webViewRef.current.postMessage(payload);
return;
}
queuedMessages.current.push(payload);
},
[],
);
const sendFrameUpdate = useCallback(
(frame: SensingFrame) => {
sendMessage({ type: 'FRAME_UPDATE', payload: frame });
},
[sendMessage],
);
const postEvent = useCallback(
(type: 'CREATE_EVENT' | 'ADD_ZONE') => {
return (payload: unknown) => {
sendMessage({
type,
payload,
});
};
},
[sendMessage],
);
const onMessage = useCallback(
(event: WebViewMessageEvent) => {
const payload = safeParseJson(event.nativeEvent.data);
if (!payload || typeof payload !== 'object') {
return;
}
const message = payload as MatIncomingMessage;
if (message.type === 'READY') {
isReadyRef.current = true;
setReady(true);
flush();
return;
}
if (message.type === 'SURVIVOR_DETECTED') {
onSurvivorDetected?.(message.payload as Survivor);
return;
}
if (message.type === 'ALERT_GENERATED') {
onAlertGenerated?.(message.payload as Alert);
}
},
[flush, onAlertGenerated, onSurvivorDetected],
);
return {
webViewRef,
ready,
onMessage,
sendMessage,
sendFrameUpdate,
postEvent,
};
};

36
mobile/src/screens/SettingsScreen/RssiToggle.tsx
View File

@@ -0,0 +1,36 @@
import { Platform, Switch, View } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { colors } from '@/theme/colors';
import { spacing } from '@/theme/spacing';
type RssiToggleProps = {
enabled: boolean;
onChange: (value: boolean) => void;
};
export const RssiToggle = ({ enabled, onChange }: RssiToggleProps) => {
return (
<View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View style={{ flex: 1 }}>
<ThemedText preset="bodyMd">RSSI Scan</ThemedText>
<ThemedText preset="bodySm" style={{ color: colors.textSecondary }}>
Scan for nearby Wi-Fi signals from Android devices
</ThemedText>
</View>
<Switch
value={enabled}
onValueChange={onChange}
trackColor={{ true: colors.accent, false: colors.surfaceAlt }}
thumbColor={colors.textPrimary}
/>
</View>
{Platform.OS === 'ios' && (
<ThemedText preset="bodySm" style={{ color: colors.textSecondary, marginTop: spacing.xs }}>
iOS: RSSI scan is currently limited — using stub data.
</ThemedText>
)}
</View>
);
};

102
mobile/src/screens/SettingsScreen/ServerUrlInput.tsx
View File

@@ -0,0 +1,102 @@
import { useState } from 'react';
import { Pressable, TextInput, View } from 'react-native';
import { validateServerUrl } from '@/utils/urlValidator';
import { apiService } from '@/services/api.service';
import { ThemedText } from '@/components/ThemedText';
import { colors } from '@/theme/colors';
import { spacing } from '@/theme/spacing';
type ServerUrlInputProps = {
value: string;
onChange: (value: string) => void;
onSave: () => void;
};
export const ServerUrlInput = ({ value, onChange, onSave }: ServerUrlInputProps) => {
const [testResult, setTestResult] = useState('');
const validation = validateServerUrl(value);
const handleTest = async () => {
if (!validation.valid) {
setTestResult('✗ Invalid URL');
return;
}
const start = Date.now();
try {
await apiService.getStatus();
setTestResult(`✓ ${Date.now() - start}ms`);
} catch {
setTestResult('✗ Failed');
}
};
return (
<View>
<ThemedText preset="labelMd" style={{ marginBottom: spacing.sm }}>
Server URL
</ThemedText>
<TextInput
value={value}
onChangeText={onChange}
autoCapitalize="none"
autoCorrect={false}
placeholder="http://192.168.1.100:8080"
keyboardType="url"
placeholderTextColor={colors.textSecondary}
style={{
borderWidth: 1,
borderColor: validation.valid ? colors.border : colors.danger,
borderRadius: 10,
backgroundColor: colors.surface,
color: colors.textPrimary,
padding: spacing.sm,
marginBottom: spacing.sm,
}}
/>
{!validation.valid && (
<ThemedText preset="bodySm" style={{ color: colors.danger, marginBottom: spacing.sm }}>
{validation.error}
</ThemedText>
)}
<ThemedText preset="bodySm" style={{ color: colors.textSecondary, marginBottom: spacing.sm }}>
{testResult || 'Ready to test connection'}
</ThemedText>
<View style={{ flexDirection: 'row', gap: spacing.sm }}>
<Pressable
onPress={handleTest}
disabled={!validation.valid}
style={{
flex: 1,
paddingVertical: 10,
borderRadius: 8,
backgroundColor: validation.valid ? colors.accentDim : colors.surfaceAlt,
alignItems: 'center',
}}
>
<ThemedText preset="labelMd" style={{ color: colors.textPrimary }}>
Test Connection
</ThemedText>
</Pressable>
<Pressable
onPress={onSave}
disabled={!validation.valid}
style={{
flex: 1,
paddingVertical: 10,
borderRadius: 8,
backgroundColor: validation.valid ? colors.success : colors.surfaceAlt,
alignItems: 'center',
}}
>
<ThemedText preset="labelMd" style={{ color: colors.textPrimary }}>
Save
</ThemedText>
</Pressable>
</View>
</View>
);
};

47
mobile/src/screens/SettingsScreen/ThemePicker.tsx
View File

@@ -0,0 +1,47 @@
import { Pressable, View } from 'react-native';
import { ThemeMode } from '@/theme/ThemeContext';
import { ThemedText } from '@/components/ThemedText';
import { colors } from '@/theme/colors';
import { spacing } from '@/theme/spacing';
type ThemePickerProps = {
value: ThemeMode;
onChange: (value: ThemeMode) => void;
};
const OPTIONS: ThemeMode[] = ['light', 'dark', 'system'];
export const ThemePicker = ({ value, onChange }: ThemePickerProps) => {
return (
<View
style={{
flexDirection: 'row',
gap: spacing.sm,
marginTop: spacing.sm,
}}
>
{OPTIONS.map((option) => {
const isActive = option === value;
return (
<Pressable
key={option}
onPress={() => onChange(option)}
style={{
flex: 1,
borderRadius: 8,
borderWidth: 1,
borderColor: isActive ? colors.accent : colors.border,
backgroundColor: isActive ? `${colors.accent}22` : '#0D1117',
paddingVertical: 10,
alignItems: 'center',
}}
>
<ThemedText preset="labelMd" style={{ color: isActive ? colors.accent : colors.textSecondary }}>
{option.toUpperCase()}
</ThemedText>
</Pressable>
);
})}
</View>
);
};

169
mobile/src/screens/SettingsScreen/index.tsx
View File

@@ -0,0 +1,169 @@
import { useEffect, useMemo, useState } from 'react';
import { Linking, ScrollView, View } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { colors } from '@/theme/colors';
import { spacing } from '@/theme/spacing';
import { WS_PATH } from '@/constants/websocket';
import { apiService } from '@/services/api.service';
import { wsService } from '@/services/ws.service';
import { useSettingsStore } from '@/stores/settingsStore';
import { Alert, Pressable, Platform } from 'react-native';
import { ThemePicker } from './ThemePicker';
import { RssiToggle } from './RssiToggle';
import { ServerUrlInput } from './ServerUrlInput';
type GlowCardProps = {
title: string;
children: React.ReactNode;
};
const GlowCard = ({ title, children }: GlowCardProps) => {
return (
<View
style={{
backgroundColor: '#0F141E',
borderRadius: 14,
borderWidth: 1,
borderColor: `${colors.accent}35`,
padding: spacing.md,
marginBottom: spacing.md,
}}
>
<ThemedText preset="labelMd" style={{ marginBottom: spacing.sm, color: colors.textPrimary }}>
{title}
</ThemedText>
{children}
</View>
);
};
const ScanIntervalPicker = ({
value,
onChange,
}: {
value: number;
onChange: (value: number) => void;
}) => {
const options = [1, 2, 5];
return (
<View style={{ flexDirection: 'row', gap: spacing.sm, marginTop: spacing.sm }}>
{options.map((interval) => {
const isActive = interval === value;
return (
<Pressable
key={interval}
onPress={() => onChange(interval)}
style={{
flex: 1,
borderWidth: 1,
borderColor: isActive ? colors.accent : colors.border,
borderRadius: 8,
backgroundColor: isActive ? `${colors.accent}20` : colors.surface,
alignItems: 'center',
}}
>
<ThemedText
preset="bodySm"
style={{
color: isActive ? colors.accent : colors.textSecondary,
paddingVertical: 8,
}}
>
{interval}s
</ThemedText>
</Pressable>
);
})}
</View>
);
};
export const SettingsScreen = () => {
const serverUrl = useSettingsStore((state) => state.serverUrl);
const rssiScanEnabled = useSettingsStore((state) => state.rssiScanEnabled);
const theme = useSettingsStore((state) => state.theme);
const setServerUrl = useSettingsStore((state) => state.setServerUrl);
const setRssiScanEnabled = useSettingsStore((state) => state.setRssiScanEnabled);
const setTheme = useSettingsStore((state) => state.setTheme);
const [draftUrl, setDraftUrl] = useState(serverUrl);
const [scanInterval, setScanInterval] = useState(2);
useEffect(() => {
setDraftUrl(serverUrl);
}, [serverUrl]);
const intervalSummary = useMemo(() => `${scanInterval}s`, [scanInterval]);
const handleSaveUrl = () => {
setServerUrl(draftUrl);
apiService.setBaseUrl(draftUrl);
wsService.disconnect();
wsService.connect(draftUrl);
};
const handleOpenGitHub = async () => {
const handled = await Linking.canOpenURL('https://github.com');
if (!handled) {
Alert.alert('Unable to open link', 'Please open https://github.com manually in your browser.');
return;
}
await Linking.openURL('https://github.com');
};
return (
<ThemedView style={{ flex: 1, backgroundColor: colors.bg, padding: spacing.md }}>
<ScrollView
contentContainerStyle={{
paddingBottom: spacing.xl,
}}
>
<GlowCard title="SERVER">
<ServerUrlInput value={draftUrl} onChange={setDraftUrl} onSave={handleSaveUrl} />
</GlowCard>
<GlowCard title="SENSING">
<RssiToggle enabled={rssiScanEnabled} onChange={setRssiScanEnabled} />
<ThemedText preset="bodyMd" style={{ marginTop: spacing.md }}>
Scan interval
</ThemedText>
<ScanIntervalPicker value={scanInterval} onChange={setScanInterval} />
<ThemedText preset="bodySm" style={{ color: colors.textSecondary, marginTop: spacing.sm }}>
Active interval: {intervalSummary}
</ThemedText>
{Platform.OS === 'ios' && (
<ThemedText preset="bodySm" style={{ color: colors.textSecondary, marginTop: spacing.sm }}>
iOS: RSSI scanning uses stubbed telemetry in this build.
</ThemedText>
)}
</GlowCard>
<GlowCard title="APPEARANCE">
<ThemePicker value={theme} onChange={setTheme} />
</GlowCard>
<GlowCard title="ABOUT">
<ThemedText preset="bodyMd" style={{ marginBottom: spacing.xs }}>
WiFi-DensePose Mobile v1.0.0
</ThemedText>
<ThemedText
preset="bodySm"
style={{ color: colors.accent, marginBottom: spacing.sm }}
onPress={handleOpenGitHub}
>
View on GitHub
</ThemedText>
<ThemedText preset="bodySm">WebSocket: {WS_PATH}</ThemedText>
<ThemedText preset="bodySm" style={{ color: colors.textSecondary }}>
Triage priority mapping: Immediate/Delayed/Minor/Deceased/Unknown
</ThemedText>
</GlowCard>
</ScrollView>
</ThemedView>
);
};
export default SettingsScreen;

63
mobile/src/screens/VitalsScreen/BreathingGauge.tsx
View File

@@ -0,0 +1,63 @@
import { useMemo } from 'react';
import { View, StyleSheet } from 'react-native';
import { usePoseStore } from '@/stores/poseStore';
import { GaugeArc } from '@/components/GaugeArc';
import { colors } from '@/theme/colors';
import { ThemedText } from '@/components/ThemedText';
const BREATHING_MIN_BPM = 0;
const BREATHING_MAX_BPM = 30;
const BREATHING_BAND_MAX = 0.3;
const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
const deriveBreathingValue = (
breathingBand?: number,
breathingBpm?: number,
): number => {
if (typeof breathingBpm === 'number' && Number.isFinite(breathingBpm)) {
return clamp(breathingBpm, BREATHING_MIN_BPM, BREATHING_MAX_BPM);
}
const bandValue = typeof breathingBand === 'number' && Number.isFinite(breathingBand) ? breathingBand : 0;
const normalized = clamp(bandValue / BREATHING_BAND_MAX, 0, 1);
return normalized * BREATHING_MAX_BPM;
};
export const BreathingGauge = () => {
const breathingBand = usePoseStore((state) => state.features?.breathing_band_power);
const breathingBpm = usePoseStore((state) => state.lastFrame?.vital_signs?.breathing_bpm);
const value = useMemo(
() => deriveBreathingValue(breathingBand, breathingBpm),
[breathingBand, breathingBpm],
);
return (
<View style={styles.container}>
<ThemedText preset="labelMd" style={styles.label}>
BREATHING
</ThemedText>
<GaugeArc value={value} min={BREATHING_MIN_BPM} max={BREATHING_MAX_BPM} label="" unit="BPM" color={colors.accent} />
<ThemedText preset="labelMd" color="textSecondary" style={styles.unit}>
BPM
</ThemedText>
</View>
);
};
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
gap: 6,
},
label: {
color: '#94A3B8',
letterSpacing: 1,
},
unit: {
marginTop: -12,
marginBottom: 4,
},
});

76
mobile/src/screens/VitalsScreen/HeartRateGauge.tsx
View File

@@ -0,0 +1,76 @@
import { useMemo } from 'react';
import { StyleSheet, View } from 'react-native';
import { usePoseStore } from '@/stores/poseStore';
import { GaugeArc } from '@/components/GaugeArc';
import { colors } from '@/theme/colors';
import { ThemedText } from '@/components/ThemedText';
const HEART_MIN_BPM = 40;
const HEART_MAX_BPM = 120;
const MOTION_BAND_MAX = 0.5;
const BREATH_BAND_MAX = 0.3;
const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
const deriveHeartRate = (
heartbeat?: number,
motionBand?: number,
breathingBand?: number,
): number => {
if (typeof heartbeat === 'number' && Number.isFinite(heartbeat)) {
return clamp(heartbeat, HEART_MIN_BPM, HEART_MAX_BPM);
}
const motionValue = typeof motionBand === 'number' && Number.isFinite(motionBand) ? clamp(motionBand / MOTION_BAND_MAX, 0, 1) : 0;
const breathValue = typeof breathingBand === 'number' && Number.isFinite(breathingBand) ? clamp(breathingBand / BREATH_BAND_MAX, 0, 1) : 0;
const normalized = 0.7 * motionValue + 0.3 * breathValue;
return HEART_MIN_BPM + normalized * (HEART_MAX_BPM - HEART_MIN_BPM);
};
export const HeartRateGauge = () => {
const heartProxyBpm = usePoseStore((state) => state.lastFrame?.vital_signs?.hr_proxy_bpm);
const motionBand = usePoseStore((state) => state.features?.motion_band_power);
const breathingBand = usePoseStore((state) => state.features?.breathing_band_power);
const value = useMemo(
() => deriveHeartRate(heartProxyBpm, motionBand, breathingBand),
[heartProxyBpm, motionBand, breathingBand],
);
return (
<View style={styles.container}>
<ThemedText preset="labelMd" style={styles.label}>
HR PROXY
</ThemedText>
<GaugeArc
value={value}
min={HEART_MIN_BPM}
max={HEART_MAX_BPM}
label=""
unit="BPM"
color={colors.danger}
colorTo={colors.success}
/>
<ThemedText preset="bodySm" color="textSecondary" style={styles.note}>
(estimated)
</ThemedText>
</View>
);
};
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
gap: 6,
},
label: {
color: '#94A3B8',
letterSpacing: 1,
},
note: {
marginTop: -12,
marginBottom: 4,
},
});

111
mobile/src/screens/VitalsScreen/MetricCard.tsx
View File

@@ -0,0 +1,111 @@
import { useEffect, useMemo, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import {
runOnJS,
useAnimatedReaction,
useSharedValue,
withSpring,
} from 'react-native-reanimated';
import { SparklineChart } from '@/components/SparklineChart';
import { ThemedText } from '@/components/ThemedText';
import { colors } from '@/theme/colors';
type MetricCardProps = {
label: string;
value: number | string;
unit?: string;
color?: string;
sparklineData?: number[];
};
const formatMetricValue = (value: number, unit?: string) => {
if (!Number.isFinite(value)) {
return '--';
}
const decimals = Math.abs(value) >= 100 ? 0 : Math.abs(value) >= 10 ? 2 : 3;
const text = value.toFixed(decimals);
return unit ? `${text} ${unit}` : text;
};
export const MetricCard = ({ label, value, unit, color = colors.accent, sparklineData }: MetricCardProps) => {
const numericValue = typeof value === 'number' ? value : null;
const [displayValue, setDisplayValue] = useState(() =>
numericValue !== null ? formatMetricValue(numericValue, unit) : String(value ?? '--'),
);
const valueAnimation = useSharedValue(numericValue ?? 0);
const finalValue = useMemo(
() => (numericValue !== null ? numericValue : NaN),
[numericValue],
);
useEffect(() => {
if (numericValue === null) {
setDisplayValue(String(value ?? '--'));
return;
}
valueAnimation.value = withSpring(finalValue, {
damping: 18,
stiffness: 160,
mass: 1,
});
}, [finalValue, numericValue, value, valueAnimation]);
useAnimatedReaction(
() => valueAnimation.value,
(current) => {
runOnJS(setDisplayValue)(formatMetricValue(current, unit));
},
[unit],
);
return (
<View style={[styles.card, { borderColor: color, shadowColor: color, shadowOpacity: 0.35 }]} accessibilityRole="summary">
<ThemedText preset="labelMd" style={styles.label}>
{label}
</ThemedText>
<ThemedText preset="displayMd" style={styles.value}>
{displayValue}
</ThemedText>
{sparklineData && sparklineData.length > 0 && (
<View style={styles.sparklineWrap}>
<SparklineChart data={sparklineData} color={color} height={56} />
</View>
)}
</View>
);
};
const styles = StyleSheet.create({
card: {
backgroundColor: colors.surface,
borderWidth: 1,
borderRadius: 14,
padding: 12,
marginBottom: 10,
gap: 6,
shadowOffset: {
width: 0,
height: 0,
},
shadowRadius: 12,
elevation: 4,
},
label: {
color: colors.textSecondary,
textTransform: 'uppercase',
letterSpacing: 0.8,
},
value: {
color: colors.textPrimary,
marginBottom: 2,
},
sparklineWrap: {
marginTop: 4,
borderTopWidth: 1,
borderTopColor: colors.border,
paddingTop: 8,
},
});

206
mobile/src/screens/VitalsScreen/index.tsx
View File

@@ -0,0 +1,206 @@
import { useEffect } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
import { BreathingGauge } from './BreathingGauge';
import { HeartRateGauge } from './HeartRateGauge';
import { MetricCard } from './MetricCard';
import { ConnectionBanner } from '@/components/ConnectionBanner';
import { ModeBadge } from '@/components/ModeBadge';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { SparklineChart } from '@/components/SparklineChart';
import { usePoseStore } from '@/stores/poseStore';
import { usePoseStream } from '@/hooks/usePoseStream';
import { colors } from '@/theme/colors';
type ConnectionBannerState = 'connected' | 'simulated' | 'disconnected';
const clampPercent = (value: number) => {
const normalized = Number.isFinite(value) ? value : 0;
return Math.max(0, Math.min(1, normalized > 1 ? normalized / 100 : normalized));
};
export default function VitalsScreen() {
usePoseStream();
const connectionStatus = usePoseStore((state) => state.connectionStatus);
const isSimulated = usePoseStore((state) => state.isSimulated);
const features = usePoseStore((state) => state.features);
const classification = usePoseStore((state) => state.classification);
const rssiHistory = usePoseStore((state) => state.rssiHistory);
const confidence = clampPercent(classification?.confidence ?? 0);
const badgeLabel = (classification?.motion_level ?? 'ABSENT').toUpperCase();
const bannerStatus: ConnectionBannerState = connectionStatus === 'connected' ? 'connected' : connectionStatus === 'simulated' ? 'simulated' : 'disconnected';
const confidenceProgress = useSharedValue(0);
useEffect(() => {
confidenceProgress.value = withSpring(confidence, {
damping: 16,
stiffness: 150,
mass: 1,
});
}, [confidence, confidenceProgress]);
const animatedConfidenceStyle = useAnimatedStyle(() => ({
width: `${confidenceProgress.value * 100}%`,
}));
const classificationColor =
classification?.motion_level === 'active'
? colors.success
: classification?.motion_level === 'present_still'
? colors.warn
: colors.muted;
return (
<ThemedView style={styles.screen}>
<ConnectionBanner status={bannerStatus} />
<ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
<View style={styles.headerRow}>{isSimulated ? <ModeBadge mode="SIM" /> : null}</View>
<View style={styles.gaugesRow}>
<View style={styles.gaugeCard}>
<BreathingGauge />
</View>
<View style={styles.gaugeCard}>
<HeartRateGauge />
</View>
</View>
<View style={styles.section}>
<ThemedText preset="labelLg" color="textSecondary">
RSSI HISTORY
</ThemedText>
<SparklineChart data={rssiHistory.length > 0 ? rssiHistory : [0]} color={colors.accent} />
</View>
<MetricCard label="Variance" value={features?.variance ?? 0} unit="" sparklineData={rssiHistory} color={colors.accent} />
<MetricCard
label="Motion Band"
value={features?.motion_band_power ?? 0}
unit=""
color={colors.success}
/>
<MetricCard
label="Breath Band"
value={features?.breathing_band_power ?? 0}
unit=""
color={colors.warn}
/>
<MetricCard
label="Spectral Entropy"
value={features?.spectral_entropy ?? 0}
unit=""
color={colors.connected}
/>
<View style={styles.classificationSection}>
<ThemedText preset="labelLg" style={styles.rowLabel}>
Classification: {badgeLabel}
</ThemedText>
<View style={[styles.badgePill, { borderColor: classificationColor, backgroundColor: `${classificationColor}18` }]}>
<ThemedText preset="labelMd" style={{ color: classificationColor }}>
{badgeLabel}
</ThemedText>
</View>
<View style={styles.confidenceContainer}>
<ThemedText preset="bodySm" color="textSecondary">
Confidence
</ThemedText>
<View style={styles.confidenceBarTrack}>
<Animated.View style={[styles.confidenceBarFill, animatedConfidenceStyle]} />
</View>
<ThemedText preset="bodySm">{Math.round(confidence * 100)}%</ThemedText>
</View>
</View>
</ScrollView>
</ThemedView>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
backgroundColor: colors.bg,
paddingTop: 40,
paddingHorizontal: 12,
},
content: {
paddingTop: 12,
paddingBottom: 30,
gap: 12,
},
headerRow: {
alignItems: 'flex-end',
},
gaugesRow: {
flexDirection: 'row',
gap: 12,
},
gaugeCard: {
flex: 1,
backgroundColor: '#111827',
borderRadius: 16,
borderWidth: 1,
borderColor: 'rgba(50,184,198,0.45)',
paddingVertical: 10,
paddingHorizontal: 8,
alignItems: 'center',
justifyContent: 'center',
shadowColor: colors.accent,
shadowOpacity: 0.3,
shadowOffset: {
width: 0,
height: 0,
},
shadowRadius: 12,
elevation: 4,
},
section: {
backgroundColor: colors.surface,
borderRadius: 14,
borderWidth: 1,
borderColor: 'rgba(50,184,198,0.35)',
padding: 12,
gap: 10,
},
classificationSection: {
backgroundColor: colors.surface,
borderRadius: 14,
borderWidth: 1,
borderColor: 'rgba(50,184,198,0.35)',
padding: 12,
gap: 10,
marginBottom: 6,
},
rowLabel: {
color: colors.textSecondary,
marginBottom: 8,
},
badgePill: {
alignSelf: 'flex-start',
borderWidth: 1,
borderRadius: 999,
paddingHorizontal: 10,
paddingVertical: 4,
marginBottom: 4,
},
confidenceContainer: {
gap: 6,
},
confidenceBarTrack: {
height: 10,
borderRadius: 999,
backgroundColor: colors.surfaceAlt,
overflow: 'hidden',
},
confidenceBarFill: {
height: '100%',
backgroundColor: colors.success,
borderRadius: 999,
},
});

201
mobile/src/screens/ZonesScreen/FloorPlanSvg.tsx
View File

@@ -0,0 +1,201 @@
import { useEffect, useMemo } from 'react';
import { View, ViewStyle } from 'react-native';
import Svg, { Circle, Polygon, Rect } from 'react-native-svg';
import Animated, {
createAnimatedComponent,
useAnimatedProps,
useAnimatedStyle,
useDerivedValue,
useSharedValue,
withTiming,
type SharedValue,
} from 'react-native-reanimated';
import {
Gesture,
GestureDetector,
} from 'react-native-gesture-handler';
import { colors } from '@/theme/colors';
import { spacing } from '@/theme/spacing';
import { valueToColor } from '@/utils/colorMap';
const GRID_SIZE = 20;
const CELL_COUNT = GRID_SIZE * GRID_SIZE;
type Point = {
x: number;
y: number;
};
type FloorPlanSvgProps = {
gridValues: number[];
personPositions: Point[];
size?: number;
style?: ViewStyle;
};
const clamp01 = (value: number) => Math.max(0, Math.min(1, value));
const colorToRgba = (value: number): string => {
const [r, g, b] = valueToColor(clamp01(value));
return `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, 1)`;
};
const normalizeGrid = (values: number[]): number[] => {
const normalized = new Array(CELL_COUNT).fill(0);
const sourceLength = Math.min(values.length, CELL_COUNT);
for (let i = 0; i < sourceLength; i += 1) {
const raw = values?.[i];
normalized[i] = clamp01(typeof raw === 'number' && Number.isFinite(raw) ? raw : 0);
}
return normalized;
};
const AnimatedRect = createAnimatedComponent(Rect);
const AnimatedContainer = Animated.View;
const Cell = ({
index,
size,
values,
progress,
}: {
index: number;
size: number;
values: SharedValue<number[]>;
progress: SharedValue<number>;
}) => {
const cellSize = size / GRID_SIZE;
const x = (index % GRID_SIZE) * cellSize;
const y = Math.floor(index / GRID_SIZE) * cellSize;
const animatedProps = useAnimatedProps(() => {
const fill = colorToRgba(values.value[index] ?? 0);
return {
fill,
opacity: 0.95 + (progress.value - 1) * 0.05,
};
}, [index]);
return <AnimatedRect x={x} y={y} width={cellSize} height={cellSize} rx={1} animatedProps={animatedProps} />;
};
const RouterMarker = ({ cellSize }: { cellSize: number }) => {
const cx = cellSize * 5.5;
const cy = cellSize * 17.5;
const radius = cellSize * 0.35;
return (
<Polygon
points={`${cx},${cy - radius} ${cx + radius},${cy} ${cx},${cy + radius} ${cx - radius},${cy}`}
fill="rgba(50, 184, 198, 0.25)"
stroke={colors.accent}
strokeWidth={2}
/>
);
};
export const FloorPlanSvg = ({ gridValues, personPositions, size = 320, style }: FloorPlanSvgProps) => {
const normalizedValues = useMemo(() => normalizeGrid(gridValues), [gridValues]);
const values = useSharedValue(normalizedValues);
const previousValues = useSharedValue(normalizedValues);
const targetValues = useSharedValue(normalizedValues);
const progress = useSharedValue(1);
const translateX = useSharedValue(0);
const translateY = useSharedValue(0);
const panStartX = useSharedValue(0);
const panStartY = useSharedValue(0);
const panGesture = Gesture.Pan()
.onStart(() => {
panStartX.value = translateX.value;
panStartY.value = translateY.value;
})
.onUpdate((event) => {
translateX.value = panStartX.value + event.translationX;
translateY.value = panStartY.value + event.translationY;
})
.onEnd(() => {
panStartX.value = translateX.value;
panStartY.value = translateY.value;
});
const panStyle = useAnimatedStyle(() => ({
transform: [
{ translateX: translateX.value },
{ translateY: translateY.value },
],
}));
useDerivedValue(() => {
const interpolated = new Array(CELL_COUNT).fill(0);
const from = previousValues.value;
const to = targetValues.value;
const p = progress.value;
for (let i = 0; i < CELL_COUNT; i += 1) {
const start = from[i] ?? 0;
const end = to[i] ?? 0;
interpolated[i] = start + (end - start) * p;
}
values.value = interpolated;
});
useEffect(() => {
const next = normalizeGrid(normalizedValues);
previousValues.value = values.value;
targetValues.value = next;
progress.value = 0;
progress.value = withTiming(1, { duration: 500 });
}, [normalizedValues, previousValues, targetValues, progress, values]);
const markers = useMemo(() => {
const cellSize = size / GRID_SIZE;
return personPositions
.map((point, idx) => {
const cx = (Math.max(0, Math.min(GRID_SIZE - 1, point.x)) + 0.5) * cellSize;
const cy = (Math.max(0, Math.min(GRID_SIZE - 1, point.y)) + 0.5) * cellSize;
const radius = Math.max(2.8, cellSize * 0.22);
return (
<Circle
key={`person-${idx}`}
cx={cx}
cy={cy}
r={radius}
fill={colors.accent}
stroke="#FFFFFF"
strokeWidth={1.8}
/>
);
})
.concat(
<RouterMarker key="router" cellSize={size / GRID_SIZE} />,
);
}, [personPositions, size]);
return (
<View style={[{ overflow: 'hidden', paddingBottom: spacing.xs }, style]}>
<GestureDetector gesture={panGesture}>
<AnimatedContainer style={panStyle}>
<Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
{Array.from({ length: CELL_COUNT }).map((_, index) => (
<Cell
key={`cell-${index}`}
index={index}
size={size}
values={values}
progress={progress}
/>
))}
{markers}
</Svg>
</AnimatedContainer>
</GestureDetector>
</View>
);
};

54
mobile/src/screens/ZonesScreen/ZoneLegend.tsx
View File

@@ -0,0 +1,54 @@
import { View } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { colors } from '@/theme/colors';
import { spacing } from '@/theme/spacing';
import { valueToColor } from '@/utils/colorMap';
type LegendStop = {
label: string;
color: string;
};
const LEGEND_STOPS: LegendStop[] = [
{ label: 'Quiet', color: colorToRgba(0) },
{ label: 'Low', color: colorToRgba(0.25) },
{ label: 'Medium', color: colorToRgba(0.5) },
{ label: 'High', color: colorToRgba(0.75) },
{ label: 'Active', color: colorToRgba(1) },
];
function colorToRgba(value: number): string {
const [r, g, b] = valueToColor(value);
return `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, 1)`;
}
export const ZoneLegend = () => {
return (
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: spacing.md }}>
{LEGEND_STOPS.map((stop) => (
<View
key={stop.label}
style={{
flexDirection: 'row',
alignItems: 'center',
gap: 6,
}}
>
<View
style={{
width: 14,
height: 14,
borderRadius: 3,
backgroundColor: stop.color,
borderColor: colors.border,
borderWidth: 1,
}}
/>
<ThemedText preset="bodySm" style={{ color: colors.textSecondary }}>
{stop.label}
</ThemedText>
</View>
))}
</View>
);
};

82
mobile/src/screens/ZonesScreen/index.tsx
View File

@@ -0,0 +1,82 @@
import { useMemo } from 'react';
import { ScrollView, useWindowDimensions, View } from 'react-native';
import { ConnectionBanner } from '@/components/ConnectionBanner';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { colors } from '@/theme/colors';
import { spacing } from '@/theme/spacing';
import { usePoseStore } from '@/stores/poseStore';
import { type ConnectionStatus } from '@/types/sensing';
import { useOccupancyGrid } from './useOccupancyGrid';
import { FloorPlanSvg } from './FloorPlanSvg';
import { ZoneLegend } from './ZoneLegend';
const getLastUpdateSeconds = (timestamp?: number): string => {
if (!timestamp) {
return 'N/A';
}
const ageMs = Date.now() - timestamp;
const secs = Math.max(0, ageMs / 1000);
return `${secs.toFixed(1)}s`;
};
const resolveBannerState = (status: ConnectionStatus): 'connected' | 'simulated' | 'disconnected' => {
if (status === 'connecting') {
return 'disconnected';
}
return status;
};
export const ZonesScreen = () => {
const connectionStatus = usePoseStore((state) => state.connectionStatus);
const lastFrame = usePoseStore((state) => state.lastFrame);
const signalField = usePoseStore((state) => state.signalField);
const { gridValues, personPositions } = useOccupancyGrid(signalField);
const { width } = useWindowDimensions();
const mapSize = useMemo(() => Math.max(240, Math.min(width - spacing.md * 2, 520)), [width]);
return (
<ThemedView style={{ flex: 1, backgroundColor: colors.bg }}>
<ScrollView contentContainerStyle={{ padding: spacing.md, paddingBottom: spacing.xxl }}>
<ConnectionBanner status={resolveBannerState(connectionStatus)} />
<View
style={{
marginTop: 28,
marginBottom: spacing.md,
}}
>
<ThemedText preset="labelLg" style={{ color: colors.textSecondary, marginBottom: 8 }}>
Floor Plan — Occupancy Heatmap
</ThemedText>
</View>
<FloorPlanSvg
gridValues={gridValues}
personPositions={personPositions}
size={mapSize}
style={{ alignSelf: 'center' }}
/>
<ZoneLegend />
<View
style={{
marginTop: spacing.md,
flexDirection: 'row',
justifyContent: 'space-between',
gap: spacing.md,
}}
>
<ThemedText preset="bodyMd">Occupancy: {personPositions.length} persons detected</ThemedText>
<ThemedText preset="bodyMd">Last update: {getLastUpdateSeconds(lastFrame?.timestamp)}</ThemedText>
</View>
</ScrollView>
</ThemedView>
);
};
export default ZonesScreen;

109
mobile/src/screens/ZonesScreen/useOccupancyGrid.ts
View File

@@ -0,0 +1,109 @@
import { useMemo } from 'react';
import type { Classification, SignalField } from '@/types/sensing';
import { usePoseStore } from '@/stores/poseStore';
const GRID_SIZE = 20;
const CELL_COUNT = GRID_SIZE * GRID_SIZE;
type Point = {
x: number;
y: number;
};
const clamp01 = (value: number): number => {
if (Number.isNaN(value)) {
return 0;
}
return Math.max(0, Math.min(1, value));
};
const parseNumber = (value: unknown): number | null => {
return typeof value === 'number' && Number.isFinite(value) ? value : null;
};
const parsePoint = (value: unknown): Point | null => {
if (!value || typeof value !== 'object') {
return null;
}
const record = value as Record<string, unknown>;
const x = parseNumber(record.x);
const y = parseNumber(record.y);
if (x === null || y === null) {
return null;
}
return {
x,
y,
};
};
const collectPositions = (value: unknown): Point[] => {
if (!Array.isArray(value)) {
return [];
}
return value
.map((entry) => parsePoint(entry))
.filter((point): point is Point => point !== null)
.map((point) => ({
x: point.x,
y: point.y,
}));
};
const readClassificationPositions = (classification: Classification | undefined): Point[] => {
const source = classification as unknown as Record<string, unknown>;
return (
collectPositions(source?.persons) ??
collectPositions(source?.personPositions) ??
collectPositions(source?.positions) ??
[]
);
};
export const useOccupancyGrid = (signalField: SignalField | null): { gridValues: number[]; personPositions: Point[] } => {
const classification = usePoseStore((state) => state.classification) as Classification | undefined;
const gridValues = useMemo(() => {
const sourceValues = signalField?.values;
if (!sourceValues || sourceValues.length === 0) {
return new Array(CELL_COUNT).fill(0);
}
const normalized = new Array(CELL_COUNT).fill(0);
const sourceLength = Math.min(CELL_COUNT, sourceValues.length);
for (let i = 0; i < sourceLength; i += 1) {
const value = parseNumber(sourceValues[i]);
normalized[i] = clamp01(value ?? 0);
}
return normalized;
}, [signalField?.values]);
const personPositions = useMemo(() => {
const positions = readClassificationPositions(classification);
if (positions.length > 0) {
return positions
.map(({ x, y }) => ({
x: Math.max(0, Math.min(GRID_SIZE - 1, x)),
y: Math.max(0, Math.min(GRID_SIZE - 1, y)),
}))
.slice(0, 16);
}
return [] as Point[];
}, [classification]);
return {
gridValues,
personPositions,
};
};

4
mobile/src/types/html.d.ts vendored Normal file
View File

@@ -0,0 +1,4 @@
declare module '*.html' {
const content: string;
export default content;
}