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