How to Create custom Components with the Nollie x SignalRGB Component Editor

The Nollie x SignalRGB Component Editor is an offline desktop tool created by qiangqiang101 and the Nollie community. It allows you to visually design, edit, and export custom LED layouts as:

1. SignalRGB Components (.json) — Placed into %USERPROFILE%\Documents\WhirlwindFX\Components to give SignalRGB accurate physical LED locations for smooth, non-warped lighting effects across fans, strips, blocks, and custom rigs.
2. NollieRGB VMAPs & Components (.json) — Loaded into NollieRGB 2.2, supporting custom LED indexing and LED shielding (hiding) to disable unwanted LEDs (e.g. inner fan rings or daisy-chain bridges).
3. OpenRGB Visual Map Converter — Converts existing OpenRGB visual maps into ready-to-use SignalRGB components or NollieRGB VMAPs.

---

Prerequisites & Download

1. Ensure .NET 8.0 Desktop Runtime is installed on your Windows system.
2. Download the latest release .zip from:
   • GitLab: Nollie-SignalRGB-Component-Editor Releases
   • GitHub: SignalRGB-CompGen Releases
3. Right-click the downloaded .zip file, open Properties, check Unblock if present, and click OK.
4. Extract the .zip archive and launch compeditor.exe.

Interface Overview & Navigation

The interface is divided into three key sections:

• Toolbar & Controls: Shape generators (Linear, Matrix, L-Shape, U-Shape, Rectangle), transformation tools (Move, Rotate, Flip, AutoResize, Hide), and Tool Selector (Select, Place LED, Guide Image).

• Canvas: Interactive grid displaying placed LEDs (with their channel mapping index), drag-selection box, and reference guide image.

• Details Panel: Device metadata (Name, Vendor, Product, Type, canvas Width/Height, LED Count, and Component icon/URL).

Canvas Navigation

Action	Mouse / Shortcut
Pan Canvas	Hold Middle Mouse Button and drag
Zoom In / Out	Mouse Scroll Wheel
Open Context Menu	Right-Click anywhere on the canvas
Inspect LED	Hover mouse over any LED to view its Index, Name, and (X, Y) Coordinates

How to Draw Components

Method A: Manual Drawing with the Place LED Tool

1. Under Tools, select Place LED Tool (or use the left toolbar).
2. Click on any grid cell to place a single LED.
3. Click and drag across consecutive cells to rapidly “paint” sequential LEDs in order.
4. Each LED automatically increments in index number (0, 1, 2, ... or 1, 2, 3... depending on your index shift settings).

Method B: Tracing with a Guide Image

For fans with circular rings, GPU waterblocks, or intricate case panels, trace directly over a physical photo:

1. Click Insert Guide Image (or right-click canvas > Insert Guide Image).
2. Select a .png, .jpg, or .webp photo of your device.
3. Switch to the Guide Image Tool under Tools.
4. Drag the corner handles to resize the background image to match your canvas scale, or drag the center to reposition it.
5. Switch back to Place LED Tool and click directly on each physical LED location visible on the picture.

Method C: Shape Generators

For common geometric patterns, generate them with precise spacing in seconds:

• Linear Generator: Perfect for straight LED strips or GPU backplates. Choose LED count, direction (Up, Down, Left, Right), and spacing.
• Matrix Generator: Ideal for 2D LED matrix panels. Enter Rows and Columns, select starting corner/direction, and enable Serpentine if the LED wiring zigzags back and forth.
• L-Shape / U-Shape: Great for corner accents and cable routing. Configure corner bend position and optional Rounded Corners.
• Rectangle Generator: Creates closed rectangular perimeters (e.g. square fan frames or AIO pump heads).

Editing, Transforming & Daisy-Chaining

Selection & Multi-Select

• Select the Select Tool.
• Click an individual LED, or click and drag a rectangular bounding box across multiple LEDs.
• Hold Ctrl and click individual LEDs to add them to your selection.
• Drag selected LEDs to move the entire group to a new position on the canvas.

Transformations

• Rotate Clockwise / Counterclockwise: Rotates selected LEDs (or all LEDs if none selected) by 90 degrees and automatically adapts canvas width and height.
• Flip Horizontal / Flip Vertical: Mirrors LED coordinates.
• AutoResize: Click AutoResize to instantly trim empty margins, aligning the top-left to coordinate (0, 0) and shrinking canvas dimensions to fit snugly.

Daisy-Chaining Fans & Strips (Copy & Paste)

If you have 3 identical fans chained together:

1. Draw the first fan completely.
2. Drag-select all LEDs in the fan.
3. Press Ctrl + C (or right-click > Copy).
4. Move your cursor to the right of the first fan and press Ctrl + V (or right-click > Paste).
5. The pasted LEDs will automatically continue the mapping index from the end of the previous fan!

Hiding / Shielding LEDs (For NollieRGB VMAP)

NollieRGB controllers allow you to disable or shield specific LEDs in a chain so they do not light up during hardware effects, without breaking the sequential numbering expected by the controller:

1. Use the Select Tool to highlight the LEDs you wish to deactivate (e.g. the 6 inner LEDs of a dual-ring fan).
2. Press Ctrl + H (or click the Hide/Show LEDs eye icon).
3. Hidden LEDs will change from orange to silver/grey.
4. When exported to NollieRGB VMAP, these LEDs are placed into fx_ch_zled_num / ZLedMapping. Nollie controllers will turn off these specific LEDs while seamlessly mapping effects across the active ones.

Tips: if the NollieRGB effect you chosen supports Process Color3 setting, the hidden LEDs will light up as color3. Remember also enable Vmap process setting for it to work.

Exporting for SignalRGB

1. In the right panel, fill in the metadata:
   • Name: Component display name (e.g., Thermalright TL-C12C Fan).
   • Vendor: Manufacturer brand (e.g., Thermalright).
   • Product: Product model.
   • Type: Choose from Fan, Strip, AIO, GPU, Case, etc.
   • Component Image: Click Select Image or paste an Image URL for the SignalRGB device card icon.
2. Click AutoResize to remove unnecessary canvas padding.
3. Go to File > Save As > SignalRGB Component.
4. Save the .json file to your SignalRGB user components folder:

   %USERPROFILE%\Documents\WhirlwindFX\Components\

   (e.g., C:\Users\<YourUsername>\Documents\WhirlwindFX\Components\my_fan.json)
5. Restart SignalRGB.
6. Inside SignalRGB:
   • Go to Devices.
   • Select your controller (e.g., Nollie16 or Nollie32).
   • Click on the desired Channel > Click Add Component (+).
   • Your newly created component will appear in the library with its custom LED layout!

Exporting for NollieRGB (VMAP & Component)

Starting with NollieRGB 2.0, it supports custom visual components and hardware VMAPs:

Saving as NollieRGB VMAP

1. Ensure you have marked any shielded LEDs with Ctrl + H.
2. Go to File > Save As > NollieRGB VMAP.
3. Save the .json file.
4. Open NollieRGB > go to LED Settings > select Vmap.
5. Load your saved .json file. Active LEDs appear white, disabled/hidden LEDs appear black. Click Save to flash the layout to your Nollie hardware.

Adding to NollieRGB Component Presets

You can also drop your exported SignalRGB component or VMAP file directly into the Components folder inside your NollieRGB program folder:

<NollieRGB_Directory>\Components\

Restart NollieRGB, open LED Settings > Component, and your custom device will be ready to assign to any channel with 1 click.

Importing OpenRGB Visual Maps

If you already created visual maps in OpenRGB using its Visual Map plugin:

1. Click File > Import OpenRGB Visual Map.
2. Navigate to your OpenRGB settings folder:

   %APPDATA%\OpenRGB\plugins\settings\virtual-controllers\

3. Select the visual map file.
4. Pick the specific device/zone from the dropdown in the import dialog.
5. The component editor will automatically extract LED coordinates, matrix layouts, and indices into the canvas, ready to be exported to SignalRGB or NollieRGB!

Keyboard & Mouse Shortcut Cheatsheet

Shortcut / Input	Function
Left Click	Select LED (Select Tool) / Place single LED (Place LED Tool)
Left Click Drag	Box multi-select (Select Tool) / Continuous LED paint (Place LED Tool)
Middle Click Drag	Pan canvas
Scroll Wheel	Zoom in / Zoom out
Right Click	Open context menu at mouse position
Delete (Tap)	Remove last placed LED / object
Delete (Hold > 3s)	Clear all LEDs from canvas
Ctrl + C	Copy selected LEDs to clipboard
Ctrl + V	Paste copied LEDs at current mouse position
Ctrl + H	Toggle Show / Hide (Silver = Shielded LED for VMAP)
Arrow Keys	Shift entire canvas LEDs Up / Down / Left / Right by 1 unit
Shift + Arrow Keys	Move selected LEDs independently
Spacebar	Place LED at current mouse position