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.