Changed from bmp to png-support via get-pixels

index.html

@@ -14,7 +14,7 @@
       Drag your svg-file here!
     </div>
 
-    <div id="bmpHolder" class="holder">
+    <div id="mapHolder" class="holder">
       Drag your bmp-file here!
     </div>
 

js/script.js

@@ -34,32 +34,29 @@ $(function(){
   };
 
   // We also have a portion in our GUI where the user can drop the BMP-file
-  var bmpHolder = document.getElementById('bmpHolder');
-  bmpHolder.ondragover = function () {
+  var mapHolder = document.getElementById('mapHolder');
+  mapHolder.ondragover = function () {
     return false;
   };
-  bmpHolder.ondragleave = bmpHolder.ondragend = function () {
+  mapHolder.ondragleave = mapHolder.ondragend = function () {
     return false;
   };
   // When the user drops the file
-  bmpHolder.ondrop = function (e) {
+  mapHolder.ondrop = function (e) {
     e.preventDefault();
     var file = e.dataTransfer.files[0];
     // TODO: check for filetype (maybe via regex)
-
-    var bmp = require("bmp-js"), fs = require('fs');
-    var bmpBuffer = fs.readFileSync(file.path);
-    var bmpData = bmp.decode(bmpBuffer);
-    //*** Note: bmpData={data:Buffer,width:Number,height:Height}
-
-    // create test-helper-classes and let them do their work
-    var BMPDTester = require("./js/test/bmpDTester.js");
-    var tester = new BMPDTester();
-    var BMPD = require("./js/test/bmpD.js");
-    var bmpD = new BMPD(bmpData);
-
-    tester.doSomething(bmpD, function(err) {
-      console.log("It did something!");
-    });
+    var getPixels = require("get-pixels");
+    getPixels(file.path, function(err, pixels) {
+      if (err) {
+        console.log(err);
+        return;
+      }
+      // NDArray Format: ((x),(y),(r,g,b,a))
+      // Access pixel with ....get(x,y,c)
+      console.log("Red", pixels.get(0,0,0), pixels.get(0,0,1), pixels.get(0,0,2), pixels.get(0,0,3));
+      console.log("Blue", pixels.get(1,0,0), pixels.get(1,0,1), pixels.get(1,0,2), pixels.get(1,0,3));
+      console.log("Black", pixels.get(2,0,0), pixels.get(2,0,1), pixels.get(2,0,2), pixels.get(2,0,3));
+    })
   };
 });

js/test/bmpD.js

-/**
-  Test for a class containing bmpData and providing a getPixel-function
-*/
-var method = BMPD.prototype;
-
-// empty constructor
-function BMPD(bmpData) {
-  this._bmpData = bmpData;
-  this._channels = bmpData.data.length / (bmpData.height * bmpData.width);
-  this._lineMul = bmpData.width * this._channels;
-}
-
-method.getPixel = function(x, y) {
-  return this._bmpData.data.readUInt8(x * this._channels + this._lineMul * y);
-}
-
-module.exports = BMPD;

js/test/bmpDTester.js

-/**
-  Tester: passing the bmpD around for further usage
-*/
-
-var method = BMPDTester.prototype;
-
-// empty constructor
-function BMPDTester() {
-
-}
-
-method.doSomething = function(data, callback) {
-
-  // getting some pixels
-  var bmpD = data;
-
-  console.log(bmpD.getPixel(277,30));
-  console.log(bmpD.getPixel(276,30));
-  console.log(bmpD.getPixel(277,29));
-
-  callback(null);
-}
-
-module.exports = BMPDTester;