Componenten gebruiken

Het inschakelen van het componentsysteem in uw plugin bestaat uit 2 fasen.

1. De component-UI inschakelen
2. Kleurwaarden ophalen van door de gebruiker geselecteerde componenten

Plugin-instelling

De eerste stap om de component-UI in te schakelen is het definiëren van de apparaatkanalen voor SignalRGB. We gebruiken de Corsair Node Pro als voorbeeld. Begin met het aanmaken van een array om te beschrijven hoe onze kanalen eruitzien, en stuur deze vervolgens naar de backend van SignalRGB in de initialize-functie zodat ze worden aangemaakt voordat we iets proberen te renderen.

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]);
    }
}

In de bovenstaande code ziet u een 2D-array voor onze kanalen, waarbij elk item bestaat uit de naam van het kanaal gevolgd door de LED-limiet. In SetupChannels() stellen we de totale LED-limiet in en roepen we vervolgens iteratief device.addChannel aan voor elk item in onze array.

Deze lus kan ook direct worden uitgevoerd zonder de array als u het wilt hardcoderen.

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

Roep de SetupChannels-functie aan binnen Initialize om de apparaatinitialisatie te voltooien.

export function Initialize()
{
    SetupChannels()
}

Sla de bestandswijzigingen op en uw kanalen verschijnen op de apparaatpagina. Vervolgens gaan we in op het ophalen van kleurwaarden van geselecteerde componenten.

Volledige kanaalkleurgegevens ophalen

Na het instellen van de kanalen moeten we er kleuren van ophalen — dit is waar het opslaan van de kanaalnamen in een array handig is.

Het algemene idee is:

Voor elk kanaal → Voor elke component op het kanaal → getColors()

Dit is allemaal ingekapseld in de functie device.channel().getColors(). De Corsair Node Pro verzendt zijn kleurdata één kanaal tegelijk, dus we willen de data ‘gescheiden’ bewaren om het gemakkelijk te maken.

U ziet hier nog één extra element: we controleren de LedCount() van het kanaal en als deze 0 retourneert, pulseren we de kanalen voor de gebruiker. Dit is een handige aanwijzing dat ze de kanalen nog moeten instellen.

Hieronder vindt u codevoorbeelden voor een normaal gebruiksscenario, hardgecodeerd en zonder de kanaalplulsecontroles.

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]
    //...
}

Tot slot roepen we deze functie eenvoudigweg aan in de renderlus. Het onderste deel van de SendChannel-functie bevat de code om de kleur-arrays om te zetten in pakketten en naar het apparaat te verzenden. Dat is apparaatspecifiek en iets dat u zelf moet reverse-engineeren!

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

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

        SubmitLightingColors();
}

Interactie met afzonderlijke componenten

Sommige apparaten wijken af van het standaardpatroon, of misschien probeert u iets nieuws in uw plugin en moet u met afzonderlijke componenten werken. In deze gevallen kunnen we device.channel().getColors() niet gebruiken en moeten we in plaats daarvan zelf door afzonderlijke componenten heen lopen.

Hiervoor gebruiken we device.channel().getComponentNames() om alle component-ID’s te krijgen, en vervolgens itereren we er doorheen met device.channel().getComponentColors() om individuele kleur-arrays te krijgen.

Het onderstaande voorbeeld voegt de individuele arrays eenvoudigweg samen, maar u kunt er tussenin alles mee doen wat u nodig heeft.

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)
        }

Als u echt diep in uw plugin wilt duiken, kunt u device.channel.getComponent() gebruiken.