Getting Started
1. Upload a battle map image
2. Adjust grid size to match your map
3. Use calibration if your map has a printed grid
4. Add tokens from presets or upload custom images
5. Enable fog of war and start revealing areas
Navigation
Pan: Space+Drag or Middle Mouse Button
Zoom: Mouse Wheel
Pinch Zoom: Two fingers on touchscreen
Center/Fit: Use buttons in Map & Grid section
Tokens
Add: Choose preset or upload image, then click "Add Token"
Move: Click and drag
Rotate: Select token, press R
Resize: Select token, press +/- keys
Delete: Select token, press Delete/Backspace
Right-click: Context menu (rename, duplicate, etc.)
Snap to Grid: Enable checkbox for auto-alignment
Fog of War
Enable: Click "Fog: Off" to turn on
Reveal Mode: Erase fog to show areas
Cover Mode: Paint fog to hide areas
Brush: Shift+Drag (desktop) or "Brush Mode" button (mobile)
Brush Size: Adjust with Brush input field
Clear All: Removes all fog and shapes
Fog Shapes
Types: Rectangle, Square, Circle
Modes:
• Cover - Hides the map (default: black fog)
• Reveal - Cuts through cover fog to show map underneath
Color: Pick any color (default: black for fog effect)
Size: Set in grid cells (1-20) before adding
Add: Configure settings, click "Add Shape"
Move: Click and drag shape interior
Resize (Keyboard): Select shape, press +/- keys
Resize (Mouse):
• Rectangles/Squares - Drag corner or edge handles
• Circles - Drag the blue handle on the right edge
Delete: Select shape, press Delete or click "Delete Shape"
Layering: Reveal shapes cut through all cover shapes
Saving: Use Ctrl+S or "Save Session" button
Perfect for fog of war! Cover the map, then use reveal circles for spell areas or line-of-sight!
Measurement
Quick Measure:
• Desktop: Hold Alt, click and drag
• Mobile: Toggle "Measure" button
Shows distance in feet and grid cells
Tip: Use reveal circle fog shapes for persistent spell areas and ranges!
Grid Calibration
When to use: Your map has a printed grid
How: Enter number of cells, click "Start Calibration"
Click two grid intersections that distance apart
Grid Origin: Set (0,0) point for alignment
Snap to Map: Align grid to clicked intersection
Saving & Loading
Manual Save: Click "Save Session" or press Ctrl+S
When to Save: After placing tokens, shapes, or adjusting fog
Export JSON: Download your session as file
Import JSON: Load a saved session file
Reset: Clear everything and start fresh
Note: Manual saves prevent slowdown during grid adjustments!
Tips & Tricks
• Fog of War: Cover entire map with black fog, then add reveal circles for line-of-sight
• Spell Areas: Use reveal circles for Fireball, Darkness, or other area effects
• Colored Zones: Use colored cover shapes to mark traps, difficult terrain, or auras
• Layering: Reveal shapes always cut through cover - perfect for windows in walls!
• Circle Resize: Drag the blue handle to adjust spell/vision radius dynamically
• Combine brush and shapes for precise fog control
• Export your session before major changes
• Grid size affects token and shape sizing
• On mobile: Use toggle buttons for brush/measure modes