Icontem

CoolLedMatrix: Display a led matrix from symbol bitmaps

Recommend this page to a friend!
  Info   View files Example   View files View files (6)   DownloadInstall with Composer Download .zip   Reputation   Support forum (2)   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2015-12-19 (10 months ago) RSS 2.0 feedNot enough user ratingsTotal: 116 All time: 368 This week: 57Up
Version License JavaScript version Categories
cool-led-matrix 1.0MIT/X Consortium ...1.0HTML, Graphics
Description Author

This object can display a led matrix from symbol bitmaps.

It takes a given symbol defined by a matrix of dots that may be turned on or not and renders the symbol dots turned off or turned on with a given led light color.

The objects come with some predefined symbols but you can add your own custom symbols.

Using CSS and Javscript this cool matrix led can help you to inform your user about things on your website.

Innovation Award
JavaScript Programming Innovation award winner
December 2015
Winner


Prize: One book of choice by Packt
Some times it is necessary to call the special attention of the user to important information.

This JavaScript object can show a matrix of dots that look like led lights representing a symbol, thus catching better the user attention.

Manuel Lemos
Picture of Joseluis Laso
Name: Joseluis Laso <contact>
Classes: 1 package by
Country: Spain Spain
Innovation award
Innovation award
Nominee: 1x

Winner: 1x

Details

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:

js-cool-matrix-led-all

Use more than one color

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

js-cool-matrix-led-palette

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 ?

led-bar-animated

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 ...

js-cool-matrix-led-animating-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.

  Files folder image Files  
File Role Description
Accessible without login Plain text file cool-led-matrix.css Data Auxiliary data
Plain text file cool-led-matrix.js Class Class source
Accessible without login Plain text file demo.html Example Example script
Accessible without login Image file favicon.ico Data Auxiliary data
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file README.md Doc. Documentation

 Version Control Unique User Downloads Download Rankings  
 100%
Total:116
This week:0
All time:368
This week:57Up