docs(ui): switch user-facing spelling to colour
Made-with: Cursor
This commit is contained in:
16
README.md
16
README.md
@@ -1,6 +1,6 @@
|
||||
# led-controller
|
||||
|
||||
LED controller web app for managing profiles, tabs, presets, and color palettes, and sending commands to LED devices over the serial -> ESP-NOW bridge.
|
||||
LED controller web app for managing profiles, tabs, presets, and colour palettes, and sending commands to LED devices over the serial -> ESP-NOW bridge.
|
||||
|
||||
## Run
|
||||
|
||||
@@ -11,7 +11,7 @@ LED controller web app for managing profiles, tabs, presets, and color palettes,
|
||||
## UI modes
|
||||
|
||||
- **Run mode**: focused control view. Select tabs/presets and apply profiles. Editing actions are hidden.
|
||||
- **Edit mode**: management view. Shows Tabs, Presets, Patterns, Color Palette, and Send Presets controls, plus per-tile preset edit/remove and drag-reorder.
|
||||
- **Edit mode**: management view. Shows Tabs, Presets, Patterns, Colour Palette, and Send Presets controls, plus per-tile preset edit/remove and drag-reorder.
|
||||
|
||||
## Profiles
|
||||
|
||||
@@ -21,14 +21,14 @@ LED controller web app for managing profiles, tabs, presets, and color palettes,
|
||||
- Creating a profile always creates a populated `default` tab (starter presets).
|
||||
- Optional **DJ tab** seeding creates:
|
||||
- `dj` tab bound to device name `dj`
|
||||
- starter DJ presets (rainbow, single color, transition)
|
||||
- starter DJ presets (rainbow, single colour, transition)
|
||||
|
||||
## Preset colors and palette linking
|
||||
## Preset colours and palette linking
|
||||
|
||||
- In preset editor, selecting a color picker value auto-adds it when the picker closes.
|
||||
- Use **From Palette** to add a palette-linked preset color.
|
||||
- Linked colors are stored as palette references and shown with a `P` badge.
|
||||
- When profile palette colors change, linked preset colors update across that profile.
|
||||
- In preset editor, selecting a colour picker value auto-adds it when the picker closes.
|
||||
- Use **From Palette** to add a palette-linked preset colour.
|
||||
- Linked colours are stored as palette references and shown with a `P` badge.
|
||||
- When profile palette colours change, linked preset colours update across that profile.
|
||||
|
||||
## API docs
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<button class="btn btn-secondary edit-mode-only" id="tabs-btn">Tabs</button>
|
||||
<button class="btn btn-secondary edit-mode-only" id="presets-btn">Presets</button>
|
||||
<button class="btn btn-secondary edit-mode-only" id="patterns-btn">Patterns</button>
|
||||
<button class="btn btn-secondary edit-mode-only" id="color-palette-btn">Color Palette</button>
|
||||
<button class="btn btn-secondary edit-mode-only" id="color-palette-btn">Colour Palette</button>
|
||||
<button class="btn btn-secondary edit-mode-only" id="send-profile-presets-btn">Send Presets</button>
|
||||
<button class="btn btn-secondary" id="help-btn">Help</button>
|
||||
<button type="button" class="btn btn-secondary ui-mode-toggle" id="ui-mode-toggle" aria-pressed="false" title="Switch preset strip mode — label is the mode you will switch to">Edit mode</button>
|
||||
@@ -32,7 +32,7 @@
|
||||
<button type="button" class="edit-mode-only" data-target="tabs-btn">Tabs</button>
|
||||
<button type="button" class="edit-mode-only" data-target="presets-btn">Presets</button>
|
||||
<button type="button" class="edit-mode-only" data-target="patterns-btn">Patterns</button>
|
||||
<button type="button" class="edit-mode-only" data-target="color-palette-btn">Color Palette</button>
|
||||
<button type="button" class="edit-mode-only" data-target="color-palette-btn">Colour Palette</button>
|
||||
<button type="button" class="edit-mode-only" data-target="send-profile-presets-btn">Send Presets</button>
|
||||
<button type="button" data-target="help-btn">Help</button>
|
||||
</div>
|
||||
@@ -129,10 +129,10 @@
|
||||
<option value="">Pattern</option>
|
||||
</select>
|
||||
</div>
|
||||
<label>Colors</label>
|
||||
<label>Colours</label>
|
||||
<div id="preset-colors-container" class="preset-colors-container"></div>
|
||||
<div class="profiles-actions">
|
||||
<input type="color" id="preset-new-color" value="#ffffff" title="Choose color (auto-adds)">
|
||||
<input type="color" id="preset-new-color" value="#ffffff" title="Choose colour (auto-adds)">
|
||||
<button class="btn btn-secondary btn-small" id="preset-add-from-palette-btn">From Palette</button>
|
||||
</div>
|
||||
<div class="profiles-actions">
|
||||
@@ -201,10 +201,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Color Palette Modal -->
|
||||
<!-- Colour Palette Modal -->
|
||||
<div id="color-palette-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h2>Color Palette</h2>
|
||||
<h2>Colour Palette</h2>
|
||||
<p class="muted-text">Profile: <span id="palette-current-profile-name">None</span></p>
|
||||
<div id="palette-container" class="profiles-list"></div>
|
||||
<div class="profiles-actions">
|
||||
@@ -238,7 +238,7 @@
|
||||
<li><strong>Preset tiles</strong>: each tile shows <strong>Edit</strong> and <strong>Remove</strong> controls in Edit mode.</li>
|
||||
<li><strong>Reorder presets</strong>: drag and drop preset tiles to save tab order.</li>
|
||||
<li><strong>Profiles</strong>: create/clone/delete profiles. New profiles get a populated <strong>default</strong> tab and can optionally seed a <strong>DJ tab</strong>.</li>
|
||||
<li><strong>Color Palette</strong>: build profile colors and use <strong>From Palette</strong> in preset editor to add linked colors (badge <strong>P</strong>) that update when palette colors change.</li>
|
||||
<li><strong>Colour Palette</strong>: build profile colours and use <strong>From Palette</strong> in preset editor to add linked colours (badge <strong>P</strong>) that update when palette colours change.</li>
|
||||
</ul>
|
||||
|
||||
<div class="modal-actions">
|
||||
|
||||
@@ -74,7 +74,7 @@ See `docs/API.md` for the complete ESPNow API specification.
|
||||
## Key Features
|
||||
|
||||
- **Version Field**: All messages include `"v": "1"` for version tracking
|
||||
- **Preset Format**: Presets use hex color strings (`#RRGGBB`), not RGB tuples
|
||||
- **Preset Format**: Presets use hex colour strings (`#RRGGBB`), not RGB tuples
|
||||
- **Select Format**: Select values are always lists: `["preset_name"]` or `["preset_name", step]`
|
||||
- **Color Conversion**: Automatically converts RGB tuples to hex strings
|
||||
- **Colour Conversion**: Automatically converts RGB tuples to hex strings
|
||||
- **Default Values**: Provides sensible defaults for missing fields
|
||||
|
||||
Reference in New Issue
Block a user