led-controller/docs/mockups/COLOR_PICKER_README.md

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

<link rel="stylesheet" href="color-picker.css">
<script src="color-picker.js"></script>

2. Create a container element

<div id="my-color-picker"></div>

3. Initialize the color picker

const picker = new ColorPicker('#my-color-picker', {
    initialColor: '#FF0000',
    onColorChange: (color) => {
        console.log('Color changed to:', color);
    }
});

API

Constructor

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

// 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

const picker = new ColorPicker('#picker1', {
    initialColor: '#FF0000'
});

With Callback

const picker = new ColorPicker('#picker1', {
    initialColor: '#FF0000',
    onColorChange: (color) => {
        document.body.style.backgroundColor = color;
    }
});

Multiple Color Pickers

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

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

.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

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.