LED Matrix Sprite Generator

var app = angular.module('plunker', []);

app.service('spriteService', function(){
  var LedButton = function() {
    return {
      value: '0',
      column: 0,
      row: 0  
    };
  };
  
  var service = {};
  
  service.buildMatrix = function(cols, rows){
    var ledMatrixRows = [];
    for (var rowIndex = 0; rowIndex < rows; rowIndex++) {
      var ledMatrixRow = [];
      for (var columnIndex = 0; columnIndex < cols; columnIndex++) {
        var lb = new LedButton();
        lb.column = columnIndex;
        lb.row = rowIndex;
        ledMatrixRow.push(lb);
      }
      ledMatrixRows.push(ledMatrixRow);
    }
    return ledMatrixRows;
  };
  
  service.generateCode = function(matrix, spriteName){
    var code = "byte sprite" + spriteName + "[] = {8, 8, ";

    angular.forEach(matrix, function(val, key) {
      var codePart = "B";
      angular.forEach(val, function(col, key) {

        codePart += col.value;
      });
      code += codePart;
      if(key!=(val.length-1)){
        code += ",";
      }
    });

    code += "};";
    return code;
  };
  
  service.resetMatrix = function(matrix){
    angular.forEach(matrix, function(val, key) {
      angular.forEach(val, function(col, key) {
        col.value = '0';
      });
    });
  };
  
  return service;
});

app.directive('spriteBuilder', function(spriteService){
  
  return {
    restrict: 'E',
    scope: {
      cols: '=',
      rows: '=',
      codeOutput: '='
    },
    controller: function($scope){
      $scope.spriteName = "_new";
      $scope.matrix = spriteService.buildMatrix($scope.cols, $scope.rows);
      
      $scope.generateCode = function(){
        $scope.codeOutput = spriteService.generateCode($scope.matrix, $scope.spriteName);
      };
    },
    link: function(scope, element, attrs, ctrl){
      scope.setVal = function(btn) {
        if (btn.value == '0') {
          btn.value = '1';
        } else {
          btn.value = '0';
        }
        scope.generateCode();
      };
      scope.reset = function(){
        spriteService.resetMatrix(scope.matrix);
        scope.generateCode();
      };
      
      scope.$watch('spriteName', function(newValue, oldValue) {
        if (newValue != oldValue) {
          scope.generateCode();
        }
      }, true);
    },
    templateUrl: 'sprite-builder-tpl.html'
  };
});

app.controller('MainCtrl', function($scope) {

  $scope.matrixConfig = {
    columns: 8,
    rows: 8
  };
/*
  var ledButton = {
    value: '0',
    column: 0,
    row: 0
  };

  var ledMatrixColumnsCount = 8;
  var ledMatrixRowsCount = 8;

  $scope.spriteName = "Name";
  $scope.ledMatrixRows = [];
  $scope.code = "";

  $scope.init = function() {
    for (var rowIndex = 0; rowIndex < ledMatrixRowsCount; rowIndex++) {
      var ledMatrixRow = [];
      for (var columnIndex = 0; columnIndex < ledMatrixColumnsCount; columnIndex++) {
        var lb = angular.copy(ledButton);
        lb.column = columnIndex;
        lb.row = rowIndex;
        ledMatrixRow.push(lb);
      }
      $scope.ledMatrixRows.push(ledMatrixRow);
    }
    generateCode();
  };

  $scope.$watch('spriteName', function(newValue, oldValue) {
    if (newValue != oldValue) {
      generateCode();
    }
  }, true);

  $scope.setVal = function(btn) {
    if (btn.value == '0') {
      btn.value = '1';
    } else {
      btn.value = '0';
    }
    generateCode();
  };

  $scope.clear = function() {
    angular.forEach($scope.ledMatrixRows, function(val, key) {
      angular.forEach(val, function(col, key) {
        col.value = '0';
      });
    });
    generateCode();
  };

  var generateCode = function() {
    $scope.code = "byte sprite" + $scope.spriteName + "[] = {8, 8, ";

    angular.forEach($scope.ledMatrixRows, function(val, key) {
      var codePart = "B";
      angular.forEach(val, function(col, key) {

        codePart += col.value;
      });
      $scope.code += codePart;
      if(key!=(ledMatrixColumnsCount-1)){
        $scope.code += ",";
      }
    });

    $scope.code += "};";
  };
*/
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>LED Matrix Sprite Generator</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css" />
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.10/angular.js" data-semver="1.2.10"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="container">
    <div class="row">
    <div class="col-lg-12">
      <h1>LED Matrix Sprite Generator <small>Created By <a href="http://mirobozik.sk/" target="blank">Miro Božík</a></small></h1>
      
      <ng-form name="spriteForm">
        <!-- Columns -->
        <div class="form-group">
          <label for="rows">Columns</label>
          <div class="col-lg-2">
            <input name="columns" class="form-control" ng-model="matrixConfig.columns" type="text" ng-pattern="/^(\d*)$/" />
          </div>
        </div>
        <!-- Rows -->
        <div class="form-group">
          <label for="rows">Rows</label>
          <div class="col-lg-2">
            <input name="rows" class="form-control" ng-model="matrixConfig.rows" type="text" ng-pattern="/^(\d*)$/" />
          </div>
        </div>
        
      </ng-form>
      
      <sprite-builder cols="matrixConfig.columns" rows="matrixConfig.rows" code-output="code"></sprite-builder>
      
      <!-- Generated Code -->
      <div class="form-group">
        <label for="code">Code</label>
        <textarea id="code" class="form-control" cols="60" rows="5">{{code}}</textarea>
      </div>
      
      </div>
      </div>
    </div>
    
  </body>

</html>

/* Put your css in here */
.btn, .btn:hover {
  border-radius: 0;
}

#Sprite Generator For LED Matrix 8x8

<form class="form-horizontal" name="spriteBuilder">
  <div class="form-group">
    <label for="spriteName" class="col-xs-4 control-label">Sprite name</label>
    <div class="col-xs-4">
      <input id="spriteName" class="form-control" ng-model="spriteName" />      
    </div>
  </div>
  <div class="form-group">
    <label class="control-label">Sprite LEDs</label>
    <span class="help-inline">Click To Button And Make Your Sprite Simply..</span>
    <table>
      <tr ng-repeat="row in matrix">
        <td ng-repeat="col in row"><button class="btn btn-default" ng-class="{'btn-danger': col.value=='1'}" ng-click="setVal(col)">{{col.value}}</button></td>
      </tr>
    </table>  
  </div>
  <div class="form-group">
    <button ng-click="reset()" class="btn btn-warning">CLEAR</button>    
  </div>

</form>