microm.js

/*\
|*|   ::::    ::::  ::::::::::: ::::::::  :::::::::   ::::::::  ::::    ::::
|*|   +:+:+: :+:+:+     :+:    :+:    :+: :+:    :+: :+:    :+: +:+:+: :+:+:+
|*|   +:+ +:+:+ +:+     +:+    +:+        +:+    +:+ +:+    +:+ +:+ +:+:+ +:+
|*|   +#+  +:+  +#+     +#+    +#+        +#++:++#:  +#+    +:+ +#+  +:+  +#+
|*|   +#+       +#+     +#+    +#+        +#+    +#+ +#+    +#+ +#+       +#+
|*|   #+#       #+#     #+#    #+#    #+# #+#    #+# #+#    #+# #+#       #+#
|*|   ###       ### ########### ########  ###    ###  ########  ###       ###
\*/

/**
 *
 * @author Olivier Schyns
 *
 * Microm is a litle javascript file that allow you to generate a matrix of virtual LED
 * that you can control with a virtual keyboard.
 *
 * To start, use the initDisplay and initKeyboard functions to create the display and the keyboard.
 *
 */


var microm = {};
microm.cell = {};
microm.input = {};

// width of the display
microm.width;

// height of the display
microm.height;

// the default color of the screen
microm.defaultColor = "#111";

// microm's colors preset
microm.red = "#c71313";
microm.orange = "#f58708";
microm.yellow = "#e6c614";
microm.lime = "#b5e514";
microm.green = "#1aa21a";
microm.pine = "#19ce66";
microm.cyan = "#1bd4d4";
microm.blue = "#1c7ed4";
microm.colbat = "#1111b7";
microm.violet = "#3617de";
microm.purple = "#781fc6";
microm.magenta = "#c61cc6";
microm.crimson = "#d60b77";

microm.black = "#000000";
microm.dark = "#2c2c2c";
microm.gray = "#606060";
microm.light = "#a2a2a2";
microm.white = "#ebebeb";

microm.pink = "#de8ba4";
microm.brown = "#572f12";
microm.beige = "#dda670";
microm.sea = "#071143";

/**
 * Generate a virtual screen of LED
 * @param {string} display_id the id of the div in which we want to put our display
 * @param {int}    width      the width of the screen we want to make
 * @param {int}    height     the height of the screen we want to make
 */
microm.initDisplay = function( display_id, width, height ){

    microm.width = width;
    microm.height = height;

    microm.cell = new Array(width);
    for( var i=0; i<width; ++i ){
        microm.cell[i] = new Array(height);
    }

    var div_display = document.getElementById(display_id);
    var table = document.createElement('table');
    div_display.appendChild(table);

    for( var i=0; i<height; ++i ){

        var tr = document.createElement('tr');
        table.appendChild(tr);

        for( var j=0; j<width; ++j ){

            var td = document.createElement('td');
            microm.cell[j][i] = td;
            tr.appendChild(td);
        }
    }
};

/**
 * Generate a virtual keyboard
 * @param {string} keyboard_id the id of the div in which we want to put our keyboard
 * @param {array}  keys_array  a array of arrays of string, each string will be the name of a button
 */
microm.initKeyboard = function( keyboard_id, keys_array ){

    var div_keyboard = document.getElementById(keyboard_id);
    var table = document.createElement('table');
    div_keyboard.appendChild(table);

    for( var i=0; i<keys_array.length; ++i ){

        var tr = document.createElement('tr');
        table.appendChild(tr);

        for( var j=0; j<keys_array[i].length; ++j ){

            var td = document.createElement('td');
            tr.appendChild(td);

            if( keys_array[i][j] != null ){
                var btn = document.createElement('button');
                btn.innerHTML = keys_array[i][j];
                microm.input[""+keys_array[i][j]] = btn;
                td.appendChild(btn);
            }
        }
    }
};

/**
 * Set the color of the targeted LED
 * @param {int}    x     position of the LED on the x-axis
 * @param {int}    y     position of the LED on the y-axis
 * @param {string} color the color we want to give to the LED
 */
microm.set = function( x, y, color ){
    x = ~~x;
    y = ~~y;
    if( x >= 0 && x < microm.cell.length ){
        if( y >= 0 && y < microm.cell[x].length ){
            microm.cell[x][y].style = "background:".concat(color);
        }
    }
};

/**
 * Reset the color of the targeted LED
 * @param {int}    x     position of the LED on the x-axis
 * @param {int}    y     position of the LED on the y-axis
 */
microm.reset = function( x, y ){
    microm.set( x, y, microm.defaultColor );
};

/**
 * Fill a rectangle in the screen with the given color
 * @param {int}    x      position of the top-left corner on the x-axis
 * @param {int}    y      position of the top-left corner on the y-axis
 * @param {int}    width  width of the rectangle
 * @param {int}    height height of the rectangle
 * @param {string} color  the color of the rectangle
 */
microm.drawRect = function( x, y, width, height, color ){

    var w = x+width;
    if( w > microm.cell.length ){
        w = microm.cell.length;
    }
    for( var i=x; i<w; ++i ){

        var h = y+height;
        if( h > microm.cell[i].length ){
            h = microm.cell[i].length;
        }
        for( var j=y; j<h; ++j ){

            microm.set( i, j, color );
        }
    }
};

/**
 * Paint the full screen with the given color
 * @param {string} color the color to paint the screen
 */
microm.paint = function( color ){
    for( var i=0; i<microm.cell.length; ++i ){
        for( var j=0; j<microm.cell[i].length; ++j ){
            microm.cell[i][j].style = "background:".concat( color );
        }
    }
};

/**
 * Reset the color of the full screen to the default color
 */
microm.clear = function(){
    for( var i=0; i<microm.cell.length; ++i ){
        for( var j=0; j<microm.cell[i].length; ++j ){
            microm.cell[i][j].style = "background:".concat( microm.defaultColor );
        }
    }
};

/**
 * Apply a regular stamp at the given position
 * @param {int}   x     position of the top-left corner on the x-axis
 * @param {int}   y     position of the top-left corner on the y-axis
 * @param {array} stamp an array of arrays of color codes
 */
microm.stamp = function( x, y, stamp ){
    x = ~~x;
    y = ~~y;

    var w = microm.getStampWidth(stamp);
    if( w+x > microm.cell.length ){
        w = microm.cell.length - x;
    }
    for( var i=0; i<w; ++i ){

        if( i+x >= 0 ){
            var h = stamp.length;
            if( h+y > microm.cell[i+x].length ){
                h = microm.cell[i+x].length - y;
            }
            for( var j=0; j<h; ++j ){
                if( stamp[j][i] != null ){
                    microm.set( i+x, j+y, stamp[j][i] );
                }
            }
        }
    }

};

/**
 * Apply a smart stamp at the given position
 * @param {int}   x     position of the top-left corner on the x-axis
 * @param {int}   y     position of the top-left corner on the x-axis
 * @param {array} stamp an array of strings, with each character representing a color
 * @param {map}   map   a map with characters as keys and color codes as values
 */
microm.smartStamp = function( x, y, stamp, map ){
    x = ~~x;
    y = ~~y;

    var w = microm.getStampWidth(stamp);
    if( w+x > microm.cell.length ){
        w = microm.cell.length - x;
    }
    for( var i=0; i<w; ++i ){

        if( i+x >= 0 ){
            var h = stamp.length;
            if( h+y > microm.cell[i+x].length ){
                h = microm.cell[i+x].length - y;
            }
            for( var j=0; j<h; ++j ){

                if( i < stamp[j].length ){
                    if( stamp[j].charAt(i) != ' ' ){
                        microm.set( i+x, j+y, map[stamp[j].charAt(i)] );
                    }
                }
            }
        }
    }
};

/**
 * Gives the width of the given regular or smart stamp
 * @param   {array} stamp an array of arrays or an array of strings
 * @returns {int}         the width of the stamp
 */
microm.getStampWidth = function( stamp ){
    var stamp_max = 0;
    for( var k=0; k<stamp.length; ++k ){
        if( stamp_max < stamp[k].length ){
            stamp_max = stamp[k].length;
        }
    }
    return stamp_max;
};

/**
 * Gives the height of the given regular or smart stamp
 * @param   {array} stamp an array of arrays or an array of strings
 * @returns {int}         the height of the stamp
 */
microm.getStampHeight = function( stamp ){
    return stamp.length;
};

/**
 * Reverse the given regular stamp on the y-axis (mirror the stamp)
 * @param   {array} stamp an array of arrays
 * @returns {array}       the reversed array of arrays with the necessary paddings
 */
microm.reverseStamp = function( stamp ){
    var result = [];
    var w = microm.getStampWidth(stamp);

    for( var i=0; i<stamp.length; ++i ){
        for( var j=stamp[i].length; j<w; ++j ){
            stamp[i][j] = null;
        }
        result[i] = stamp[i].reverse();
    }
    return result;
};

/**
 * Reverse the given smart stamp on the y-axis (mirror the stamp)
 * @param   {array} stamp an array of strings
 * @returns {array}       the reversed array of strings with the necessary paddings
 */
microm.reverseSmartStamp = function( stamp ){
    var result = [];
    var w = microm.getStampWidth(stamp);

    for( var i=0; i<stamp.length; ++i ){
        for( var j=stamp[i].length; j<w; ++j ){
            stamp[i] += " ";
        }
        result[i] = stamp[i].split("").reverse().join("");
    }
    return result;
};

/**
 * Flip the regular or smart stamp on the x-axis
 * @param   {array} stamp an array of arrays or an array of strings
 * @returns {array}       the flipped array of arrays or array of strings
 */
microm.flipStamp = function( stamp ){
    var result = [];

    for( var i=0; i<stamp.length; ++i ){
        result[ stamp.length-i-1 ] = stamp[i];
    }
    return result;
};