Usando Componentes

Ativar o sistema de componentes no seu plugin ocorre em 2 etapas.

1. Ativar a UI de componentes
2. Obter valores de cor dos componentes selecionados pelo utilizador

Configuração do Plugin

O primeiro passo para ativar a UI de componentes é definir os canais do dispositivo para o SignalRGB. Vamos usar o Corsair Node Pro como exemplo aqui. Comece criando um array para descrever como os nossos canais se parecem e, de seguida, enviaremos isso para o backend do SignalRGB na função initialize para que sejam criados antes de começarmos a tentar renderizar qualquer coisa.

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

No código acima, verá que estamos a criar um array 2D para os nossos canais, onde cada entrada representa o nome do canal seguido do seu limite de LEDs. Em SetupChannels() vamos definir o limite total de LEDs e depois chamar device.addChannel iterativamente para cada entrada do nosso array.

Este ciclo também pode ser executado diretamente sem o array se quiser deixar tudo fixo no código.

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

Chame a função SetupChannels dentro de Initialize para finalizar a inicialização do dispositivo.

export function Initialize()
{
    SetupChannels()
}

Guarde as alterações no ficheiro e os seus canais aparecerão na página do dispositivo. De seguida, vamos ver como obter valores de cor dos componentes selecionados.

Obtendo Todas as Cores do Canal

Depois de configurar os canais, precisamos de obter as cores deles — é aqui que guardar os nomes dos canais num array se torna útil.

A ideia geral é:

Para cada canal -> Para cada Componente no Canal -> getColors()

Tudo isto está encapsulado na função device.channel().getColors() para si. O Corsair Node Pro envia os seus dados de cor um canal por vez, portanto vamos querer manter os dados ‘separados’ para facilitar o trabalho.

Vai notar uma parte extra aqui: estamos a verificar o LedCount() do Canal e, se retornar 0, vamos pulsionar os canais para o utilizador. Isto é um bom indicador para que saibam que precisam de configurar os canais.

Abaixo encontrará exemplos de código para um caso de uso normal, com valores fixos e sem as verificações de pulso do canal.

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

Por fim, vamos querer chamar essa função no render loop. A parte inferior da função SendChannel contém o código para converter os arrays de cores em pacotes e enviá-los ao dispositivo. Isto é específico do dispositivo e cabe-lhe a si fazer a engenharia reversa!

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

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

        SubmitLightingColors();
}

Interagindo com Componentes Individuais

Alguns dispositivos são diferentes e fogem ao padrão, ou talvez esteja a tentar fazer algo novo no seu plugin e precise de interagir com componentes individuais. Nesses casos não podemos usar device.channel().getColors() e em vez disso precisamos de percorrer os componentes individuais nós próprios.

Para isso usaremos device.channel().getComponentNames() para obter todos os IDs dos componentes, depois iterar por eles usando device.channel().getComponentColors() para obter arrays de cores individuais.

O exemplo abaixo simplesmente concatena os arrays individuais, mas pode fazer o que precisar com eles no meio do processo.

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

Se precisar de aprofundar mais no seu plugin, pode usar device.channel.getComponent()