Sử dụng components

Kích hoạt hệ thống components trong plugin của bạn diễn ra theo 2 bước.

1. Kích hoạt giao diện người dùng component
2. Lấy các giá trị màu từ các component tùy chỉnh

Cài đặt plugin

Bước đầu tiên để kích hoạt giao diện người dùng component là xác định các kênh thiết bị cho SignalRGB. Ở đây chúng ta sử dụng Corsair Node Pro làm ví dụ. Bắt đầu bằng cách tạo một mảng mô tả các kênh của chúng ta. Sau đó chúng ta sẽ truyền thông tin này cho backend của SignalRGB trong lệnh Initialize, để các kênh được tạo trước khi chúng ta cố gắng render bất cứ thứ gì.

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

Trong code trên bạn thấy rằng chúng ta tạo một mảng hai chiều cho các kênh của mình, trong đó mỗi mục chứa tên kênh và giới hạn LED của nó. Trong SetupChannels() đầu tiên chúng ta đặt giới hạn LED tổng thể, sau đó lặp đi lặp lại gọi device.addChannel cho mỗi mục trong mảng của chúng ta.

Vòng lặp này cũng có thể được thực thi trực tiếp mà không cần mảng, nếu bạn muốn hard-code nó.

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

Gọi hàm SetupChannels bên trong Initialize để hoàn tất quá trình khởi tạo thiết bị.

export function Initialize()
{
    SetupChannels()
}

Lưu các thay đổi tệp và các kênh của bạn sẽ xuất hiện trên trang thiết bị. Tiếp theo chúng ta sẽ đề cập đến việc lấy các giá trị màu từ các component đã chọn.

Lấy màu của toàn bộ kênh

Sau khi cài đặt các kênh, chúng ta cần lấy màu từ chúng — đây là lúc hữu ích khi có tên kênh được lưu trong mảng.

Ý tưởng chung là:

Đối với mỗi kênh -> Đối với mỗi component trên kênh -> getColors()

Tất cả điều này được đóng gói cho bạn trong hàm device.channel().getColors(). Corsair Node Pro gửi dữ liệu màu theo từng kênh, vì vậy chúng ta muốn giữ dữ liệu “riêng biệt” để xử lý đơn giản hơn.

Ở đây bạn sẽ nhận thấy một yếu tố bổ sung: chúng ta kiểm tra LedCount() của kênh, và nếu nó trả về 0, chúng ta để các kênh nhấp nháy cho người dùng. Đây là dấu hiệu hữu ích rằng các kênh vẫn cần được thiết lập.

Dưới đây là các ví dụ code cho trường hợp sử dụng phổ biến, hard-coded và không có kiểm tra nhấp nháy kênh.

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

Cuối cùng, chúng ta chỉ muốn gọi hàm này trong vòng lặp render. Phần dưới của hàm SendChannel chứa code để chuyển đổi các mảng màu thành các packet và truyền chúng đến thiết bị. Phần này dành riêng cho thiết bị và bạn phải tự xác định nó thông qua reverse engineering!

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

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

        SubmitLightingColors();
}

Tương tác với các component riêng lẻ

Một số thiết bị đặc biệt và đi chệch khỏi tiêu chuẩn, hoặc có lẽ bạn muốn làm điều gì đó mới trong plugin của mình và cần giao tiếp với các component riêng lẻ. Trong những trường hợp đó, chúng ta không thể sử dụng device.channel().getColors() và thay vào đó phải tự lặp qua các component riêng lẻ.

Để làm điều đó, chúng ta sử dụng device.channel().getComponentNames() để lấy tất cả các ID component, sau đó lặp qua chúng với device.channel().getComponentColors() để lấy các mảng màu riêng lẻ.

Ví dụ sau đây chỉ đơn giản nối các mảng riêng lẻ lại, nhưng ở giữa bạn có thể làm bất cứ điều gì cần thiết.

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

Nếu bạn cần thực sự đi sâu vào chi tiết trong plugin của mình, bạn có thể sử dụng device.channel.getComponent().