import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Progress } from '@/components/ui/progress'
import { Button } from '@/components/ui/button'
import { Terminal, Cpu, Wifi, Database, Settings, Play, Square } from 'lucide-react'
export default function ROSIntegrationPage() {
return (
<div className="container mx-auto px-6 py-8 max-w-7xl">
<div className="space-y-8">
{/* Header */}
<div className="text-center space-y-4">
<div className="flex items-center justify-center space-x-3">
<Terminal className="h-12 w-12 text-primary" />
<h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-green-600 bg-clip-text text-transparent">
ROS Integration
</h1>
</div>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
Complete ROS 1 Noetic and ROS 2 integration for physical and virtual robotics platforms
</p>
<div className="flex items-center justify-center space-x-4">
<Badge variant="secondary" className="px-3 py-1">
<Terminal className="h-3 w-3 mr-1" />
ROS 1 Noetic
</Badge>
<Badge variant="outline" className="px-3 py-1">
<Play className="h-3 w-3 mr-1" />
ROS 2 Humble
</Badge>
<Badge variant="outline" className="px-3 py-1">
<Wifi className="h-3 w-3 mr-1" />
rosbridge_suite
</Badge>
</div>
</div>
{/* ROS Versions */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Terminal className="h-5 w-5 text-green-500" />
<span>ROS 1 Noetic</span>
</CardTitle>
<CardDescription>Current production deployment</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>Implementation</span>
<span className="text-green-600">95%</span>
</div>
<Progress value={95} className="h-2" />
</div>
<div className="space-y-2 text-sm">
<h4 className="font-semibold">Key Features</h4>
<ul className="text-muted-foreground space-y-1">
<li>• Complete Scout Mini driver</li>
<li>• Navigation stack integration</li>
<li>• SLAM and localization</li>
<li>• MoveIt! motion planning</li>
</ul>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Play className="h-5 w-5 text-blue-500" />
<span>ROS 2 Humble</span>
</CardTitle>
<CardDescription>Next-generation development</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span>Implementation</span>
<span className="text-yellow-600">60%</span>
</div>
<Progress value={60} className="h-2" />
</div>
<div className="space-y-2 text-sm">
<h4 className="font-semibold">Migration Features</h4>
<ul className="text-muted-foreground space-y-1">
<li>• DDS communication layer</li>
<li>• Lifecycle management</li>
<li>• Real-time capabilities</li>
<li>• Security enhancements</li>
</ul>
</div>
</CardContent>
</Card>
</div>
{/* Technical Implementation */}
<Tabs defaultValue="architecture" className="w-full">
<TabsList className="grid w-full grid-cols-4">
<TabsTrigger value="architecture">Architecture</TabsTrigger>
<TabsTrigger value="packages">Packages</TabsTrigger>
<TabsTrigger value="topics">Topics</TabsTrigger>
<TabsTrigger value="services">Services</TabsTrigger>
</TabsList>
<TabsContent value="architecture" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>System Architecture</CardTitle>
<CardDescription>ROS integration with physical and virtual robots</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-semibold">Physical Robot Stack</h4>
<div className="space-y-2 text-sm">
<div className="flex items-center space-x-2">
<Cpu className="h-4 w-4 text-green-500" />
<span>Hardware Abstraction Layer</span>
</div>
<div className="flex items-center space-x-2">
<Database className="h-4 w-4 text-blue-500" />
<span>Device Drivers</span>
</div>
<div className="flex items-center space-x-2">
<Settings className="h-4 w-4 text-purple-500" />
<span>State Estimation</span>
</div>
<div className="flex items-center space-x-2">
<Terminal className="h-4 w-4 text-orange-500" />
<span>Control Loops</span>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Virtual Robot Stack</h4>
<div className="space-y-2 text-sm">
<div className="flex items-center space-x-2">
<Play className="h-4 w-4 text-green-500" />
<span>Unity Simulation</span>
</div>
<div className="flex items-center space-x-2">
<Wifi className="h-4 w-4 text-blue-500" />
<span>rosbridge_suite</span>
</div>
<div className="flex items-center space-x-2">
<Terminal className="h-4 w-4 text-purple-500" />
<span>Topic Bridging</span>
</div>
<div className="flex items-center space-x-2">
<Square className="h-4 w-4 text-orange-500" />
<span>State Synchronization</span>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">rosbridge_suite Integration</h4>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="text-center p-4 border rounded-lg">
<div className="font-semibold text-sm">WebSocket Bridge</div>
<div className="text-xs text-muted-foreground">JSON/ROS conversion</div>
</div>
<div className="text-center p-4 border rounded-lg">
<div className="font-semibold text-sm">Topic Publishing</div>
<div className="text-xs text-muted-foreground">Real-time data streams</div>
</div>
<div className="text-center p-4 border rounded-lg">
<div className="font-semibold text-sm">Service Calls</div>
<div className="text-xs text-muted-foreground">RPC over WebSocket</div>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="packages" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>ROS Packages</CardTitle>
<CardDescription>Custom and standard ROS packages in use</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-semibold">Core Packages</h4>
<div className="space-y-2">
<Badge variant="secondary">scout_description</Badge>
<Badge variant="secondary">scout_control</Badge>
<Badge variant="secondary">scout_navigation</Badge>
<Badge variant="secondary">scout_sensors</Badge>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Dependencies</h4>
<div className="space-y-2">
<Badge variant="outline">rosbridge_suite</Badge>
<Badge variant="outline">navigation</Badge>
<Badge variant="outline">slam_gmapping</Badge>
<Badge variant="outline">move_base</Badge>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Package Structure</h4>
<div className="font-mono text-sm bg-muted p-4 rounded-lg">
<div>scout_robotics/</div>
<div>├── scout_description/</div>
<div>│ ├── urdf/</div>
<div>│ ├── meshes/</div>
<div>│ └── launch/</div>
<div>├── scout_control/</div>
<div>│ ├── src/</div>
<div>│ ├── include/</div>
<div>│ └── config/</div>
<div>└── scout_navigation/</div>
<div> ├── maps/</div>
<div> ├── params/</div>
<div> └── launch/</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="topics" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>ROS Topics</CardTitle>
<CardDescription>Data streams and message types</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-semibold">Sensor Topics</h4>
<div className="space-y-2 text-sm font-mono">
<div className="flex justify-between">
<span>/scout/camera/image_raw</span>
<Badge variant="outline" className="text-xs">sensor_msgs/Image</Badge>
</div>
<div className="flex justify-between">
<span>/scout/imu/data</span>
<Badge variant="outline" className="text-xs">sensor_msgs/Imu</Badge>
</div>
<div className="flex justify-between">
<span>/scout/odom</span>
<Badge variant="outline" className="text-xs">nav_msgs/Odometry</Badge>
</div>
<div className="flex justify-between">
<span>/scout/laser/scan</span>
<Badge variant="outline" className="text-xs">sensor_msgs/LaserScan</Badge>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Control Topics</h4>
<div className="space-y-2 text-sm font-mono">
<div className="flex justify-between">
<span>/scout/cmd_vel</span>
<Badge variant="outline" className="text-xs">geometry_msgs/Twist</Badge>
</div>
<div className="flex justify-between">
<span>/scout/joint_states</span>
<Badge variant="outline" className="text-xs">sensor_msgs/JointState</Badge>
</div>
<div className="flex justify-between">
<span>/scout/motor_commands</span>
<Badge variant="outline" className="text-xs">std_msgs/Float64MultiArray</Badge>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Topic Monitoring</h4>
<div className="bg-muted p-4 rounded-lg">
<div className="font-mono text-sm space-y-1">
<div># List all topics</div>
<div>$ rostopic list</div>
<div></div>
<div># Monitor specific topic</div>
<div>$ rostopic echo /scout/cmd_vel</div>
<div></div>
<div># Get topic info</div>
<div>$ rostopic info /scout/camera/image_raw</div>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="services" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>ROS Services</CardTitle>
<CardDescription>RPC endpoints for robot control</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-semibold">Navigation Services</h4>
<div className="space-y-2 text-sm">
<div className="font-mono">/move_base/make_plan</div>
<div className="text-muted-foreground">Generate navigation plan</div>
<div className="font-mono">/move_base/clear_costmaps</div>
<div className="text-muted-foreground">Reset obstacle map</div>
<div className="font-mono">/move_base/cancel</div>
<div className="text-muted-foreground">Cancel current goal</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Control Services</h4>
<div className="space-y-2 text-sm">
<div className="font-mono">/scout/emergency_stop</div>
<div className="text-muted-foreground">Immediate stop command</div>
<div className="font-mono">/scout/set_mode</div>
<div className="text-muted-foreground">Change operation mode</div>
<div className="font-mono">/scout/calibrate</div>
<div className="text-muted-foreground">Sensor calibration</div>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Service Calls</h4>
<div className="bg-muted p-4 rounded-lg">
<div className="font-mono text-sm space-y-1">
<div># Call emergency stop</div>
<div>$ rosservice call /scout/emergency_stop "{}"</div>
<div></div>
<div># Set autonomous mode</div>
<div>$ rosservice call /scout/set_mode "mode: 1"</div>
<div></div>
<div># List all services</div>
<div>$ rosservice list</div>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
</Tabs>
{/* Launch Configuration */}
<Card>
<CardHeader>
<CardTitle className="flex items-center space-x-2">
<Play className="h-5 w-5" />
<span>Launch Configuration</span>
</CardTitle>
<CardDescription>ROS launch files and configuration</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<h4 className="font-semibold">Main Launch Files</h4>
<div className="space-y-2 text-sm">
<Button variant="outline" size="sm" className="w-full justify-start">
<Terminal className="h-3 w-3 mr-2" />
scout_bringup.launch
</Button>
<Button variant="outline" size="sm" className="w-full justify-start">
<Terminal className="h-3 w-3 mr-2" />
scout_navigation.launch
</Button>
<Button variant="outline" size="sm" className="w-full justify-start">
<Terminal className="h-3 w-3 mr-2" />
scout_slam.launch
</Button>
<Button variant="outline" size="sm" className="w-full justify-start">
<Terminal className="h-3 w-3 mr-2" />
rosbridge.launch
</Button>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Configuration Files</h4>
<div className="space-y-2 text-sm">
<div className="font-mono bg-muted p-2 rounded">scout_control.yaml</div>
<div className="font-mono bg-muted p-2 rounded">navigation_params.yaml</div>
<div className="font-mono bg-muted p-2 rounded">sensor_config.yaml</div>
<div className="font-mono bg-muted p-2 rounded">rosbridge_config.yaml</div>
</div>
</div>
</div>
<div className="space-y-4">
<h4 className="font-semibold">Quick Start Commands</h4>
<div className="bg-muted p-4 rounded-lg font-mono text-sm space-y-2">
<div># Start basic Scout robot</div>
<div>$ roslaunch scout_robotics scout_bringup.launch</div>
<div></div>
<div># Start with navigation</div>
<div>$ roslaunch scout_robotics scout_navigation.launch</div>
<div></div>
<div># Start SLAM mapping</div>
<div>$ roslaunch scout_robotics scout_slam.launch</div>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
)
}
