Sagar Ganatra's Blog

I was listening to ColdPlay while developing a Parallax scrolling application and hence the title. Anyway, I was very much intrigued by the parallax scrolling model and wanted to try my hand on building one. The idea here was to show images of different transparency levels in such a way that when the user scrolls, one image would blend over the previous one. Take a look at the application here .

I have created a web application that recognizes hand gestures using WebRTC's getUserMedia API. Here's how it works: when you launch the application the browser will prompt you for the permission to access the camera. Click on 'Accept',and then swipe your hand from right to left and vice versa. You would see that the next image  (or the previous image if you swipe from left to right) in the gallery slides through. You can access the application here . Please note, I have tested this application on Chrome only and not on other browsers. Also, I have used five images in this demo and it is obvious that no image would be shown if you swipe from right to left when the last image is being shown or when you swipe from left to right when the first image is shown. I have codenamed this application as 'Gesto' and hence the name in the URL of the application.

I was having a conversation with my college friend about the enhancements in XHR2 and I was showing him how one can  upload a file to the server using plain Ajax . He asked me whether I can upload a large file to the server such as a video file. I tried doing that but was bumped when the server reported with 400 error telling me that the 'POST size has exceeded maximum limit'. This got me thinking whether I can upload chunks of a large file to the server. I referred to the FileSystem API and came across the slice method that allows you to get a fragment of a file.

I’ve been playing with the WebSocket feature introduced in ColdFusion 10 for some time now. I was trying out pushing images over a ColdFusion WebSocket channel and it worked just fine. But this time I wanted to put WebSockets to test and wanted to push large data at regular intervals. I thought maybe I can push video data over WebSockets and it turned out that there is no direct way to stream video data to many clients. I came across the function - drawImage that can be used to draw an Image or Video on a HTML5 Canvas. Once an image is drawn on the Canvas, it’s base64 encoded data can be obtained by calling the toDataURL function on the Canvas object.  This data can then be transferred over a ColdFusion WebSocket to all subscribers who can then use this  data to draw the image(video frame) on a Canvas.

The Canvas element introduced in HTML5 is the most talked about feature in HTML5. It allows a developer to draw on a rectangular area and the ability to control each pixel in it. I'm not a very big fan of powerful graphics and animation on the web, however I wanted to try Canvas in conjunction with another popular feature - Web Sockets. The idea is to use the mouse events to draw on the Canvas and then send the coordinates to remote clients using Web Sockets. I have used the pusherapp Web Socket library in my example and this video shows how two clients can play a Tic-Tac-Toe game: Unable to display content. Adobe Flash is required. As you can see in this video, the mouse movements made on the canvas will draw lines on it and also cause lines to be drawn on another browser window.

I was looking into the Google Maps API the other day and came across some APIs which are really cool. I came up with a use case to show path from the current location to a particular destination entered by the user. I was also trying to achieve that Indiana Jones like effect on the map i.e. to show an animation of the path being drawn on the map. The idea here is to show the moving path until the destination is reached and also to pan the map accordingly. Unable to display content. Adobe Flash is required. As seen in the video, a marker is added to the map specifying my current location (Bangalore, India). The current location data is retrieved using the HTML5’s Geolocation API. Once the latitude and longitude information are available, a marker can be added to the map. You can now enter one of your favorite destinations in the text box provided and click the Submit button to see a path drawn from your current location to the destination. The path is drawn using the Google map...

Last week I had published an application on facebook "Which smartphone is for you?" which was created with javascript and HTML. I have always tried to experiment things with jQuery and HTML. I thought of making a good use of my jQuery skills in creating a game (a simple one - but still fun to play). Today I'm launching this game and it is titled "Shoot your friends". This application (game) pulls the pictures of your facebook friends and you can shoot them. Once you have hit enough, it will allow you to publish the results. You can either let the shot ones know that they have been shot by you or just publish the story to your wall. Login to your facebook account and try it out. Which smartphone is for you:  http://apps.facebook.com/sagarganatra/ Shoot your friends:  http://apps.facebook.com/shootyourfriendsapp/