Add constant tags, drag-and-drop positioning, and background image support

[Copilot]

Enables importing predefined AprilTags as fixed constants, interactive repositioning of draggable tags, and custom background images for field visualization.

Changes

Constant Tags from JSON Import

• Import JSON files and select specific tags via checkboxes to lock as constants
• Constant tags rendered in green, non-draggable, labeled with (C)
• Separate state management (constantTags vs tags arrays)

Drag-and-Drop Positioning

• Mouse event handlers (mousedown, mousemove, mouseup) for real-time tag repositioning
• Only draggable tags respond to drag events; constant tags remain fixed
• Visual feedback: cursor changes, color coding (green=constant, blue=draggable, red=selected)

// Scale calculation helpers for maintainability
function getScaleFactors() {
  const scaleX = getDrawableCanvasWidth() / fieldLength;
  const scaleY = getDrawableCanvasHeight() / fieldWidth;
  return { scaleX, scaleY };
}

// Drag handler updates position in real-time
canvas.addEventListener('mousemove', function(e) {
  if (isDragging && draggedTag) {
    const { scaleX, scaleY } = getScaleFactors();
    const padding = getCanvasPadding();
    draggedTag.pose.translation.x = (e.offsetX - dragOffsetX - padding) / scaleX;
    draggedTag.pose.translation.y = fieldWidth - (e.offsetY - dragOffsetY - padding) / scaleY;
    drawField();
  }
});

Background Image Support

• File input for image upload with aspect-ratio-preserving scaling
• Error handling for invalid files
• Tags render on top of background layer

Code Quality

• Extracted magic numbers to named constants (METERS_TO_INCHES, CANVAS_PADDING)
• Helper functions for canvas calculations (getScaleFactors(), getDrawableCanvasWidth())
• Null checks on file inputs
• Comprehensive inline documentation

UI Organization

Reorganized sidebar into logical sections:

• Field Configuration
• Background Image
• Import Constant Tags (with selection interface)
• Add/Edit Draggable Tag
• Import/Export All
• Tags on Field (categorized by type)

Screenshots

UI with new sections:

Draggable tags on canvas:

Complete interface with tags:

Files Changed

• index.html - All feature implementation
• README.md - Usage documentation and feature descriptions
• sample_field.json - Example JSON for testing constant tags import

Original prompt

Enhance the April-Tag-Field-Generator repository with the following features:

1. Constant AprilTags from a JSON file:

   • Enable users to import a JSON file containing predefined AprilTag configurations.
   • Provide an interface where users can select specific AprilTags from the imported JSON file to set them as constants on the field.

2. Drag-and-drop functionality for other AprilTags:

   • Add the ability for users to dynamically drag and position AprilTags on the field using HTML and JavaScript.
   • Ensure draggable AprilTags are visually distinguishable from constant AprilTags.

3. Static background image:

   • Allow a specific background image to be set in the code.
   • Render the constant AprilTags and the drag-and-drop AprilTags on top of the background.

4. Ensure the UI is intuitive and works across common browsers.

5. Add comments to the code for clarity and documentation for the new features.

Update any relevant files, dependencies, or front-end code in the repository as needed to achieve these improvements.

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.