Utilisation des composants

L’activation du système de composants dans votre plugin se fait en 2 étapes.

1. Activation de l’interface utilisateur des composants
2. Récupération des valeurs de couleur depuis les composants sélectionnés par l’utilisateur

Configuration du plugin

La première étape pour activer l’interface utilisateur des composants est de définir les canaux de l’appareil pour SignalRGB. Nous allons utiliser le Corsair Node Pro comme exemple ici. Commencez par créer un tableau pour décrire à quoi ressemblent nos canaux, puis nous les enverrons au backend de SignalRGB dans la fonction d’initialisation pour qu’ils soient créés avant que nous commencions à essayer de rendre quoi que ce soit.

const DeviceMaxLedLimit = 204;
//Nom du canal, Limite de LEDs
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]);
    }
}

Dans le code ci-dessus, vous verrez que nous définissons un tableau 2D pour nos canaux, avec chaque entrée étant le nom du canal puis sa limite de LEDs. Dans SetupChannels(), nous allons définir la limite totale de LEDs, puis appeler itérativement device.addChannel pour chaque entrée dans notre tableau.

Cette boucle peut également être exécutée directement sans le tableau si vous souhaitez la coder en dur.

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

Appelez la fonction SetupChannels dans Initialize pour terminer l’initialisation de l’appareil.

export function Initialize()
{
    SetupChannels()
}

Sauvegardez les modifications du fichier et vos canaux apparaîtront sur la page de l’appareil. Ensuite, nous verrons comment obtenir des valeurs de couleur depuis les composants sélectionnés.

Obtenir les couleurs complètes du canal

Après avoir configuré les canaux, nous devrons récupérer les couleurs depuis eux - c’est là que la sauvegarde des noms de canaux dans un tableau est pratique.

L’idée générale est la suivante :

Pour chaque canal -> Pour chaque composant sur le canal -> getColors()

Tout cela est encapsulé dans la fonction device.channel().getColors() pour vous. Le Corsair Node Pro envoie ses données de couleur un canal à la fois, nous voudrons donc que les données soient conservées ‘séparées’ pour nous faciliter la tâche.

Vous remarquerez un élément supplémentaire ici : nous vérifions le LedCount() du canal et s’il retourne 0, nous allons faire pulser les canaux pour l’utilisateur. C’est un bon indicateur pour lui faire savoir qu’il doit configurer les canaux.

Ci-dessous, vous trouverez les exemples de code pour un cas d’utilisation normal, codé en dur, et sans les vérifications de pulsation de canal.

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

Enfin, nous voudrons simplement appeler cette fonction dans la boucle de rendu. Le bas de la fonction SendChannel contient le code pour convertir les tableaux de couleurs en paquets et les envoyer à l’appareil. Cela sera spécifique à l’appareil et à vous de faire de la rétro-ingénierie !

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

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

        SubmitLightingColors();
}

Interaction avec les composants individuels

Certains appareils sont particuliers et sortent des sentiers battus, ou peut-être essayez-vous de faire quelque chose de nouveau dans votre plugin et avez besoin d’interagir avec des composants individuels. Dans ces cas, nous ne pouvons pas utiliser device.channel().getColors() et devons plutôt boucler sur les composants individuels nous-mêmes.

Pour cela, nous utiliserons device.channel().getComponentNames() pour obtenir tous les identifiants de composants, puis itérerons à travers eux en utilisant device.channel().getComponentColors() pour obtenir des tableaux de couleurs individuels.

L’exemple ci-dessous concatène simplement les tableaux individuels ensemble, mais vous pouvez faire tout ce dont vous avez besoin avec eux entre les deux.

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

Si vous avez besoin d’aller plus loin dans les détails de votre plugin, vous pouvez utiliser device.channel.getComponent()