Skip to content
JS Library for playing Chroma animations
JavaScript HTML Other
Branch: master
Clone or download
Latest commit a21f84e Jul 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images Added info about new methods May 21, 2018
.gitignore
Blank_ChromaLink.chroma Added blank animations Oct 4, 2017
Blank_Headset.chroma Added blank animations Oct 4, 2017
Blank_Keyboard.chroma Added blank animations Oct 4, 2017
Blank_Keypad.chroma
Blank_Mouse.chroma
Blank_Mousepad.chroma
ChromaLinkEffects.js Initial commit of project Sep 19, 2017
ChromaSDKImpl.js
Colors.html
EnvironmentSnow_Keyboard.chroma
FadeInOutGray_ChromaLink.chroma
FadeInOutGray_Headset.chroma Added layer sample May 21, 2018
FadeInOutGray_Keyboard.chroma Added layer sample May 21, 2018
FadeInOutGray_Keypad.chroma Added layer sample May 21, 2018
FadeInOutGray_Mouse.chroma Added layer sample May 21, 2018
FadeInOutGray_Mousepad.chroma
HeadsetEffects.js Initial commit of project Sep 19, 2017
KeyboardEffects.js
KeypadEffects.js Initial commit of project Sep 19, 2017
LayerSample.html Added layer sample May 21, 2018
ModalDlg.css
MouseEffects.js
MousematEffects.js Initial commit of project Sep 19, 2017
PlayAnimationSample.html
README.md Added info May 21, 2018
Random_ChromaLink.chroma
Random_Headset.chroma Initial commit of project Sep 19, 2017
Random_Keyboard.chroma Initial commit of project Sep 19, 2017
Random_Keypad.chroma Initial commit of project Sep 19, 2017
Random_Mouse.chroma
Random_Mousepad.chroma Initial commit of project Sep 19, 2017
RazerChromaSDKSampleApplication.html Initial commit of project Sep 19, 2017
RazerGreen_ChromaLink.chroma Updated Razer color Nov 7, 2017
RazerGreen_Headset.chroma Updated Razer color Nov 7, 2017
RazerGreen_Keyboard.chroma
RazerGreen_Keypad.chroma
RazerGreen_Mouse.chroma
RazerGreen_Mousepad.chroma Updated Razer color Nov 7, 2017
RingGray_ChromaLink.chroma Added layer sample May 21, 2018
RingGray_Headset.chroma
RingGray_Keyboard.chroma Added layer sample May 21, 2018
RingGray_Keypad.chroma
RingGray_Mouse.chroma
RingGray_Mousepad.chroma
ScriptInstallServer.cmd
ScriptStartServer.cmd
ServerNode.js
TabbedDlg.css
Wave_ChromaLink.chroma
Wave_Headset.chroma
Wave_Keyboard.chroma Added animation selector Dec 18, 2017
Wave_Keypad.chroma Added animation selector Dec 18, 2017
Wave_Mouse.chroma
Wave_Mousepad.chroma Added animation selector Dec 18, 2017
favicon.ico
jquery-3.3.1.min.js
package.json

README.md

HTML5ChromaSDK - JS Library for playing Chroma animations

  • REST Sample App - This repository expands from the sample app to include support for Chroma animation playback.

Table of Contents

Related

Frameworks supported

  • Windows ChromaSDK (32-bit)

  • Windows ChromaSDK (64-bit)

Prerequisites

Getting Started

Browser Security

In order to allow an HTML5 page to talk with the Chroma REST API (cross-site scripting), add the response header for Access-Control-Allow-Origin.

Access-Control-Allow-Origin: https://chromasdk.io:54236/*

image_3

Node.JS (Optional) The sample project can be hosted in Node.js

1 Install Node.js

2 Open a terminal in the project folder

3 Install Node.js dependencies

npm install

4 Start the server

node ServerNode.js

5 Browse the Node.js server and pick one of the samples at http://localhost:1337/

Hosted

1 Upload the project files to an online website

2 Browse PlayAnimationSample.html

image_2

3 Browse RazerChromaSDKSampleApplication.html

image_1

4 Browse 'LayerSample.html'

image_4

Assets

This library supports the Chroma animation exports from UE4, Unity, and GameMaker.

Import Animation From Unity

  • The same Chroma animation files can be played on HTTP and HTTPS websites.

API


Initialization

Include the JS includes to get access to the API.

<html>
<head>
<script src="ChromaSDKImpl.js"></script>
</head>
</html>

Initialize/Uninitialize the Chroma SDK from the body events.

<script>
var chromaSDK = undefined;
function onPageLoad() {
  chromaSDK = new ChromaSDK();
  chromaSDK.init();
}
function onPageUnload() {
  if (chromaSDK != undefined) {
    chromaSDK.uninit()
  }
}
</script>
<body onload="onPageLoad()" onunload="onPageUnload()">

Clear

The clear method will turn off the lighting effect for a device.

ChromaAnimation.clear(EChromaSDKDeviceEnum.DE_ChromaLink);
ChromaAnimation.clear(EChromaSDKDeviceEnum.DE_Headset);
ChromaAnimation.clear(EChromaSDKDeviceEnum.DE_Keyboard);
ChromaAnimation.clear(EChromaSDKDeviceEnum.DE_Keypad);
ChromaAnimation.clear(EChromaSDKDeviceEnum.DE_Mouse);
ChromaAnimation.clear(EChromaSDKDeviceEnum.DE_Mousepad);

Clear All

The clearAll method sets the clear state for all devices.

ChromaAnimation.clearAll();

Static Color

The staticColor method will set the Chroma lighting to all the same color for the device, given a color.

var red = 0xFF;
var green = 0xFF00
var blue = 0xFF0000;
var white = 0xFFFFFF;
var color = white;
ChromaAnimation.staticColor(EChromaSDKDeviceEnum.DE_ChromaLink, color);
ChromaAnimation.staticColor(EChromaSDKDeviceEnum.DE_Headset, color);
ChromaAnimation.staticColor(EChromaSDKDeviceEnum.DE_Keyboard, color);
ChromaAnimation.staticColor(EChromaSDKDeviceEnum.DE_Keypad, color);
ChromaAnimation.staticColor(EChromaSDKDeviceEnum.DE_Mouse, color);
ChromaAnimation.staticColor(EChromaSDKDeviceEnum.DE_Mousepad, color);

Play Animation

The playAnimation method will play a Chroma animation file. With loop set to true, the animation will repeat. With loop set to false, the animation will play once.

var loop = true;
ChromaAnimation.playAnimation('Random_ChromaLink.chroma', loop);
ChromaAnimation.playAnimation('Random_Headset.chroma', loop);
ChromaAnimation.playAnimation('Random_Keyboard.chroma', loop);
ChromaAnimation.playAnimation('Random_Keypad.chroma', loop);
ChromaAnimation.playAnimation('Random_Mouse.chroma', loop);
ChromaAnimation.playAnimation('Random_Mousepad.chroma', loop);

Stop Animation

The stopAnimation method will stop playing a Chroma animation file.

ChromaAnimation.stopAnimation('Random_ChromaLink.chroma');
ChromaAnimation.stopAnimation('Random_Headset.chroma');
ChromaAnimation.stopAnimation('Random_Keyboard.chroma');
ChromaAnimation.stopAnimation('Random_Keypad.chroma');
ChromaAnimation.stopAnimation('Random_Mouse.chroma');
ChromaAnimation.stopAnimation('Random_Mousepad.chroma');

Stop All

The stopAll method stops all animations from playing for all devices.

ChromaAnimation.stopAll();

Play Composite

The playComposite method will play a set of Chroma animation files. With loop set to true, the animations will repeat. With loop set to false, the animations will play once.

var loop = true;
ChromaAnimation.playComposite('Random', loop);

// playComposite will play the set of animations
//ChromaAnimation.playAnimation('Random_ChromaLink.chroma', loop);
//ChromaAnimation.playAnimation('Random_Headset.chroma', loop);
//ChromaAnimation.playAnimation('Random_Keyboard.chroma', loop);
//ChromaAnimation.playAnimation('Random_Keypad.chroma', loop);
//ChromaAnimation.playAnimation('Random_Mouse.chroma', loop);
//ChromaAnimation.playAnimation('Random_Mousepad.chroma', loop);

Open Animation

The openAnimation method downloads a Chroma animation and invokes a callback after the animation has loaded.

var baseLayer = "EnvironmentSnow_Keyboard.chroma";

// open animation
ChromaAnimation.openAnimation(baseLayer, function(baseAnimation) {
});

Close Animation

The closeAnimation method stops an animation if playing and then removes the animation so that it can be reloaded. This allows an animation to go back to the original state before any modifications had taken place.

var baseLayer = "EnvironmentSnow_Keyboard.chroma";

//reset animation
ChromaAnimation.closeAnimation(baseLayer);

//open animation
ChromaAnimation.openAnimation(baseLayer, function(baseAnimation) {
  });

Multiply Intensity All Frames

The multiplyIntensityAllFrames method multiplies a color intensity for all frames of an animation. This is useful to control the intensity of a layer. 0.0 results in a completely black layer. 0.5 would half the color values for all frames.

var baseLayer = "EnvironmentSnow_Keyboard.chroma";

// reset animation
ChromaAnimation.closeAnimation(baseLayer);

// open animation
ChromaAnimation.openAnimation(baseLayer, function(baseAnimation) {

  // set base intensity
  ChromaAnimation.multiplyIntensityAllFrames(baseLayer, (baseIntensity.value / 100.0));

});

Offset Nonzero Colors All Frames

The offsetNonZeroColorsAllFrames method offsets the RGB values for all frames in the animation that aren't black. This method allows a gray animation layer to be tinted to any color while keeping the black colors black. Red, green, blue use expected values 0 to 255.

var layer2 = "RingGray_Keyboard.chroma";

// reset animation
ChromaAnimation.closeAnimation(layer2);

// open animation
ChromaAnimation.openAnimation(layer2, function(layer2Animation) {

  // set base intensity
  ChromaAnimation.multiplyIntensityAllFrames(layer2,
    (effectIntensity.value / 100.0));

  //animation starts with 127,127,127 so adding 127,-127,-127 results in 255,0,0 or red
  ChromaAnimation.offsetNonZeroColorsAllFrames(layer2, 127, -127, -127);

});

Copy NonZero All Keys All Frames

The copyNonZeroAllKeysAllFrames method copies all non-black colors for all frames from a source animation to a target animation. This is useful for combining multiple layers into a base layer.

ChromaAnimation.copyNonZeroAllKeysAllFrames(sourceAnimationName, targetAnimationName);

Copy Keys Colors All Frames

The copyKeysColorAllFrames method copies all specified keys from one source animation to a target animation.

// set wasd keys
var keys = [];
keys.push(RZKEY.RZKEY_W);
keys.push(RZKEY.RZKEY_A);
keys.push(RZKEY.RZKEY_S);
keys.push(RZKEY.RZKEY_D);

ChromaAnimation.copyKeysColorAllFrames(sourceAnimationName, targetAnimationName, keys);

You can’t perform that action at this time.