Box2D, JavaScript, HTML5 : 2013

In the ever evolving javascript space the best way to connect the pieces is thru solving problems. The problem I am trying to solve here is "provide users the ability to request screenshots on a remote machine. Use a node.js server that allows you to enter a URL and get screenshots back from the browser"

Installation and System Setup

Download nodejs installer from http://nodejs.org/download/
After installation open the command prompt and type

C:\>node --version //prints the version number
C:\>npm -version //npm is a NodeJS package manager. it's used to install node programs.

The next step would be to install all the dependencies for the project, -g flag is to install the module globally.

C:\>npm install -g socket.io  
C:\>npm install -g phantomjs  
C:\>npm install -g node-static  
C:\>npm ls    //lists out all the modules installed

The project contains 3 pieces,
nodejs_example1.js - is the server code that defines how the server talks to the client.
nodejs_example1.html - is the html page loaded in the client browser.
phantomjs_example1.js - contains the phantomjs code to take the screenshot

nodejs_example1.js

var http = require('http')
  , io = require('socket.io')
  , fs = require('fs')
  , os = require('os') 
  , path = require('path')
  , childProcess = require('child_process')
  , phantomjs = require('phantomjs');
var server = http.createServer(onCreateHandler);
var socket = io.listen(server);
server.listen(8090);
var sessionid;
function onCreateHandler(req, res) {
  fs.readFile(__dirname + '/nodejs_example1.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading nodejs_example1.html');
    }
    res.writeHead(200);
    res.end(data);
  });
}
socket.on('connection', function (socket) {
  sessionid = genRandNum();
  socket.emit('session id', { id:  sessionid});
  socket.on('capture screen event', function (id, url) {
    if(sessionid == id){
         captureScreenShot(url);
    }else{
         console.log("Invalid Session ID");
    }
  });
});
function captureScreenShot(data){
  var binPath = phantomjs.path;
  output = os.arch() + os.platform() +  "_" + Math.round(os.uptime()) + '.png';
  var childArgs = [
          path.join(__dirname, 'phantomjs_example1.js'),
          data,
          output]
  console.log(childArgs);
  childProcess.execFile(binPath, childArgs, function(err, stdout, stderr) {
        // handle results
  }) 
}
function genRandNum() {
    return Math.floor((Math.random()*10)+1); //Return a random number between 1 and 10
}

nodejs_example1.html

<html>
<head>
<script type="text/javascript" src="http://localhost:8090/socket.io/socket.io.js"></script> 
<script type="text/javascript" src="http://localhost:8090/phantomjs/phantomjs.js"></script> 
<script type="text/javascript" src="http://localhost:8090/phantom/phantom.js"></script> 
<script>
  var socket = io.connect('http://localhost');
  var sessionid = 0;
  socket.on('session id', function (data) {
    sessionid = data.id;
  });
  function captureScreenShot(){
    socket.emit('capture screen event', sessionid, document.getElementById("inputurl").value );
  }
</script>
</head>
<body>
 url for screenshots <input type="text" id="inputurl" value="https://www.google.com/"><br>
 <input type="submit" value="Get Screen Shot" onclick="captureScreenShot()">
</body>
</html>

phantomjs_example1.js

var system = require('system');
var page = require('webpage').create();

address = system.args[1]; 
output = system.args[2];
//debug_address = 'https://www.google.com/'; 
//debug_output = 'hello.png';

 page.open(address, function (status) {
  console.log(address);
        if (status !== 'success') {
            console.log('Unable to load the address!');
            phantom.exit();
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });

To Run the code, (note all three files must be in the same folder) start your server as follows,
C:\>node nodejs_example1.js
Open the bowser and load the following page "http://localhost:8090/", Click on the "Get ScreenShot" button, the screenshot gets stored in your local folder.

The next blog would be about sending the screenshot to the server.

Box2D, JavaScript, HTML5

Monday, July 29, 2013

Setting up Ruby on Rails

Friday, May 31, 2013

Screenshot using nodejs and phantomjs

Installation and System Setup