title: Web Tools
parent: Generation 6
has_children: true
nav_order: 11
webDisplayTools - PanelDisplayTools
Web-based tools for configuring and editing display patterns for modular arena systems.
Live Demo: https://reiserlab.github.io/webDisplayTools/
⚠️ G6 .pat format migration (2026-05-24) — All G6 v2 .pat files produced before commit a348ae1 are obsolete. The new format adds a CRC-8/AUTOSAR header byte and a per-frame CRC-16/CCITT-FALSE trailer (per panel-protocol spec § Frame Format). Old files fail file-size validation in the new parser. Regenerate via node tests/generate-roundtrip-patterns.js --outdir <path> or re-export from the Pattern Editor. G4 / G4.1 files are unaffected.
Quick Start
Open index.html in your web browser to access all tools, or visit the live demo above.
Tools
Pattern Editor ✅ Ready
Full-arena pattern design with spherical coordinate transformations:
- Generate gratings, starfields, edges with pole rotation
- Edit pixels directly in 2D or view in 3D
- Animate patterns via frame shifting or sequence building
- Combine patterns with blend/mask/split modes
- Export to .pat format for MATLAB
Launch Pattern Editor → | Quick Start Guide
Arena Layout ✅ Ready
Configure arena geometry from standard configs or create custom layouts:
- SVG-based 2D visualization
- 10 standard arena configurations (G3, G4, G4.1, G6)
- Click-to-toggle panels for partial arenas
- PDF and YAML export
- CI/CD validation against MATLAB
Launch Arena Layout →
Arena 3D View ✅ Ready
Interactive 3D visualization of cylindrical arenas:
- Three.js rendering with orbit controls
- Test pattern preview (all-on, grating, sine)
- Angular resolution analysis
- Screenshot export
Launch Arena 3D View →
Pattern Icon Generator ✅ Ready
Generate top-down cylindrical view icons from arena patterns:
- Single-frame and multi-frame motion blur rendering
- Configurable perspective (inner radius 0.1-0.75)
- Multiple background options (dark, white, transparent)
- Supports full and partial arena configurations
- PNG export for documentation and UI thumbnails
Launch Pattern Icon Generator →
G6 Panel Patterns ✅ Ready
Create and preview 20×20 pixel patterns for individual G6 panels:
- Real-time preview with draw/erase modes
- Multiple modes: GS2, GS16, 4-Char, LED Map Reference
- Pattern export capabilities
- CI/CD validated against MATLAB
Launch G6 Panel Patterns →
Experiment Designer 🚧 Coming Soon
Design experiment protocols with stimulus sequences and trial parameters. YAML export for MATLAB execution.
Design System
All tools use a consistent dark theme design:
- Background:
#0f1419
- Surface:
#1a1f26
- Border:
#2d3640
- Text:
#e6edf3
- Accent:
#00e676 (green)
- Fonts: JetBrains Mono (headings), IBM Plex Mono (body)
Development Notes
- All web tools are standalone single-page HTML files (no build process required)
- Vanilla JavaScript is preferred for simplicity
- Web outputs must match MATLAB outputs exactly
- Keep dependencies minimal or use CDN links
- Consistent dark theme across all tools
- Mobile-responsive design
Local Development
Static tools can still be opened directly, but Arena Studio and repo-backed features
must run over HTTP. A file:// launch cannot reliably load ES modules, protocol
registries, GitHub data, or pattern files.
From the repository root:
pixi run serve
Then open http://127.0.0.1:8000/arena_studio.html.
The same Pixi environment provides tests and formatting:
pixi run test
pixi run format
pixi run format-check
Repository Structure
webDisplayTools/
├── index.html # Main landing page
├── pattern_editor.html # Pattern Editor (ready)
├── arena_editor.html # Arena Layout Editor (ready)
├── arena_3d_viewer.html # Arena 3D Viewer (ready)
├── icon_generator.html # Pattern Icon Generator (ready)
├── g6_panel_editor.html # G6 Panel Editor (ready)
├── experiment_designer.html # Experiment Designer (placeholder)
├── PATTERN_EDITOR_QUICKSTART.md # Pattern Editor guide
├── js/ # Shared JavaScript modules
│ ├── arena-calculations.js # Arena geometry calculations
│ ├── arena-configs.js # Standard arena configurations
│ ├── arena-geometry.js # Arena geometry helpers
│ ├── pat-parser.js # .pat file parser
│ ├── pat-encoder.js # .pat file encoder
│ ├── icon-generator.js # Icon generation module
│ └── g6-encoding.js # G6 panel encoding
├── docs/ # Documentation assets
│ └── images/ # Screenshots for guides
├── data/ # Reference data
│ └── reference_data.json # MATLAB validation data
├── tests/ # Validation tests
└── .github/workflows/ # CI/CD workflows
CI/CD Validation
Web tools are validated against MATLAB reference implementations:
- MATLAB generates reference data (e.g.,
generate_web_reference_data.m)
- Reference JSON is copied to
data/ directory
- GitHub Actions runs validation tests on push/PR
- Tests compare JavaScript calculations against MATLAB with tolerance of 0.0001
Run tests locally: npm test
Supported Panel Generations
| Generation | Status | Notes |
|---|
| G6 | ✅ Actively tested | Current generation, 20×20 pixels, 0402 SMD LEDs |
| G4.1 | ✅ Actively tested | Production systems, 16×16 pixels, 0603 SMD LEDs |
| G4 | 📋 Comparison only | Legacy systems, included for reference |
| G3 | 📋 Comparison only | Legacy systems, included for reference |
Note: G3 and G4 configurations are included for comparison and backward compatibility, but are not actively tested or validated. For new installations, use G4.1 or G6 panels.
About
Part of the Reiser Lab display tools ecosystem.
Reiser Lab | GitHub
