Export: add c file exporter

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,81 @@
+(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 outputCanvas = this.getFramesheetAsCanvas();
+    var width = this.piskelController.getWidth();
+    var height = this.piskelController.getHeight();
+    
+    // Create a background canvas that will be filled with the transparent color before each render.
+    var background = pskl.utils.CanvasUtils.createCanvas(width, height);
+    var context = background.getContext('2d');
+    context.fillStyle = BLACK;
+
+    // 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() + '_WIDTH ' + width + '\n';
+    frameStr += '#define '+ cName.toUpperCase() + '_HEIGHT ' + height + '\n\n';
+
+    frameStr += '/* Piskel \"' + this.getPiskelName_() + '\" */\n\n';
+
+    frameStr += 'uint32_t ' + this.getPiskelName_().toLowerCase();
+    frameStr += '_data[' + this.piskelController.getFrameCount() + '][' + width * height + '] = {\n';
+   
+    for (var i = 0 ; i < this.piskelController.getFrameCount() ; i++) {
+      var render = this.piskelController.renderFrameAt(i, true);
+      context.clearRect(0, 0, width, height);
+      context.fillRect(0, 0, width, height);
+      context.drawImage(render, 0, 0, width, height);
+      var imgd = context.getImageData(0, 0, width, height);
+      var pix = imgd.data;
+
+      frameStr += '{\n';
+      for (var i = 0; i < pix.length; i += 4) {
+	frameStr += this.rgbToCUint(pix[i], pix[i+1], pix[i+2]);
+	if (i != pix.length - 4)
+	  frameStr += ', ';
+	if (i % (width * 4) == 0)
+	  frameStr += '\n';
+      }
+      frameStr += '\n}';
+      
+    }
+    
+    frameStr += '};'
+    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.rgbToCUint = function (r, g, b) {
+    return '0x' + r.toString(16).slice(-2) + g.toString(16).slice(-2) + b.toString(16).slice(-2);
+  };
+
+  ns.CExportController.prototype.getFramesheetAsCanvas = function () {
+    var renderer = new pskl.rendering.PiskelRenderer(this.piskelController);
+    return renderer.renderAsCanvas();
+  };
+
+})();

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

@@ -61,5 +61,12 @@
         <div class="gif-upload-status"></div>
       </div>
     </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>
 </script>