Components verwenden

Die Aktivierung des Component-Systems in Ihrem Plugin erfolgt in 2 Schritten.

1. Aktivierung der Component-Benutzeroberfläche
2. Abrufen von Farbwerten aus benutzerdefinierten Components

Plugin-Einrichtung

Der erste Schritt zur Aktivierung der Component-Benutzeroberfläche besteht darin, die Gerätekanäle für SignalRGB zu definieren. Wir verwenden hier den Corsair Node Pro als Beispiel. Beginnen Sie damit, ein Array zu erstellen, das unsere Kanäle beschreibt. Anschließend übermitteln wir diese Informationen im Initialize-Befehl an das Backend von SignalRGB, sodass die Kanäle erstellt werden, bevor wir versuchen, etwas zu rendern.

const DeviceMaxLedLimit = 204;
//Channel Name, Led Limit
var ChannelArray = [
    ["Channel 1", 204],
    ["Channel 2", 204],
]

function SetupChannels(){
    device.SetLedLimit(DeviceMaxLedLimit);
    for(let i = 0; i < ChannelArray.length; i++){
        device.addChannel(ChannelArray[i][0],ChannelArray[i][1]);
    }
}

Im obigen Code sehen Sie, dass wir ein zweidimensionales Array für unsere Kanäle anlegen, wobei jeder Eintrag den Kanalnamen und sein LED-Limit enthält. In SetupChannels() setzen wir zunächst das gesamte LED-Limit und rufen dann iterativ device.addChannel für jeden Eintrag in unserem Array auf.

Diese Schleife kann auch direkt ohne das Array ausgeführt werden, wenn Sie sie fest codieren möchten.

function SetupChannels(){
    device.SetLedLimit(204);
    device.addChannel("Channel 1",204);
    device.addChannel("Channel 2",204);
}

Rufen Sie die Funktion SetupChannels innerhalb von Initialize auf, um die Geräteinitialisierung abzuschließen.

export function Initialize()
{
    SetupChannels()
}

Speichern Sie die Dateiänderungen und Ihre Kanäle erscheinen auf der Geräteseite. Als Nächstes befassen wir uns mit dem Abrufen von Farbwerten aus ausgewählten Components.

Vollständige Kanal-Farben abrufen

Nach dem Einrichten der Kanäle müssen wir Farben aus ihnen abrufen — hier ist es praktisch, die Kanalnamen in einem Array gespeichert zu haben.

Die allgemeine Idee lautet:

Für jeden Kanal -> Für jede Component auf dem Kanal -> getColors()

Dies ist alles in der Funktion device.channel().getColors() für Sie gekapselt. Der Corsair Node Pro sendet seine Farbdaten kanalweise, daher möchten wir die Daten “getrennt” halten, um die Verarbeitung zu vereinfachen.

Sie werden hier ein zusätzliches Element bemerken: Wir prüfen den LedCount() des Kanals, und wenn dieser 0 zurückgibt, lassen wir die Kanäle für den Benutzer pulsen. Dies ist ein nützlicher Hinweis, dass die Kanäle noch eingerichtet werden müssen.

Unten finden Sie die Code-Beispiele für einen normalen Anwendungsfall, fest codiert und ohne die Kanal-Puls-Prüfungen.

function SendChannel(Channel)
{
    let ChannelLedCount = device.channel(ChannelArray[Channel][0]).LedCount();
    let ColorData = []

    if(device.getLedCount() == 0){
        ChannelLedCount = 80;
        let pulseColor = device.getChannelPulseColor(ChannelArray[Channel][0], ChannelLedCount);
        ColorData = device.createColorArray(pulseColor, ChannelLedCount, "Seperate");
    }else{
        ColorData = device.channel(ChannelArray[Channel][0]).getColors("Seperate");
    }

    let RedChannelData = ColorData[0]
    let GreenChannelData = ColorData[1]
    let BlueChannelData = ColorData[2]
    //...
}

function SendChannel1()
{
    let ChannelLedCount = device.channel("Channel 1").LedCount();
    let ColorData = []

    if(device.getLedCount() == 0){
        ChannelLedCount = 80;
        let pulseColor = device.getChannelPulseColor("Channel 1", ChannelLedCount);
        ColorData = device.createColorArray(pulseColor, ChannelLedCount, "Seperate");
    }else{
        ColorData = device.channel("Channel 1").getColors("Seperate");
    }

    let RedChannelData = ColorData[0]
    let GreenChannelData = ColorData[1]
    let BlueChannelData = ColorData[2]
    //...
}

SendChannel(Channel)
{
    let ColorData = []
    ColorData = device.channel(ChannelArray[Channel][0]).getColors("Seperate");

    let RedChannelData = ColorData[0]
    let GreenChannelData = ColorData[1]
    let BlueChannelData = ColorData[2]
    //...
}

Zuletzt möchten wir diese Funktion einfach in der Render-Schleife aufrufen. Der untere Teil der Funktion SendChannel enthält den Code zur Umwandlung der Farb-Arrays in Pakete und zur Übertragung an das Gerät. Dieser Teil ist gerätespezifisch und muss von Ihnen selbst durch Reverse Engineering ermittelt werden!

export function Render()
{
        SendChannel(0);
        device.pause(1);

        SendChannel(1);
        device.pause(1);

        SubmitLightingColors();
}

Mit einzelnen Components interagieren

Manche Geräte sind besonders und weichen vom Standard ab, oder Sie möchten etwas Neuartiges in Ihrem Plugin tun und müssen mit einzelnen Components interagieren. In diesen Fällen können wir device.channel().getColors() nicht verwenden und müssen stattdessen selbst durch einzelne Components iterieren.

Dazu verwenden wir device.channel().getComponentNames(), um alle Component-IDs zu erhalten, und iterieren dann mit device.channel().getComponentColors() durch sie, um individuelle Farb-Arrays zu erhalten.

Das folgende Beispiel verkettet die einzelnen Arrays lediglich, aber Sie können dazwischen alles damit machen, was Sie benötigen.

let components = device.channel("Channel 1").getComponentNames();
        for(let i = 0; i < components.length;i++){
            let ComponentColors = device.channel("Channel 1").getComponentColors(components[i]);
            RGBData = RGBData.concat(ComponentColors)
        }

Wenn Sie in Ihrem Plugin wirklich ins Detail gehen müssen, können Sie device.channel.getComponent() verwenden.