[Alpha/PoC] Chromatin - The Chroma WebAPI

Discussion in 'Razer Chroma' started by WolfspiritM, Nov 18, 2015.

Thread Status:
Not open for further replies.
  1. WolfspiritM

    WolfspiritM Active Member

    Hey Guys,

    As I was working on GameDog I ended up with an idea so I started a new project with Chroma called "Chromatin". It's in a very early stage and is more for Developers right now but I'd love to have some feedback and would like to know if it works as expected so far.

    Again using the Colore library and for Blackwidow Chroma only for now!

    What is Chromatin?
    Chromatin allows websites to control the lighting of your devices without the need of specific plugins or extensions! As a user you might not be able to do much with it right now. I am thinking about building extensions to support known websites like facebook, twitter and google mail.
    As a website developer you are able to create beautiful effects with Javascript alone! Websites that support the API will be able to create effects depending on the state of the Website (new message for example). This works even if the website doesn't have focus.

    How does it work in general?
    Chromatin listens to a port on localhost. It is only accessible from your computer but it allows ajax requests from all websites. That means websites can send requests to Chromatin telling it to set a key to a specific color. The browser always adds the "Origin" of the Ajax request to the request allowing Chromatin to figure out which website is trying to change the lighting. For security users will get a dialog the first time a website tries to change the lighting and the user will be able to choose if he wants to allow or deny that website (nothing is saved yet in this early stage).

    Why can this be useful?
    I think it has much potential. It allows Developers of webgl games to use chroma easily for example as long as Chromatin is running in the background.

    What does the API look like at the moment?
    The API is not fixed yet. An example request to color the Keys A,B and C red looks like that:

    var data = [{
       "keys": ["A","B","C"],
       "color": "#ff0000"
    This can then be send via jQuery like that:

            type: "POST",
            url: "http://localhost:32308/light",
            data: JSON.stringify(data),
            contentType: 'application/json; charset=utf-8',
            success: function(data,status,xhr){
              // Do something to check if it was successfull
            dataType: "json"
    If everything is fine it will return a json with status = Success.

    But that's just the beginning.
    A request is a JSON Array of multiple "frames". Each frame consist of one or multiple keys and one color. If you want to have more colors just add multiple frames. They will be executed nearly simultaniously like so:

    var data = [{
       "keys": ["A","B","C"],
       "color": "#ff0000"
       "keys": ["D","E","F"],
       "color": "#00ff00"
    A frame can have the following properties:
    - keys: A single key ("A") or multiple Keys (["A","B"]). If it is "all" it will color the whole keyboard. A key can also be an array of two values (row and column of the keyboard) [[0,1]]
    - color: The color the above keys should glow in as hex value.
    - clear: a boolean (true/false) that tells to clear the whole keyboard once that frame is reached.
    - delay: an integer how long in milliseconds the keyboard should wait after this frame!
    - jump: an integer to which frame in this array should be jumped. This causes an infinite loop to make effects. It stops once a new effect is started.

    A simple example to make a very simple effect:

    var data = [{
       "keys": ["A","B","C"],
       "color": "#ff0000",
       "delay": 1000
       "keys": ["A","B","C"],
       "color": "#00ff00",
       "delay": 1000,
       "jump": 0
    Switches from red to green to red every second.

    More examples are available in Chromatin itself at the top via the "Examples" link (the examples might be ugly at the moment).
    When you try it, the request to light up the Keyboard is opened in the background at the moment (I'm working to bring it to the front for a later version).

    Would be nice to know if someone would use it or if someone was maybe looking for something like that already!

    How to get it?
    Just extract this ZIP-File wherever you want and start Chromatin.exe:
    Click at the top of that window on "Examples" and a website should open. On that page you can try a few sample effects I made.

    What is planned?
    Being able to remove already allowed Origins and to permanently deny others as well as saving them to make them persistent.

    That's it for now. Feedback is very welcome! :)
    Last edited: Nov 18, 2015
    njbmartin and Lafar like this.
  2. njbmartin

    njbmartin Developer of Awesome

    Niiiiiice! Loving your work and this is a very neat idea.
  3. TheFranubian

    TheFranubian Active Member

    Woah, that's simply a great idea; I gotta imagine the possibilities with streaming web music players and games.
  4. Xus08000

    Xus08000 New Member

    i testing it, nice idea! now, we need to can custom ourself color/website and other we can do :stuck_out_tongue_winking_eye:
    Be patient!!
  5. phoelid

    phoelid New Member

    I'd advice you to use Websockets instead of HTTP - saving some bandwidth here and there would allow for more fine-grain control of animations.
    Also, please release the source code. :)
  6. WolfspiritM

    WolfspiritM Active Member

    Thanks for the feedback! I was already thinking about using Websockets as an additional way. :) But for now I wanted to have a simple way for developers to send requests for testing and as the request is local only the bandwidth isn't really a problem as the request shouldn't even go down the network stack. I was able to start very long and detailed animations within a second. :)

    What I'm also thinking of is letting websites store effects and just replay them when needed which would save even more bandwidth.

    But yes I agree Websockets would give even more control of the lighting to the website allowing it to respond much faster for games and I'm pretty sure I will include that in one of the future versions!

    I see it as two different use cases.
    One for a simple way to react to an event like a new message with the same animation.
    The other for games to control every single key differently on different events ingame.

    Yes. I will release source code once I have a more stable Version of it. The current version is only a quick proof of concept and a test if it actually works as expected to show my idea behind the API and to get some feedback and actually is nothing that is worth to be shared yet :) I think I will rewrite most of it anyway.
    njbmartin likes this.
  7. phoelid

    phoelid New Member

    IMHO it doesn't matter if what you did is crap - it's still a good idea to share, because other, less experienced developers may want to learn something from it. :)
    njbmartin likes this.
Thread Status:
Not open for further replies.
Sign In with Razer ID >

Don't have a Razer ID yet?
Get Razer ID >