Add documentation and utility modules
- Add API specification documentation - Add system specification document - Add UI mockups and documentation - Add utility modules (wifi)
This commit is contained in:
56
docs/mockups/README.md
Normal file
56
docs/mockups/README.md
Normal file
@@ -0,0 +1,56 @@
|
||||
# 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)
|
||||
|
||||
Reference in New Issue
Block a user