LED Strip UI - Improved Layout #2543
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Reorganized the LED strip configuration interface with a cleaner, more intuitive layout: - Removed step progress bar to save vertical space - Added instructional text to each of the four configuration steps - Reorganized overlays into a 2x2 grid layout - Moved clear wiring buttons under the grid (left side) - Changed from float-based to inline-block layout for better control - Removed forced CSS widths on containers and buttons - Changed font sizes from pixels to relative units (em) for better accessibility - Fixed section spacing to use margin-bottom instead of margin-top - Removed grid section borders for cleaner appearance - Allow "Wire Ordering Mode" button and "0/128 placed" text to flow naturally on same line The redesign follows the principle of letting the browser calculate natural dimensions rather than forcing specific sizes, resulting in better responsiveness and fewer layout issues.
Added three new Quick Layout presets replacing the old standard layouts: - X-Frame Quad: 20 LEDs (5 per diagonal arm) - Cross-Frame Quad: 20 LEDs (5 per arm in + configuration) - Wing: 20 LEDs (2 rows of 10 for wing leading/trailing edge) Color scheme follows aviation navigation light standards: - Red (color 2) on left/port side - Green (color 6) on right/starboard side - White (color 1) on front/back for crossframe Fixed wire clearing functionality: - Clear buttons now properly remove functions, directions, and colors - Update placed count after clearing wires - Remove all visual styling from cleared cells
Changed function from 'f' (FlightMode) to 'c' (Color) so that the preset red/green/white colors actually display on the grid. FlightMode function shows dynamic green based on flight mode state. Color function displays the assigned fixed color (needed for aviation navigation lights: red=port, green=starboard).
Changed wire ordering for all three presets so lowest numbers (0, 5, 10, 15) are toward the center and higher numbers are at the tips/edges. - xframe: Each diagonal arm numbered center to tip - crossframe: Each straight arm numbered center to tip - wing: Both rows numbered from center outward to wing tips This makes wiring easier as you start from the center of the craft.
Wing preset changes: - Left wing (row 1): All red, all facing west (port side) - Right wing (row 2): All green, all facing east (starboard side) Other improvements: - Auto-add Color function when clicking color on LED with no function - Increase grid column margin to 2em for better spacing This makes the wing preset match aviation standards where entire left wing is red (port) and entire right wing is green (starboard).
- Remove undefined CSS classes w50 and w100 from HTML (let buttons size naturally) - Fix auto-add Color function to only apply to wired LEDs - Fix wing preset wiring order to go consistently from center to tip - Left wing (row 1): Wire 0 at center (x=7), goes to tip (x=0) - Right wing (row 2): Wire 10 at center (x=8), goes to tip (x=15)
Changed wing preset to number consecutively 0-19: - First row (left wing): Wire 0 at left tip, wire 9 at right Displays as: 9 8 7 6 5 4 3 2 1 0 (right to left) - Second row (right wing): Wire 10 at left, wire 19 at right tip Displays as: 10 11 12 13 14 15 16 17 18 19 (left to right) This makes wiring straightforward - start at the left wing tip with wire 0, work across to wire 9, then continue with wire 10 on the right wing and finish at the right tip with wire 19.
sensei-hacker
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Clean up the organization of the LED strip tab make it more intuitive.
It was always confusing to me, partly because the first step you need to do is at the bottom.
Now, if you click on an LED and then on a color, it sets the LED to that color. Previously, it wouldn't - you had to remember to set the "color" function too.
Also added three presets as starting points.
Changes
New Preset Functionality
Added three Quick Layout presets following aviation navigation light standards:
Also cleaned up the CSS to flow better and make text more readable, rather than setting specific pixel sizes that might be wrong at different DPI.
Testing
Files Changed
tabs/led_strip.html- Restructured layout, removed step progress, added instructionstabs/led_strip.js- Fixed clear buttons, added auto-add Color functionsrc/css/tabs/led_strip.css- Inline-block layout, removed forced widths, improved spacingtabs/led_strip_presets.js- NEW: Three aviation-standard preset definitions