Web Wallpaper iCUE Reference

The Corsair iCUE API allows users with Corsair iCUE hardware to set up custom-colored lighting matching their wallpapers. For more information, visit the Corsair website: https://www.corsair.com/ww/en/icue Download the iCUE SDK from the support sections to access some enumerations referred to below.

# Activating iCUE Support in your Wallpaper

iCUE will be loaded asynchronously when available. Create a global window.wallpaperPluginListener object with the following function to detect it:

````
window.wallpaperPluginListener = {
    onPluginLoaded: function (name, version) {
        if (name === 'cue') {
        }
    }
};

````

After it has been loaded, you can access its methods via the global object **window.cue**.

# iCUE Methods

The following methods are available via **window.cue**:

## getProtocolDetails

Returns current status and version of iCUE SDK.

*C++ SDK equivalent to CorsairProtocolDetails returned after handshake with iCUE*

````
window.cue.getProtocolDetails(function (protocolDetails) {});

````

### protocolDetails members

See CorsairProtocolDetails in C++ SDK.

* sdkVersion
* serverVersion
* sdkProtocolVersion
* serverProtocolVersion
* breakingChanges

## getDeviceCount

Returns the number of recognized iCUE compatible devices on the system.

*C++ SDK equivalent to CorsairGetDeviceCount();*

````
window.cue.getDeviceCount(function (deviceCount) {});

````

## getDeviceInfo

Returns all information specific to a single device.

*C++ SDK equivalent to CorsairGetDeviceInfo();*

````
window.cue.getDeviceInfo(deviceIndex, function (deviceInfo) {});

````

### deviceInfo members

* type: see CorsairDeviceType in CUESDK.h
* model: human readable name of the device
* physicalLayout: see CorsairPhysicalLayout in CUESDK.h
* logicalLayout: see CorsairLogicalLayout in CUESDK.h
* ledCount: number of available LEDs
* capsMask: see CorsairDeviceCaps in CUESDK.h

## getLedPositionsByDeviceIndex

Returns all available LED information for specified device.

*C++ SDK equivalent to CorsairGetLedPositionsByDeviceIndex();*

````
window.cue.getLedPositionsByDeviceIndex(function (arrayOfLEDs) {});

````

### members of objects in arrayOfLEDs array

See CorsairLedPosition in C++ SDK.

* ledId: CorsairLedId as integer
* ledIdName: CorsairLedId as string
* top: value in mm
* left: value in mm
* width: value in mm
* height: value in mm

## setLedsColorsAsync

Updates all LEDs specified via parameter. List all available LEDs via getLedPositionsByDeviceIndex above.

*C++ SDK equivalent to CorsairSetLedsColorsAsync();*

````
window.cue.setLedsColorsAsync(arrayOfLEDColors);

````

### members of objects in arrayOfLEDColors array

See CorsairLedColor in C++ SDK.

* ledId: CorsairLedId as integer
* r
* g
* b

## setAllLedsColorsAsync

Updates all LEDs for given devices to one specific color.

*C++ SDK equivalent to CorsairSetLedsColorsAsync();*

````
window.cue.setAllLedsColorsAsync(deviceIndexOrArray, LEDColor);

````

### members of LEDColor

See CorsairLedColor in C++ SDK.

* ledId: CorsairLedId as integer
* r
* g
* b

## setLedColorsByImageData

Updates all LEDs of given devices based on an RGB bitmap provided from an HTML canvas, for example.

````
window.cue.setLedColorsByImageData(deviceIndexOrArray, encodedImageData, width, height);

````

The encodedImageData parameter is a string that contains concatenated RGB data. From any given canvas element, you can produce it like this:

````
function getEncodedCanvasImageData(canvas) {
    var context = canvas.getContext('2d');
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    var colorArray = [];

    for (var d = 0; d < imageData.data.length; d += 4) {
        var write = d / 4 * 3;
        colorArray[write] = imageData.data[d];
        colorArray[write + 1] = imageData.data[d + 1];
        colorArray[write + 2] = imageData.data[d + 2];
    }
    return String.fromCharCode.apply(null, colorArray);
}

var encodedImageData = getEncodedCanvasImageData(canvas);
window.cue.setLedColorsByImageData(myDeviceIndices, encodedImageData,
                                 canvas.width, canvas.height);

````

This is currently the most efficient way to compress and send the bitmap. It's still important that you choose a canvas of appropriate size (100x20 pixels), you can efficiently downsample any given canvas by copying it to a smaller one first before generating the bitmap.