Technical Specifications

Detailed technical information about Piecer pattern editor.

System Requirements

Supported Browsers

Desktop Browsers

Browser	Minimum Version	Recommended
Chrome	90+	Latest
Firefox	88+	Latest
Safari	14+	Latest
Edge	90+	Latest

Mobile Browsers

Browser	Support Level	Notes
Mobile Chrome	Full	Best mobile experience
Mobile Safari	Full	iOS 14+
Mobile Firefox	Full	Android 8+
Samsung Internet	Partial	Some features limited

Hardware Requirements

Minimum Specs

• Processor: Dual-core 1.6 GHz
• RAM: 4 GB
• Display: 1280x720 resolution
• GPU: WebGL compatible
• Storage: 100 MB browser storage
• Internet: 1 Mbps connection

Recommended Specs

• Processor: Quad-core 2.4 GHz+
• RAM: 8 GB+
• Display: 1920x1080 or higher
• GPU: Dedicated graphics with WebGL 2.0
• Storage: 500 MB+ browser storage
• Internet: 5 Mbps+ connection

Browser Features Required

Essential:

• ✓ JavaScript enabled
• ✓ Cookies enabled
• ✓ LocalStorage enabled
• ✓ Canvas API support
• ✓ SVG support

For 3D Mode:

• ✓ WebGL 1.0 or 2.0
• ✓ Hardware acceleration
• ✓ GPU drivers updated

Canvas Specifications

Canvas Limits

Property	Limit	Notes
Zoom Range	1x - 100x	Practical range
Canvas Size	Unlimited	Scrollable infinite canvas
Max Points per Shape	10,000	Performance degradation beyond
Max Shapes per Pattern	1,000	Recommended limit
Max Pattern File Size	50 MB	Storage limit

Coordinate System

• Origin: Top-left corner
• X-Axis: Left to right (positive)
• Y-Axis: Top to bottom (positive)
• Units: Centimeters (internal)
• Precision: 0.1mm (float precision)

Grid System

Grid Levels

Fine Grid

• Metric: 1 cm spacing
• Imperial: 0.25 inch spacing
• Visible: Scale ≥ 11
• Snap Target: Moving, editing, bezier handles

Medium Grid

• Metric: 5 cm spacing
• Imperial: 1 inch spacing
• Visible: 3 ≤ Scale < 11
• Snap Target: Adding points when zoomed out

Coarse Grid

• Metric: 10 cm spacing with labels
• Imperial: 2 inch spacing with labels
• Visible: Scale < 3
• Display Only: No snapping at this level

Grid Snapping Behavior

Adding Points (Pen/Rectangle/Circle tools):

if (scale < 11) {
  // Zoomed out - snap to medium grid (5cm/1in)
  snapIncrement = unit === "in" ? 1 * INCH_TO_CM : 5;
} else {
  // Zoomed in - snap to fine grid (1cm/0.25in)
  snapIncrement = unit === "in" ? 0.25 * INCH_TO_CM : 1;
}

Moving Points/Bezier Handles:

// Always snap to fine grid regardless of zoom
snapIncrement = unit === "in" ? 0.25 * INCH_TO_CM : 1;

Measurement System

Unit Conversion

• Conversion Factor: 1 inch = 2.54 cm (exact)
• Internal Storage: Always in centimeters
• Display: User's selected unit preference
• Precision: 0.1 unit display (1mm or 0.04in)

Measurement Display

Shown Measurements:

• Line lengths (cm or inches)
• Angles (degrees)
• Distances between points
• Seam allowance widths
• Variable lengths (locked lines)

Measurement Colors:

• Regular lines: Blue text
• Key lines: Pink text
• Connected lines: Green text
• Locked lengths: Orange text

File Formats

Export Formats

SVG (Scalable Vector Graphics)

Specifications:

• Version: SVG 1.1
• Encoding: UTF-8
• Coordinate Units: User units (90 DPI)
• Precision: 2 decimal places
• Features: Layers, groups, metadata

SVG Structure:

<svg xmlns="http://www.w3.org/2000/svg"
     width="..." height="..." viewBox="...">
  <g id="pattern">
    <g id="piece-1">
      <path d="M..." />
      <text>...</text>
    </g>
  </g>
</svg>

PDF (Portable Document Format)

Specifications:

• Version: PDF 1.4+
• Resolution: 300 DPI
• Color Space: RGB
• Compression: Flate/ZIP
• Fonts: Embedded

Paper Sizes:

Size	Dimensions (mm)	Dimensions (in)
A0	841 × 1189	33.1 × 46.8
A1	594 × 841	23.4 × 33.1
A2	420 × 594	16.5 × 23.4
A3	297 × 420	11.7 × 16.5
A4	210 × 297	8.3 × 11.7
Letter	215.9 × 279.4	8.5 × 11
Legal	215.9 × 355.6	8.5 × 14
Tabloid	279.4 × 431.8	11 × 17

Project File Format

Internal Storage:

• Format: JSON
• Encoding: UTF-8
• Compression: None (browser handles)
• Storage: LocalStorage + Server sync

Data Structure:

{
  "version": "1.0",
  "name": "Pattern Name",
  "unit": "metric",
  "shapes": [...],
  "fabrics": [...],
  "connections": [...],
  "metadata": {...}
}

Color System

Line Colors

Line Type	Hex Color	RGB	Usage
Regular	#2B99FF	43,153,255	Standard lines
Key Line	#f43f5e	244,63,94	Important references
Connected	#84cc16	132,204,22	Line connections
Locked	#f97316	249,115,22	Variable lengths

Theme Colors

Light Mode

• Background: #efebe4 (stone-100)
• Canvas: #efebe4 (stone-100)
• UI: #e7e5e4 (stone-200)
• Text: #1c1917 (stone-900)
• Grid: #d6d3d1 (stone-300)

Dark Mode

• Background: #13100e (custom dark)
• Canvas: #13100e (custom dark)
• UI: #1c1917 (stone-900)
• Text: #fafaf9 (stone-50)
• Grid: #292524 (stone-800)

Performance Characteristics

Rendering Performance

Target Frame Rates:

• 60 FPS: Smooth interaction
• 30 FPS: Acceptable for complex patterns
• 15 FPS: Warning threshold

Performance Factors:

• Number of shapes (linear impact)
• Number of points per shape (linear impact)
• Bezier curves (slightly more expensive)
• Grid visibility (minimal impact)
• Measurement display (moderate impact)
• 3D mode (significant impact)

Optimization Techniques

Implemented:

• Canvas rendering optimization
• Dirty rectangle tracking
• Event debouncing
• Viewport culling
• Lazy loading
• Asset caching

User Strategies:

• Hide unused layers
• Simplify complex curves
• Reduce total shapes
• Disable 3D when not needed
• Close preview mode while editing

Data Storage

Browser Storage

LocalStorage:

• Capacity: 5-10 MB typical
• Usage: Draft patterns, preferences
• Persistence: Until cleared
• Sync: No (per-device)

SessionStorage:

• Usage: Temporary state
• Persistence: Until tab closes
• Capacity: 5-10 MB typical

IndexedDB:

• Usage: Large pattern cache
• Capacity: 50 MB+ (quota varies)
• Persistence: Until cleared

Server Storage

User Account:

• Pattern Limit: Unlimited
• Storage per Pattern: 50 MB max
• Total Storage: Fair use policy
• Backup: Daily backups
• Retention: Active accounts only

API Endpoints

Pattern Operations

GET    /api/patterns          - List user patterns
GET    /api/patterns/:id      - Get pattern data
POST   /api/patterns          - Create pattern
PUT    /api/patterns/:id      - Update pattern
DELETE /api/patterns/:id      - Delete pattern

Community Operations

GET    /api/community         - List public patterns
GET    /api/community/:id     - Get public pattern
POST   /api/patterns/:id/like - Like pattern
DELETE /api/patterns/:id/like - Unlike pattern
POST   /api/patterns/:id/replicate - Replicate pattern

Export Operations

POST   /api/export/svg        - Generate SVG
POST   /api/export/pdf        - Generate PDF
GET    /api/export/:id        - Download export

3D Rendering

WebGL Specifications

Requirements:

• WebGL 1.0 or 2.0
• OES_standard_derivatives extension (preferred)
• Fragment shader precision: mediump or better

3D Scene:

• Renderer: Three.js (or custom WebGL)
• Lighting: Directional + Ambient
• Camera: Perspective, orbital controls
• Materials: Phong shading
• Shadows: Optional (performance impact)

Fold Simulation

Algorithm:

• Topology-based folding
• Fold line constraints
• Connection constraints
• Physics approximation (not real-time)

Limitations:

• Simple patterns: Accurate
• Medium complexity: Good approximation
• Very complex: May require manual adjustment
• Not a physics simulation

Keyboard Input

Key Handling

Supported Keys:

• Letters: A-Z (uppercase for shortcuts)
• Modifiers: Shift, Ctrl/Cmd, Alt
• Special: Delete, Backspace, Esc, Space
• Arrows: Up, Down, Left, Right

Platform Differences:

• macOS: Cmd key for shortcuts
• Windows/Linux: Ctrl key for shortcuts
• Touch: No keyboard shortcuts

Mouse/Touch Input

Mouse Events

• Click: Select, add point
• Double-click: Fit to view
• Drag: Move, draw, pan
• Right-click: Context menu (future)
• Scroll: Zoom
• Middle-click: Pan

Touch Gestures

• Tap: Select, add point
• Long press: Context menu
• Drag: Move, draw
• Two-finger drag: Pan
• Pinch: Zoom
• Two-finger rotate: Not implemented

Browser Compatibility Matrix

Feature Support

Feature	Chrome	Firefox	Safari	Edge
Canvas 2D	✓	✓	✓	✓
SVG	✓	✓	✓	✓
WebGL	✓	✓	✓	✓
LocalStorage	✓	✓	✓	✓
Touch Events	✓	✓	✓	✓
File API	✓	✓	✓	✓
Canvas Filters	✓	✓	Partial	✓

Known Issues

Safari:

• Touch event handling slightly different
• Some CSS features delayed

Firefox:

• WebGL performance may vary
• Font rendering differences

Mobile:

• Performance lower on older devices
• Touch accuracy varies by device
• Keyboard shortcuts not available

Security & Privacy

Data Handling

Client-Side:

• Pattern data stored locally
• No auto-upload without account
• LocalStorage accessible only to site

Server-Side:

• HTTPS encryption in transit
• Pattern data encrypted at rest
• No sharing without explicit publish
• Account required for cloud save

Privacy

• No tracking of pattern content
• Analytics: Anonymized usage stats only
• Community patterns: Public by choice
• Unpublished patterns: Private

Version Information

Application Version

• Current Version: 1.3.6
• Release: Active development
• Stability: Production
• Update Frequency: Continuous

Feature Flags

Some features may be behind flags:

• Beta features (opt-in)
• Experimental tools
• New export formats
• Advanced 3D options

API Rate Limits

Authenticated Users

• Pattern Operations: 60 requests/minute
• Export Operations: 10 requests/minute
• Community Operations: 30 requests/minute

Public Access

• Community Browse: 30 requests/minute
• Pattern View: 30 requests/minute

Accessibility

Current Support

• Keyboard navigation (partial)
• Screen reader labels (basic)
• High contrast mode (via browser)
• Zoom support (browser zoom)

Future Enhancements

• Full keyboard navigation
• ARIA labels comprehensive
• Screen reader mode
• Voice control support