Skip to content

DEMO_GUIDE.md

Latest commit

 

History

History
277 lines (215 loc) · 10.4 KB

DEMO_GUIDE.md

File metadata and controls

277 lines (215 loc) · 10.4 KB

🎬 Vision Logistics Demo Guide

Complete guide to running impressive demonstrations of the Vision Logistics tracking system

This guide covers everything you need to create compelling demonstrations of warehouse logistics tracking with live animated data, perfect for stakeholder presentations, product demos, and system showcases.

🚀 Quick Demo Setup (2 minutes)

Step 1: Start the System

# Clone the repository
git clone <repository-url>
cd vision-logistics

# Start all services with automatic setup
npm start

Wait for the message: "✅ System is ready!"

Step 2: Open the Demo

  1. Open your browser: http://localhost:3000
  2. Wait 10 seconds for data to load
  3. Click "Refresh Now" to see immediate animation updates

Step 3: Show the Magic ✨

Your demo screen now displays:

  • Live animated heatmap with moving objects
  • Real-time statistics updating continuously
  • Active object tracking with current positions
  • Event log showing live warehouse activity

🎯 Demo Features Overview

🗺️ Interactive Heatmap

  • 20×15 grid visualization representing warehouse floor
  • Color-coded intensity showing dwell time activity
  • Live animation with 4 moving objects:
    • 🚛 Forklift: Horizontal movement (left ↔ right)
    • 👷 Worker: Diagonal movement (corner to corner)
    • 📦 Pallet: Circular/orbital movement
    • 🛒 Cart: Vertical oscillation (up ↔ down)
  • 15-second animation cycles that loop continuously
  • Click any cell for detailed information

📊 Statistics Dashboard

  • Top cells by activity with dwell times
  • Object counts per grid cell
  • Real-time updates every 30 seconds
  • Average, min, max dwell times for analysis

🎯 Active Objects Panel

  • Live object tracking with current positions
  • Synchronized movement matching heatmap animation
  • Object IDs and timestamps for detailed tracking
  • Accumulated dwell times showing total activity

📝 Real-Time Event Log

  • Live event feed at bottom of screen
  • Color-coded events: Enter (green), Exit (red), Move (blue)
  • Object tracking with IDs and grid positions
  • Timestamp data for temporal analysis

🎪 Demo Scenarios

🏭 Scenario 1: Warehouse Operations

Use case: Daily warehouse monitoring What to show:

  1. Point out the forklift moving materials horizontally
  2. Show worker movement through different zones
  3. Highlight pallet storage with circular patterns
  4. Demonstrate cart transport corridors

Key talking points:

  • "Here we can see live forklift movement across the warehouse floor"
  • "The heat intensity shows where objects spend the most time"
  • "Notice how the system tracks individual objects in real-time"

🚚 Scenario 2: Traffic Flow Analysis

Use case: Optimizing warehouse layout What to show:

  1. Heatmap patterns showing high-traffic areas
  2. Movement corridors with vertical cart movement
  3. Storage zones with circular pallet activity
  4. Statistics panel showing top active cells

Key talking points:

  • "Red/orange areas indicate bottlenecks or high-activity zones"
  • "We can identify optimal paths by analyzing movement patterns"
  • "The statistics help quantify operational efficiency"

📈 Scenario 3: Real-Time Monitoring

Use case: Live operational dashboard What to show:

  1. Auto-refresh functionality (30-second cycles)
  2. Event log updates showing live activity
  3. Object tracking with current positions
  4. Click interactions for cell details

Key talking points:

  • "The system updates automatically every 30 seconds"
  • "Each event is logged with precise timestamps"
  • "Managers can click any cell for detailed analysis"

🎮 Interactive Demo Tips

🖱️ Mouse Interactions

  • Click any heatmap cell to see detailed statistics
  • Hover over objects to see tooltips (if available)
  • Use refresh button to see immediate animation updates
  • Scroll through event log to see historical activity

⏱️ Timing Your Demo

  • First 30 seconds: Explain the heatmap and grid system
  • 30-60 seconds: Show animated movement patterns
  • 60-90 seconds: Click on active cells for details
  • 90-120 seconds: Highlight real-time event log
  • 2+ minutes: Discuss business applications

🎯 Key Points to Emphasize

  1. Real-time tracking: "Objects are tracked continuously"
  2. Visual analytics: "Heat patterns show operational insights"
  3. Precise positioning: "20×15 grid provides accurate location data"
  4. Historical data: "System maintains dwell time history"
  5. Scalability: "Supports multiple cameras and collectors"

🛠️ Advanced Demo Setup

🎨 Custom Animation Patterns

If you want to modify the animation patterns, edit the mock API:

# Edit animation parameters
nano mock-api.js

# Restart with changes
npm run system:stop
npm start

Available modifications:

  • Animation speed: Change animationSpeed (default: 15000ms)
  • Movement paths: Modify object path functions
  • Object types: Add new objects with different patterns
  • Intensity levels: Adjust heat intensity calculations

📊 Data Generation Options

# Generate additional background data
curl -X POST http://localhost:3001/simulate-batch \
  -H "Content-Type: application/json" \
  -d '{"camera_ids": ["heatwave-cam"], "frames_per_camera": 50}'

# Quick single frame generation
curl -X POST http://localhost:3001/generate-test-frame \
  -H "Content-Type: application/json" \
  -d '{"camera_id": "heatwave-cam", "object_count": 10}'

🔧 Demo Customization

# Configure refresh intervals
# Edit ui/src/App.tsx, change:
const [refreshInterval, setRefreshInterval] = useState(30000); // 30 seconds

# Adjust animation timing
# Edit mock-api.js, modify:
const animationSpeed = 15000; // 15 second cycles

🎯 Presentation Guidelines

🎤 Demo Script Template

Opening (30 seconds):

"This is our Vision Logistics real-time tracking system. The heatmap shows a 20×15 grid representing our warehouse floor, with colors indicating where objects spend the most time."

Animation Demo (60 seconds):

"Watch this forklift moving horizontally across the warehouse [point to movement]. You can see workers moving diagonally through work zones, and pallets following orbital patterns around storage areas. All of this is happening in real-time."

Interaction Demo (30 seconds):

"I can click on any cell to get detailed statistics [click a cell]. The system shows dwell times, object counts, and activity patterns. The event log at the bottom shows every movement with precise timestamps."

Business Value (30 seconds):

"This data helps optimize warehouse layout, identify bottlenecks, track worker productivity, and ensure efficient material flow. Everything updates automatically every 30 seconds."

📋 Common Questions & Answers

Q: "Is this real data?" A: "This is a simulation with realistic movement patterns. In production, data comes from your camera systems and processes thousands of detections per minute."

Q: "How accurate is the positioning?" A: "The system provides grid-level accuracy. Each cell represents a specific warehouse zone, giving you precise location data for operational analysis."

Q: "Can it handle multiple cameras?" A: "Yes, the system scales to support unlimited cameras and collectors. You can filter data by specific cameras or view aggregate data across all sensors."

Q: "What about false positives?" A: "The system includes human-in-the-loop corrections. Operators can relabel objects, correct cell assignments, and remove false detections."

🚨 Troubleshooting Demo Issues

🔧 Quick Fixes

Issue Solution
Blank heatmap Click "Refresh Now" button
No animation Wait 30 seconds for auto-refresh
Connection errors Run npm run fix-and-start
Slow loading Close other browser tabs
Missing data Check that mock API is running

🆘 Emergency Demo Recovery

If something goes wrong during your demo:

# Nuclear option - restart everything
npm run system:stop
npm start

# Quick restart just the UI
pkill -f "vite"
cd ui && npm run dev

✅ Pre-Demo Checklist

  • All services running (npm run system:health)
  • Browser open to http://localhost:3000
  • Animation visible on heatmap
  • Event log showing recent activity
  • Statistics panel populated
  • Backup browser tab ready
  • Demo script prepared

🎊 Demo Success Metrics

👥 Audience Engagement Indicators

  • Visual attention: Eyes following animated objects
  • Questions about movement: "How does that tracking work?"
  • Technical interest: "What's the grid resolution?"
  • Business curiosity: "How would this help our operations?"

💡 Follow-up Opportunities

  • Custom scenarios: "We could simulate your specific warehouse layout"
  • Integration possibilities: "This works with your existing camera systems"
  • Analytics potential: "Historical data reveals operational insights"
  • Scalability discussion: "System handles enterprise-scale deployments"

📚 Additional Resources

🎯 Next Steps After Demo

🔧 For Technical Audiences

  1. Show the code structure: tree -L 2 vision-logistics/
  2. Demonstrate API endpoints: Live API calls in browser
  3. Explain architecture: Draw data flow on whiteboard
  4. Discuss integration: Camera system requirements

💼 For Business Audiences

  1. ROI discussion: Efficiency gains and cost savings
  2. Implementation timeline: Deployment considerations
  3. Use case mapping: Specific operational benefits
  4. Pilot program: Starting with limited scope

📈 For Stakeholders

  1. Scaling roadmap: Multi-site deployment strategy
  2. Integration plan: Existing system compatibility
  3. Training requirements: User onboarding approach
  4. Success metrics: KPIs and measurement framework

🎬 Ready to deliver an impressive demo? Run npm start and showcase the future of warehouse logistics!