Raphael Grid

Playing with Raphael for matrix interface

by AnnaGerber

HTML

<button id="clearbtn">clear</button>
<div id="matrix" style="width:100%"></div>

JavaScript

var matrixSize = 8;
var cellSize = 30;
var cellPadding = 2;
var currentX = cellPadding;
var currentY = cellPadding;
var paperDimension = matrixSize * (cellSize + cellPadding) + cellPadding;
var squares = [];
var colors = ["Black","OrangeRed","Chartreuse","Orange"];
var paper = Raphael('matrix',paperDimension,paperDimension);
for (var w = 0; w < matrixSize; w++){
    squares[w] = [];
    for (var h=0; h < matrixSize; h++){
       var square = paper.rect(currentX, currentY, cellSize, cellSize)
        .attr('stroke','white')
        .attr('fill','black')
        .data('w',w)
        .data('h',h)
        .data('color',0) 
        .click(togglePixel)
        squares[w].push(square); 
      currentX += (cellSize + cellPadding);
    }
    currentX = cellPadding;
    currentY += (cellSize + cellPadding)
}
function togglePixel(event){
    var square = this;
    var squareColor = square.data('color');
    squareColor = (squareColor + 1) % colors.length;
    square.data('color',squareColor);
    square.attr('fill',colors[squareColor]);
    var matrixStrings = squares.map(
        function(a) {
            var c =  a.map(
                function(b){return b.data('color')}
            );
            var result = "";
            c.forEach(function(v) {result += v;});
            return result;
        }
    );
    
    console.log(
        JSON.stringify(matrixStrings)
    );
}
    document.getElementById('clearbtn').onclick = function() {
    console.log("clear")
    for (var w = 0; w < matrixSize; w++){
      for (var h=0; h < matrixSize; h++){
        var square = squares[w][h];
        square.data('color',0);
        square.attr('fill',colors[0]);
      }
    }
}
//console.log("squares are",squares)