technicalkiwi/led-controller
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(ui): switch user-facing spelling to colour

Browse Source 
Made-with: Cursor
This commit is contained in:
Jimmy
2026-03-22 00:00:12 +13:00
parent 9479d0d292
commit b7c45fd72c
6 changed files with 78 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
docs/mockups/COLOR_PICKER_README.md
View File

@@ -1,13 +1,13 @@
# Custom Color Picker Component
# Custom Colour Picker Component
A cross-platform, cross-browser color picker component that provides a consistent user experience across all operating systems and browsers.
A cross-platform, cross-browser colour 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
✅ **HSB Colour Model** - Uses Hue, Saturation, Brightness for intuitive colour selection
✅ **Multiple Input Methods** - Hex input, RGB inputs, and visual picker
✅ **Accessible** - Keyboard accessible and screen reader friendly
✅ **Customizable** - Easy to style and integrate
@@ -33,7 +33,7 @@ A cross-platform, cross-browser color picker component that provides a consisten
<div id="my-color-picker"></div>
```
### 3. Initialize the color picker
### 3. Initialize the colour picker
```javascript
const picker = new ColorPicker('#my-color-picker', {
@@ -57,8 +57,8 @@ new ColorPicker(container, options)
- `options` (object) - Configuration options
**Options:**
- `initialColor` (string) - Initial color in hex format (default: '#FF0000')
- `onColorChange` (function) - Callback when color changes (receives hex color string)
- `initialColor` (string) - Initial colour in hex format (default: '#FF0000')
- `onColorChange` (function) - Callback when colour changes (receives hex colour string)
- `showHexInput` (boolean) - Show hex input field (default: true)
### Methods
@@ -101,7 +101,7 @@ const picker = new ColorPicker('#picker1', {
});
```
### Multiple Color Pickers
### Multiple Colour Pickers
```javascript
const colors = ['#FF0000', '#00FF00', '#0000FF'];
@@ -116,7 +116,7 @@ const pickers = colors.map((color, index) => {
});
```
### Dynamic Color Picker Creation
### Dynamic Colour Picker Creation
```javascript
function addColorPicker(containerId, initialColor = '#000000') {
@@ -139,12 +139,12 @@ addColorPicker('color-2', '#00FF00');
## Styling
The color picker uses CSS classes that can be customized:
The colour picker uses CSS classes that can be customized:
- `.color-picker-container` - Main container
- `.color-picker-preview` - Color preview button
- `.color-picker-preview` - Colour preview button
- `.color-picker-panel` - Dropdown panel
- `.color-picker-main` - Main color area
- `.color-picker-main` - Main colour area
- `.color-picker-hue` - Hue slider
- `.color-picker-controls` - Controls section
@@ -183,20 +183,20 @@ The color picker uses CSS classes that can be customized:
- ✅ iOS 12+
- ✅ Android 7+
## Color Format
## Colour Format
The color picker uses **hex color format** (`#RRGGBB`):
The colour picker uses **hex colour 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
The colour picker is integrated into:
- `dashboard.html` - Colour selection for patterns
- `presets.html` - Colour selection when creating/editing presets
### Example: Getting Colors from Multiple Pickers
### Example: Getting Colours from Multiple Pickers
```javascript
const colorPickers = [];
@@ -218,7 +218,7 @@ function sendColorsToDevice() {
## Performance
- Lightweight: ~14KB JavaScript, ~4KB CSS
- Fast rendering: Uses Canvas API for color gradients
- Fast rendering: Uses Canvas API for colour gradients
- Smooth interactions: Optimized event handling
- Memory efficient: No external dependencies
@@ -235,5 +235,5 @@ 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.
See `color-picker-demo.html` for a live demonstration of the colour picker component.