varun pant

Installing Ubuntu Linux in VMware and VMwareTools

2012-01-09T21:58:14z

I have been using Ubuntu for last two years as a deployment environment for my pet projects, however recently, after having installed “Natty Narwhal” on one of my old ‘HP’ laptop I moved into using Ubuntu as a full time development environment.

There are times when I need more than one deployment units and since I use Linode as my primary deployment VPS host, I sometime need to test the perf of my software locally thus there came a need of replicating an exact or close to exact “Deployment Environment”

Enter VmWare, as most of you folks know, there is nothing like a quick and dirty VM Image boot, and VmWare is one of the best in the market although “Oracle’s Virtual box” and “Parallels for mac” are pretty awesome too, there also is a repository for pre-installed vanilla images for most of the popular flavours of Linux here.

The cheapest version of Linode is 512MB RAM and 20GB HD and this is exactly what you get when you download the image from above link, although you can tweak and configure it to you likings at all times.

Another important step to remember is installing VMware Tools .

With the VMware Tools SVGA driver installed, Workstation supports significantly faster graphics performance. The VMware Tools package provides support required for shared folders and for drag and drop operations. Other tools in the package support synchronization of time in the guest operating system with time on the host, automatic grabbing and releasing of the mouse cursor, copying and pasting between guest and host, and improved mouse performance in some guest operating systems. To install choose VM > Install VMware Tools from the VMware Workstation menu, although you will be automatically prompted when you boot you Image for the first time.

If this is your first time dealing with this stuff then you may need a little help installing the script written in pearl, If GNOME has been your baby for a while, then the installed location and booting your image is not so obvious for the command line server interface.

This is what you do

  
  
	#install kernel headers so modules will work
        #needed this on a 10.04 guest running in a Fusion 3 host
        apt-get install linux-headers-virtual

        # install kernel modules
        apt-get install --no-install-recommends open-vm-dkms

        # EITHER: install tools for an xorg install
        apt-get install open-vm-tools
        # OR: a headless install
        apt-get install --no-install-recommends open-vm-tools

Start up a terminal window and do the following to ensure that you have the required packages for building VMware Tools or your kernel.

    
	sudo apt-get install build-essential linux-headers-`uname -r` psmisc

If the cdrom was not automatically mounted, mount the cdrom (in your guest OS) by doing

    
	# make a mount point if needed :
	sudo mkdir /media/cdrom

	# Mount the CD
	sudo mount /dev/cdrom /media/cdrom

	# Copy and extract VMWareTools

	sudo cp /media/cdrom/VMwareTools*.tar.gz /tmp

	# You can extract with archive manager, right click on the archive and extract ... or

	cd tmp

	tar xvf VMwareTools*.tar.gz  
	
	cd vmware-tools-distrib
	sudo ./vmware-install.pl 
	
	#You can configure the tools as root
	sudo vmware-toolbox

Once you are done installing you can simply issue sudo shutdown –P or sudo init 0 and shutdown the VM safely. Have fun Vm-innnng :)

First Android application

2011-10-31T21:21:00z

Well since I now posses a Samsung Galaxy S2 phone, its only fair that I expand my horizon and come up with some nice little fun app to begin with.

One of my favourite places to surf and learn computer animation is a nice site called dhteumeuleu, which is authored by ge1doot. This place has amazing JavaScript examples and various demos and here I shamelessly copy or rather port one of his creations into android. Its called No Click ! and hence I shall call it the same although I personally wanted to call it as “chaser”.

The principles of animation in a droid app basically remains the same, there is a input step, then an update state step and finally a render step, i.e We handle input (touch events), update the state (update the sprite position) of our internal objects and render the current state.

There is a concept of activity in a droid app and every thing happens inside it, an activity creates a view, touch events are passed into a view and then rest of the magic happens.

I have four classes three of them form a support infra and then finally a Sprite model where all the cool stuff goes and you will notice that this is a prevalent pattern in the droid world.

I have a class called MainPanel which extends the SurfaceView, this is where I initialise my app and start the main animation thread which is the instance of a class called MainThread that in turn inherits form the Thread class, all of this so far is simply support abstractions to build code structure, after this there is a third class called ScrollActivity which extends Activity and its here where the Sprite class called Chaser is initialised ., a bitmap is set from the resource and then an animation loop simply does some hacky positioning of the sprite based on touch events.

One of the different things (coming from a mouse driven environment ) is how a mouse drag equivalent is captured in touch screen devices here, an ACTION_DOWN event is equivalent to mouse down, an ACTION_UP is equivalent of mouse up and ACTION_MOVE is equivalent of mouse move, since I was interested in capturing a "Mouse Drag" equivalent I kinda do something like given below

Snippet

           
	     
        public boolean onTouchEvent(MotionEvent event) {
        	super.onTouchEvent(event);
       		 switch (event.getAction()) {
            		 case MotionEvent.ACTION_DOWN: {
               		 down = true;
                	 chaser.setXm(event.getX());
                	 chaser.setYm(event.getY());
                	 break;
            		 }
           		 case MotionEvent.ACTION_UP: {
                	 down = false;
               		 break;
            		 }
            		case MotionEvent.ACTION_MOVE: {
               		 if (down) {
                   	 chaser.setXm(event.getX());
                   	 chaser.setYm(event.getY());
                    	chaser.setStart(true);
                	 }
                	break;
                     }
        	}
        	return true;
    	   }

One of the turn down is a bug in the framework, which on exiting i.e on surfaceDestroyed sometimes throws an exception so for now I simply use hack I found somewhere

Snippet

           
 
 public void surfaceDestroyed(SurfaceHolder holder) {
	// tell the thread to shut down and wait for it to finish
	// this is a clean shutdown
	boolean retry = true;
	while (retry) {
		try {
			thread.join();
			retry = false;
		} catch (InterruptedException e) {
			// try again shutting down the thread
		}
	}
}

and that's it folks.

Click here to download code
Written using Idea IDE

LIMBO Game Review

2011-10-19T17:09:00z

LIMBO is a horrifically beautiful, monochrome or rather a gray-scale purgatory painted perhaps while watching Tim burton movie on the side. It was published initially in Jul 2010 by Microsoft Game Studios(XBLA) and Playdead (PSN, Windows), and then later released for Windows platform by Steam.

The primary character of the game is a boy, who wakes up right at the beginning of the game i.e while you are trying to figure out WTF is happening or wonder if you graphics driver (windows platform) screwed up or something, but there as you are fiddling with the movement buttons in keyboard you will see pair of bright white eyes flickering, and that’s when you start falling in love with the game and the care of detail added in a game which is totally unlike other in its league.

LIMBO game essentially is a 2D puzzle game, the boy with a twee outline and messy hair ideally is in search of her sister, the games puzzle are master minded by Dino Patti and lead designer of PlayDead Jeppe Carlsen,according to Wikipedia, Dino Patti had conceived this idea around 2004, and had even tried coding it in visual basic,he later made a video trailer to recruit a developer. They had grants from Nordic game program and Danish Government.

Although Patti helped in the first few months with programming, he realised that the project was much larger than what the two of them could handle, and Patti developed the business around the game's expanded development

Limbo was awarded both the "Technical Excellence" and "Excellence in Visual Art" titles at the Independent Games Festival during the 2010 Game Developers Conference, at the 2010 Electronic Entertainment Expo—about a month before its release—Limbo won GameSpot's "Best Downloadable Game",and was nominated for several other "Best of Show" awards, including "Best Platformer" by IGN, “Most Original Game" by G4 TV and "Best Puzzle Game" by GameSpot The game was nominated as one of 32 finalists at the 2010 IndieCade festival for independent developers, ultimately winning the "Sound" award.

Limbo Game Play from varun pant on Vimeo.

VPS Hosting Past and Present

2011-09-27T07:26:00z

I had been hosting this blog in the past for an extremely competitive (read cheap) price here at Arvixe . I was using ASP.net based blogging software called BlogEngine. over and all I will describe my experience as pleasant. Arvixe is a great Hosting Provider, has good up time and has plans which are easy on the pocket, and does almost all the common stuff like emails and cpanel ,blah blah that other hosting provider do, but kinda does it on a low price. I was a happy blogger for an year although I could only manage close to 8 post and and few demos in that time.

Enter Linode.

Linode is a different beast than Arvixe, this baby gives you way more control than any conventional hosting provider(shared) or a VPS provider generally gives you , and this is done by a custom made dash board panel which has a plethora of features, now Arvixe also has other plans which will end up giving you a dedicated hosting (VPS) and I bet they would be better than most others in the similar category, but Linode (a different league) is like Amazon Elastic,but only for Linux operating system like Ubuntu (debian), Fedora(centos) etc or rather dedicated for them, Linode means Linux Node anyways ;)

If I quote them verbatim:

We're a VPS hosting company built upon one simple premise: provide the best possible tools and services to those that know what they need — better hosting.

and this is pretty true , they have many features which can be found here. They also do a Getting Started video here, if you still have questions look here and here, they also have an Irc channel and other discussions and bulletin boards which can be reached through this page.

Linode has six data centers around the world , so one can switch between them either while setting up an account or even migrate like a hot swap later on, depending on what speed they would like to get for dedicated regional customers, they do a blog as well.

Linode does a lotta stuff and does is good, but the bang on the buck is that they have a kinda “do it yourself library”, which is pretty vast, quality and covers every thing you need to know, or at least the important bits. I have lately spend hours just browsing through it, this library will have “getting started” information and stuff which you need to do to get cracking!!.

By the way did I mention that since I had purchased a good(slightly expensive than earlier )plan from them I also decided to write my own blog,I have used python and SQLite so that it stays light weight and have used WSGI . I will soon be open sourcing it at git hub. I used Bottle.py, micro web-framework to build it so I will be calling the software Message, “Message in the bottle…..”, rings any silly bell anywhere ??

I wish my very best to Linode team and hope some of you linux ninjas would like to give it a try someday.

Web Sockets in HTML 5

2011-01-10T23:07:00z

HTML5 WebSockets, defines a full-duplex communication channel that operates through a single socket over the web. WebSocket is not just another incremental enhancement to conventional HTTP communications, it represents a large advance, especially for real-time, event driven web applications.

Normally when a browser visits a web page, an HTTP request is sent to the web server that hosts that page. The web server acknowledges this request and sends back the response. In many cases—for example, for stock prices, news reports, ticket sales, traffic patterns, medical device readings, and so on—the response could be stale by the time the browser renders the page.

Current attempts to provide real-time web applications largely revolve around polling and other server-side push technologies, the most notable of which is "Comet", which delays the completion of an HTTP response to deliver messages to the client.

There are many open source implementation of Http Push, one of my personal favorite is APE i.e. Ajax Push Engine.

Update: Microsoft has added a small demo of HTML5 support , it comes as an extension to WCF (Windows communication foundation) .The links can be found here, here and here.

There is still no news of Microsoft adding this feature in IE 9, at the time of writing this post, only Firefox 4, Chrome 4, Safari 5 and Opera 11 and above have support for this feature.

Update: Due to security flaw Firefox and Opera have disabled their support for Web Sockets, more info can be found here.

For those interested here is the draft , official website, the API and a nice tutorial.

To establish a WebSocket connection, the client and server upgrade from the HTTP protocol to the WebSocket protocol during their initial handshake, as shown in below, note that this connection description represents draft 76 of the protocol, the connection handshake may change during future specification revisions.

From client to server:
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Protocol: sample
Upgrade: WebSocket
Sec-WebSocket-Key1: 4@1 46546xW%0l 1 5
Origin: http://example.com
[8-byte security key]

From server to client:
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
WebSocket-Origin: http://example.com
WebSocket-Location: ws://example.com/demo
WebSocket-Protocol: sample
[16-byte hash response]

I was trying to find an alternative which is comfortable enough to be used in my pet projects in Microsoft Tech stack, at the time of writing I couldn’t any so I here it is my very own HTTP Web Socket server written in .Net via C#, this implementation does not use WCF and is basically written using HTTP Async Sockets, the client API is pretty straight forward

Snippet

         
            var url = "ws://localhost:999&rdquo"
			var sock = new WebSocket(url);
			sock.onopen = function(){
			    log("open");
			    sock.send("Message….");
			}
			sock.onmessage = function(e){
			    log(e.data);
			}
			sock.onclose = function(e){
			    log(" closed");
			}

and that's it!!!

I plan to add some more examples and perhaps come with something more concrete later, till then I hope you enjoy using this code sample and enhancing it as you desire.

A complete example in c# can be downloaded from here
Requires visual studio 2010

Water Simulation

2010-09-25T14:55:00z

Its been a while since my last post, had been busy with office work…sigh!!!

Anyways, I was poking around web to come up with interesting water simulation techniques, as you could see in many games these days, so I did find a reference to an old C-based technique, after little refinement, what I have is a water simulation which uses a very old algorithm based on two heightmaps.

As always it’s a grid based animation which divides the screen into a mesh(more slices better this simulation looks), I use a jagged array in c# to do this (load it with a texture of 640 X 480 dimension ), to animate I use another array of same dimensions, now to make every thing move I kinda do something like this

Snippet

             
               for (int y = 1; y < 479; y++) {
                    for (int x = 1; x < 639; x++) {
                        this.currentState[x, y] = ((this.oldState[(x - 1), y] + this.oldState[(x + 1), y] + this.oldState[x, (y + 1)] + this.oldState[x, (y - 1)] >> 1) - this.currentState[x, y]);
                        this.currentState[x, y] -= (this.currentState[x, y] >> 7);
                        int data = (short)(1024 - this.currentState[x, y]);
                        int a = (x - 640) * data / 1024 + 640;
                        int b = (y - 480) * data / 1024 + 480;
                        if (a >= 640) a = 639;
                        if (a < 0) a = 0;
                        if (b >= 480) b = 479;
                        if (b < 0) b = 0;
                        int textOffset = x + y * 640;
                        bmp.Pixels[textOffset] = texture[(a + b * 640)];
                    } 
                }

The choice of display entity(acting as viewport and display canvas) is WritableBitmap, and rest is pretty much fun to play.

Click here to watch demo
Requires Silverlight 3 or above

Liquid Particles

2010-07-03T18:58:00z

After ages of constantly being one of the most used browser as well as a serious pain in Butt!!! IE is finally about to mature into something good and perhaps a useful software , with its support to most of the standards being used today , IE will join back the league of web 3.0 browsers, hopefully very soon

So I was going through various experiments done with Canvas and came across a great example on Liquid Particle physics simulation, which amazingly is written in JavaScript and Canvas element, I was so mesmerized by the application that I had to port it to SilverLight, using WritableBitmap.

Click Here to watch Demo.
Needs silverlight 3 or higher

Image Carousel

2010-06-29T00:51:00z

Here is another of many JavaScript based Image Carousel, I had seen many similar to these made in SilverLight and Flash, I came across a wonderful carousel made in SilverLight sometimes back which was very fluid in behavior and could easily be customized and configured to take various shape and form.

I have managed to port it to JavaScript, it works best on chrome or FF, hope this would be fun to play with.

Enjoy!!!

Click here to watch it in action
Pure javascript sample

I-Phone Scroll

2010-06-18T18:23:00z

One of the amazing features of i-phone user interface is smooth panning/scrolling animation.

I-phone “List Scrolling” perhaps gives a very funky and usable List –View to its users and allows them to scroll up and down the interface without any need of a scroll bar.

This interface is sensitive to the push speed and also shows traces of resilience.

I have been experimenting with various techniques to bring out similar effect using JavaScript and HTML, I am not quite sure if this would be useful in its present form but with some modifications may be this sample could prove its worthiness somewhere.

The code involved is also very little.

Snippet

         
    var scroll = {
    down: false,
    verticalOffset: -5,
    ym: 0,
    decay: .93,
    mdDecay: 0.27,
    speedOffset: 0.4,
    sprinessOffset: 0.08,
    _velocity: 0,
    _mouseDownY: 0,
    $: function (id) {
        return document.getElementById(id);
    },
    /* --- events --- */
    addEvent: function (o, e, f) {
        if (window.addEventListener) o.addEventListener(e, f, false);
        else if (window.attachEvent) r = o.attachEvent('on' + e, f);
    },
    init: function () {
        setInterval(scroll.compositiontarget_rendering, 30);

        scroll.verticalOffset = scroll.$('scrollMe').offsetTop;

        scroll.addEvent(scroll.$('scrollMe'), 'mousedown', function (e) {
            scroll.$('scrollMe').style.cursor = 'move';
            if (!scroll.down) {
                scroll.down = true;
                scroll.ym = e.clientY;
                scroll._mouseDownY = scroll.$('scrollMe').offsetTop;
            }

            if (e.preventDefault) e.preventDefault();
        });

        scroll.addEvent(scroll.$('scrollMe'), 'mouseup', function () {
            scroll.down = false;
            scroll.$('scrollMe').style.cursor = 'default';

        });


        scroll.addEvent(scroll.$('scrollMe'), 'mousemove', function (e) {
            if (scroll.down) {
                if (scroll.canScrollFurther()) scroll.$('scrollMe').style.top = (scroll._mouseDownY + (e.clientY - scroll.ym)) + 'px';
                // update the velocity
                scroll._velocity += ((e.clientY - scroll.ym) * scroll.speedOffset);
            }

        });

        document.onselectstart = function () {
            return false;
        }
    },
    compositiontarget_rendering: function () {
        // decay the velocity
        if (scroll.down) {
            scroll._velocity *= scroll.mdDecay;
        } else {
            scroll._velocity *= scroll.decay;

            var screenHeight = scroll.$('screen').offsetHeight;
            var scrolRegionHeight = scroll.$('scrollMe').offsetHeight;

            var y = scroll.$('scrollMe').offsetTop - scroll.verticalOffset;
            var spriness = 0;

            // calculate a spriness when the text moves over the canvas size
            if (y > 0) {
                spriness = -y * scroll.sprinessOffset;
            } else if (y + scrolRegionHeight < screenHeight) {
                spriness = ((screenHeight - scrolRegionHeight - y) * scroll.sprinessOffset);
            }
            if (!scroll.canScrollFurther()) {
                scroll._velocity = -(scroll._velocity / 8)
            }
            scroll.$('scrollMe').style.top = (y + scroll._velocity + spriness) + 'px';
        }


    },
    canScrollFurther: function () {
        var _top = scroll.$('scrollMe').offsetTop;
        var bottom = _top + scroll.$('scrollMe').offsetHeight;
        var center = (scroll.$('screen').offsetTop + scroll.$('screen').offsetHeight) / 2;
        return (_top < center && bottom > center);
    }
};

Click here to watch demo
Pure JavaScript and HTML Sample

Notepad++ with Python

2010-06-15T20:09:00z

After reading an excellent article by Kazi Manzur Rashid on setting up a development environment for Iron Ruby using Notepad++ , I was immediately struck with an idea of using the same excellent tool with Python 2.6.

Now don’t get me wrong here, theoretically there is nothing wrong with IDLE, but having a light weight IDE for those who don’t want to use Pydev plugin for Aptana or Eclipse, I think Notepad++ is indeed a nice little dev tool.

One of the amazing capabilities in Notepad++ is that one can assign shortcuts like(Cntrl + F5) and debug/interpret python script with python interpreter.

In order to Run python script from Run menu in Notepad++ you must Open Run > Run (or simply press F5), in the window that opens

         
           cmd /K "$(FULL_CURRENT_PATH)"

this command assumes that Python path i.e.

         
           c:/PythonXX/Python.exe

         
          c:/PythonXX/Pythonw.exe

(If you don’t like console) is added in your Environment variables , if not you couldeither go to:

         
          My Computer -> Properties -> Advanced -> Environment Variables -> System Variables -> PATH –> Edit

and add this path there or use

         
         cmd /k C:\Python26\python.exe

then press save after putting in a friendly name and assigning a key board shortcut for example CNTRL + F5.

You could now see your entry in Run drop down menu at the last, incase you want to edit or remove this go to Settings>Shortcut mapper and press Run Commands tab and then right click to choose options from context menu and your all set.

Hope this helps :)