JS Library for playing Chroma animations
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
images Added info about new methods May 21, 2018
.gitignore Added headset animation Sep 20, 2017
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 Added blank animations Oct 4, 2017
Blank_Mouse.chroma Added blank animations Oct 4, 2017
Blank_Mousepad.chroma Added blank animations Oct 4, 2017
ChromaLinkEffects.js Initial commit of project Sep 19, 2017
ChromaSDKImpl.js Sync new JS methods Jul 10, 2018
Colors.html Sync new JS methods Jul 10, 2018
EnvironmentSnow_Keyboard.chroma Added layer sample May 21, 2018
FadeInOutGray_ChromaLink.chroma Added layer sample May 21, 2018
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 Added layer sample May 21, 2018
HeadsetEffects.js Initial commit of project Sep 19, 2017
KeyboardEffects.js Initial commit of project Sep 19, 2017
KeypadEffects.js Initial commit of project Sep 19, 2017
LayerSample.html Added layer sample May 21, 2018
ModalDlg.css Initial commit of project Sep 19, 2017
MouseEffects.js Initial commit of project Sep 19, 2017
MousematEffects.js Initial commit of project Sep 19, 2017
PlayAnimationSample.html Merged in latest May 21, 2018
README.md Added info May 21, 2018
Random_ChromaLink.chroma Initial commit of project Sep 19, 2017
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 Initial commit of project Sep 19, 2017
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 Updated Razer color Nov 7, 2017
RazerGreen_Keypad.chroma Updated Razer color Nov 7, 2017
RazerGreen_Mouse.chroma Updated Razer color Nov 7, 2017
RazerGreen_Mousepad.chroma Updated Razer color Nov 7, 2017
RingGray_ChromaLink.chroma Added layer sample May 21, 2018
RingGray_Headset.chroma Added layer sample May 21, 2018
RingGray_Keyboard.chroma Added layer sample May 21, 2018
RingGray_Keypad.chroma Added layer sample May 21, 2018
RingGray_Mouse.chroma Added layer sample May 21, 2018
RingGray_Mousepad.chroma Added layer sample May 21, 2018
ScriptInstallServer.cmd Added node server to host samples Sep 20, 2017
ScriptStartServer.cmd Added node server to host samples Sep 20, 2017
ServerNode.js Added layer sample May 21, 2018
TabbedDlg.css Initial commit of project Sep 19, 2017
Wave_ChromaLink.chroma Added animation selector Dec 18, 2017
Wave_Headset.chroma Added animation selector Dec 18, 2017
Wave_Keyboard.chroma Added animation selector Dec 18, 2017
Wave_Keypad.chroma Added animation selector Dec 18, 2017
Wave_Mouse.chroma Added animation selector Dec 18, 2017
Wave_Mousepad.chroma Added animation selector Dec 18, 2017
favicon.ico Added blank animations Oct 4, 2017
jquery-3.3.1.min.js Added version check May 21, 2018
package.json Added node server to host samples Sep 20, 2017

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