Jimmy
9e2409430c
- Add API specification documentation - Add system specification document - Add UI mockups and documentation - Add utility modules (wifi)
57 lines
1.8 KiB
Markdown
57 lines
1.8 KiB
Markdown
# UI Mockups
|
|
|
|
This directory contains HTML mockups and generated images for the LED Driver user interface.
|
|
|
|
## Files
|
|
|
|
### HTML Mockups
|
|
- **index.html** - Navigation page linking to all mockups
|
|
- **dashboard.html** - Main control panel for managing LED patterns and devices
|
|
- **pattern-selector.html** - Visual pattern selection interface
|
|
- **device-management.html** - Device and group management interface
|
|
- **settings.html** - Comprehensive settings configuration panel
|
|
|
|
### Generated Images
|
|
Images are automatically generated in the `images/` directory:
|
|
- `dashboard.png`
|
|
- `pattern-selector.png`
|
|
- `device-management.png`
|
|
- `settings.png`
|
|
- `index.png`
|
|
|
|
## Generating Images
|
|
|
|
To generate images from the HTML files, use the provided script:
|
|
|
|
```bash
|
|
# Install dependencies (if not already installed)
|
|
pipenv install playwright
|
|
pipenv run playwright install chromium
|
|
|
|
# Generate images
|
|
pipenv run python generate_images.py
|
|
```
|
|
|
|
The script will:
|
|
1. Check for available screenshot libraries (Playwright, Selenium, or html2image)
|
|
2. Generate PNG images from all HTML files
|
|
3. Save images to the `images/` directory
|
|
|
|
### Requirements
|
|
|
|
The script supports multiple screenshot libraries (in order of preference):
|
|
1. **Playwright** (recommended) - `pip install playwright && playwright install chromium`
|
|
2. **Selenium** - `pip install selenium` (requires ChromeDriver)
|
|
3. **html2image** - `pip install html2image`
|
|
|
|
## Viewing Mockups
|
|
|
|
Simply open any HTML file in a web browser to view the mockup. Start with `index.html` for navigation to all mockups.
|
|
|
|
## Notes
|
|
|
|
- All mockups are responsive and work on desktop and mobile devices
|
|
- The mockups use modern CSS with gradients and smooth animations
|
|
- Interactive elements (buttons, sliders, etc.) are functional in the HTML but are mockups (no backend connection)
|
|
|