A modular, modern web interface for the WiFi DensePose human tracking system. This UI provides real-time monitoring, configuration, and visualization of WiFi-based pose estimation.

🏗️ Architecture

The UI follows a modular architecture with clear separation of concerns:

ui/
├── app.js                 # Main application entry point
├── index.html            # Updated HTML with modular structure
├── style.css             # Complete CSS with additional styles
├── config/               # Configuration modules
│   └── api.config.js     # API endpoints and configuration
├── services/             # Service layer for API communication
│   ├── api.service.js    # HTTP API client
│   ├── websocket.service.js # WebSocket client
│   ├── pose.service.js   # Pose estimation API wrapper
│   ├── health.service.js # Health monitoring API wrapper
│   └── stream.service.js # Streaming API wrapper
├── components/           # UI components
│   ├── TabManager.js     # Tab navigation component
│   ├── DashboardTab.js   # Dashboard component with live data
│   ├── HardwareTab.js    # Hardware configuration component
│   └── LiveDemoTab.js    # Live demo with streaming
├── utils/               # Utility functions and helpers
│   └── mock-server.js   # Mock server for testing
└── tests/               # Comprehensive test suite
    ├── test-runner.html  # Test runner UI
    ├── test-runner.js    # Test framework and cases
    └── integration-test.html # Integration testing page

🚀 Features

Real-time Dashboard

Live system health monitoring
Real-time pose detection statistics
Zone occupancy tracking
System metrics (CPU, memory, disk)
API status indicators

Hardware Configuration

Interactive antenna array visualization
Real-time CSI data display
Configuration panels
Hardware status monitoring

Live Demo

WebSocket-based real-time streaming
Signal visualization
Pose detection visualization
Interactive controls

API Integration

Complete REST API coverage
WebSocket streaming support
Authentication handling
Error management
Request/response interceptors

📋 API Coverage

The UI integrates with all WiFi DensePose API endpoints:

Health Endpoints

GET /health/health - System health check
GET /health/ready - Readiness check
GET /health/live - Liveness check
GET /health/metrics - System metrics
GET /health/version - Version information

Pose Estimation

GET /api/v1/pose/current - Current pose data
POST /api/v1/pose/analyze - Trigger analysis
GET /api/v1/pose/zones/{zone_id}/occupancy - Zone occupancy
GET /api/v1/pose/zones/summary - All zones summary
POST /api/v1/pose/historical - Historical data
GET /api/v1/pose/activities - Recent activities
POST /api/v1/pose/calibrate - System calibration
GET /api/v1/pose/stats - Statistics

Streaming

WS /api/v1/stream/pose - Real-time pose stream
WS /api/v1/stream/events - Event stream
GET /api/v1/stream/status - Stream status
POST /api/v1/stream/start - Start streaming
POST /api/v1/stream/stop - Stop streaming
GET /api/v1/stream/clients - Connected clients
DELETE /api/v1/stream/clients/{client_id} - Disconnect client

🧪 Testing

Test Runner

Open tests/test-runner.html to run the complete test suite:

# Serve the UI directory on port 3000 (to avoid conflicts with FastAPI on 8000)
cd /workspaces/wifi-densepose/ui
python -m http.server 3000
# Open http://localhost:3000/tests/test-runner.html

Test Categories

API Configuration Tests - Configuration and URL building
API Service Tests - HTTP client functionality
WebSocket Service Tests - WebSocket connection management
Pose Service Tests - Pose estimation API wrapper
Health Service Tests - Health monitoring functionality
UI Component Tests - Component behavior and interaction
Integration Tests - End-to-end functionality

Integration Testing

Use tests/integration-test.html for visual integration testing:

# Open http://localhost:3000/tests/integration-test.html

Features:

Mock server with realistic API responses
Visual testing of all components
Real-time data simulation
Error scenario testing
WebSocket stream testing

🛠️ Usage

Basic Setup

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <!-- Your content -->
    </div>
    <script type="module" src="app.js"></script>
</body>
</html>

Using Services

import { poseService } from './services/pose.service.js';
import { healthService } from './services/health.service.js';

// Get current pose data
const poseData = await poseService.getCurrentPose();

// Subscribe to health updates
healthService.subscribeToHealth(health => {
    console.log('Health status:', health.status);
});

// Start pose streaming
poseService.startPoseStream({
    minConfidence: 0.7,
    maxFps: 30
});

poseService.subscribeToPoseUpdates(update => {
    if (update.type === 'pose_update') {
        console.log('New pose data:', update.data);
    }
});

Using Components

import { TabManager } from './components/TabManager.js';
import { DashboardTab } from './components/DashboardTab.js';

// Initialize tab manager
const container = document.querySelector('.container');
const tabManager = new TabManager(container);
tabManager.init();

// Initialize dashboard
const dashboardContainer = document.getElementById('dashboard');
const dashboard = new DashboardTab(dashboardContainer);
await dashboard.init();

🔧 Configuration

API Configuration

Edit config/api.config.js to modify API settings:

export const API_CONFIG = {
  BASE_URL: window.location.origin,
  API_VERSION: '/api/v1',
  
  // Rate limiting
  RATE_LIMITS: {
    REQUESTS_PER_MINUTE: 60,
    BURST_LIMIT: 10
  },
  
  // WebSocket configuration
  WS_CONFIG: {
    RECONNECT_DELAY: 5000,
    MAX_RECONNECT_ATTEMPTS: 5,
    PING_INTERVAL: 30000
  }
};

Authentication

import { apiService } from './services/api.service.js';

// Set authentication token
apiService.setAuthToken('your-jwt-token');

// Add request interceptor for auth
apiService.addRequestInterceptor((url, options) => {
    // Modify request before sending
    return { url, options };
});

🎨 Styling

The UI uses a comprehensive CSS design system with:

CSS Custom Properties for theming
Dark/light mode support
Responsive design
Component-based styling
Smooth animations and transitions

Key CSS Variables

:root {
  --color-primary: rgba(33, 128, 141, 1);
  --color-background: rgba(252, 252, 249, 1);
  --color-surface: rgba(255, 255, 253, 1);
  --color-text: rgba(19, 52, 59, 1);
  --space-16: 16px;
  --radius-lg: 12px;
}

🔍 Monitoring & Debugging

Health Monitoring

import { healthService } from './services/health.service.js';

// Start automatic health checks
healthService.startHealthMonitoring(30000); // Every 30 seconds

// Check if system is healthy
const isHealthy = healthService.isSystemHealthy();

// Get specific component status
const apiStatus = healthService.getComponentStatus('api');

Error Handling

// Global error handling
window.addEventListener('error', (event) => {
    console.error('Global error:', event.error);
});

// API error handling
apiService.addResponseInterceptor(async (response, url) => {
    if (!response.ok) {
        console.error(`API error: ${response.status} for ${url}`);
    }
    return response;
});

🚀 Deployment

Development

# First, start your FastAPI backend (runs on port 8000)
wifi-densepose start
# or from the main project directory:
python -m wifi_densepose.main

# Then, start the UI server on a different port to avoid conflicts
cd /workspaces/wifi-densepose/ui
python -m http.server 3000
# or
npx http-server . -p 3000

# Open the UI at http://localhost:3000
# The UI will connect to the FastAPI backend at http://localhost:8000

Production

Configure API_CONFIG.BASE_URL for your backend
Set up HTTPS for WebSocket connections
Configure authentication if required
Optimize assets (minify CSS/JS)
Set up monitoring and logging

🤝 Contributing

Follow the modular architecture
Add tests for new functionality
Update documentation
Ensure TypeScript compatibility
Test with mock server

📄 License

This project is part of the WiFi-DensePose system. See the main project LICENSE file for details.