Skip to content

Instantly share code, notes, and snippets.

@joefutrelle
Last active August 29, 2015 13:56
Show Gist options
  • Save joefutrelle/8940260 to your computer and use it in GitHub Desktop.
Save joefutrelle/8940260 to your computer and use it in GitHub Desktop.
Lay out IFCB ROIs using JS impl of Jim Scott's rectangle packer
// now refactored as jquery plugin
(function($) {
$.fn.extend({
packedMultiImage: function(width, height) {
return this.each(function() {
var k = 4; // FIXME hardcoded
var $this = $(this);
// set up the rectangle packer
var rootNode = new Node();
rootNode.rect = new Rect(0, 0, width, height);
// add the canvas
$this.empty().append('<canvas width="'+width+'px" height="'+height+'px"></canvas>');
var ctx = $this.find('canvas:last')[0].getContext('2d');
$this.bind('addImage', function(event, url, success, failure) {
console.log('handler firing for '+url);
var image = new Image();
$(image).load(function() {
console.log('image loaded: '+url);
var t_width = image.width / k;
var t_height = image.height / k;
// ask the packer to insert a rectangle the size of the target / k
var imageNode = rootNode.insert_rect(new Rect(0, 0, t_width, t_height));
if(imageNode) { // if it fits,
console.log('image fit. drawing image '+url);
var r = imageNode.rect; // get its coordinates
// add image url to target node
ctx.drawImage(image, r.x, r.y, r.w, r.h);
if(success != undefined) {
console.log('calling success handler');
success(url);
}
return;
}
console.log('image did not fit');
if(failure != undefined) {
console.log('calling failure handler');
failure(url);
}
});
image.src = url; // initiate loading
});
});
}
});
})(jQuery);
$(document).ready(function() {
// scaling factor for images
var k = 4;
// width / height of canvas
var width = 1024;
var height = 768;
// add a canvas
$('#main').append('<div id="multi"></div>');
$('#main').append('<div id="status">idle</div>');
$('#multi').packedMultiImage(width, height);
// now set up generalized layout routine
layoutImages = function(urls) {
$('#status').empty().append('Laying out images...');
var layoutNextImage = function() {
var url = urls.pop();
if(url) {
$('#multi').trigger('addImage', [url, function() {
console.log('success callback');
$('#status').empty().append('packed ' + url);
layoutNextImage();
}, function() {
console.log('failure callback');
$('#status').empty().append('No more images will fit');
}]);
console.log('triggered addImage for '+url);
}
};
layoutNextImage();
};
// IFCB impl
getIfcbImages = function(callback) {
var pid = 'http://demi.whoi.edu/mvco/IFCB1_2011_270_185023';
$('#status').empty().append('Requesting image list for ' + pid + '...');
$.getJSON(pid+'.json', function(r) {
var urls = [];
$.each(r.targets, function(i,t) {
urls.push(t.pid + '.jpg');
});
layoutImages(urls);
});
};
//getIfcbImages();
// CPICS impl
CPICS_pfx = 'http://atlantica.whoi.edu/cgi-bin/get_image.pl?imagename=';
CPICS_pids = ["20130828_214943.757.4","20130829_081442.982.1","20130829_081443.244.1","20130901_082307.798.2","20130902_225221.332.1","20130905_010446.273.0","20130905_052008.951.0","20130905_060625.934.2","20130905_064801.671.0","20130905_093452.242.0","20130905_094605.730.0","20130908_202210.668.2","20130909_193940.531.0","20130912_024118.204.0","20130912_031522.749.0","20130912_202211.366.0","20130913_012557.439.0","20130913_103154.287.0","20130913_231418.363.0","20130914_003135.990.0","20130914_161740.561.0","20130915_072924.396.0","20130915_110355.739.0","20130915_145749.198.1","20130915_201605.285.0","20130916_015829.282.0","20130916_073204.014.0","20130916_073204.014.1","20130916_091907.238.0","20130916_091907.451.0","20130916_113554.018.0","20130916_122838.295.0","20130916_132238.834.0","20130916_151348.932.0","20130916_173640.284.0","20130917_064000.341.0","20130917_175816.808.0","20130917_184452.070.0","20130918_034218.580.0","20130918_034218.772.0","20130918_050539.371.1","20130918_102924.985.1","20130918_194706.600.0","20130919_035732.286.0","20130919_093106.814.0","20130919_120713.819.0","20130919_133552.946.0","20130919_140714.389.1","20130920_054039.514.0","20130920_083312.707.0","20130921_022759.058.0","20130921_131123.755.0","20130922_061447.357.0","20130922_142121.502.0","20130924_213545.439.0","20130925_072648.723.0","20130925_195757.994.0","20130927_121214.661.0","20130929_113436.084.1","20130929_145745.113.0","20130929_212352.149.2","20130929_212352.149.3","20131001_110528.272.0","20131002_015050.984.2","20131002_022640.682.0","20131002_140813.657.0","20131005_173134.205.0","20131012_174810.535.0","20131016_092422.881.0","20131018_214828.928.0","20131024_113559.210.1","20131024_225341.999.0","20131025_014158.150.0","20131025_053148.191.0","20131027_131335.586.0","20131027_150442.319.0","20131030_225810.330.1","20131102_071150.047.1","20131120_033201.449.0","20131126_060845.684.0","20131126_120824.452.0","20131126_142835.439.0","20131127_155420.499.0","20131129_050103.591.0","20131129_172858.138.0","20131130_034742.715.0","20131203_032734.831.1","20131203_032734.831.2","20131209_060448.276.1"];
CPICS_urls = [];
$.each(CPICS_pids, function(i, pid) {
CPICS_urls.push(CPICS_pfx + pid + '.png');
});
layoutImages(CPICS_urls);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment