컴포넌트 사용

플러그인에서 컴포넌트 시스템을 활성화하는 것은 두 단계로 이루어집니다.

1. 컴포넌트 UI 활성화
2. 사용자가 선택한 컴포넌트에서 색상 값 가져오기

플러그인 설정

컴포넌트 UI를 활성화하는 초기 단계는 SignalRGB에 대한 장치 채널을 정의하는 것입니다. 여기서는 Corsair Node Pro를 예시로 사용합니다. 먼저 채널의 모양을 설명하는 배열을 만든 다음, 렌더링을 시작하기 전에 채널이 생성되도록 초기화 함수에서 SignalRGB 백엔드로 전달합니다.

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

위 코드에서 각 항목이 채널 이름과 LED 한계로 구성된 2D 배열을 설정하는 것을 볼 수 있습니다. SetupChannels()에서 총 LED 한계를 설정한 다음 배열의 각 항목에 대해 반복적으로 device.addChannel을 호출합니다.

원하는 경우 배열 없이 직접 하드코딩하여 이 루프를 실행할 수도 있습니다.

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

Initialize 안에서 SetupChannels 함수를 호출하여 장치 초기화를 완료하십시오.

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()를 사용할 수 있습니다.