diff --git a/docs/lightshow_lol.md b/docs/lightshow_lol.md index 6b6ea13679..45f18df687 100644 --- a/docs/lightshow_lol.md +++ b/docs/lightshow_lol.md @@ -3,12 +3,64 @@ layout: default title: Lightshow.lol nav_order: 0 parent: Vortex Editors +has_children: true --- -# Lightshow.lol + + + +
+

⚠ This page is under construction ⚠

+
-{: .warning } -This page is under construction and will be ready soon +# Lightshow.lol Welcome to the Vortex Engine wiki! This page details how to use the web-based Vortex Editor [lightshow.lol](https://lightshow.lol). @@ -18,90 +70,42 @@ Lightshow.lol is an online tool that allows you to design, preview, and export c The lightshow preview is the main focus of the page, with various control panels serving to modify the pattern, colorset, and preview animation. -{: .important } -Although the preview is an exact simulation of a real device, the preview will never look exactly the same as LEDs. - -## Preview Animation - -{: .important } -The animation panel only affects the virtual preview on screen, not the actual device! - - - -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. - -## Device Controls - - - -The **Device Controls** panel is the most basic of panels, offering only two simple purposes: selecting or connecting a device. - -- If a device is simply **selected**, the editor will allow creation of a mode tailored to that specific device (matching the number of LEDs). -- If a device is **connected** via USB, the editor will lock the device selection to the connected device type, unlocking further controls in the **Modes Panel** for communicating with the device. - -In both casesβ€”whether **Selecting** or **Connecting** a deviceβ€”the **LED Selection** panel will appear, showing an image of the device and all of its LEDs. - -## Modes Panel - - - -The **Modes Panel** organizes and manages your lightshow's overall structure. A **mode** is a collection of patterns (one for each LED), which can be switched on the device. - -### Key Features - -- **Mode Creation:** Add, edit, or delete modes with ease. -- **Mode Preview:** Simulate switching between modes to see their effect in real-time. -- **Import/Export:** Import existing modes from your device or export them for sharing. -- **Sharing:** Quickly share your mode with the Vortex Community. - -## LED Selection Panel - - - -The **LED Selection Panel** allows you to interact with and assign configurations to individual LEDs on your device. - -### Key Features - -- **Visual Interface:** View a layout of all LEDs on your device. -- **Individual Customization:** Select individual LEDs to assign patterns and colors. -- **Batch Selection:** Group LEDs for simultaneous modifications. - -## Pattern Panel - - - -The **Pattern Panel** is where you design and assign animations for your LEDs. Patterns determine how LEDs blink or animate over time. - -### Key Features - -- **Pattern Library:** Choose from a library of predefined patterns (e.g., strobe, dops, blend). -- **Custom Parameters:** Adjust parameters like blink size, gap size, blend speed, etc - -## Colorset Panel - - - -The **Colorset Panel** represents the list of colors for the selected leds of the current mode. - -### Key Features - -- **Drag and Drop** Drag to rearrange colors in your colorset. -- **Dynamic Color Picker:** Click to modify the color with the Color Picker - -## Color Picker - - - -The **Color Picker** is a detailed interface for picking new colors for a colorset. - -### Key Features - -- **Precision Control:** Fine-tune colors with RGB/HEX inputs. -- **Quick Adjustments:** Easily modify brightness, saturation, and hue. + + Important + Although the preview is an exact simulation of a real device, due to the difference in the way color is produced by LEDs and displays the preview will never look exactly the same as real LEDs. + + +---- +

Panel Breakdown

+

Select one of the Panels below to learn more about it

+ +
+ + πŸ”— Animation Panel β†’ + + + + πŸ”— Device Control β†’ + + + + πŸ”— Modes Panel β†’ + + + + πŸ”— Led Selection β†’ + + + + πŸ”— Pattern Panel β†’ + + + + πŸ”— Colorset Panel β†’ + + + + πŸ”— Color Picker β†’ + + +
diff --git a/docs/lightshow_lol_animation.md b/docs/lightshow_lol_animation.md new file mode 100644 index 0000000000..d8932f110c --- /dev/null +++ b/docs/lightshow_lol_animation.md @@ -0,0 +1,25 @@ +--- +layout: default +title: Preview Animation +nav_order: 0 +parent: Lightshow.lol +--- + +# Preview 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 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. + +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. diff --git a/docs/lightshow_lol_color_picker.md b/docs/lightshow_lol_color_picker.md new file mode 100644 index 0000000000..90ae322dcd --- /dev/null +++ b/docs/lightshow_lol_color_picker.md @@ -0,0 +1,17 @@ +--- +layout: default +title: Color Picker +nav_order: 6 +parent: Lightshow.lol +--- + +# Color Picker + + + +The **Color Picker** is a detailed interface for picking new colors for a colorset. + +### Key Features + +- **Precision Control:** Fine-tune colors with RGB/HEX inputs. +- **Quick Adjustments:** Easily modify brightness, saturation, and hue. \ No newline at end of file diff --git a/docs/lightshow_lol_colorset.md b/docs/lightshow_lol_colorset.md new file mode 100644 index 0000000000..527e69fccf --- /dev/null +++ b/docs/lightshow_lol_colorset.md @@ -0,0 +1,13 @@ +--- +layout: default +title: Colorset Controls +nav_order: 5 +parent: Lightshow.lol +--- + +# Colorset Controls + + + +The **Colorset Panel** represents the list of colors for the selected leds of the current mode. + diff --git a/docs/lightshow_lol_device_controls.md b/docs/lightshow_lol_device_controls.md new file mode 100644 index 0000000000..6134c5c5e7 --- /dev/null +++ b/docs/lightshow_lol_device_controls.md @@ -0,0 +1,20 @@ +--- +layout: default +title: Device Controls +nav_order: 1 +parent: Lightshow.lol +--- + +# Device Controls + + + +The **Device Controls Panel** is very simple, offering only two purposes: **selecting** or **connecting** a **device**. + +- When a **device** is: + - **selected**: modes tailored to that device can be made (same LED count). + - **connected**: device selection is locked, connection with the evice is established. + +In both cases, whether **Selecting** or **Connecting** a device, the **LED Selection Panel** will appear, this will be covered below. + + diff --git a/docs/lightshow_lol_led_selection.md b/docs/lightshow_lol_led_selection.md new file mode 100644 index 0000000000..a0915e6b73 --- /dev/null +++ b/docs/lightshow_lol_led_selection.md @@ -0,0 +1,19 @@ +--- +layout: default +title: Led Selection +nav_order: 3 +parent: Lightshow.lol +--- + +# LED Selection Panel + + + +The **LED Selection Panel** allows you to interact with and assign configurations to individual LEDs on your device. + +### Key Features + +- **Visual Interface:** View a layout of all LEDs on your device. +- **Individual Customization:** Select individual LEDs to assign patterns and colors. +- **Batch Selection:** Group LEDs for simultaneous modifications. + diff --git a/docs/lightshow_lol_modes.md b/docs/lightshow_lol_modes.md new file mode 100644 index 0000000000..2d7457b2b7 --- /dev/null +++ b/docs/lightshow_lol_modes.md @@ -0,0 +1,20 @@ +--- +layout: default +title: Modes List +nav_order: 2 +parent: Lightshow.lol +--- + +# Modes List + + + +The **Modes Panel** organizes and manages your lightshow's overall structure. A **mode** is a collection of patterns (one for each LED), which can be switched on the device. + +### Key Features + +- **Mode Creation:** Add, edit, or delete modes with ease. +- **Mode Preview:** Simulate switching between modes to see their effect in real-time. +- **Import/Export:** Import existing modes from your device or export them for sharing. +- **Sharing:** Quickly share your mode with the Vortex Community. + diff --git a/docs/lightshow_lol_pattern.md b/docs/lightshow_lol_pattern.md new file mode 100644 index 0000000000..667252f955 --- /dev/null +++ b/docs/lightshow_lol_pattern.md @@ -0,0 +1,18 @@ +--- +layout: default +title: Pattern Controls +nav_order: 4 +parent: Lightshow.lol +--- + +# Pattern Controls + + + +The **Pattern Panel** is where you design and assign animations for your LEDs. Patterns determine how LEDs blink or animate over time. + +### Key Features + +- **Pattern Library:** Choose from a library of predefined patterns (e.g., strobe, dops, blend). +- **Custom Parameters:** Adjust parameters like blink size, gap size, blend speed, etc +