nvm and node

Since nodejs is still young and backed by an active community, developers face a challenge to manage newer versions of node on regular basis.  nvm is your friend. Using nvm you can install multiple versions of node and manage each version's packages separately.

To install nvm run,
>curl https://raw.github.com/creationix/nvm/master/install.sh | sh

To install a specific version of node use nvm install command. For example following command will install version node version 0.10.1

>nvm install v0.10.1 

To set a default node version
>nvm alias default v0.10.1 


To change system to start using a specific version of node
>nvm use 0.10.1 

To make sure that nvm is initialized in your shell add following command in  your shell initialization script. For example I use bash shell so I will add this to ~/.bashrc or ~/.bash_profile

[[ -s /Users/user/.nvm/nvm.sh ]] && . /Users/user/.nvm/nvm.sh  # This loads NVM

html5 canvas for image with touch/click interactions

I successfully used html5 canvas to implement a parking lot image with an ability to show occupancy status in addition to selecting an individual parking spot for reserving. In the implementation, I used one canvas object on which the parking lot image is drawn using;

   ctx = canvas.getContext('2d');
   ctx.drawImage(...);

I created a utility functions to clips partly

       function clipCanvas(x,y,w,h) {
return ctx.getImageData(x,y,w,h);
}

or buffer completely a canvas state;


       function bufferCurrentCanvas(x,y,w,h) {
if (!bufferCanvas) bufferCanvas = document.createElement('canvas');
bufferCanvas.width  = w;
bufferCanvas.height = h;
bufferCanvas.getContext('2d').clearRect(x,y,w,h);
bufferCanvas.getContext('2d').drawImage(canvas, x, y, w, h, x, y, w, h );
return bufferCanvas;
}

To support spot selection functionality I had to create a metadata for the image. The metadata consists of the coordinates x,y, width, height and parking spots for all parking blocks. To determine if a specific block is clicked/touched (on a touch device) I first determine if a the mouse click coordinate is within a block and if true determine which parking spot within that block is selected by using a offset calculation logic based on the parking spot height and width information, which is constant for a given image.

As part of parking occupancy status, I implemented an animation of flipping a colored rectangle on parking spot, to show a recently parked car. This animation is completely implemented using canvas functionality;


              function animateStatus(spotInfo, img) {
var xoffset = 0,
step = 1,
horzOrient = ('angle' in spotInfo && spotInfo.angle === 90);
flipW = horzOrient ? parkStatus.blockInfo.carHeight/2 : parkStatus.blockInfo.carWidth/2,
flipped = false,
flipSpeed = 50;
var saveBg = horzOrient ? clipCanvas(spotInfo.x, spotInfo.y, parkStatus.blockInfo.carHeight, parkStatus.blockInfo.carWidth): clipCanvas(spotInfo.x, spotInfo.y, parkStatus.blockInfo.carWidth, parkStatus.blockInfo.carHeight);
function drawImg(){
if(flipped)
xoffset -= step;
else
xoffset += step;

function drawAndWait() {
setTimeout(drawImg, flipSpeed);
//clear old image
ctx.putImageData(saveBg, spotInfo.x, spotInfo.y);
//draw new image
if(horzOrient)
ctx.drawImage(img, spotInfo.x+xoffset, spotInfo.y, parkStatus.blockInfo.carHeight-(xoffset*2), parkStatus.blockInfo.carWidth);
else
ctx.drawImage(img, spotInfo.x+xoffset, spotInfo.y, parkStatus.blockInfo.carWidth-(xoffset*2), parkStatus.blockInfo.carHeight);
}

if(!flipped && spotInfo.x + xoffset <= spotInfo.x + flipW) {
drawAndWait();
}else {
flipped = true;
if(flipped && xoffset > 0){
drawAndWait();
}
}
}

drawImg();
}


This implementation will work without any code change once the metadata for the new image is provided.

If you are interested in additional code snippets I can provide it.

Sticky Jaggery

First of all - what is Jaggery? It is a server side javascript framework to build web applications. No, it is not a substitute to node.js. As you know, nodejs is a javascript runtime so jaggery can be made to run on nodejs. Any takers ? Currently jaggery is part of wso2 product stack and runs on rhino engine.

Why jaggery? - If you are a javascript developer and into web application development, jaggery is for you. The idea is front end and backend development seamless;  build your APIs in javascript code, exchange JSON data.

Can I do serious development with Jaggery? - Although it is relatively new, jaggery modules which is SDK for development is rich enough for serious development. Based on webapp needs, developers can build additional custom modules in pure javascript and also in java.

Server side MVC framework? - Github has a project called caramel. This project is started by wso2 team. At the time of the post this framework is not mature, it is in flux as it is actively developed. But it has some good concepts of modularization, page layout and code maintenance.

Get jaggery - It is a open source project. It is hosted on github.

I am currently building SOA based application platform using jaggery, caramel, opensocial gadgets on wso2 stack.

+Atul