usda-vision/management-dashboard-web-app/VISION_SYSTEM_README.md

Vision System Dashboard

This document describes the Vision System dashboard that has been added to the Pecan Experiments application.

Overview

The Vision System dashboard provides real-time monitoring and control of the USDA Vision Camera System. It displays information about cameras, machines, storage, and recording sessions.

Features

System Overview

• System Status: Shows if the vision system is online/offline with uptime information
• MQTT Connection: Displays MQTT connectivity status and last message timestamp
• Active Recordings: Shows current number of active recordings and total recordings
• Camera/Machine Count: Quick overview of connected devices

Camera Monitoring

• Real-time Status: Shows connection status for each camera (camera1, camera2)
• Recording State: Indicates if cameras are currently recording
• Device Information: Displays friendly names and serial numbers
• Error Reporting: Shows any camera errors or issues
• Current Recording Files: Shows active recording filenames

Machine Status

• Machine States: Monitors vibratory conveyor, blower separator, and other machines
• MQTT Topics: Shows the MQTT topics for each machine
• Last Updated: Timestamps for when each machine status was last updated
• State Colors: Visual indicators for machine states (on/off/running/stopped)

Storage Management

• Disk Usage: Visual progress bar showing total disk usage
• File Statistics: Total files, total size, and free space
• Per-Camera Breakdown: Storage usage statistics for each camera
• Storage Path: Shows the base storage directory

Recording Sessions

• Recent Recordings Table: Shows the latest recording sessions
• Recording Details: Filename, camera, status, duration, file size, start time
• Status Indicators: Visual status badges for completed/active/failed recordings

API Integration

The dashboard connects to the Vision System API running on http://localhost:8000 and provides:

Endpoints Used

• GET /system/status - System overview and status
• GET /cameras - Camera status and information
• GET /machines - Machine status and MQTT data
• GET /storage/stats - Storage usage statistics
• GET /recordings - Recording session information

Auto-Refresh

• The dashboard automatically refreshes data every 5 seconds
• Manual refresh button available for immediate updates
• Loading indicators show when data is being fetched

Access Control

The Vision System dashboard is accessible to all authenticated users regardless of role:

• Admin: Full access to all features
• Conductor: Full access to all features
• Analyst: Full access to all features
• Data Recorder: Full access to all features

Error Handling

The dashboard includes comprehensive error handling:

• Connection Errors: Shows user-friendly messages when the vision system is unavailable
• API Errors: Displays specific error messages from the vision system API
• Retry Functionality: "Try Again" button to retry failed requests
• Graceful Degradation: Shows partial data if some API calls fail

Technical Implementation

Files Added/Modified

• src/lib/visionApi.ts - API client for vision system integration
• src/components/VisionSystem.tsx - Main dashboard component
• src/components/DashboardLayout.tsx - Added routing for vision system
• src/components/Sidebar.tsx - Added menu item for vision system
• src/components/TopNavbar.tsx - Added page title for vision system

Dependencies

• Uses existing React/TypeScript setup
• Leverages Tailwind CSS for styling
• No additional dependencies required

API Client Features

• TypeScript interfaces for all API responses
• Comprehensive error handling
• Utility functions for formatting (bytes, duration, uptime)
• Singleton pattern for API client instance

Usage

1. Navigate to Vision System: Click "Vision System" in the sidebar menu
2. Monitor Status: View real-time system, camera, and machine status
3. Check Storage: Monitor disk usage and file statistics
4. Review Recordings: See recent recording sessions and their details
5. Refresh Data: Use the refresh button or wait for auto-refresh

Troubleshooting

Common Issues

1. "Failed to fetch vision system data"

   • Ensure the vision system API is running on localhost:8000
   • Check network connectivity
   • Verify the vision system service is started

2. Empty Dashboard

   • Vision system may not have any cameras or machines configured
   • Check vision system configuration
   • Verify MQTT connectivity

3. Outdated Information

   • Data refreshes every 5 seconds automatically
   • Use the manual refresh button for immediate updates
   • Check if vision system is responding to API calls

API Base URL Configuration

The API base URL is configured in src/lib/visionApi.ts:

const VISION_API_BASE_URL = 'http://localhost:8000'

To change the API endpoint, modify this constant and rebuild the application.

Future Enhancements

Potential improvements for the vision system dashboard:

• Camera Controls: Add start/stop recording buttons
• Camera Recovery: Add diagnostic and recovery action buttons
• File Management: Add file browsing and cleanup functionality
• Real-time Streaming: Add live camera feed display
• Alerts: Add notifications for system issues
• Historical Data: Add charts and trends for system metrics