การใช้คอมโพเนนต์

การเปิดใช้งานระบบคอมโพเนนต์ในปลั๊กอินของคุณแบ่งออกเป็น 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]);
    }
}

ในโค้ดข้างต้น คุณจะเห็นว่าเรากำลังจัดวางอาร์เรย์ 2 มิติสำหรับแชนเนล โดยแต่ละรายการประกอบด้วยชื่อแชนเนลตามด้วยขีดจำกัด LED ของแชนเนลนั้น ใน SetupChannels() เราจะตั้งค่าขีดจำกัด LED ทั้งหมด แล้วเรียก 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 เราจะทำให้แชนเนลกะพริบเป็นจังหวะ (pulse) ให้ผู้ใช้เห็น ซึ่งเป็นสัญญาณที่ดีให้ผู้ใช้รู้ว่าต้องตั้งค่าแชนเนล

ด้านล่างนี้คุณจะพบตัวอย่างโค้ดสำหรับกรณีการใช้งานทั่วไป แบบกำหนดค่าตายตัว และแบบไม่มีการตรวจสอบการกะพริบของแชนเนล

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() ได้