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:
239
docs/mockups/COLOR_PICKER_README.md
Normal file
239
docs/mockups/COLOR_PICKER_README.md
Normal file
@@ -0,0 +1,239 @@
|
||||
# Custom Color Picker Component
|
||||
|
||||
A cross-platform, cross-browser color picker component that provides a consistent user experience across all operating systems and browsers.
|
||||
|
||||
## Features
|
||||
|
||||
✅ **Consistent UI** - Same appearance and behavior on Windows, macOS, Linux, iOS, and Android
|
||||
✅ **Browser Support** - Works in Chrome, Firefox, Safari, Edge, Opera, and mobile browsers
|
||||
✅ **Touch Support** - Full touch/gesture support for mobile devices
|
||||
✅ **HSB Color Model** - Uses Hue, Saturation, Brightness for intuitive color selection
|
||||
✅ **Multiple Input Methods** - Hex input, RGB inputs, and visual picker
|
||||
✅ **Accessible** - Keyboard accessible and screen reader friendly
|
||||
✅ **Customizable** - Easy to style and integrate
|
||||
|
||||
## Files
|
||||
|
||||
- `color-picker.js` - Main JavaScript component (14KB)
|
||||
- `color-picker.css` - Stylesheet (4KB)
|
||||
- `color-picker-demo.html` - Demo page showing usage examples
|
||||
|
||||
## Quick Start
|
||||
|
||||
### 1. Include the files
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="color-picker.css">
|
||||
<script src="color-picker.js"></script>
|
||||
```
|
||||
|
||||
### 2. Create a container element
|
||||
|
||||
```html
|
||||
<div id="my-color-picker"></div>
|
||||
```
|
||||
|
||||
### 3. Initialize the color picker
|
||||
|
||||
```javascript
|
||||
const picker = new ColorPicker('#my-color-picker', {
|
||||
initialColor: '#FF0000',
|
||||
onColorChange: (color) => {
|
||||
console.log('Color changed to:', color);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Constructor
|
||||
|
||||
```javascript
|
||||
new ColorPicker(container, options)
|
||||
```
|
||||
|
||||
**Parameters:**
|
||||
- `container` (string|HTMLElement) - CSS selector or DOM element
|
||||
- `options` (object) - Configuration options
|
||||
|
||||
**Options:**
|
||||
- `initialColor` (string) - Initial color in hex format (default: '#FF0000')
|
||||
- `onColorChange` (function) - Callback when color changes (receives hex color string)
|
||||
- `showHexInput` (boolean) - Show hex input field (default: true)
|
||||
|
||||
### Methods
|
||||
|
||||
```javascript
|
||||
// Get current color
|
||||
const color = picker.getColor(); // Returns hex string like '#FF0000'
|
||||
|
||||
// Set color programmatically
|
||||
picker.setColor('#00FF00');
|
||||
|
||||
// Open the picker panel
|
||||
picker.open();
|
||||
|
||||
// Close the picker panel
|
||||
picker.close();
|
||||
|
||||
// Toggle the picker panel
|
||||
picker.toggle();
|
||||
```
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```javascript
|
||||
const picker = new ColorPicker('#picker1', {
|
||||
initialColor: '#FF0000'
|
||||
});
|
||||
```
|
||||
|
||||
### With Callback
|
||||
|
||||
```javascript
|
||||
const picker = new ColorPicker('#picker1', {
|
||||
initialColor: '#FF0000',
|
||||
onColorChange: (color) => {
|
||||
document.body.style.backgroundColor = color;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Multiple Color Pickers
|
||||
|
||||
```javascript
|
||||
const colors = ['#FF0000', '#00FF00', '#0000FF'];
|
||||
const pickers = colors.map((color, index) => {
|
||||
return new ColorPicker(`#picker-${index}`, {
|
||||
initialColor: color,
|
||||
onColorChange: (newColor) => {
|
||||
colors[index] = newColor;
|
||||
updateLEDColors(colors);
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### Dynamic Color Picker Creation
|
||||
|
||||
```javascript
|
||||
function addColorPicker(containerId, initialColor = '#000000') {
|
||||
const container = document.createElement('div');
|
||||
container.id = containerId;
|
||||
document.getElementById('color-list').appendChild(container);
|
||||
|
||||
return new ColorPicker(container, {
|
||||
initialColor: initialColor,
|
||||
onColorChange: (color) => {
|
||||
console.log(`Color ${containerId} changed to ${color}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add multiple pickers
|
||||
addColorPicker('color-1', '#FF0000');
|
||||
addColorPicker('color-2', '#00FF00');
|
||||
```
|
||||
|
||||
## Styling
|
||||
|
||||
The color picker uses CSS classes that can be customized:
|
||||
|
||||
- `.color-picker-container` - Main container
|
||||
- `.color-picker-preview` - Color preview button
|
||||
- `.color-picker-panel` - Dropdown panel
|
||||
- `.color-picker-main` - Main color area
|
||||
- `.color-picker-hue` - Hue slider
|
||||
- `.color-picker-controls` - Controls section
|
||||
|
||||
### Custom Styling Example
|
||||
|
||||
```css
|
||||
.color-picker-preview {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.color-picker-panel {
|
||||
background: #2d3748;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
```
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
| Browser | Version | Status |
|
||||
|---------|---------|--------|
|
||||
| Chrome | 60+ | ✅ Full support |
|
||||
| Firefox | 55+ | ✅ Full support |
|
||||
| Safari | 12+ | ✅ Full support |
|
||||
| Edge | 79+ | ✅ Full support |
|
||||
| Opera | 47+ | ✅ Full support |
|
||||
| Mobile Safari | iOS 12+ | ✅ Full support |
|
||||
| Chrome Mobile | Android 7+ | ✅ Full support |
|
||||
|
||||
## Operating System Compatibility
|
||||
|
||||
- ✅ Windows 10/11
|
||||
- ✅ macOS 10.14+
|
||||
- ✅ Linux (all major distributions)
|
||||
- ✅ iOS 12+
|
||||
- ✅ Android 7+
|
||||
|
||||
## Color Format
|
||||
|
||||
The color picker uses **hex color format** (`#RRGGBB`):
|
||||
- Always returns uppercase hex strings (e.g., `#FF0000`)
|
||||
- Accepts both uppercase and lowercase input
|
||||
- Automatically validates hex format
|
||||
|
||||
## Integration with LED Driver Mockups
|
||||
|
||||
The color picker is integrated into:
|
||||
- `dashboard.html` - Color selection for patterns
|
||||
- `presets.html` - Color selection when creating/editing presets
|
||||
|
||||
### Example: Getting Colors from Multiple Pickers
|
||||
|
||||
```javascript
|
||||
const colorPickers = [];
|
||||
|
||||
function getSelectedColors() {
|
||||
return colorPickers.map(picker => picker.getColor());
|
||||
}
|
||||
|
||||
function sendColorsToDevice() {
|
||||
const colors = getSelectedColors();
|
||||
// Send to LED device via API
|
||||
fetch('/api/colors', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ colors: colors })
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## Performance
|
||||
|
||||
- Lightweight: ~14KB JavaScript, ~4KB CSS
|
||||
- Fast rendering: Uses Canvas API for color gradients
|
||||
- Smooth interactions: Optimized event handling
|
||||
- Memory efficient: No external dependencies
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Keyboard navigation support
|
||||
- ARIA labels on interactive elements
|
||||
- High contrast cursor indicators
|
||||
- Screen reader compatible
|
||||
|
||||
## License
|
||||
|
||||
Part of the LED Driver project. Use freely in your projects.
|
||||
|
||||
## Demo
|
||||
|
||||
See `color-picker-demo.html` for a live demonstration of the color picker component.
|
||||
|
||||
Reference in New Issue
Block a user