Preskoči na sadržaj

Seat Map Configuration Guide

This guide documents how administrators create sector seat maps for the HNS Ticketing System using the visual canvas editor.

Overview

The HNS Ticketing System uses a visual canvas-based approach for seat map creation. Administrators draw seat layouts using mouse tools rather than importing external files. This approach provides:

  • Flexibility - Handles any seat arrangement (curved, irregular, gaps)
  • Visual feedback - See exactly what's being created
  • No dependencies - No CAD software or file imports needed
  • Consistency - Standard workflow for all stadiums

Reference Materials

Stadium plans are available in raw-notes/Stadium plans/ as visual reference only. These files help administrators understand physical layouts when recreating seat maps digitally:

Stadium Reference Files Notes
Poljud (Split) Numeracija Poljud 2.11.2024.pdf Complete sector numbering
Opus Arena (Osijek) OPUS seating plan/ directory Multiple sector images
Rujevica (Rijeka) Rujevica Rijeka/ directory Sector layout images
Varaždin Varazdin sjedala/ directory Seat configuration data
Maksimir (Zagreb) TBD To be provided

Reference Only

These files are not imported into the system. They serve as visual guides while administrators manually create seat maps using the canvas editor.

Workflow: Creating a Seat Map

Step 1: Create Sector in Stadium Template

Before creating a seat map, ensure the sector exists:

  1. Navigate to Admin Portal → Stadiums
  2. Select the stadium template
  3. Click Add Sector
  4. Enter sector details:
    • Name: e.g., "Zapad Dolje" (West Lower)
    • Code: e.g., "ZD" (short identifier)
    • Type: Standard, VIP, Accessibility, or Standing
  5. Save the sector

Step 2: Open Seat Map Editor

  1. In the sector list, click Design Seat Map for the target sector
  2. The canvas editor opens with:
    • Empty grid (for new sectors)
    • Existing layout (if seat map exists)

Step 3: Configure Grid Dimensions

Set the canvas size based on the physical sector:

  1. Click Grid Settings (gear icon)
  2. Enter dimensions:
    • Rows: Number of rows in the sector (e.g., 30)
    • Max Seats per Row: Maximum seats in any row (e.g., 50)
  3. Click Apply

Estimating Dimensions

If unsure, start larger than needed. You can always leave areas empty. The system only creates seats where you draw them.

Step 4: Draw Seats

Use the Draw Tool (pencil icon, labeled "Draw") to add seats:

Action Result
Click on cell Add single seat
Click + drag Add multiple seats in a line
Shift + drag Add rectangular block of seats

Seats appear as colored squares on the grid.

Capacity Enforcement

The editor tracks the current seat count against the sector's configured capacity. When the seat count reaches the capacity limit, the Draw and Fill tools are disabled and a warning notification is shown. To add more seats, either remove existing seats or increase the sector capacity first.

Step 4b: Fill Rectangular Areas

Use the Fill Tool (grid icon, labeled "Fill") to quickly fill rectangular areas with seats:

Action Result
Click + drag Select rectangular area to fill with seats

The Fill tool is useful for rapidly creating large blocks of seats. Click at one corner and drag to the opposite corner to fill the entire rectangle. Empty cells within the rectangle are filled with standard seats; existing seats are not overwritten.

Step 5: Create Gaps (Staircases, Aisles, Walls)

Use the Erase Tool (eraser icon, labeled "Erase") to remove seats:

Action Result
Click on seat Remove single seat
Click + drag Remove multiple seats along path
Shift + drag Remove rectangular block of seats

Common gap patterns:

  • Vertical staircase: Erase a column of seats
  • Horizontal aisle: Erase a row of seats
  • Curved wall: Erase seats following the curve
  • Irregular boundary: Erase seats at sector edges

Creating a Staircase

  1. Select Erase tool
  2. Click on seat in row 1, column 15
  3. Drag down to row 30, column 15
  4. Release - vertical gap created

Step 6: Mark Special Seats

Use the Select Tool (labeled "Select") and Properties Panel to classify seats:

  1. Select seats using one of:
    • Click individual seat
    • Shift+click to add to selection
    • Drag to create selection box
  2. In Properties Panel, choose seat type:
    • Standard - Normal sellable seat (default)
    • Technical - Camera, media, security (not sellable)
    • Accessibility - Wheelchair accessible
    • Companion - Next to accessibility seat

Technical Seats

Technical seats are never sold. Mark camera positions, security posts, and media areas as Technical.

Step 7: Configure Row Labels

In Grid Settings, configure how rows are labeled:

Option Example Use Case
Alphabetic A, B, C, ... Z, AA, AB Common in Croatia
Numeric 1, 2, 3, ... 30 Simple numbered rows
Custom Enter each label Complex/legacy patterns

Step 8: Configure Seat Numbering

Choose numbering direction per sector:

  • LTR (Left-to-Right): Seats numbered 1, 2, 3... from left
  • RTL (Right-to-Left): Seats numbered 1, 2, 3... from right

The system auto-generates seat numbers based on:

  1. Grid position (left-to-right within drawn seats)
  2. Numbering direction setting
  3. Gaps automatically skip numbers

Numbering with Gap

Row with seats at columns 0-10 and 15-25 (gap at 11-14): - LTR: Seats 1-11 (left block), 12-22 (right block) - Gap doesn't consume numbers

Step 9: Configure Snake Algorithm

For automatic seat assignment, configure the snake algorithm:

  1. Click Snake Settings tab
  2. Configure:
    • Best Row: Which row is "best" (1 = closest to field)
    • Traversal: TOP_TO_BOTTOM or BOTTOM_TO_TOP
    • Within Row: CENTER_OUTWARD, LEFT_TO_RIGHT, or RIGHT_TO_LEFT
Setting Typical Value Explanation
Best Row 1 Row 1 is closest to field
Traversal BOTTOM_TO_TOP Fill from field toward top
Within Row CENTER_OUTWARD Best seats in center of row

Step 10: Save and Generate Seats

  1. Click Save to store the seat map JSON
  2. Review the preview showing:
    • Total seats
    • By type breakdown
    • Row/seat number preview
  3. Click Generate Seats to create database records

Regeneration Warning

If seats exist with sold tickets, regeneration will fail. You must handle existing tickets before modifying the seat map.

Handling Complex Layouts

Curved Sections

Many stadium sectors have curved rows following the bowl shape:

  1. Draw the longest row first (usually the back row)
  2. For each row forward, draw fewer seats on each end
  3. Use the reference image to match the curve

Variable Row Lengths

Not all rows have the same number of seats:

  1. Draw each row individually
  2. Start and end at the correct positions
  3. The system handles different row lengths automatically

Subsectors

Some sectors are divided into subsections (e.g., A1, A2, A3):

  1. Create one seat map for the entire sector
  2. Use the subsector grouping in snake config to define boundaries
  3. Subsectors are visual groupings, not separate database entities

Verification

After creating a seat map:

  1. Visual Check: Zoom out and verify overall shape matches reference
  2. Count Check: Compare total seats with official capacity
  3. Gap Check: Verify staircases/aisles are in correct positions
  4. Type Check: Confirm technical seats are marked (camera positions, etc.)
  5. Generation Test: Generate seats and verify count

Troubleshooting

"Seat map already exists" Error

The sector already has a seat map. Options:

  1. Edit existing map (use PUT endpoint)
  2. Delete existing map first (if no seats generated)

"Cannot modify - tickets sold" Error

Tickets exist for seats in this sector:

  1. Transfer affected tickets to different sector
  2. Wait for refund/cancellation window
  3. Contact support for manual intervention

Seats not appearing at correct positions

Check:

  1. Grid dimensions match what you expect
  2. Row labels are configured correctly
  3. Browser zoom is at 100%

Performance issues with large sectors

For sectors with 5000+ seats:

  1. Use Chrome or Firefox (better canvas performance)
  2. Avoid Safari if possible
  3. Disable other browser extensions
  4. Use keyboard shortcuts instead of toolbar clicks

Best Practices

  1. Start with reference - Always have the stadium plan visible while creating
  2. Save frequently - Use Ctrl+S or click Save regularly
  3. Work in sections - For large sectors, complete one area at a time
  4. Label as you go - Mark technical seats immediately when drawn
  5. Test generation - Use preview before final generation
  6. Document deviations - If actual layout differs from reference, note why

Last Updated: February 2026