Using Components

Mengaktifkan component system dalam plugin Anda terdiri dari 2 tahap.

1. Mengaktifkan UI component
2. Mengambil nilai warna dari komponen yang dipilih pengguna

Setup Plugin

Langkah awal untuk mengaktifkan UI component adalah mendefinisikan channel perangkat untuk SignalRGB. Kami akan menggunakan Corsair Node Pro sebagai contoh di sini. Mulailah dengan membuat array untuk menguraikan tampilan channel kami, lalu kami akan mengirimkannya ke backend SignalRGB dalam fungsi initialize sehingga mereka dibuat sebelum kami mulai mencoba merender apa pun.

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

Dalam kode di atas Anda akan melihat kami menyusun array 2D untuk channel kami, dengan setiap entri berupa nama channel kemudian batas LED-nya. Di dalam SetupChannels() kami akan mengatur total batas LED, kemudian secara iteratif memanggil device.addChannel untuk setiap entri dalam array kami.

Loop ini juga dapat dieksekusi langsung tanpa array jika Anda ingin melakukan hardcode.

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

Panggil fungsi SetupChannels di dalam Initialize untuk menyelesaikan inisialisasi perangkat.

export function Initialize()
{
    SetupChannels()
}

Simpan perubahan file dan channel Anda akan muncul di halaman perangkat. Selanjutnya, kami akan menggali cara mendapatkan nilai warna dari komponen yang dipilih.

Mendapatkan Warna Channel Penuh

Setelah menyiapkan channel, kami perlu mengambil warna dari mereka — di sinilah menyimpan nama channel ke dalam array menjadi berguna.

Ide umumnya adalah:

Untuk setiap channel -> Untuk setiap Component pada Channel -> getColors()

Ini semua dienkapsulasi ke dalam fungsi device.channel().getColors() untuk Anda. Corsair Node Pro mengirim data warnanya satu channel sekaligus, jadi kami ingin data disimpan ‘terpisah’ untuk memudahkan kami.

Anda akan melihat satu bagian tambahan di sini: kami memeriksa LedCount() dari Channel dan jika mengembalikan 0, kami akan mem-pulse channel untuk pengguna. Ini adalah indikator yang baik bagi mereka untuk mengetahui bahwa mereka perlu menyiapkan channel.

Di bawah ini Anda akan menemukan contoh kode untuk kasus penggunaan normal, hardcoded, dan tanpa pemeriksaan pulse channel.

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

Terakhir, kami hanya perlu memanggil fungsi ini dalam loop render. Bagian bawah fungsi SendChannel berisi kode untuk mengonversi array warna menjadi paket dan mengirimkannya ke perangkat. Itu akan spesifik untuk perangkat dan harus Anda reverse engineer sendiri!

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

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

        SubmitLightingColors();
}

Berinteraksi dengan Component Individual

Beberapa perangkat tidak biasa dan mematahkan pola, atau mungkin Anda mencoba melakukan sesuatu yang baru dalam plugin Anda dan perlu berinteraksi dengan komponen individual. Dalam kasus ini kami tidak dapat menggunakan device.channel().getColors() dan sebaliknya perlu melakukan iterasi melalui komponen individual sendiri.

Untuk ini kami akan menggunakan device.channel().getComponentNames() untuk mendapatkan semua ID komponen, kemudian melakukan iterasi melaluinya menggunakan device.channel().getComponentColors() untuk mendapatkan array warna individual.

Contoh di bawah ini hanya menggabungkan array individual bersama-sama, tetapi Anda dapat melakukan apa pun yang Anda butuhkan dengan mereka di antaranya.

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

Jika Anda perlu menggali lebih dalam dalam plugin Anda, Anda dapat menggunakan device.channel.getComponent()