led-controller/docs/mockups

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:

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