compaa 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d711cdbc668d05ba379bd3c23f3b4c976f14d64e
-  data.tar.gz: 539c603dc0d32fa92df5f4e7101ed6901d0993f4
+  metadata.gz: 9c8d165574630697b7fc7b420eef9892d182f145
+  data.tar.gz: 68192e078d30afd1805e444e72bff910e056a5f6
 SHA512:
-  metadata.gz: d6cc2c9503a331f7ea53743c219947c013f6318e1067ad53813191b3331b91a47bb7cf621944bfa0426b7c772a40451325c65a0f429ceb27aea891b311ddb20d
-  data.tar.gz: 489961c1c644e26993143c1dc33dedd4de3c1247875c8a74c377f09dd188775b64b2434108536eda6fd5dc1383608ea3c3a0c1d4d1bbb0e1ec4c3ef14bc1ba80
+  metadata.gz: 03094bac2f80369957d8e5c1a2e365e74c9c9c25461e5709bd3644b6ece33cc98900be3718e1908316e71d56f7f957104cb07eef2746d6008e9d2069d02d84a2
+  data.tar.gz: c5d07e05502f92836fc34a9449c2c708f4a911cae5ec3c17279d135ac92cef9ca5f87e81372ba913050492c2d75d691e2457f486f240418895ad9840706145f1

data/.gitignore

@@ -6,3 +6,4 @@ Gemfile.lock
 coverage
 tags
 tmp
+spec/javascripts/compiled

data/Rakefile

@@ -8,6 +8,10 @@ load 'jasmine/tasks/jasmine.rake'
 
 Bundler::GemHelper.install_tasks
 
+task :start_mock do
+  require_relative 'mock_app'
+end
+
 namespace :spec do
   Rake::TestTask.new :units do |t|
     t.libs   << 'spec'
@@ -23,11 +27,15 @@ namespace :spec do
     t.colors = true
     t.keep_on_error = true
   end
+
+  task :js => :start_mock
 end
 
-task :spec => ['spec:units', 'spec:js', 'spec:integration']
+task 'jasmine:require' => :start_mock
+
+task :spec => ['spec:units', 'jasmine:ci', 'spec:integration']
 
-task :default => [:spec]
+task :default => :spec
 
 task :demo do
   require 'compaa'

data/bin/compaa

@@ -2,5 +2,11 @@
 
 require 'compaa'
 require 'rack'
+require 'launchy'
+
+Thread.new do
+  sleep 0.25
+  Launchy.open('http://localhost:7788')
+end
 
 Rack::Server.start(:app => Compaa::RackApp.new, :Port => 7788)

data/compaa.gemspec

@@ -1,3 +1,4 @@
+$:.push File.expand_path('../lib', __FILE__)
 require 'compaa/version'
 
 Gem::Specification.new do |gem|
@@ -30,4 +31,6 @@ Gem::Specification.new do |gem|
 
   gem.add_dependency 'haml'
   gem.add_dependency 'rack'
+  gem.add_dependency 'launchy'
+  gem.add_dependency 'coffee-script'
 end

data/lib/assets/blender.js

@@ -0,0 +1,59 @@
+(function() {
+  var supportsBlending = window.navigator.userAgent.indexOf('Firefox/2') !== -1,
+      firstImage  = new Image(),
+      secondImage = new Image(),
+      differenceCanvas = document.createElement('canvas');
+
+  function resize(subject, width, height) {
+    subject.width  = width;
+    subject.height = height;
+  };
+
+  function makeItBlend(imageOne, imageTwo, callback) {
+    firstImage  = imageOne;
+    secondImage = imageTwo;
+
+    setBlenderWidth();
+    drawCanvas();
+    callback(differenceCanvas);
+  };
+
+  function setBlenderWidth() {
+    resize(differenceCanvas, secondImage.width, secondImage.height);
+  };
+
+  function drawCanvas() {
+    supportsBlending ? blendForRealz() : blendFallback();
+  };
+
+  function blendForRealz() {
+    var context;
+
+    context = differenceCanvas.getContext('2d');
+    context.globalCompositeOperation = 'difference';
+    context.drawImage(secondImage, 0, 0);
+    context.drawImage(firstImage, 0, 0);
+  };
+
+  function blendFallback() {
+    var canvas, over, under;
+
+    canvas = document.createElement('canvas');
+    resize(canvas, firstImage.width, firstImage.height);
+
+    over = canvas.getContext('2d');
+    under = differenceCanvas.getContext('2d');
+
+    over.clearRect(0, 0, over.canvas.width, over.canvas.height);
+    under.clearRect(0, 0, under.canvas.width, under.canvas.height);
+
+    over.drawImage(secondImage, 0, 0);
+    under.drawImage(firstImage, 0, 0);
+
+    over.blendOnto(under, 'difference');
+  };
+
+  window.blender = {
+    makeItBlend: makeItBlend
+  };
+})();

data/lib/assets/compaa.js

@@ -1,153 +1,151 @@
-var Compaa = {
-  imageTypes: ['difference', 'animation', 'referenceImage', 'generatedImage'],
-  compaaHost: '',
-
-  init: function() {
-    this.attachClickHandlers();
-
-    $.getJSON(this.compaaHost + '/artifacts.json', function(json) {
-      this.setArtifacts(json.artifacts);
-      this.paintThePicture();
-    }.bind(this));
-  },
-
-  attachClickHandlers: function() {
-    this.attachButtonClickHandlers();
-    this.attachAcceptClickHandler();
-    this.attachRejectClickHandler();
-  },
-
-  setArtifacts: function(artifacts) {
-    this.artifacts = artifacts;
-  },
-
-  paintThePicture: function() {
-    this.drawDifferenceCanvas();
-    this.setDifferenceImage();
-    this.setGeneratedImage();
-    this.setReferenceImage();
-    this.show('generatedImage');
-  },
-
-  show: function(mode) {
-    _.each(this.imageTypes, function(type) {
-      $('#' + type).hide();
+(function() {
+  var imageTypes = ['difference', 'animation', 'referenceImage', 'generatedImage'],
+      compaaHost = '',
+      artifacts  = [],
+      generatedImage = new Image(),
+      referenceImage = new Image();
+
+
+  function init() {
+    attachClickHandlers();
+
+    storeArtifacts(function() {
+      paintThePicture();
+      show('difference');
+    });
+  };
+
+  function storeArtifacts(callback) {
+    var xhr;
+
+    xhr = new XMLHttpRequest();
+    xhr.open('GET', compaaHost + '/artifacts.json', true);
+    xhr.onload = function() {
+      artifacts = JSON.parse(xhr.responseText).artifacts;
+      callback();
+    };
+    xhr.send();
+  };
+
+  function attachClickHandlers() {
+    attachButtonClickHandlers();
+    attachAcceptClickHandler();
+    attachRejectClickHandler();
+  };
+
+  function replaceCanvasWith(newCanvas) {
+    newCanvas.id = 'difference';
+    document.body.replaceChild(newCanvas, document.getElementById('difference'));
+  };
+
+  function paintThePicture() {
+    generatedImage.onload = function() {
+      referenceImage.onload = function() {
+        window.blender.makeItBlend(generatedImage, referenceImage, function(blendedImage) {
+          replaceCanvasWith(blendedImage);
+          setDifferenceImage();
+          setGeneratedImage();
+          setReferenceImage();
+        });
+      };
+
+      referenceImage.onerror = function() {
+        setGeneratedImage();
+        setReferenceImage();
+        disableOtherButtons();
+        show('generatedImage');
+      };
+
+      referenceImage.src = referenceImagePath();
+    };
+
+    generatedImage.src = generatedImagePath();
+  };
+
+  function disableOtherButtons() {
+    imageTypes.map(function(element) {
+      return document.getElementById(element + 'Button');
+    }).forEach(function(element) {
+      element.className = element.className + ' disabled';
+    });
+  };
+
+  function show(mode) {
+    imageTypes.forEach(function(type) {
+      document.getElementById(type).style.display = 'none';
     });
 
-    $('#' + mode).show();
-  },
-
-  attachButtonClickHandlers: function() {
-    _.each(this.imageTypes, function(element) {
-      $('#' + element + 'Button').click(function(evt) {
-        evt.preventDefault();
-        this.show(element);
-      }.bind(this));
-    }.bind(this));
-  },
-
-  supportsBlending: function() {
-    return window.navigator.userAgent.indexOf('Firefox/2') !== -1;
-  },
-
-  drawDifferenceCanvas: function() {
-    var generatedImage = new Image(),
-        referenceImage = new Image(),
-        context = document.getElementById('difference').getContext('2d');
-
-    $([referenceImage, generatedImage]).error(function() {
-      $('#difference').attr('width',  0).attr('height', 0);
+    document.getElementById(mode).style.display = 'inline';
+  };
+
+  function attachButtonClickHandlers() {
+    imageTypes.forEach(function(element) {
+      document.getElementById(element + 'Button').onclick = function() {
+        show(element);
+      };
     });
+  };
+
+  function acceptImage() {
+    var url, xhr;
+
+    url = compaaHost + '/screenshots?filepath=' + generatedImagePath();
+    xhr = new XMLHttpRequest();
+    xhr.open('POST', url, true);
+    xhr.onload = moveToNextArtifact;
+    xhr.send();
+  };
+
+  function moveToNextArtifact() {
+    artifacts.shift();
+    if (currentArtifact()) {
+      paintThePicture();
+    } else {
+      endGame();
+    }
+  };
 
-    $(referenceImage).load(function() {
-      $(generatedImage).load(function() {
-        $('#difference')
-          .attr('width',  referenceImage.width)
-          .attr('height', referenceImage.height);
+  function attachAcceptClickHandler() {
+    document.getElementById('accept').onclick = acceptImage;
+  };
 
-        if (this.supportsBlending()) {
-          context.globalCompositeOperation = 'difference';
-        } else {
-          context.globalAlpha = 0.5;
-        }
+  function attachRejectClickHandler() {
+    document.getElementById('reject').onclick = moveToNextArtifact;
+  };
 
-        context.drawImage(referenceImage, 0, 0);
-        context.drawImage(generatedImage, 0, 0);
-      }.bind(this));
+   function setGeneratedImage() {
+    document.getElementById('generatedImage').src = generatedImagePath();
+  };
 
-      generatedImage.src = this.generatedImagePath();
-    }.bind(this));
+  function setReferenceImage() {
+    document.getElementById('referenceImage').src = referenceImagePath();
+  };
 
-    referenceImage.src = this.referenceImagePath();
-  },
+  function setDifferenceImage() {
+    document.getElementById('animation').src = differenceGifPath();
+  };
 
-  acceptImage: function() {
-    var url = this.compaaHost + '/screenshots?filepath=' + this.generatedImagePath();
+  function differenceGifPath() {
+    return referenceImagePath().replace('reference_screenshots', 'differences_in_screenshots_this_run') + '_difference.gif';
+  };
 
-    $.post(url, function() {
-      this.moveToNextArtifact();
-    }.bind(this));
-  },
+  function referenceImagePath() {
+    return currentArtifact();
+  };
 
-  rejectImage: function() {
-    this.moveToNextArtifact();
-  },
+  function generatedImagePath() {
+    return referenceImagePath().replace('reference_screenshots', 'screenshots_generated_this_run');
+  };
 
-  moveToNextArtifact: function() {
-    this.artifacts.shift();
+  function currentArtifact() {
+    return artifacts[0];
+  };
 
-    if (this.currentArtifact()) {
-      this.paintThePicture();
-    } else {
-      this.endGame();
-    }
-  },
-
-  attachAcceptClickHandler: function() {
-    $('#accept').click(function(e) {
-      e.preventDefault();
-      this.acceptImage();
-    }.bind(this));
-  },
-
-  attachRejectClickHandler: function() {
-    $('#reject').click(function(e) {
-      e.preventDefault();
-      this.rejectImage();
-    }.bind(this));
-  },
-
-  setGeneratedImage: function() {
-    document.getElementById('generatedImage').src = this.generatedImagePath();
-  },
-
-  setReferenceImage: function() {
-    document.getElementById('referenceImage').src = this.referenceImagePath();
-  },
-
-  setDifferenceImage: function() {
-    document.getElementById('animation').src = this.differenceGifPath();
-  },
-
-  differenceGifPath: function() {
-    return this.referenceImagePath()
-      .replace('reference_screenshots', 'differences_in_screenshots_this_run') + '_difference.gif';
-  },
-
-  referenceImagePath: function() {
-    return this.currentArtifact();
-  },
-
-  generatedImagePath: function() {
-    return this.referenceImagePath()
-      .replace('reference_screenshots', 'screenshots_generated_this_run');
-  },
-
-  currentArtifact: function() {
-    return this.artifacts[0];
-  },
-
-  endGame: function() {
-    $('body').replaceWith('<h1>Done!</h1>');
-  }
-};
+  function endGame() {
+    document.body.innerHTML = '<h1>Done!</h1>';
+  };
+
+  window.Compaa = {
+    init: init
+  };
+})();

data/lib/assets/context_blender.js

@@ -0,0 +1,51 @@
+(function() {
+  function inGroupsOf(groupSize, collection, callback) {
+    for (var i = 0; i < collection.length; i += groupSize) {
+      callback(collection.slice(i, i + groupSize));
+    }
+  };
+
+  function range(n) {
+    var result = []
+    for (var i = 0; i < n; i++) result.push(i);
+    return result;
+  };
+
+  CanvasRenderingContext2D.prototype.blendOnto = function(destinationContext, blendMode) {
+    var width  = Math.min(this.canvas.width, destinationContext.canvas.width),
+        height = Math.min(this.canvas.height, destinationContext.canvas.height);
+
+    var source      = this.getImageData(0, 0, width, height),
+        destination = destinationContext.getImageData(0, 0, width, height);
+
+    var sourceData = source.data,
+        destinationData = destination.data;
+
+    inGroupsOf(4, range(destinationData.length), function(pixels) {
+      var redPixel   = pixels[0],
+          greenPixel = pixels[1],
+          bluePixel  = pixels[2],
+          alphaPixel = pixels[3];
+
+
+      var sourceAlpha = sourceData[alphaPixel] / 255;
+      var destinationAlpha = destinationData[alphaPixel] / 255;
+      var destinationAlpha2 = sourceAlpha + destinationAlpha - sourceAlpha * destinationAlpha;
+
+      var sourceRedAlpha        = sourceData[redPixel] / 255 * sourceAlpha;
+      var destinationRedAlpha   = destinationData[redPixel] / 255 * destinationAlpha;
+      var sourceGreenAlpha      = sourceData[greenPixel] / 255 * sourceAlpha;
+      var destinationGreenAlpha = destinationData[greenPixel] / 255 * destinationAlpha;
+      var sourceBlueAlpha       = sourceData[bluePixel] / 255 * sourceAlpha;
+      var destinationBlueAlpha  = destinationData[bluePixel] / 255 * destinationAlpha;
+      var demultiply            = 255 / destinationAlpha2;
+
+      destinationData[alphaPixel] = destinationAlpha2 * 255;
+      destinationData[redPixel]   = (sourceRedAlpha   + destinationRedAlpha   - 2 * Math.min(sourceRedAlpha   * destinationAlpha, destinationRedAlpha   * sourceAlpha)) * demultiply;
+      destinationData[greenPixel] = (sourceGreenAlpha + destinationGreenAlpha - 2 * Math.min(sourceGreenAlpha * destinationAlpha, destinationGreenAlpha * sourceAlpha)) * demultiply;
+      destinationData[bluePixel]  = (sourceBlueAlpha  + destinationBlueAlpha  - 2 * Math.min(sourceBlueAlpha  * destinationAlpha, destinationBlueAlpha  * sourceAlpha)) * demultiply;
+    });
+
+    destinationContext.putImageData(destination, 0, 0);
+  };
+})();