diff --git a/docs/assets/images/lightshow-lol-chromalink-duo.png b/docs/assets/images/lightshow-lol-chromalink-duo.png new file mode 100644 index 0000000000..aa49089185 Binary files /dev/null and b/docs/assets/images/lightshow-lol-chromalink-duo.png differ diff --git a/docs/assets/images/lightshow-lol-device-update.png b/docs/assets/images/lightshow-lol-device-update.png new file mode 100644 index 0000000000..5ee497f0c3 Binary files /dev/null and b/docs/assets/images/lightshow-lol-device-update.png differ diff --git a/docs/assets/images/lightshow-lol-pattern.png b/docs/assets/images/lightshow-lol-pattern.png index 64e0765a96..85c5eaae1e 100644 Binary files a/docs/assets/images/lightshow-lol-pattern.png and b/docs/assets/images/lightshow-lol-pattern.png differ diff --git a/docs/lightshow_lol.md b/docs/lightshow_lol.md index 6720a62832..047c33ca10 100644 --- a/docs/lightshow_lol.md +++ b/docs/lightshow_lol.md @@ -9,7 +9,7 @@ has_children: true # Preview Animation -
- +
+ Lightshow.lol Animation
-The **Preview** is the spinning circle of colors immediately visible when entering the page, the **Animation Panel** specifically controls the appearance of this **Preview**. +The **Preview** is the spinning circle of colors immediately visible when entering the page, and the **Animation Panel** specifically controls the appearance of this **Preview**. -The **Preview** will react to changes made in various UI panels (like Pattern or Colorset) but the **Animation Panel** is slightly different. The **Animation Panel** only affects the **Preview** on screen, not how the device looks. +While the **Preview** will react to changes made in various UI panels (like Pattern or Colorset), the **Animation Panel** only affects the on-screen preview, not how the actual device looks. The five animation shape options are self-explanatory, but the six slider options in this panel are: -- **Speed**: This represents how fast the animation will progress. -- **Trail**: This corresponds to how long the colors will remain visible (i.e., the length of the trail). -- **Size**: This is the size of each blink of color on the screen. -- **Blur**: This controls the appearance of the blink on the screen, increasing softness and diffusion. -- **Radius**: This controls the size of the animation pattern on the screen. -- **Spread**: With many LEDs, this controls the distance between LEDs in the preview. - - +- **Speed**: How fast the animation progresses. +- **Trail**: How long the colors remain visible (the length of the trail). +- **Size**: The size of each blink of color. +- **Blur**: Softness/diffusion of the blink on screen. +- **Radius**: The size of the animation pattern on screen. +- **Spread**: With many LEDs, the distance between LEDs in the preview.
-

+

- - ← Color Picker 🔗 - + + ← Chromalink Panel 🔗 + 🔗 Device Control → - + Device Control -
\ No newline at end of file +
diff --git a/docs/lightshow_lol_color_picker.md b/docs/lightshow_lol_color_picker.md index 4daea9ebdc..eaf106404c 100644 --- a/docs/lightshow_lol_color_picker.md +++ b/docs/lightshow_lol_color_picker.md @@ -10,7 +10,6 @@ parent: Lightshow.lol grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0 auto; - margin-top: 50px; max-width: 80%; } @@ -34,6 +33,7 @@ parent: Lightshow.lol .panel-title { margin-bottom: 8px; font-weight: bold; + color: #ffcc00; } .panel-img { @@ -55,13 +55,15 @@ The color picker is opened by selecting a color in the colorset, and it can be c When a device is connected it will display a live preview of the color being chosen as the user navigates the color picker. +## Other Panels +
← Colorset Panel 🔗 - - 🔗 Animation Panel → - + + 🔗 Update Panel → +
\ No newline at end of file diff --git a/docs/lightshow_lol_colorset.md b/docs/lightshow_lol_colorset.md index 5ba58963a7..9923c803a7 100644 --- a/docs/lightshow_lol_colorset.md +++ b/docs/lightshow_lol_colorset.md @@ -10,7 +10,6 @@ parent: Lightshow.lol grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0 auto; - margin-top: 50px; max-width: 80%; } @@ -34,6 +33,7 @@ parent: Lightshow.lol .panel-title { margin-bottom: 8px; font-weight: bold; + color: #ffcc00; } .panel-img { @@ -53,6 +53,8 @@ The **Colorset Panel** represents the list of colors for the selected leds of th There is a maximum of 8 colors in a colorset, black is considered 'off' which can be used to extend gaps in the pattern. +## Other Panels +
← Pattern Panel 🔗 diff --git a/docs/lightshow_lol_device_controls.md b/docs/lightshow_lol_device_controls.md index f8ba7a70c4..7c093f7eea 100644 --- a/docs/lightshow_lol_device_controls.md +++ b/docs/lightshow_lol_device_controls.md @@ -10,7 +10,6 @@ parent: Lightshow.lol grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0 auto; - margin-top: 50px; max-width: 80%; } @@ -34,6 +33,7 @@ parent: Lightshow.lol .panel-title { margin-bottom: 8px; font-weight: bold; + color: #ffcc00; } .panel-img { @@ -52,6 +52,8 @@ The **Device Controls Panel** is very simple, offering only two purposes: **sele In both cases, whether **Selecting** or **Connecting** a device, the **LED Selection Panel** will appear, this will be covered below. +## Other Panels +
← Animation Panel 🔗 diff --git a/docs/lightshow_lol_led_selection.md b/docs/lightshow_lol_led_selection.md index 4d75f69e3d..be1268a870 100644 --- a/docs/lightshow_lol_led_selection.md +++ b/docs/lightshow_lol_led_selection.md @@ -10,7 +10,6 @@ parent: Lightshow.lol grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0 auto; - margin-top: 50px; max-width: 80%; } @@ -34,6 +33,7 @@ parent: Lightshow.lol .panel-title { margin-bottom: 8px; font-weight: bold; + color: #ffcc00; } .panel-img { @@ -56,6 +56,8 @@ The LED Selection panel only appears after a device has been selected or connect Led selections can be added or removed by holding shift or ctrl respectively, and the image supports drawing boxes with the cursor to affect multiple leds at a time. +## Other Panels +
← Modes Panel 🔗 diff --git a/docs/lightshow_lol_modes.md b/docs/lightshow_lol_modes.md index d9a57da1fd..e123bc4a61 100644 --- a/docs/lightshow_lol_modes.md +++ b/docs/lightshow_lol_modes.md @@ -10,7 +10,6 @@ parent: Lightshow.lol grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0 auto; - margin-top: 50px; max-width: 80%; } @@ -34,6 +33,7 @@ parent: Lightshow.lol .panel-title { margin-bottom: 8px; font-weight: bold; + color: #ffcc00; } .panel-img { @@ -53,6 +53,7 @@ The **Modes Panel** organizes and manages your lightshow's overall structure. A - **Import/Export:** Import existing modes from your device or export them for sharing. - **Sharing:** Quickly share your mode with the Vortex Community. +## Other Panels
diff --git a/docs/lightshow_lol_pattern.md b/docs/lightshow_lol_pattern.md index 68af0f6b75..ac0a1a2daf 100644 --- a/docs/lightshow_lol_pattern.md +++ b/docs/lightshow_lol_pattern.md @@ -10,7 +10,6 @@ parent: Lightshow.lol grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0 auto; - margin-top: 50px; max-width: 80%; } @@ -34,6 +33,7 @@ parent: Lightshow.lol .panel-title { margin-bottom: 8px; font-weight: bold; + color: #ffcc00; } .panel-img { @@ -53,6 +53,8 @@ The **Pattern Panel** is where you design and assign animations for your LEDs. P The various parameters control the appearance of the blinking of the LED, like the timing and length of blinks. +## Other Panels +
← Led Selection 🔗