BigOut

  last updated January 13, 2014 12:00 AM

All the magic of BIG, now in PDF!

TMCW's BIG is a fantastic little tool for knocking out presentations in little time. I'm often preparing something on short notice, and I dont need fancy transitions or animations, nor do I have the time to focus on building a fancy presentation. Maxxed-out text and quick-to-write slides is a dream come true. Until someone asks for a copy of the presentation...

Putting a BIG presentation online with gh-pages is dead simple but is isn't really portable and distributable. In a chat the other day, someone said 'someone should build an exporter for BIG...' to which I replied 'it shouldn't be too hard to do that with PhantomJS' having only briefly used Phantom, and not really knowing what I was talking about (as per usual.) I have had interest in PhantomJS for print services, like apollolm's Phantasm, so I figured I might as well figure this out.

PhantomJS has dozens of great uses, from headless testing to scraping web content, but its ability to capture an image of a web page in a headless session is what I was interested in tapping into.

Capturing the pages

Since a BIG presentation is comprised of many full page views which are numerically tagged in the url, I thought the most straightforward way to export them would be to capture each page sequentially. I used CasperJS, which is an utility for PhantomJS which aids in navigation. Looping through the selected pages of the presentation, we use Casper to make an image of each page like so:

1casper.start(
2    url+'#'+start, function(){
3      this.viewport(w, h);
4    }
5  ).then(function() {
6    this.each(pageArray, function(casper,page) {
7      this.thenOpen(url+'#'+page, function() {
8        this.viewport(w, h);
9        this.capture('outputs/'+(page < 10 ? '0' : '')+page+'.png',
10    	{top: 0,left: 0,width: w,height: h});
11      });
12    });
13});
14
15casper.run();

Building the PDF

I had issues getting Phantom to create PDFs - the sizing was always off - so I used PDFKit to whip through the exported images and build a PDF document:

1var PDFDocument = require('pdfkit');
2var fs = require('fs');
3var outDir = fs.readdirSync('outputs/');
4var outputs = [];
5
6for (var i=0; i < outDir.length; i++){
7  if (outDir[i].split('.')[1] === 'png'){
8    outputs.push(outDir[i]);
9  }
10}
11
12var doc_options = {
13  size: 'A4',
14  layout: 'landscape',
15  info: {
16    Title: 'big.js presentation',
17    Author: 'bigOut'
18  }
19}
20
21var doc = new PDFDocument(doc_options);
22var outDoc = fs.createWriteStream('bigOut.pdf');
23doc.pipe(outDoc);
24
25for (var i=0; i < outputs.length; i++){
26  if (i > 0){
27    doc.addPage();
28  }
29  doc.image('outputs/'+outputs[i], 0, 0, {width: 841, height: 595});
30}
31
32doc.end();

Keeping it off the system

Phantom and Casper are both system installs. If I were using daily, and knew that I didn't need to change version, this would be fine, but for prototyping and playing, I didn't want system installs (aside from node,js, which I do use daily). I use shelljs frequently for build scripts, so I used it here to call the node_modules version of PhantomJS:

1// shelljs to call local phantomjs
2var shell = require('shelljs');
3var phjs = 'node_modules/phantomjs/bin/phantomjs';
4
5shell.exec(phjs+' index.js '+url+' '+start+' '+end);

CasperJS is injected from node_modules into the phantom instance, removing that system reqirement as well:

1phantom.casperPath = 'node_modules/casperjs';
2phantom.injectJs(phantom.casperPath + '/bin/bootstrap.js');
3var casper = require('casper').create();

The entire process is called from the terminal using node bigout.js http://abenrob.com/playingwithfire/ 0 38.

Check it out

Making bigOut.js was a fun little project, and a good excuse to learn somehting new! Feel free to check out the project and send me PRs if you want to make it better.