[WIP] Add offline-capable scouting system for FRC team

[Copilot]

Implementation Plan for Offline FRC Scouting System

• Create config.js - Define dynamic form fields configuration
• Create index.html - PWA structure with dark mode UI
• Create app.js - Dynamic form generation and QR code logic
• Create qrcode.min.js - Local QR code library (for offline use)
• Create scanner.py - Python backend with OpenCV QR scanning
• Create schema.sql - SQLite database schema
• Create manifest.json - PWA manifest for offline capability
• Create service-worker.js - Service worker for PWA offline support
• Create .gitignore - Exclude database files and Python cache
• Create requirements.txt - Python dependencies
• Test the frontend locally
• Test the backend scanner
• Document the system in README.md

Original prompt

Act as a Senior Software Engineer for a FIRST Robotics Competition (FRC) team. I need you to generate a complete, offline-capable Scouting System.

SYSTEM ARCHITECTURE

1. Frontend (The Scouter): A Progressive Web App (PWA) using vanilla HTML, CSS, and JavaScript. It must be a single-page application that runs completely offline.
2. Data Transfer: The frontend converts match data into a QR Code.
3. Backend (The Master): A Python script using OpenCV to scan the QR codes and save data to a local SQLite database.

CONSTRAINTS & REQUIREMENTS

• No Internet: Do not use CDNs. Assume all JS libraries (like qrcode.js) are local.
• Configurable: The match data fields (e.g., "Auto Balls Scored", "Climb Level") must be generated dynamically based on a JSON configuration object, not hard-coded HTML.
• Dark Mode: The UI must be high-contrast dark mode for battery saving.

REQUIRED FILES TO GENERATE

Please generate the code for the following files:

1. config.js:

   • Export a JSON object defining the inputs (ID, Label, Type: 'counter'|'checkbox'|'dropdown').
   • Include standard FRC fields: Match Number, Team Number, Alliance (Red/Blue), Scouter Name.

2. index.html & app.js:

   • Import config.js.
   • Dynamically render the form based on the config.
   • For 'counter' types, create large "+" and "-" buttons.
   • Submit Logic: On submit, serialize the form data into a compressed JSON string and render it as a QR Code (assume a generateQR function exists).
   • Local Storage: Save the data to localStorage as a backup history.

3. scanner.py:

   • Use cv2 (OpenCV) and pyzbar to read QR codes via the webcam.
   • When a QR is detected:
     a. Decode the JSON.
     b. Validate the keys match the expected schema.
     c. Insert/Update the record into a scouting_data.db SQLite database.
   • Provide visual feedback in the camera window (e.g., Green box around QR code when saved).

4. schema.sql:

   • The SQL query to create the table that matches the config.js fields.

EXECUTION

Start by generating the config.js and index.html structure first, then move to the Python backend. Ensure variable names are consistent across all files.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.