Usando Componentes

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

1. Habilitando a UI de componentes
2. Obtendo valores de cor dos componentes selecionados pelo usuário

Configuração do Plugin

O passo inicial para habilitar 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 nossos canais se parecem, depois enviaremos isso para o backend do SignalRGB na função initialize para que eles 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, você verá que estamos criando um array 2D para 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.

Esse loop também pode ser executado diretamente sem o array se você 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()
}

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

Obtendo Todas as Cores do Canal

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

A ideia geral é:

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

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

Você vai notar uma parte extra aqui: estamos verificando o LedCount() do Canal e, se retornar 0, vamos pulsionar os canais para o usuário. Isso é um bom indicador para que saibam que precisam configurar os canais.

Abaixo você 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. Isso é específico do dispositivo e cabe a você 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 quebram o padrão, ou talvez você esteja tentando fazer algo novo no seu plugin e precise interagir com componentes individuais. Nesses casos não podemos usar device.channel().getColors() e em vez disso precisamos percorrer os componentes individuais nós mesmos.

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 você 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 você precisar se aprofundar mais no seu plugin, pode usar device.channel.getComponent()