docs(ui): switch user-facing spelling to colour
Made-with: Cursor
This commit is contained in:
20
docs/API.md
20
docs/API.md
@@ -16,7 +16,7 @@ All JSON APIs use `Content-Type: application/json` for bodies and responses unle
|
||||
The main UI has two modes controlled by the mode toggle:
|
||||
|
||||
- **Run mode**: optimized for operation (tab/preset selection and profile apply).
|
||||
- **Edit mode**: shows editing/management controls (tabs, presets, patterns, color palette, send presets, and profile management actions).
|
||||
- **Edit mode**: shows editing/management controls (tabs, presets, patterns, colour palette, send presets, and profile management actions).
|
||||
|
||||
Profiles are available in both modes, but behavior differs:
|
||||
|
||||
@@ -117,8 +117,8 @@ Response on success includes `presets_sent`, `messages_sent` (chunking splits pa
|
||||
|
||||
Stored preset records can include:
|
||||
|
||||
- `colors`: resolved hex colors for editor/display.
|
||||
- `palette_refs`: optional array of palette indexes parallel to `colors`. If a slot contains an integer index, the color is linked to the current profile palette at that index.
|
||||
- `colors`: resolved hex colours for editor/display.
|
||||
- `palette_refs`: optional array of palette indexes parallel to `colors`. If a slot contains an integer index, the colour is linked to the current profile palette at that index.
|
||||
|
||||
### Tabs — `/tabs`
|
||||
|
||||
@@ -137,10 +137,10 @@ Stored preset records can include:
|
||||
|
||||
| Method | Path | Description |
|
||||
|--------|------|-------------|
|
||||
| GET | `/palettes` | Map of id → color list. |
|
||||
| GET | `/palettes` | Map of id → colour list. |
|
||||
| GET | `/palettes/<id>` | `{"colors": [...], "id": "<id>"}` |
|
||||
| POST | `/palettes` | Body may include `colors`. Returns palette object with `id`, 201. |
|
||||
| PUT | `/palettes/<id>` | Update colors (`name` ignored). |
|
||||
| PUT | `/palettes/<id>` | Update colours (`name` ignored). |
|
||||
| DELETE | `/palettes/<id>` | Delete palette. |
|
||||
|
||||
### Groups — `/groups`
|
||||
@@ -217,7 +217,7 @@ On the wire, presets use **short keys** (saves space in the ≤240-byte chunks):
|
||||
| Key | Meaning | Notes |
|
||||
|-----|---------|--------|
|
||||
| `p` | Pattern id | `off`, `on`, `blink`, `rainbow`, `pulse`, `transition`, `chase`, `circle` |
|
||||
| `c` | Colors | Array of `"#RRGGBB"` hex strings; converted to RGB on device |
|
||||
| `c` | Colours | Array of `"#RRGGBB"` hex strings; converted to RGB on device |
|
||||
| `d` | Delay ms | Default 100 |
|
||||
| `b` | Preset brightness | 0–255; combined with global `b` on the device |
|
||||
| `a` | Auto | `true`: run continuously; `false`: one step/cycle per “beat” |
|
||||
@@ -228,7 +228,7 @@ The HTTP app’s **`POST /presets/send`** path builds this from stored presets v
|
||||
### Pattern-specific parameters (`n1`–`n6`)
|
||||
|
||||
#### Rainbow
|
||||
- **`n1`**: Step increment on the color wheel per update (default 1).
|
||||
- **`n1`**: Step increment on the colour wheel per update (default 1).
|
||||
|
||||
#### Pulse
|
||||
- **`n1`**: Attack (fade in) ms
|
||||
@@ -240,8 +240,8 @@ The HTTP app’s **`POST /presets/send`** path builds this from stored presets v
|
||||
- **`d`**: Transition duration ms
|
||||
|
||||
#### Chase
|
||||
- **`n1`**: LEDs with first color
|
||||
- **`n2`**: LEDs with second color
|
||||
- **`n1`**: LEDs with first colour
|
||||
- **`n2`**: LEDs with second colour
|
||||
- **`n3`**: Movement on even steps (may be negative)
|
||||
- **`n4`**: Movement on odd steps (may be negative)
|
||||
|
||||
@@ -299,7 +299,7 @@ The HTTP app’s **`POST /presets/send`** path builds this from stored presets v
|
||||
|
||||
1. Reject if `v != "1"`.
|
||||
2. Apply optional top-level **`b`** (global brightness).
|
||||
3. For each entry in **`presets`**, normalize colors and upsert preset by id.
|
||||
3. For each entry in **`presets`**, normalize colours and upsert preset by id.
|
||||
4. If this device’s **`name`** appears in **`select`**, run selection (optional step).
|
||||
5. If **`default`** is set, store startup preset id.
|
||||
6. If **`save`** is set, persist presets.
|
||||
|
||||
@@ -44,7 +44,7 @@ The LED Driver system is a MicroPython-based application for controlling LED str
|
||||
- Pattern configuration and control (patterns run on remote devices)
|
||||
- Real-time brightness and speed control
|
||||
- Global brightness setting (system-wide brightness multiplier)
|
||||
- Multi-color support with customizable color palettes
|
||||
- Multi-colour support with customizable colour palettes
|
||||
- Device grouping for synchronized control
|
||||
- Preset system for saving and loading pattern configurations
|
||||
- Profile and Scene system for complex lighting setups
|
||||
@@ -239,7 +239,7 @@ Primary interface for real-time LED control and monitoring.
|
||||
- **Grid Layout:** 4-column responsive grid
|
||||
- Pattern Selection Card
|
||||
- Brightness & Speed Card
|
||||
- Color Selection Card
|
||||
- Colour Selection Card
|
||||
- Device Status Card
|
||||
- **Action Bar:** Apply and Save buttons
|
||||
|
||||
@@ -273,12 +273,12 @@ Primary interface for real-time LED control and monitoring.
|
||||
- **Default:** 100ms
|
||||
- **Step:** 10ms increments
|
||||
|
||||
**Color Selection**
|
||||
- **Type:** Color picker inputs (HTML5 color input)
|
||||
- **Quantity:** Multiple colors (minimum 2, expandable)
|
||||
- **Format:** Hex color codes (e.g., #FF0000)
|
||||
- **Display:** Large color swatches (60x60px)
|
||||
- **Action:** "Add Color" button for additional colors
|
||||
**Colour Selection**
|
||||
- **Type:** Colour picker inputs (HTML5 colour input)
|
||||
- **Quantity:** Multiple colours (minimum 2, expandable)
|
||||
- **Format:** Hex colour codes (e.g., #FF0000)
|
||||
- **Display:** Large colour swatches (60x60px)
|
||||
- **Action:** "Add Colour" button for additional colours
|
||||
|
||||
**Device Status List**
|
||||
- **Type:** List of connected devices
|
||||
@@ -295,7 +295,7 @@ Primary interface for real-time LED control and monitoring.
|
||||
- **Save to Device:** Persist settings to device storage
|
||||
|
||||
#### Design Specifications
|
||||
- **Color Scheme:** Purple gradient background (#667eea to #764ba2)
|
||||
- **Colour Scheme:** Purple gradient background (#667eea to #764ba2)
|
||||
- **Cards:** White background, rounded corners (12px), shadow
|
||||
- **Hover Effects:** Card lift (translateY -2px), increased shadow
|
||||
- **Typography:** System font stack, 1.25rem headings
|
||||
@@ -509,7 +509,7 @@ Comprehensive device configuration interface.
|
||||
- Device Name (text input)
|
||||
- LED Pin (number input, 0-40)
|
||||
- Number of LEDs (number input, 1-1000)
|
||||
- Color Order (visual selector with 6 options: RGB, RBG, GRB, GBR, BRG, BGR)
|
||||
- Colour Order (visual selector with 6 options: RGB, RBG, GRB, GBR, BRG, BGR)
|
||||
|
||||
**2. Pattern Settings**
|
||||
- Pattern (dropdown selection)
|
||||
@@ -577,16 +577,16 @@ Comprehensive device configuration interface.
|
||||
- Range: Slider with real-time value display
|
||||
- Select: Dropdown menu
|
||||
- Checkbox: Toggle switch
|
||||
- Color: HTML5 color picker
|
||||
- Colour: HTML5 colour picker
|
||||
|
||||
**Color Order Selector**
|
||||
**Colour Order Selector**
|
||||
- **Type:** Visual button grid
|
||||
- **Options:** RGB, RBG, GRB, GBR, BRG, BGR
|
||||
- **Display:** Color boxes showing order (R=red, G=green, B=blue)
|
||||
- **Display:** Colour boxes showing order (R=red, G=green, B=blue)
|
||||
- **Selection:** Single selection with visual feedback
|
||||
|
||||
#### Design Specifications
|
||||
- **Section Headers:** Purple color (#667eea), 1.5rem font, bottom border
|
||||
- **Section Headers:** Purple colour (#667eea), 1.5rem font, bottom border
|
||||
- **Form Groups:** 24px spacing between fields
|
||||
- **Labels:** Bold, 500 weight, dark gray (#333)
|
||||
- **Help Text:** Small gray text below inputs
|
||||
@@ -611,7 +611,7 @@ Save, load, and manage preset configurations for quick pattern switching.
|
||||
Each preset card displays:
|
||||
- **Name:** Preset name (bold, 1.25rem)
|
||||
- **Pattern Badge:** Current pattern type
|
||||
- **Color Preview:** Swatches showing preset colors
|
||||
- **Colour Preview:** Swatches showing preset colours
|
||||
- **Quick Info:** Delay and brightness values
|
||||
- **Actions:** Apply, Edit, Delete buttons
|
||||
|
||||
@@ -620,7 +620,7 @@ Each preset card displays:
|
||||
**Fields:**
|
||||
- Preset Name (text input, required)
|
||||
- Pattern (dropdown selection)
|
||||
- Colors (multiple color pickers, minimum 2)
|
||||
- Colours (multiple colour pickers, minimum 2)
|
||||
- Delay (slider, 10-1000ms)
|
||||
- Step Offset (number input, optional, default: 0)
|
||||
- Tooltip: "Step offset for group synchronization. Applied per device when preset is used in a group."
|
||||
@@ -667,7 +667,7 @@ Each preset card displays:
|
||||
#### Design Specifications
|
||||
- **Card Style:** White background, rounded corners, shadow
|
||||
- **Pattern Badge:** Colored pill with pattern name
|
||||
- **Color Swatches:** 40x40px squares in card header
|
||||
- **Colour Swatches:** 40x40px squares in card header
|
||||
- **Hover Effect:** Card lift, border highlight
|
||||
- **Selected State:** Purple border, subtle background tint
|
||||
|
||||
@@ -681,7 +681,7 @@ Patterns are configured on the controller and sent to remote devices for executi
|
||||
|
||||
- **Pattern Type:** Identifier for the pattern (e.g., "on", "off", "blink", "chase", "pulse", "rainbow", etc.)
|
||||
- **Pattern Parameters:** Numeric parameters (N1-N8) that configure pattern-specific behavior
|
||||
- **Colors:** Color palette for the pattern
|
||||
- **Colours:** Colour palette for the pattern
|
||||
- **Timing:** Delay and speed settings
|
||||
|
||||
**Note:** Pattern execution happens on the remote devices. The controller sends configuration commands to devices.
|
||||
@@ -698,7 +698,7 @@ Pattern-specific numeric parameters:
|
||||
|
||||
#### Overview
|
||||
|
||||
Presets allow users to save complete pattern configurations for quick recall and application. A preset encapsulates all pattern settings including pattern type, colors, timing, and all pattern parameters.
|
||||
Presets allow users to save complete pattern configurations for quick recall and application. A preset encapsulates all pattern settings including pattern type, colours, timing, and all pattern parameters.
|
||||
|
||||
**Note:** Presets are optional. Devices can be controlled directly without presets.
|
||||
|
||||
@@ -708,7 +708,7 @@ A preset contains the following fields:
|
||||
|
||||
- **name** (string, required): Unique identifier for the preset
|
||||
- **pattern** (string, required): Pattern type identifier (sent to remote devices)
|
||||
- **colors** (array of strings, required): Array of hex color codes (minimum 2 colors)
|
||||
- **colours** (array of strings, required): Array of hex colour codes (minimum 2 colours)
|
||||
- **delay** (integer, required): Delay in milliseconds (10-1000)
|
||||
- **n1** (integer, optional): Pattern parameter 1 (0-255, default: 0)
|
||||
- **n2** (integer, optional): Pattern parameter 2 (0-255, default: 0)
|
||||
@@ -889,7 +889,7 @@ A preset contains the following fields:
|
||||
#### Group Properties
|
||||
- **Name:** Unique group identifier
|
||||
- **Devices:** List of device names (can include master and/or slaves)
|
||||
- **Settings:** Pattern, delay, colors
|
||||
- **Settings:** Pattern, delay, colours
|
||||
- **Step Offset:** Per-device step offset sent to devices for synchronized patterns (integer, can be negative)
|
||||
- Each device in group can receive different step offset
|
||||
- Creates wave/chase effect across multiple LED strips
|
||||
@@ -953,7 +953,7 @@ Byte 1: Flags (bit 0: names, bit 1: groups, bit 2: settings, bit 3: save)
|
||||
|-----|------|-------------|--------------|
|
||||
| `pt` | string | Pattern type | on, off, blink, chase, circle, pulse, rainbow, transition |
|
||||
| `pm` | string | Pattern mode | auto, single_shot |
|
||||
| `cl` | array | Colors (hex strings) | Array of hex color codes |
|
||||
| `cl` | array | Colours (hex strings) | Array of hex colour codes |
|
||||
| `br` | int | Global brightness | 0-100 |
|
||||
| `dl` | int | Delay (ms) | 10-1000 |
|
||||
| `n1` | int | Parameter 1 | 0-255 |
|
||||
@@ -966,7 +966,7 @@ Byte 1: Flags (bit 0: names, bit 1: groups, bit 2: settings, bit 3: save)
|
||||
| `n8` | int | Parameter 8 | 0-255 |
|
||||
| `led_pin` | int | GPIO pin | 0-40 |
|
||||
| `num_leds` | int | LED count | 1-1000 |
|
||||
| `color_order` | string | Color order | rgb, rbg, grb, gbr, brg, bgr |
|
||||
| `color_order` | string | Colour order | rgb, rbg, grb, gbr, brg, bgr |
|
||||
| `name` | string | Device name | Any string |
|
||||
| `brightness` | int | Global brightness | 0-100 |
|
||||
| `delay` | int | Delay | 10-1000 |
|
||||
@@ -1247,7 +1247,7 @@ CREATE TABLE IF NOT EXISTS presets (
|
||||
**Preset Fields:**
|
||||
- `name` (string, required): Unique preset identifier
|
||||
- `pattern` (string, required): Pattern type
|
||||
- `colors` (array of strings, required): Hex color codes (minimum 2)
|
||||
- `colors` (array of strings, required): Hex colour codes (minimum 2)
|
||||
- `delay` (integer, required): Delay in milliseconds (10-1000)
|
||||
- `n1` through `n8` (integer, optional): Pattern parameters (0-255, default: 0)
|
||||
|
||||
@@ -1289,7 +1289,7 @@ CREATE TABLE IF NOT EXISTS presets (
|
||||
|
||||
**POST /api/presets**
|
||||
- Create a new preset
|
||||
- Body: Preset object (name, pattern, colors, delay, n1-n8)
|
||||
- Body: Preset object (name, pattern, colours, delay, n1-n8)
|
||||
- Response: Created preset object
|
||||
|
||||
**GET /api/presets/{name}**
|
||||
@@ -1506,7 +1506,7 @@ peak_mem = usqlite.mem_peak()
|
||||
|
||||
1. User navigates to Settings page
|
||||
2. User modifies settings in sections:
|
||||
- Basic Settings (pin, LED count, color order)
|
||||
- Basic Settings (pin, LED count, colour order)
|
||||
- Pattern Settings (pattern, delay)
|
||||
- Global Brightness
|
||||
- Advanced Settings (N1-N8 parameters)
|
||||
@@ -1519,7 +1519,7 @@ peak_mem = usqlite.mem_peak()
|
||||
### Flow 4: Multi-Device Control
|
||||
|
||||
1. User selects multiple devices or a group
|
||||
2. User changes pattern/colors/global brightness
|
||||
2. User changes pattern/colours/global brightness
|
||||
3. User clicks "Apply Settings"
|
||||
4. System sends message targeting selected devices/groups
|
||||
5. All targeted devices update simultaneously
|
||||
@@ -1585,7 +1585,7 @@ peak_mem = usqlite.mem_peak()
|
||||
|
||||
## Design Guidelines
|
||||
|
||||
### Color Palette
|
||||
### Colour Palette
|
||||
|
||||
- **Primary:** Purple gradient `#667eea` to `#764ba2`, Light gradient `#f5f7fa` to `#c3cfe2`
|
||||
- **UI:** Primary `#667eea`, Hover `#5568d3`, Secondary `#e0e0e0`
|
||||
@@ -1612,8 +1612,8 @@ peak_mem = usqlite.mem_peak()
|
||||
- Disabled: 50% opacity, no pointer events
|
||||
|
||||
**Inputs:**
|
||||
- Focus: Border color changes to primary purple
|
||||
- Hover: Slight border color change
|
||||
- Focus: Border colour changes to primary purple
|
||||
- Hover: Slight border colour change
|
||||
- Error: Red border
|
||||
|
||||
**Cards:**
|
||||
@@ -1738,7 +1738,7 @@ peak_mem = usqlite.mem_peak()
|
||||
- Validation
|
||||
|
||||
**Preset Management:**
|
||||
- Preset creation with all fields (name, pattern, colors, delay, n1-n8)
|
||||
- Preset creation with all fields (name, pattern, colours, delay, n1-n8)
|
||||
- Preset loading and application
|
||||
- Preset editing and deletion
|
||||
- Name uniqueness validation
|
||||
@@ -1758,7 +1758,7 @@ peak_mem = usqlite.mem_peak()
|
||||
- Configuration parameters are properly formatted
|
||||
|
||||
**Preset Application:**
|
||||
- Preset loads all parameters correctly (pattern, colors, delay, n1-n8)
|
||||
- Preset loads all parameters correctly (pattern, colours, delay, n1-n8)
|
||||
- Preset applies to single device
|
||||
- Preset applies to device group
|
||||
- Preset values match saved configuration
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user