OdomMap

🗺️ OdomMap

**A visual field distance calculator and odometry assistant built for WRO.** Measure paths, calculate wheel rotations, and plan robot movement — all on an interactive field map.

📸 Overview

OdomMap is a browser-based tool that overlays competition field images and lets you:

🚀 Getting Started

✅ Prerequisites

No installation required. Just a modern web browser:

Browser Support
🟢 Chrome ✅ Recommended
🟢 Firefox ✅ Supported
🟢 Edge ✅ Supported
🟡 Safari ⚠️ May vary

📂 File Structure

OdomMap/
├── OdomMap.html               # Main application file
├── iconrb.png                 # RobotRizz logo (header icon)
└── GameField/                 # Field image assets
    ├── 2026/
    │   ├── Elementary.png
    │   ├── Junior.png
    │   ├── Senior.png
    │   └── RoboSports.png
    ├── 2025/
    ├── 2024/
    └── 2023/

▶️ Running the App

  1. Clone or download this repository
  2. Place your field images inside GameField/<year>/ as <Category>.png
  3. Open OdomMap.html directly in your browser

⚡ No server needed — it runs entirely client-side!

🎮 How to Use

📏 Normal Mode — Line Distance & Measurement

The default mode for measuring distances and analyzing paths on the field.

Features at a glance:

Feature Description
📏 Line Distance Click two points to measure the straight-line distance between them in mm
📐 Angle of Change See the angle between consecutive lines to plan turns and heading changes
📍 Measurement from Edge Measure distance relative to the nearest field edge for precise positioning
🔲 Show Grid Toggle a grid overlay on the field for visual reference and alignment
📐 Right Triangle View Break down any diagonal line into its horizontal (X) and vertical (Y) components visually

How to draw lines:

Step Action
1️⃣ Click on the canvas to set the start point
2️⃣ Move your mouse — live measurements appear in the sidebar
3️⃣ Click again to lock the end point
4️⃣ A new line is saved; repeat to draw more
🖱️ Right-click Cancels the current line

🔢 Measurements Shown

Value Description
📏 Distance Straight-line distance in mm
📐 Angle Absolute angle from horizontal (°)
🔄 Angle of Change Turn angle between the previous and current line segment (°)
📍 Distance from Edge Distance to the nearest field boundary (mm)
🔄 Wheel Rotations Full rotations needed for your wheel diameter
🔵 Wheel Degrees Motor degrees needed
↔️ Horizontal X-axis component (mm)
↕️ Vertical Y-axis component (mm)

⚙️ Wheel Diameter

Enter your robot’s wheel diameter (in mm) in the top control bar.
Default: 62.4 mm

🧮 The tool recalculates wheel rotations and degrees automatically.

🧭 Odometry Mode

Odometry Mode helps you plan and visualize robot position relative to a custom origin point.

How to activate:

  1. Check ✅ Odometry Mode in the sidebar
  2. Click on the field to place your origin (0, 0) — this is where your robot starts
  3. Use Add Point or Add Line to mark robot positions and paths

🟡 The origin acts as your robot’s (0, 0) coordinate. All X/Y positions are measured relative to it.

Odometry Sidebar shows:

Value Meaning
X Horizontal distance from origin (mm)
Y Vertical distance from origin (mm, upward positive)
Angle Direction from origin (°)

🛣️ Route Mode

Route Mode lets you plan, save, and replay your robot’s full competition path on the field map.

How to activate:

  1. Select Route Mode from the mode selector
  2. Click on the field to add sequential waypoints along your planned route
  3. Use Save Route to store your path for future reference
  4. Load a saved route to overlay it on the field during practice or competition review

Route Mode features:

Feature Description
📍 Waypoints Click to place ordered stops along the robot’s planned path
💾 Save Route Export and store your drawn route to reload later
📂 Load Route Reload a previously saved route and display it on the field
🔁 Replay Path Visualize the full route sequence on the field map

🏁 Useful for competition day — plan your route during practice and load it up before your run.

🏟️ Field Selection

Use the dropdowns in the header to choose:

Selector Options
📅 Year 2023, 2024, 2025, 2026
🏆 Category Elementary, Junior, Senior, RoboSports

Field images load from GameField/<year>/<category>.png. If an image is missing, the tool gracefully falls back to a grid-only view.

Field dimensions: 2362 mm × 1143 mm
Max robot size: 250 mm × 250 mm

🛠️ Toolbar Reference

Button Action
🆕 New Line Resets the current line drawing
🗑️ Delete Last Removes the most recently drawn line
🧹 Clear All Clears all lines (and odometry/route data in their respective modes)

🎨 Display Options

Toggle Effect
🔲 Show Grid Toggles the grid overlay on the field canvas
🔵 Show Right Triangle Displays horizontal/vertical leg breakdown of each line
📡 Odometry Mode Enables origin-relative X/Y coordinate tracking
🛣️ Route Mode Enables waypoint-based route planning and saving
🔆 Grid Opacity Slider Adjusts the grid overlay brightness (Odometry Mode only)

🤝 Contributing

Contributions are welcome! To contribute:

  1. 🍴 Fork this repository
  2. 🌿 Create a new branch: git checkout -b feature/your-feature
  3. 💾 Commit your changes: git commit -m "Add your feature"
  4. 📤 Push to the branch: git push origin feature/your-feature
  5. 🔃 Open a Pull Request

Please keep code clean and well-commented. New field images should follow the existing GameField/<year>/<Category>.png naming convention.

📜 License

This project is licensed under the MIT License — see the LICENSE file for full details.

⭐ If this tool helped your team, give it a star!
This site is open source. Improve this page.