Использование компонентов

Включение системы компонентов в плагине происходит в 2 этапа.

1. Включение UI компонентов
2. Получение цветовых значений из выбранных пользователем компонентов

Настройка плагина

Первый шаг для включения UI компонентов — определить каналы устройства для SignalRGB. В качестве примера возьмём Corsair Node Pro. Начните с создания массива, описывающего каналы, затем передайте его в бэкенд SignalRGB в функции initialize, чтобы они были созданы до начала рендеринга.

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

В приведённом выше коде вы видите двумерный массив для каналов, где каждая запись — имя канала и его лимит светодиодов. В SetupChannels() устанавливается общий лимит светодиодов, затем итеративно вызывается device.addChannel для каждой записи массива.

Этот цикл можно также выполнить напрямую без массива, если вы хотите жёстко задать значения.

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

Вызовите функцию SetupChannels внутри Initialize для завершения инициализации устройства.

export function Initialize()
{
    SetupChannels()
}

Сохраните изменения файла — на странице устройства появятся каналы. Далее займёмся получением цветовых значений из выбранных компонентов.

Получение цветов полного канала

После настройки каналов необходимо получить от них цвета — здесь и пригождается сохранение имён каналов в массив.

Общая идея такова:

Для каждого канала → Для каждого компонента на канале → getColors()

Всё это инкапсулировано в функцию device.channel().getColors(). Corsair Node Pro отправляет цветовые данные по одному каналу за раз, поэтому удобно хранить данные «раздельно».

Обратите внимание на ещё один момент: проверяется LedCount() канала, и если он возвращает 0, каналы будут пульсировать — это удобный индикатор для пользователя, что каналы нужно настроить.

Ниже приведены примеры кода для обычного использования, с жёстким кодированием и без проверок пульсации канала.

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

Наконец, эту функцию нужно просто вызывать в цикле рендеринга. В конце функции SendChannel находится код для преобразования цветовых массивов в пакеты и их отправки на устройство. Это специфично для устройства и должно быть выяснено вами самостоятельно методом обратной разработки!

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

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

        SubmitLightingColors();
}

Взаимодействие с отдельными компонентами

Некоторые устройства имеют нестандартную структуру, или вы можете захотеть сделать что-то нестандартное в плагине и взаимодействовать с отдельными компонентами. В таких случаях нельзя использовать device.channel().getColors() — вместо этого нужно самостоятельно перебирать отдельные компоненты.

Для этого используйте device.channel().getComponentNames(), чтобы получить все ID компонентов, затем итеративно вызывайте device.channel().getComponentColors() для получения отдельных цветовых массивов.

Пример ниже просто конкатенирует отдельные массивы, но между ними можно делать всё что нужно.

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

Если нужно углубиться ещё больше, можно использовать device.channel.getComponent().