js-cool-matrix-led

A cool led matrix with javascript and CSS (jquery needed)

This is based on the work of http://codepen.io/motorlatitude/pen/fmzkd

Installation

Copy the files cool-led-matrix.css and cool-led-matrix.js to your project, to the folder you want.

invoke it in your html file like this:

    <script src="cool-led-matrix.js"></script>
    <link href='cool-led-matrix.css' rel='stylesheet' type='text/css'>

Create a container with enough room to the matrix:

    <div id="led-container"></div>

Apply to this container the styles you want, but you have to have position: absolute; yes or yes.

    #led-container {
        position: absolute;
    }

And, on your code create as many led-matrix blocks as you need:

    var led0 = new CoolLedMatrix("#led-container", 0);
    led0.draw(symbols.cross, "red");

If you need more symbols is pretty easy to create new ones.

var symbols = {
    ...
    otherSymbol: {
        0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0,
        0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0,
        0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0,
        1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1,
        1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1,
        1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1,
        1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1,
        1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1,
        0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0,
        0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0,
        0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0
    },
    ...

To draw this new symbol just call the draw method of the object:

    led.draw(symbols.otherSymbol, "myNewColor");

Remember that for the colorClass parameter you need to create also the correspondent class:

    .led ul li.myNewColor {
        background: #FF1234;
        box-shadow: 0 0 16px #FF1234;
    }

You have 4 basic models ready to use:

Use more than one color

In order to allow you to have a pretty led matrix like this one:

I have created a palette object:

The idea is pretty simple, you have to pass an array of 10 items or less with a css valid color:

    var palette1 = new Palette(["#444", "white", "red", "blue", "yellow", "green", "orange", "gray", "cyan", "magenta"]);

The only thing you have to do is use the color index in the definition of the symbol:

    var block: [
        0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 6,
        0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 6,
        0, 1, 8, 8, 8, 8, 7, 1, 2, 0, 0,
        0, 1, 7, 3, 3, 3, 7, 1, 2, 4, 0,
        0, 1, 7, 3, 5, 3, 7, 1, 2, 4, 0,
        0, 1, 7, 3, 3, 3, 7, 1, 2, 4, 0,
        0, 1, 7, 9, 9, 9, 9, 1, 2, 4, 0,
        0, 1, 1, 1, 1, 1, 1, 1, 2, 4, 0,
        0, 0, 2, 2, 2, 2, 2, 2, 2, 4, 0,
        6, 0, 0, 4, 4, 4, 4, 4, 4, 4, 0,
        6, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ];

The result is like the previous picture.

Animation

I am pretty sure you want to use that cool class immediately, in order to notice your users about some of your services.

But, what if this cool led matrix was animated ...? Much cool, right ?

Let's see how to do that ..

First of all we have to create an array with all the sequences that we will need to animate it:

    var bar: [[
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ], [
        1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        ......
        ......
        ......
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ]]

I know that is a lot of work, I am thinking in how to animate programatically, ideas are welcome.

And invoke the animate like that:

    led1 = new CoolLedMatrix("#led-container", 1);
    
    led1.animate(bar, "red", 300, null);   // 300 is the interval and null is to don't stop the animation

This was a simple animation, stepping each frame ...

But, what about combining colors ...

    led0.animatePalette(symbols.block, palette1, 300, null, function (palette) {
        palette.colors.push(palette.colors.shift());
        return palette;
    });

As you can see the animation is defined by the callback, in this case the color is shifted. But you can create the animation you want.

Try your own animation.