Recent updates to the custom LED theme page include enhanced color pi…

[KeyOnTech]

Updates to the custom LED theme page include enhanced color picker placement options (top, bottom, left, or right) to ensure it never appears off-screen and remains accessible. Additionally, new button layouts for Haute42 (13 & 16 buttons) and DuelPad (16 buttons) have been added to the preview layout options dropdown list.

updates made to the custom led theme page
users can now select where the color picker will appear top, bottom, left, or right preventing picker appearing off screen and unusable
updates made to the preview layout options drop down list
added Haute42 13 & 16 button layouts
added DuelPad 16 button layout

[KeyOnTech]

I have another push coming with some minor updates
I tested on
Safari
Chrome
MS Edge
Brave
Firefox
Arc

1. I made the size 450px on push

• I did some tightening up and made it closer to the original 400px its now at 425px

3. There is an issue on the Haute42 13 layout, if you shrink the screen to narrow the A2 and A1 buttons slightly overlap

• I spaced the A1 button a little more to the right to fix it

new push on the way

[FeralAI]

Hey @KeyOnTech, thanks for the PR! We appreciate the effort to make things easier while we're reworking the LED system.

I've taken a look through the code and tested it out, and here are my notes.

Rename layouts to match existing layouts in the Display Configuration page

• Stickless 13 A to Stickless 13
• Stickless 16 A to Stickless 16
• Stickless 16 B to Stickless 16A (TBD, but let's go with this for now)

That last 16 button layout doesn't exist in the Display Configuration currently, so we may want to add that. Probably not a blocker for this PR, but something I'll need to follow up on.

Using the gradient feature on the new layouts doesn't quite work

This is because the matrices for the new layouts in Buttons.js are incorrect. These will need to be updated. For example, the Stickless 16 layout should be:

export const STICKLESS_16_LAYOUT = [
	[null, 'Left', null, null],
	['A1', 'Down', null, null],
	[null, 'Right', null, 'L3'],
	['A2', 'B3', 'B1', 'Up'],
	[null, 'B4', 'B2', 'R3'],
	[null, 'R1', 'R2', null],
	[null, 'L1', 'L2', null],
];

Which will produce:

Consolidate button arrays into BUTTTON_LAYOUTS objects

I think the button arrays should be rolled into the BUTTON_LAYOUTS objects, into properites named mainButtons and auxButtons. Then this section can be removed, and instead bind directly against BUTTON_LAYOUTS[ledLayout].mainButtons here or BUTTON_LAYOUTS[ledLayout].auxButtons here.

Color Picker Placement

This feature works fine and I don't see a problem including it.

[KeyOnTech]

Hey sorry for the delay on replying
I'm just seeing your Github messages for updates I need to make to the the code. Still learning the PR Github features lol
Some I already made others I need to review thanks
I'll go through your notes and make some updates
thanks

[KeyOnTech]

gradient button selector not working fixed, moving to next issue

[KeyOnTech]

Fixed: Rename layouts to match existing layouts in the Display Configuration page
Fixed: Using the gradient feature on the new layouts doesn't quite work
Fixed: Consolidate button arrays into BUTTTON_LAYOUTS objects
Fixed: That last 16 button layout doesn't exist in the Display Configuration currently, so we may want to add that. Probably not a blocker for this PR, but something I'll need to follow up on.

[KeyOnTech]

Everything noted has been fixed and updated

[FeralAI]

Thanks @KeyOnTech! I'll try to get it reviewed this weekend.

[KeyOnTech]

Reverted my changes to DisplayConfig.jsx due to a code conflict that has an API rewrite. Button layout and ButtonLayoutRight are now managed via an API, no longer an object in the page file, rendering my previous modifications unnecessary.

[KeyOnTech]

I see a file conflict on the package-lock.json file
I didnt make any updates to any of that I just did a npm i
so hopefully this is a common minor thing
besides that no other conflicts in my latest push
thanks

[KeyOnTech]

Hey @FeralAI wanted to check in on the updates I made to the color picker screen button layouts and color picker box. I got a comment today and they were experiencing what I was on different browsers I think my minor updates will help.
wanted to check in and see if my web config updates were good to go and hopefully get approved to make the next build. I think it'll really help folks
Thanks