+
+ )
+ }
+
+ if (error) {
+ return (
+
+
+
+
+
+ Loading vision system...
+
+
+ )
+ }
+
+ const cameraCount = Object.keys(cameras).length
+ const machineCount = systemStatus ? Object.keys(systemStatus.machines).length : 0
+ const activeRecordings = systemStatus?.active_recordings ?? 0
+ // Fix: Use recordings object length instead of total_recordings (which may be incorrect)
+ const totalRecordings = Object.keys(recordings).length
+
+ return (
+
+
+
+
+
+
+
+
+
+ Error loading vision system
+
+
+ {error}
+
+
+
+
+ {/* Header */}
+ {
+ setPreviewModalOpen(false)
+ setPreviewCamera(null)
+ }}
+ />
+ )}
+
+ {/* Camera Configuration Modal */}
+ {selectedCamera && (
+ {
+ setConfigModalOpen(false)
+ setSelectedCamera(null)
+ }}
+ onSuccess={(message) => {
+ setNotification({ type: 'success', message })
+ // Refresh camera status
+ visionApi.getCameras().then(setCameras).catch(console.error)
+ }}
+ onError={(error) => {
+ setNotification({ type: 'error', message: error })
+ }}
+ />
+ )}
+
+ )
+}
+
diff --git a/vision-system-remote/src/components/CameraCard.tsx b/vision-system-remote/src/components/CameraCard.tsx
new file mode 100644
index 0000000..7adf922
--- /dev/null
+++ b/vision-system-remote/src/components/CameraCard.tsx
@@ -0,0 +1,245 @@
+import React from 'react'
+import type { CameraStatus } from '../services/api'
+
+interface CameraCardProps {
+ cameraName: string
+ camera: CameraStatus
+ onStartRecording: (cameraName: string) => void
+ onStopRecording: (cameraName: string) => void
+ onPreviewModal: (cameraName: string) => void
+ onPreviewNewWindow: (cameraName: string) => void
+ onStopStreaming: (cameraName: string) => void
+ onConfigure: (cameraName: string) => void
+ onRestart: (cameraName: string) => void
+}
+
+export const CameraCard: React.FC
+
+
+ {/* Status Widgets */}
+
+
+ Vision System
+Monitor cameras, machines, and recording status
+ {lastUpdate && ( ++ Last updated: {lastUpdate.toLocaleTimeString()} + {isConnected ? ( + + + Live Updates + + ) : ( + + Polling Mode + + )} +
+ )} +
+
+
+ {/* Cameras Grid */}
+
+
+
+ {/* Notification */}
+ {notification && (
+
+
+ Cameras
++ Current status of all cameras in the system +
+
+
+
+ {Object.entries(cameras).map(([cameraName, camera]) => (
+
+
+
+ )}
+
+ {/* Camera Preview Modal */}
+ {previewCamera && (
+
+
+
+ {notification.type === 'success' ? (
+
+ ) : (
+
+ )}
+
+
+
+ {notification.message}
+
+
+
+
+ {/* Header with Status Indicator */}
+
+ )
+}
+
diff --git a/vision-system-remote/src/components/CameraConfigModal.tsx b/vision-system-remote/src/components/CameraConfigModal.tsx
new file mode 100755
index 0000000..4cf7051
--- /dev/null
+++ b/vision-system-remote/src/components/CameraConfigModal.tsx
@@ -0,0 +1,768 @@
+import React, { useState, useEffect } from 'react'
+import { visionApi, type CameraConfig, type CameraConfigUpdate } from '../services/api'
+
+
+interface CameraConfigModalProps {
+ cameraName: string
+ isOpen: boolean
+ onClose: () => void
+ onSuccess?: (message: string) => void
+ onError?: (error: string) => void
+}
+
+export const CameraConfigModal: React.FC
+
+
+ {/* Camera Details */}
+
+
+
+
+
+
+ {getStatusText()}
+
+
+
+ {friendlyName}
+ {friendlyName !== cameraName && ( +{cameraName}
+ )} +
+ {/* Status Info */}
+
+
+ {camera.device_info?.serial_number && (
+
+
+ {/* Recording Indicator */}
+ {isRecording && (
+
+ Serial:
+
+ {camera.device_info.serial_number}
+
+
+ )}
+ {camera.frame_rate && (
+
+ FPS:
+ {camera.frame_rate.toFixed(1)}
+
+ )}
+
+
+ Recording Active
+ {camera.current_recording_file && (
+
+ {camera.current_recording_file.split('/').pop()}
+
+ )}
+
+ )}
+
+ {/* Error Display */}
+ {camera.last_error && (
+
+
+ )}
+
+ {/* Action Buttons */}
+ + Error: {camera.last_error} +
+
+ {/* Recording Controls */}
+
+
+ {!isRecording ? (
+
+ ) : (
+
+ )}
+
+
+ {/* Preview and Stream Controls */}
+
+
+
+
+
+ {isStreaming && (
+
+ )}
+
+
+ {/* Error Recovery - Restart Button */}
+ {needsRestart && (
+
+
+
+ )}
+
+ {/* Configuration Button */}
+
+
+
+
+
+
+ )
+}
diff --git a/vision-system-remote/src/components/CameraPreviewModal.tsx b/vision-system-remote/src/components/CameraPreviewModal.tsx
new file mode 100644
index 0000000..f655606
--- /dev/null
+++ b/vision-system-remote/src/components/CameraPreviewModal.tsx
@@ -0,0 +1,180 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { visionApi } from '../services/api'
+
+interface CameraPreviewModalProps {
+ cameraName: string
+ isOpen: boolean
+ onClose: () => void
+ onError?: (error: string) => void
+}
+
+export const CameraPreviewModal: React.FC e.stopPropagation()}>
+ {/* Close Button */}
+
+
+ {/* Header */}
+
+
+
+
+ {/* Content */}
+
+
+ + Camera Configuration - {cameraName} +
+
+ {loading && (
+
+
+ {/* Footer */}
+ {config && !loading && (
+
+
+ Loading configuration...
+
+ )}
+
+ {error && (
+
+
+ )}
+
+ {config && !loading && (
+
+
+
+
+
+
+
+ Configuration Error
+{error}
+ {error.includes('video_format') && ( ++ Note: The video format settings are displayed with default values. + You can still modify and save the configuration, but the backend may need to be updated + to fully support MP4 format settings. +
+ )} +
+ {/* System Information (Read-Only) */}
+
+ )}
+
+
+
+ {/* Auto-Recording Settings (Read-Only) */}
+ System Information
+
+
+
+
+
+
+
+ {config.name}
+
+
+
+ {config.machine_topic}
+
+
+
+ {config.storage_path}
+
+
+
+
+
+ {config.enabled ? 'Enabled' : 'Disabled'}
+
+
+
+
+
+ {/* Basic Settings */}
+ Auto-Recording Settings
+
+
+
+
+
+
+
+
+
+ {config.auto_start_recording_enabled ? 'Enabled' : 'Disabled'}
+
+
+
+
+
+ {config.auto_recording_max_retries}
+
+
+
+ {config.auto_recording_retry_delay_seconds}s
+ Auto-recording settings are configured in the system configuration file
+
+
+
+ {/* Image Quality Settings */}
+ Basic Settings
+
+
+
+
+ updateSetting('exposure_ms', parseFloat(e.target.value))}
+ className="w-full"
+ />
+
+
+
+ 0.1ms
+ 10ms
+
+
+
+ updateSetting('gain', parseFloat(e.target.value))}
+ className="w-full"
+ />
+
+
+
+ 0
+ 10
+
+
+
+ updateSetting('target_fps', parseInt(e.target.value))}
+ className="w-full"
+ />
+
+
+ 0 (Max)
+ 30
+
+
+
+
+ {/* Color Settings */}
+ Image Quality
+
+
+
+
+ updateSetting('sharpness', parseInt(e.target.value))}
+ className="w-full"
+ />
+
+
+
+ 0
+ 200
+
+
+
+ updateSetting('contrast', parseInt(e.target.value))}
+ className="w-full"
+ />
+
+
+
+ 0
+ 200
+
+
+
+ updateSetting('saturation', parseInt(e.target.value))}
+ className="w-full"
+ />
+
+
+
+ 0
+ 200
+
+
+
+ updateSetting('gamma', parseInt(e.target.value))}
+ className="w-full"
+ />
+
+
+ 0
+ 300
+
+
+
+
+ {/* White Balance RGB Gains */}
+ Color Settings
+
+
+
+
+
+
+
+
+ updateSetting('color_temperature_preset', parseInt(e.target.value))}
+ className="w-full"
+ />
+
+
+ 0 (Auto)
+ 10
+
+
+
+
+ {/* Advanced Settings */}
+ White Balance RGB Gains
+
+
+
+
+ updateSetting('wb_red_gain', parseFloat(e.target.value))}
+ className="w-full"
+ />
+
+
+
+ 0.00
+ 3.99
+
+
+
+ updateSetting('wb_green_gain', parseFloat(e.target.value))}
+ className="w-full"
+ />
+
+
+
+ 0.00
+ 3.99
+
+
+
+ updateSetting('wb_blue_gain', parseFloat(e.target.value))}
+ className="w-full"
+ />
+
+
+ 0.00
+ 3.99
+
+ Manual white balance gains (only effective when Auto White Balance is disabled)
+
+
+
+ {/* HDR Settings */}
+ Advanced Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Requires restart to apply
+
+
+
+ Requires restart to apply
+
+
+
+ {/* Video Recording Settings (Read-Only) */}
+ HDR Settings
+
+
+
+
+
+
+
+
+ updateSetting('hdr_gain_mode', parseInt(e.target.value))}
+ className="w-full"
+ disabled={!config.hdr_enabled}
+ />
+
+
+ 0
+ 3
+
+
+
+
+
+
+ {/* Information */}
+ Video Recording Settings
+
+
+
+
+
+
+
+
+
+
+ {config.video_format?.toUpperCase() || 'MP4'}
+
+ Current recording format
+
+
+
+
+
+ {config.video_codec?.toUpperCase() || 'MP4V'}
+
+ Compression codec
+
+
+
+
+ {config.video_quality || 95}%
+
+ Recording quality
+
+
+
+
+
+
+
+
+
+ Video Format Information
+
+
+ Video recording settings are configured in the system configuration file and require a service restart to modify.
+Current benefits: MP4 format provides ~40% smaller file sizes and better web compatibility than AVI.
+
+
+
+
+
+
+
+
+
+ Configuration Notes
+
+
+ -
+
- Real-time settings: Exposure, gain, image quality, white balance - apply immediately +
- System settings: Video format, noise reduction, auto-recording - configured in system files +
- Performance: HDR mode may impact frame rate when enabled +
- White balance: RGB gains only effective when auto white balance is disabled +
+
+ )}
+
+
+
+ {hasChanges && (
+
+ You have unsaved changes
+
+ )}
+
+
+ {hasChanges && (
+
+ )}
+
+
+
+
+
+
+ )
+}
+
diff --git a/vision-system-remote/src/hooks/useWebSocket.ts b/vision-system-remote/src/hooks/useWebSocket.ts
new file mode 100644
index 0000000..62fc228
--- /dev/null
+++ b/vision-system-remote/src/hooks/useWebSocket.ts
@@ -0,0 +1,124 @@
+import { useEffect, useRef, useState, useCallback } from 'react'
+
+// WebSocket message types from the API
+export interface WebSocketEvent {
+ type: 'event'
+ event_type: string
+ source: string
+ data: any
+ timestamp: string
+}
+
+type EventHandler = (event: WebSocketEvent) => void
+
+export function useWebSocket(url: string, options?: { enabled?: boolean }) {
+ const [isConnected, setIsConnected] = useState(false)
+ const [reconnectAttempts, setReconnectAttempts] = useState(0)
+ const wsRef = useRef e.stopPropagation()}>
+ {/* Close Button */}
+
+
+
+
+ {/* Header */}
+
+
+
+
+ {/* Content */}
+ + Camera Preview: {cameraName} +
+
+ {loading && (
+
+
+ {/* Footer */}
+
+
+ )}
+
+ {error && (
+
+
+
+ Starting camera stream...
+
+
+ )}
+
+ {streaming && !loading && !error && (
+
+
+
+
+
+
+
+ Stream Error
+
+
+ {error}
+
+
+
+
+ ![{`Live]()
setError('Failed to load camera stream')}
+ />
+
+ )}
+
+
+
+ {streaming && (
+
+
+
+
+ Live Stream Active
+
+ )}
+
+
+ )
+}
+
diff --git a/vision-system-remote/src/widgets/MqttStatusWidget.tsx b/vision-system-remote/src/widgets/MqttStatusWidget.tsx
new file mode 100644
index 0000000..489ed4a
--- /dev/null
+++ b/vision-system-remote/src/widgets/MqttStatusWidget.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { StatusWidget } from './StatusWidget'
+import type { SystemStatus } from '../services/api'
+
+interface MqttStatusWidgetProps {
+ systemStatus: SystemStatus | null
+}
+
+export const MqttStatusWidget: React.FC
+
+
+
+
+
+
+ {cameraCount} Cameras
+
+
+
+ Devices
+ {machineCount} Machines
+
+
+ )
+}
+
diff --git a/vision-system-remote/src/widgets/StatusWidget.tsx b/vision-system-remote/src/widgets/StatusWidget.tsx
new file mode 100644
index 0000000..11ab377
--- /dev/null
+++ b/vision-system-remote/src/widgets/StatusWidget.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+
+interface StatusWidgetProps {
+ title: string
+ status: boolean
+ statusText?: string
+ subtitle?: string
+ icon?: React.ReactNode
+ className?: string
+}
+
+export const StatusWidget: React.FC
+
+
+
+
+
+
+ {active} Active
+
+
+
+ Recordings
+ Total: {total}
+
+
+ )
+}
+
diff --git a/vision-system-remote/src/widgets/SystemHealthWidget.tsx b/vision-system-remote/src/widgets/SystemHealthWidget.tsx
new file mode 100644
index 0000000..ffe7315
--- /dev/null
+++ b/vision-system-remote/src/widgets/SystemHealthWidget.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { StatusWidget } from './StatusWidget'
+import { formatUptime } from '../services/api'
+import type { SystemStatus } from '../services/api'
+
+interface SystemHealthWidgetProps {
+ systemStatus: SystemStatus | null
+}
+
+export const SystemHealthWidget: React.FC
+
+
+
+
+ {icon &&
+ {icon}
}
+
+
+
+ {statusText || (status ? 'Online' : 'Offline')}
+
+
+
+ {title}
+ {subtitle && (
+ {subtitle}
+ )}
+