Använda komponenter

Att aktivera komponentssystemet i ditt plugin sker i 2 steg.

1. Aktivera komponent-UI
2. Hämta färgvärden från de komponenter användaren valt

Plugin-inställning

Det första steget för att aktivera komponent-UI är att definiera enhetskanalerna för SignalRGB. Här använder vi Corsair Node Pro som exempel. Börja med att skapa en array som sammanfattar hur våra kanaler ser ut, skicka dem sedan till SignalRGB:s backend i initieringsfunktionen för att de ska skapas innan något ritas.

const DeviceMaxLedLimit = 204;
// Kanalnamn, lysdiodsgräns
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]);
    }
}

I koden ovan ser du att vi skapar en 2D-array för våra kanaler; varje post är kanalnamnet följt av lysdiodsgränsen. Inuti SetupChannels() ställer vi in den totala lysdiodsgränsen och anropar sedan device.addChannel iterativt för varje post i vår array.

Om du föredrar det kan den här loopen också köras direkt utan en array.

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

Anropa SetupChannels-funktionen inuti Initialize för att slutföra enhetsinitiering.

export function Initialize()
{
    SetupChannels()
}

Spara filändringarna; dina kanaler visas på enhetssidan. Sedan tittar vi på hur man hämtar färgvärden från valda komponenter.

Hämta fullständiga kanalfärger

När kanalerna är inställda behöver vi hämta deras färger — det är här det lönar sig att spara kanalnamnen i en array.

Den allmänna idén är:

För varje kanal -> För varje komponent i kanalen -> getColors()

Allt det här är inbyggt i funktionen device.channel().getColors() åt dig. Corsair Node Pro skickar färgdata en kanal i taget, så vi vill hålla dem ‘separerade’ för att underlätta datan.

Du märker en extra bit här: vi kontrollerar LedCount()-värdet på kanalen och om det returnerar 0 pulserar vi kanalerna för användaren. Det är en trevlig indikator för dem att de behöver konfigurera sina kanaler.

Nedan finns kodexempel för ett normalt användningsfall, hårdkodat och utan kanalpulskontroller.

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

Slutligen vill vi anropa den här funktionen i render-loopen. Botten av funktionen SendChannel innehåller koden för att konvertera färgarrayerna till paket och skicka dem till enheten. Det är enhetsspecifikt och du måste reverse-engineera det själv!

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

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

        SubmitLightingColors();
}

Interagera med individuella komponenter

Vissa enheter beter sig konstigt och bryter mönstret, eller kanske försöker du göra något nytt i ditt plugin och behöver interagera med individuella komponenter. I dessa fall kan vi inte använda device.channel().getColors() och behöver istället loopa genom individuella komponenter själva.

För det använder vi device.channel().getComponentNames() för att hämta alla komponent-ID:n, och itererar sedan genom dem med device.channel().getComponentColors() för att hämta individuella färgarrayer.

Exemplet nedan konkatenerar bara de individuella arrayerna ihop, men du kan göra vad du vill med dem i mellantiden.

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

Om du verkligen behöver dyka djupt in i ditt plugin kan du använda device.channel.getComponent().