Web-based tools for configuring and editing display patterns for modular arena systems.
Live Demo: https://reiserlab.github.io/webDisplayTools/
Open index.html in your web browser to access all tools, or visit the live demo above.
| 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.
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
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
Interactive 3D visualization of cylindrical arenas:
- Three.js rendering with orbit controls
- Test pattern preview (all-on, grating, sine)
- Angular resolution analysis
- Screenshot export
Full-arena pattern design with animation support. Export to GIF/video for documentation.
Design experiment protocols with stimulus sequences and trial parameters. YAML export for MATLAB execution.
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)
- 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
All tools can be tested locally by opening the HTML files directly in a web browser. No server setup is required for basic functionality.
webDisplayTools/
├── index.html # Main landing page
├── g6_panel_editor.html # G6 Panel Pattern Editor (ready)
├── arena_editor.html # Arena Layout Editor (ready)
├── arena_3d_viewer.html # Arena 3D Viewer (ready)
├── g41_pattern_editor.html # G4.1 pattern editor (placeholder)
├── g6_pattern_editor.html # G6 pattern editor (placeholder)
├── experiment_designer.html # Experiment Designer (placeholder)
├── js/ # Shared JavaScript modules
│ ├── arena-calculations.js # Arena geometry calculations
│ └── arena-configs.js # Standard arena configurations (auto-generated)
├── scripts/ # Build/generation scripts
│ └── generate-arena-configs.js # Syncs configs from maDisplayTools
├── data/ # Reference data
│ └── reference_data.json # MATLAB-generated validation data
├── tests/ # Validation tests
│ └── validate-arena-calculations.js
└── .github/workflows/ # CI/CD workflows
├── validate-calculations.yml
└── sync-arena-configs.yml # Syncs arena configs from maDisplayTools
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
Part of the Reiser Lab display tools ecosystem.
- Main Repository: maDisplayTools (MATLAB tools - private)
- Web Tools: webDisplayTools (This repository - public)
Reiser Lab | GitHub