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.
OdomMap is a browser-based tool that overlays competition field images and lets you:
- 📏 Click to draw measurement lines across the field
- 🔄 Instantly calculate wheel rotations and degrees for any path
- 🧭 Use Odometry Mode to track X/Y position relative to an origin point
- 🛣️ Use Route Mode to plan and save full competition paths
- 📐 Visualize right-triangle breakdowns of diagonal paths
- 🗓️ Switch between competition years (2023–2026) and categories
No installation required. Just a modern web browser:
| Browser | Support |
|---|---|
| 🟢 Chrome | ✅ Recommended |
| 🟢 Firefox | ✅ Supported |
| 🟢 Edge | ✅ Supported |
| 🟡 Safari |
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/
- Clone or download this repository
- Place your field images inside
GameField/<year>/as<Category>.png - Open
OdomMap.htmldirectly in your browser
⚡ No server needed — it runs entirely client-side!
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 |
| 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 |
| X-axis component (mm) | |
| Y-axis component (mm) |
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 helps you plan and visualize robot position relative to a custom origin point.
- Check ✅ Odometry Mode in the sidebar
- Click on the field to place your origin (0, 0) — this is where your robot starts
- 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.
| Value | Meaning |
|---|---|
| X | Horizontal distance from origin (mm) |
| Y | Vertical distance from origin (mm, upward positive) |
| Angle | Direction from origin (°) |
Route Mode lets you plan, save, and replay your robot's full competition path on the field map.
- Select Route Mode from the mode selector
- Click on the field to add sequential waypoints along your planned route
- Use Save Route to store your path for future reference
- Load a saved route to overlay it on the field during practice or competition review
| 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.
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
| 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) |
| 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) |
Contributions are welcome! To contribute:
- 🍴 Fork this repository
- 🌿 Create a new branch:
git checkout -b feature/your-feature - 💾 Commit your changes:
git commit -m "Add your feature" - 📤 Push to the branch:
git push origin feature/your-feature - 🔃 Open a Pull Request
Please keep code clean and well-commented. New field images should follow the existing GameField/<year>/<Category>.png naming convention.
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!