Recommend this page to a friend!
  Classes of Joseluis Laso   JavaScript LED Text Scroller   Download  
Role: Documentation
Content type: text/markdown
Description: Documentation
Class: JavaScript LED Text Scroller
Display a matrix of LED lights of a scrolling text
Author: By
Last change: initial commit
Initial commit
Date: 2 years ago
Size: 2,940 bytes


Class file image Download


Vintage Matrix of LEDs to show messages



Easy to use

Just include both files in your html page:

<script src="js/led-matrix.js"></script>
<script src="js/simpleMatrixFont.js"></script>

The first one is the object that controls all the logic for the board. The second one is the definition of the font used.

You need also to include the CSS to format properly the LedMatrix board:

To have the board in a green squared fashion:

<link href='css/led-matrix-square-green.css' rel='stylesheet' type='text/css'>

And in a more vintage way, rounded led in red:

<link href='css/led-matrix-round-red.css' rel='stylesheet' type='text/css'>

How it works:

Every single column works like a led trip

<div class="char_matrix" id="col_20">
        <li class="led active"></li>
        <li class="led"></li>
        <li class="led active"></li>
        <li class="led active"></li>
        <li class="led active"></li>
        <li class="led active"></li>
        <li class="led active"></li>
        <li class="led"></li>

As you can see every led ON has an 'active' class.

In order to draw faster the message on the board there is a preparation of the message that converts the string in a sequence of true/false helped by the font bits:

 var prepareMessage = function(message){
     var fontData =;
     var result = [], j, i, r, byte, rowDef, bit;
     for(i=0; i<message.length; i++){
         var ch=message[i];
         if(fontData[ch] != 'undefined'){
             for(j=0; j<fontData[ch].length; j++) {
                 byte = fontData[ch][j];
                 rowDef = [];
                 bit = 1;
                 for(r = 0; r < rows; r++) {
                     rowDef.push((byte & bit) > 0);
                     bit *= 2;
             // separator between letters
             result.push([false, false, false, false, false, false, false, false]);
     return result;

This way is very easy to 'draw' the column, in order to do it quickly instead of change the class of every single led I decided to change the whole html of this column.

Maybe there is a way to do quicker.

this.update = function(){
    var col, l = Math.min(, this.cols);
    for (col = 0; col < l; col++) {
var drawCol = function(col, data){
    var html = '<ul>';
    for (var i = 0; i < rows; i++) {
        html += '<li class="led'+(data[i] ? ' active' : '')+'"></li>';

Look&feel rounded red


Look&feel squared green


Online demo here