diff --git a/README.md b/README.md index 2f37bc5..80f934d 100644 --- a/README.md +++ b/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 diff --git a/docs/API.md b/docs/API.md index 2333779..35206a6 100644 --- a/docs/API.md +++ b/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/` | `{"colors": [...], "id": ""}` | | POST | `/palettes` | Body may include `colors`. Returns palette object with `id`, 201. | -| PUT | `/palettes/` | Update colors (`name` ignored). | +| PUT | `/palettes/` | Update colours (`name` ignored). | | DELETE | `/palettes/` | 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. diff --git a/docs/SPECIFICATION.md b/docs/SPECIFICATION.md index a91f089..6d0e46e 100644 --- a/docs/SPECIFICATION.md +++ b/docs/SPECIFICATION.md @@ -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 diff --git a/docs/mockups/COLOR_PICKER_README.md b/docs/mockups/COLOR_PICKER_README.md index ffa5aae..810ec77 100644 --- a/docs/mockups/COLOR_PICKER_README.md +++ b/docs/mockups/COLOR_PICKER_README.md @@ -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
``` -### 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. diff --git a/src/templates/index.html b/src/templates/index.html index 3ca2ec7..267ad0a 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -19,7 +19,7 @@ - + @@ -32,7 +32,7 @@ - + @@ -129,10 +129,10 @@ - +
- +
@@ -201,10 +201,10 @@
- +