Merge pull request #440 from clementleger/c_file_export

C file export

src/css/settings.css

@@ -35,7 +35,7 @@
 .drawer-content {
   overflow: hidden;
   background-color: #444;
-  height: 550px;
+  height: 650px;
   max-height: 100%;
   width: 280px;
   border-top-left-radius: 4px;

src/js/controller/settings/exportimage/CExportController.js

@@ -0,0 +1,77 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings.exportimage');
+
+  var BLACK = '#000000';
+
+  ns.CExportController = function (piskelController) {
+    this.piskelController = piskelController;
+  };
+
+  pskl.utils.inherit(ns.CExportController, pskl.controller.settings.AbstractSettingController);
+
+  ns.CExportController.prototype.init = function () {
+
+    var downloadButton = document.querySelector('.c-download-button');
+    this.addEventListener(downloadButton, 'click', this.onCDownloadButtonClick_);
+  };
+
+  ns.CExportController.prototype.onCDownloadButtonClick_ = function (evt) {
+    var fileName = this.getPiskelName_() + '.c';
+    var cName = this.getPiskelName_().replace(' ','_');
+    var width = this.piskelController.getWidth();
+    var height = this.piskelController.getHeight();
+    var frameCount = this.piskelController.getFrameCount();
+
+    // Useful defines for C routines
+    var frameStr = '#include <stdint.h>\n\n';
+    frameStr += '#define ' + cName.toUpperCase() + '_FRAME_COUNT ' +  this.piskelController.getFrameCount() + '\n';
+    frameStr += '#define ' + cName.toUpperCase() + '_FRAME_WIDTH ' + width + '\n';
+    frameStr += '#define ' + cName.toUpperCase() + '_FRAME_HEIGHT ' + height + '\n\n';
+
+    frameStr += '/* Piskel data for \"' + this.getPiskelName_() + '\" */\n\n';
+
+    frameStr += 'static const uint32_t ' + cName.toLowerCase();
+    frameStr += '_data[' + frameCount + '][' + width * height + '] = {\n';
+
+    for (var i = 0 ; i < frameCount ; i++) {
+      var render = this.piskelController.renderFrameAt(i, true);
+      var context = render.getContext('2d');
+      var imgd = context.getImageData(0, 0, width, height);
+      var pix = imgd.data;
+
+      frameStr += '{\n';
+      for (var j = 0; j < pix.length; j += 4) {
+        frameStr += this.rgbToCHex(pix[j], pix[j + 1], pix[j + 2], pix[j + 3]);
+        if (j != pix.length - 4) {
+          frameStr += ', ';
+        }
+        if (((j + 4) % (width * 4)) === 0) {
+          frameStr += '\n';
+        }
+      }
+      if (i != (frameCount - 1)) {
+        frameStr += '},\n';
+      } else {
+        frameStr += '}\n';
+      }
+    }
+
+    frameStr += '};\n';
+    pskl.utils.BlobUtils.stringToBlob(frameStr, function(blob) {
+      pskl.utils.FileUtils.downloadAsFile(blob, fileName);
+    }.bind(this), 'application/text');
+  };
+
+  ns.CExportController.prototype.getPiskelName_ = function () {
+    return this.piskelController.getPiskel().getDescriptor().name;
+  };
+
+  ns.CExportController.prototype.rgbToCHex = function (r, g, b, a) {
+    var hexStr = '0x';
+    hexStr += ('00' + a.toString(16)).substr(-2);
+    hexStr += ('00' + b.toString(16)).substr(-2);
+    hexStr += ('00' + g.toString(16)).substr(-2);
+    hexStr += ('00' + r.toString(16)).substr(-2);
+    return hexStr;
+  };
+})();

src/js/controller/settings/exportimage/ImageExportController.js

@@ -5,6 +5,7 @@
     this.piskelController = piskelController;
     this.pngExportController = new ns.PngExportController(piskelController);
     this.gifExportController = new ns.GifExportController(piskelController);
+    this.cExportController = new ns.CExportController(piskelController);
   };
 
   pskl.utils.inherit(ns.ImageExportController, pskl.controller.settings.AbstractSettingController);
@@ -19,11 +20,13 @@
 
     this.pngExportController.init();
     this.gifExportController.init();
+    this.cExportController.init();
   };
 
   ns.ImageExportController.prototype.destroy = function () {
     this.pngExportController.destroy();
     this.gifExportController.destroy();
+    this.cExportController.destroy();
     this.superclass.destroy.call(this);
   };
 

src/piskel-script-list.js

@@ -117,6 +117,7 @@
   "js/controller/settings/exportimage/ImageExportController.js",
   "js/controller/settings/exportimage/GifExportController.js",
   "js/controller/settings/exportimage/PngExportController.js",
+  "js/controller/settings/exportimage/CExportController.js",
   "js/controller/settings/resize/AnchorWidget.js",
   "js/controller/settings/resize/ResizeController.js",
   "js/controller/settings/resize/DefaultSizeController.js",

src/templates/settings/export.html

@@ -33,6 +33,13 @@
       </div>
       <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
     </div>
+    <div class="settings-title">
+      Export as C File
+    </div>
+    <div class="settings-item">
+      <div class="settings-description">C file with frame rendered as array.</div>
+      <button type="button" class="button button-primary c-download-button">Download C file</button>
+    </div>
     <div class="settings-title">
       Export to Animated GIF
     </div>