Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Fade animation info and RGB corrections #35

Merged
merged 1 commit into from
Mar 7, 2024
Merged

Add Fade animation info and RGB corrections #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 89 additions & 21 deletions docs/rgb-leds.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ description: "How to use addressable RGB LEDs to your controller. Hotkeys and an
import InputLabelSelector, {
Hotkey,
} from "@site/src/components/LabelSelector.tsx";
import { ColorBlock } from "@site/src/components/LEDColors";

# RGB LEDs

Expand All @@ -21,38 +22,105 @@ Select the button labels to be displayed in the usage guide:

GP2040-CE requires that addressable RGB LEDs be used for nearly all LED functions.

The exception to this are [Player LEDs](./add-ons/player-number.mdx), which can use pulse width modulation (PWM) to vary the brightness of the LEDs.
The exception to this are [Player LEDs](./add-ons/player-number.mdx), which can use pulse width modulation (PWM) to vary
the brightness of the LEDs.

## RGB LED Hotkeys

| Hotkey | Description |
| -------------------------------------- | ---------------------- |
| <Hotkey buttons={["S1", "S2", "B3"]}/> | Next Animation |
| <Hotkey buttons={["S1", "S2", "B1"]}/> | Previous Animation |
| <Hotkey buttons={["S1", "S2", "B4"]}/> | Brightness Up |
| <Hotkey buttons={["S1", "S2", "B2"]}/> | Brightness Down |
| <Hotkey buttons={["S1", "S2", "R1"]}/> | LED Parameter Up |
| <Hotkey buttons={["S1", "S2", "R2"]}/> | LED Parameter Down |
| <Hotkey buttons={["S1", "S2", "L1"]}/> | Pressed Parameter Up |
| <Hotkey buttons={["S1", "S2", "L2"]}/> | Pressed Parameter Down |
| Hotkey | Description |
| -------------------------------------- | -------------------------- |
| <Hotkey buttons={["S1", "S2", "B3"]}/> | Next Animation |
| <Hotkey buttons={["S1", "S2", "B1"]}/> | Previous Animation |
| <Hotkey buttons={["S1", "S2", "B4"]}/> | Brightness Up |
| <Hotkey buttons={["S1", "S2", "B2"]}/> | Brightness Down |
| <Hotkey buttons={["S1", "S2", "R1"]}/> | LED Parameter Up |
| <Hotkey buttons={["S1", "S2", "R2"]}/> | LED Parameter Down |
| <Hotkey buttons={["S1", "S2", "L1"]}/> | Pressed Parameter Up |
| <Hotkey buttons={["S1", "S2", "L2"]}/> | Pressed Parameter Down |
| <Hotkey buttons={["S1", "S2", "L3"]}/> | Decrease LED Fade Duration |
| <Hotkey buttons={["S1", "S2", "R3"]}/> | Increase LED Fade Duration |

:::note

The `LED Parameter` hotkeys may affect color, speed or theme depending on the current RGB LED animation. The `Pressed Parameter` options will change the colors/effects for the on-press animations.
The `LED Parameter` hotkeys may affect color, speed or theme depending on the current RGB LED animation.

The `Pressed Parameter` options will change the colors/effects for the on-press animations.

:::

### RGB LED Animations

Using these hotkeys will cycle through the animation modes. The following animations are available:

| Name | Description |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| Rainbow Chase | A fading, rainbow cycling lines travels across the LED chain |
| Static Theme | Set the LEDs to a pre-defined static theme |
| Custom Theme | Set the LEDs to a custom theme set up in [WebConfig - Custom LED Theme](./web-configurator/menu-pages/06-custom-led-theme.mdx) |
| Static Color | Sets all LEDs to the same color |
| Rainbow Cycle | All LEDs cycle through the color wheel displaying the same color |

### RGB LED Brightness

These hotkeys will increase or decrease the brightness of the controller LEDs based on the `Brightness Steps` and
`Max Brightness` settings in [LED Configuration](/docs/web-configurator/menu-pages/05-led-configuration.mdx#rgb-led-configuration).

### RGB LED Parameter

Depending on the specific animation, changing the LED parameter will result in different behavior.

| Name | LED Parameter |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Rainbow Chase | Adjust animation speed |
| Static Theme | Cycle through themes, see [RGB LED Static Themes](#rgb-led-static-themes) for details. |
| Static Color | Cycle through colors: Black<ColorBlock color="black" />, White<ColorBlock color="white" />, Red<ColorBlock color="red" />, Orange<ColorBlock color="orange" />, Yellow<ColorBlock color="yellow" />, Lime Green<ColorBlock color="limegreen" />, Green<ColorBlock color="green" />, Seafoam<ColorBlock color="seafoam" />, Aqua<ColorBlock color="aqua" />, Sky Blue<ColorBlock color="sky blue" />, Blue<ColorBlock color="blue" />, Purple<ColorBlock color="purple" />, Pink<ColorBlock color="pink" />, Magenta<ColorBlock color="magenta" /> |
| Rainbow Cycle | Adjust animation speed |

:::note Custom LED Theme

When using a custom LED theme, these hotkeys will not affect the settings in any other animation mode.

:::

### RGB LED Pressed Parameter

<ColorBlock color="teal" />

Changes the color the LED changes to when the button is pressed

Cycle through colors: Black<ColorBlock color="black" />, White<ColorBlock color="white" />, Red<ColorBlock color="red" />,
Orange<ColorBlock color="orange" />, Yellow<ColorBlock color="yellow" />, Lime Green<ColorBlock color="limegreen" />,
Green<ColorBlock color="green" />, Seafoam<ColorBlock color="seafoam" />, Aqua<ColorBlock color="aqua" />,
Sky Blue<ColorBlock color="sky blue" />, Blue<ColorBlock color="blue" />, Purple<ColorBlock color="purple" />,
Pink<ColorBlock color="pink" />, Magenta<ColorBlock color="magenta" />

:::note Custom LED Theme

When using a custom LED theme, these hotkeys will not affect the settings in any other animation mode.

:::

## RGB LED Animations
### RGB LED Fade Duration

The following animations are available:
Using these hotkeys will affect the duration for the fade animation on the LED after a button press.

:::note

| Name | Description | LED Parameter |
| ------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| Off | Turn off per-button RGB LEDs | - |
| Static Color | Sets all LEDs to the same color | Cycle through colors: _Red_, _Orange_, _Yellow_, _Lime Green_, _Green_, _Seafoam_, _Aqua_, _Sky Blue_, _Blue_, _Purple_, _Pink_, _Magenta_ |
| Rainbow Cycle | All LEDs cycle through the color wheel displaying the same color | Adjust animation speed |
| Rainbow Chase | A fading, rainbow cycling lines travels across the LED chain | Adjust animation speed |
| Static Theme | Set the LEDs to a pre-defined static theme | Cycle through themes, see [RGB LED Static Themes](#rgb-led-static-themes) for details. |
This duration is shared across all themes and buttons and cannot be set individually per theme nor per button.

:::

| Parameter | Description |
| ---------------- | ----------- |
| Default Duration | 500ms |
| Duration Range | 0ms - 500ms |
| Hotkey Increment | 500ms |

:::tip

If you want to disable the Fade animation, set the duration to 0ms.

:::

## RGB LED Static Themes

Expand Down
78 changes: 78 additions & 0 deletions src/components/LEDColors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import React from "react";

// Convert a number to hex
const intToHex = (d) => {
return ("0" + Number(d).toString(16)).slice(-2).toLowerCase();
};

// Takes an array of 8-bit RGB values and returns the hex value
const rgbArrayToHex = (values) => {
let [r, g, b] = values;

if (!(r >= 0 && r <= 255)) r = 0;
if (!(g >= 0 && g <= 255)) g = 0;
if (!(b >= 0 && b <= 255)) r = 0;

return `#${intToHex(r)}${intToHex(g)}${intToHex(b)}`;
};

const Black = rgbArrayToHex([0, 0, 0]);
const White = rgbArrayToHex([255, 255, 255]);
const Red = rgbArrayToHex([255, 0, 0]);
const Orange = rgbArrayToHex([255, 128, 0]);
const Yellow = rgbArrayToHex([255, 255, 0]);
const LimeGreen = rgbArrayToHex([128, 255, 0]);
const Green = rgbArrayToHex([0, 255, 0]);
const Seafoam = rgbArrayToHex([0, 255, 128]);
const Aqua = rgbArrayToHex([0, 255, 255]);
const SkyBlue = rgbArrayToHex([0, 128, 255]);
const Blue = rgbArrayToHex([0, 0, 255]);
const Purple = rgbArrayToHex([128, 0, 255]);
const Pink = rgbArrayToHex([255, 0, 255]);
const Magenta = rgbArrayToHex([255, 0, 128]);

const LEDColors = [
{ name: "Black", value: Black },
{ name: "White", value: White },
{ name: "Red", value: Red },
{ name: "Orange", value: Orange },
{ name: "Yellow", value: Yellow },
{ name: "LimeGreen", value: LimeGreen },
{ name: "Green", value: Green },
{ name: "Seafoam", value: Seafoam },
{ name: "Aqua", value: Aqua },
{ name: "SkyBlue", value: SkyBlue },
{ name: "Blue", value: Blue },
{ name: "Purple", value: Purple },
{ name: "Pink", value: Pink },
{ name: "Magenta", value: Magenta },
];

export function ColorBlock({ color }) {
let cleanColor = color.trim().split(" ").join("");
try {
let colorValue = LEDColors.find(
(ledColor) => ledColor.name.toLowerCase() === cleanColor.toLowerCase()
).value;

return (
<a
style={{
color: colorValue,
}}
>
■
</a>
);
} catch (error) {
return (
<a
style={{
color: cleanColor,
}}
>
■
</a>
);
}
}
Loading