LED Matrix Sprite Generator

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

  <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.4.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.10/angular.min.js" data-semver="1.2.10"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MatrixController">
    <div class="container">
    <div class="row">
    <div class="col-lg-12">
      <h1>LED Matrix Sprite Generator <small>Created By swiggles</small></h1>
      <p>Inspired by Miro Božík <a target="_blank" href="http://embed.plnkr.co/3VUsekP3jC5xwSIQDVHx/">http://embed.plnkr.co/3VUsekP3jC5xwSIQDVHx/</a></p>

      <!-- Generated Code -->
      <div sprite-builder></div>
      
    </div>
    </div>
    </div>
  </body>
</html>

let app = angular.module('LedMatrixGenerator', []);

let string = `string!`;

console.log(string);

app.controller('MatrixController', function($scope) {
    $scope.matrixConfig = {
      rows: 8,
      cols: 8,
    }
});

app.directive('testBuilder', function() {
    return {
      templateUrl: 'test-tpl.html',
    }
});

app.directive('spriteBuilder', function(spriteService){
  return {
    controller: function($scope) {

      $scope.codeArray = [];
      $scope.codeString = '';
      $scope.spriteName = "SPRITE";

      $scope.matrix = spriteService.buildMatrix($scope.matrixConfig.cols, $scope.matrixConfig.rows);

      $scope.updateMatrix = function() {
        $scope.matrix = spriteService.buildMatrix(
            $scope.matrixConfig.rows, 
            $scope.matrixConfig.cols
          );
      }

    },
    link: function(scope, element, attrs, ctrl) {
      scope.updateMatrix = function() {
        scope.matrix = spriteService.buildMatrix(
            scope.matrixConfig.rows, 
            scope.matrixConfig.cols
          );
      };
      scope.setVal = function(btn) {
        if (btn.value == '0') {
          btn.value = '1';
        } else {
          btn.value = '0';
        }
      };
      scope.reset = function(){
        spriteService.resetMatrix(scope.matrix);
      };

      // Add a code to the code array
      scope.addCode = function(){
        var codeOutput = spriteService.generateCode(scope.matrix, scope.spriteName);
        
        scope.codeArray.push({
          'name': scope.spriteName,
          'code': codeOutput
        });
        
        scope.updateCodeString();
      }

      // Remove a specific code from the code array
      scope.removeCode = function(codeToRemove) {
        var index = scope.codeArray.indexOf(codeToRemove);
        scope.codeArray.splice(index, 1);
        scope.updateCodeString();
      };

      // Update codestring by concatonating all codes in codearray
      scope.updateCodeString = function() {
        var array = scope.codeArray;
        var codeString = '';
        angular.forEach(array, function(val, key) {
          codeString += val.code + '\n';
        });
        scope.codeString = codeString;
      };

      // scope.$watch('spriteName', function(newValue, oldValue) {
      //   if (newValue != oldValue) {
      //     scope.generateCode();
      //   }
      // }, true);
    },
    templateUrl: 'sprite-builder-tpl.html'
  };
});

app.service('spriteService', function(){
  var LedButton = function() {
    return {
      value: '0',
      column: 0,
      row: 0  
    };
  };
  
  var service = {};
  
  service.buildMatrix = function(rows, cols){
    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 " + spriteName + "[] = {";

    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;
});

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

.code-list {
    list-style: none;
    padding: 0;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
    font-size: 90%;
}

.code-list .btn-danger {
    padding-bottom: 2px;
    text-decoration: none;
    position: absolute;
    left: 0;
}

.code-list li {
    padding-left: 10px;
    padding-bottom: 1px;
}

.help-inline.small {
    font-style: oblique;
    color: #404040;
}

<p>
  <form class="form-inline">
    <!-- Rows -->
    <div class="form-group">
      <label for="rows">Rows</label>
      <input class="form-control" ng-model="matrixConfig.rows" type="number" ng-pattern="/^(\d*)$/" required />
    </div>
    <!-- Columns -->
    <div class="form-group">
      <label for="cols">Cols</label>
      <input class="form-control" ng-model="matrixConfig.cols" type="number" ng-pattern="/^(\d*)$/" required />
    </div>
      
    <div class="form-group">
      <button ng-click="updateMatrix()" class="btn btn-danger">Update Matrix</button>    
    </div>
  </form>
</p>
<p>
  <form name="spriteBuilder">
    <div class="form-group">
      <label class="control-label">LED Sprite</label>
      <span class="help-inline small">Click to draw the pattern for your sprite</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">Reset</button>    
    </div>
  </form>
</p>
<p>
  <form class="form-inline">
    <div class="form-group">
      <label for="spriteName" class="control-label">Sprite name</label>
      <input type="text" id="spriteName" class="form-control" ng-model="spriteName" />      
    </div>
    <div class="form-group">
      <button ng-click="addCode()" class="btn btn-success">+ Add</button>
    </div>
  </form>
</p>
<p>
  <form>
    <div class="form-group">
      <label class="control-label">Saved sprite list</label>
      <span class="help-inline small">Click the red X to remove a sprite</span>
    </div>
    <ul class="code-list">
      <li ng-repeat="codeItem in codeArray">
        <a class="btn-danger" href="" ng-click="removeCode(codeItem)">[X]</a>
        {{codeItem.code}}
      </li>
    </ul>
    
    <div class="form-group">
      <label for="code">Sprite code</label>
      <span class="help-inline small">Copy and paste the code from here</span>
      <textarea ng-model="codeString" id="code" class="form-control textarea" rows="10">{{code}}</textarea>
    </div>
  </form>
</p>