microm.1.0.1.js

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

/**
 *
 * @author Olivier Schyns
 * @version 1.0.1
 *
 * 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 = {};
microm.animation;

// width of the display
microm.width;

// height of the display
microm.height;

// number of frame per second
microm.fps = 1;

// 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 ){
    width = ~~width;
    height = ~~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 ){
    x = ~~x;
    y = ~~y;
    width = ~~width;
    height = ~~height;

    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 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 arrays or an array of strings, with each character representing a color
 * @param {map}   map   (optionnal) a map with characters as keys and color codes as values
 */
microm.stamp = 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( typeof map !== 'undefined' && (typeof stamp[j] === 'string' || stamp[j] instanceof String) ){
                    var key = stamp[j].charAt(i);

                    if( map[key] !== undefined && i < stamp[j].length ){
                        if( stamp[j].charAt(i) != ' ' ){
                            microm.set( i+x, j+y, map[key] );
                        }
                    }
                }else{
                    if( stamp[j][i] != null ){
                        microm.set( i+x, j+y, stamp[j][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;
};

/**
 * Pad the given stamp so it can be reversed or turned
 * @param   {array} stamp the stamp to pad
 * @returns {array}       the padded stamp
 */
microm.padStamp = function( stamp ){
    var w = microm.getStampWidth(stamp);

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

        if( typeof stamp[i] === 'string' || stamp[i] instanceof String ){
            for( var j=stamp[i].length; j<w; ++j ){
                stamp[i] += " ";
            }
        }else{
            for( var j=stamp[i].length; j<w; ++j ){
                stamp[i][j] = null;
            }
        }
    }
    return stamp;
};

/**
 * Apply the given map on the given stamp, so the map isn't requiered anymore
 * @param   {array} stamp an array of strings
 * @param   {map}   map   a map with characters as keys and color codes as values
 * @returns {array}       an array of arrays
 */
microm.applyMap = function( stamp, map ){
    var result = [];

    for( var i=0; i<stamp.length; ++i ){
        result[i] = [];
        if( typeof map !== 'undefined' && (typeof stamp[i] === 'string' || stamp[i] instanceof String) ){
            for( var j=0; j<stamp[i].length; ++j ){
                var key = stamp[i].charAt(j);

                if( map[key] !== undefined ){
                    result[i][j] = map[key];
                }else{
                    result[i][j] = null;
                }
            }
        }
    }
    return result;
};

/**
 * Reverse the stamp on the y-axis
 * @param   {array} stamp an array of arrays or an array of strings
 * @returns {array}       the reversed array of arrays or array of strings
 */
microm.reverseStamp = function( stamp ){
    var result = [];
    stamp = microm.padStamp( stamp );

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

        if( typeof stamp[i] === 'string' || stamp[i] instanceof String ){
            result[i] = stamp[i].split("").reverse().join("");
        }else{
            result[i] = stamp[i].reverse();
        }
    }
    return result;
};

/**
 * Flip the 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;
};

/**
 * Transpose the given stamp and turn it into an array of arrays
 * @param   {array} stamp an array of arrays or an array of strings
 * @param   {map}   map   a map with characters as keys and color codes as values
 * @returns {array}       an array of arrays
 */
microm.transposeStamp = function( stamp, map ){
    stamp = microm.padStamp( stamp );

    var w = microm.getStampWidth(stamp);
    var result = new Array(w);

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

        var h = stamp.length;
        result[i] = new Array(h);

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

            if( typeof map !== 'undefined' && (typeof stamp[j] === 'string' || stamp[j] instanceof String) ){
                var key = stamp[j].charAt(i);

                if( i < stamp[j].length ){
                    if( map[key] !== undefined ){
                        result[i][j] = map[key];
                    }else{
                        result[i][j] = null;
                    }
                }
            }else{
                if( stamp[j][i] != null ){
                    result[i][j] = stamp[j][i];
                }else if( typeof stamp[j] === 'string' || stamp[j] instanceof String ){
                    result[i] += ''+stamp[j].charAt(i);
                }
            }
        }
    }
    return result;
};

/**
 * Rotate the given stamp of the given number of degrees or radiants
 * @param   {float} angle the angle of rotation in degrees or radiants
 * @param   {array} stamp an array of arrays or an array of strings
 * @param   {map}   map   a map with characters as keys and color codes as values
 * @returns {array}       an array of arrays
 */
microm.rotateStamp = function( angle, stamp, map ){
    var turn = 0;
    var result = [];

    if( -90 < angle && angle < 90 ){
        angle *= 2;
    }else{
        angle /= 90;
    }
    turn = Math.round(angle) % 4;
    if( turn < 0 ){
        turn = (turn + 4) % 4;
    }

    switch( turn ){
        case 1:
            result = microm.transposeStamp(microm.reverseStamp(stamp), map);
            break;
        case 2:
            result = microm.applyMap(microm.reverseStamp(microm.flipStamp(stamp)), map);
            break;
        case 3:
            result = microm.reverseStamp(microm.transposeStamp(stamp, map));
            break;
        default:
            result = microm.applyMap(stamp, map);
    }
    return result;
};

/**
 * Repeat the given function every frame, frame rate is set in the fps variable
 * @param {function} fun the function to repeat every frame
 */
microm.startAnimation = function( fun ){
    microm.animation = window.setInterval( fun, 1000 / microm.fps );
};

/**
 * Stop the animation
 */
microm.stopAnimation = function(){
    window.clearInterval( microm.animation );
};