docs(ui): switch user-facing spelling to colour
Made-with: Cursor
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user