# 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)