Animated bar graphs and line charts

We have put up two scripts which use HTML5 functionality.

Animated bar graphs
You can have multiple bars which grow to size in animated fashion. The script allows you to control the order of graphs growing up. You can control which bars come up together and also the sequence. The script allows you to place text inside or above the bar. Besides that, standard css properties like colour etc. can be controlled for each bar. Besides that, the speed of animation can be increased or reduced. Below is the demo link and source code.

Bar graph demo | Bar graph source code

Animated line charts
This uses the HTML5 canvas tag. You can animate to start all lines simultaneously or sequentially. Every line css property like thickness and colour can be controlled. It also allows you to put text after a certain animation. Below is the demo link and source code.

Line graph demo | Line graph source code

Tizen phone is here

Samsung has introduced its first smartphone built around the Tizen operating system, with a TV running the OS planned for next year. Featuring a 4.8-inch HD Super AMOLED display and a 2.3 GHz Quad-core application processor, the Samsung Z, described by the South Korean company as the first commercially available Tizen smartphone, will run Tizen 2.2.1.

Samsung said additional applications for the device can be accessed through the Tizen Store at the launch of the Samsung Z, with plans for an apps contest in Russia and CIS countries and a one-year promotional program for developers.

Tizen apps are created using HTML5, potentially opening up the platform to a wide range of web and interactive designers and developers.

Samsung plans to release in July the software development kit for its Tizen TV, ahead of launching the TVs.

HTML5 apps now on Amazon Appstore

Amazon allows developers to submit HTML5 apps to be featured on its appstore. Developers wanting to use this option do not have to do any native app development – instead, they have to simply submit their URLs and Amazon does all the work of packaging up the app in the correct format, and adding the necessary metadata (like images, product descriptions, etc.). The HTML5 code is converted into an Android app that can be downloaded from anywhere where the Amazon Appstore is able to run, including on Amazon’s Kindle Fire devices, as well as on other Android smartphones and tablets.

In fact, from today or so, Amazon allows HTML5 developers to charge for the app and these apps can also HTML5 apps can also be promoted through Amazon’s “Free App of the Day”. The end user would not be able to distinguish if this is a native app or a HTML5 one.

The above seems to have opened up many opportunities for HTML5 developers and hopefully this approach will be followed by Apple and Google too on their respective App stores.

HTML5 layout checker

How many times has a designer rebuked you because the HTML produced by you did not match the design in terms of placement of the elements. A familiar story, right ? Well, here is something to make your life easier. Check our our layout checker at

This has been developed using HTML5. Essentially, you upload an image and specify the website url. We place the image over the website (which is inside an iframe) with a transparency. This allows you to check each element of the design over layed on the actual website. The image is displayed without uploading the server, using HTML5′s preview facility.

We believe that this could be a handy and useful tool for HTML designers to use to match their output with the original designs.

Tizen to support HTML5 apps

Samsung has announced that its new Operating System Tizen would have apps coded in HTML5. Samsung devices command about 63% market share of all Android devices sold worldwide. That makes Tizen a serious competitor in the mobile OS world once it is launched. At the recently concluded Tizen developer’s conference, Samsung urged developers to develop apps in Tizen and also announced cash rewards to acclaimed apps. This is good news for all HTML5 developers as this is the third OS after Windows 8 and Firefox OS to have native apps in HTML5.

Some important links if one wants to develop Tizen apps.

Scalable vector icons using css. Animation using css3 and jQuery

There is an interesting plugin which uses special font called “FontAwesome” and gives you a scalable vector image which can be used as a font. We can even re-size them, add different colors and even give CSS drop shadow. In effect, we can apply any CSS property which can be applied for fonts. This plug in could be very handy for retina displays as it uses vector images which would scale correctly on all IOS devices with retina display. The plugin also works on Internet Explorer 7 and higher and is free for commercial use.

The plugin can be found at

An example of using this plugin is available at

We have also done an example of basic animation using multiple backgrounds.

Here is an example of this animation using CSS3. This will not work on older browsers like Internet Explorer 9 and lower.

Here is the same example using jQuery animation. This will work on older browsers too.

Text overlay on videos using HTML5

HTML5 offers a unique feature which allows you to impose text on a video at certain intervals. This is done using the HTML track element. This feature allows you to track the video and insert text layers at certain points in the video. Each text element is denoted as a cue and for every cue, you can specify the time at which the text needs to be shown. This feature allows you to add subtitles or captions to videos easily. The text can be altered in looks using the css properties. This is possible for audio files as well. A full description of the media events is available at

Besides captions and subtitles, cues can also help in search. For example, if you want to search a video for a particular character, a keyword search with cues for that character can ensure that the user can start the video at that point.

The other advantage of cue points is to trigger events at certain cue points. For example, if you want to monitor how much of the video has been watched by a user and make the user start from that position the next time, we could use cue points. Once the user crosses a cue point, that can be recorded against that user’s id in the database and we start from that cue point the next time the same user views this video.

The above feature opens up a lot of opportunities for manipulating videos, particularly with regard to areas of training, multi lingual movies and so on. A detailed tutorial on the above is available at

Apnamap is an application launched by us in India. It is a location based service which helps a user create his/her own customised route and share it with friends. Though it works on the desktop as also mobile devices, we believe the potential lies more in the mobile segment.

In a country like India, where reaching someone’s house is an effort, Apnamap simplifies the whole process by giving the user the route which has been plotted by his own friend. When the route is viewed on a mobile device with an inbuilt GPS chip, one can trace one’s path and compare it with the route to see if you are on track.

Using Google Maps API, we have made it very easy to draw a route on the map. In fact, our drawing methodology is modelled on a child drawing a route on the map, using a pencil. So no jerk poly lines but just a smooth pencil like sketch feel. Once the route is drawn, one can put in instructions via signboards. This will guide the user when he/she is following the route. We have made extensive use of the geolocation API of HTML5 to track a user’s movement as he moves with the device. Whenever the user, following a route, reaches within a certain distance of the signboard, the signboard will pop up and an audio alert will be sounded.

One limitation that we did realise as we developed, is that javascript execution stops when the phone goes on silent mode or when user makes or receives a call. Hopefully newer phones will allow this execution in some way.

We hope this will make life easier for a lot of Indians who need to travel to destinations located in small alleys or within a cluster of houses.

Here are 2 sample routes

Goa tourist attractions
Route to sapnagroup office

Flash to HTML5

One of the biggest challenges in last 2-3 years has been showing flash animations on devices like IPAD which do not support flash. One alternative is to convert the Flash animation into an HTML5 animation. One of the tools available for this is Google Swiffy. This is one of the best tools available right now. It does a pretty good job of basic flash animations but any flash with advanced action scripting will not be converted correctly.

Once you have HTML5 animation ready, you will need to do some sniffing and display the HTML5 code instead of the swf file,  for devices like IPAD. We present two alternatives for this.

Check if device is IPAD and show HTML5. Sample PHP code is as below.

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),’ipad’) > 0) {

TRUE implies device is IPAD. Hence show HTML5 animation

Check if there is flash support on the device. If no support, then show HTML5. This approach will show HTML5 animation on any browser which has flash disabled or which does not have flash support. Sample code is as below.

Download the flash detection java script file from

Include the js file “flashDetect.js”
Add the following code to detect flash

<script type=”text/javascript”>
if(!FlashDetect.installed) {

//Add code here


A similar exercise can be done to show videos via HTML5 as HTML5 has native support for videos via the video tag.

Preview and crop before upload


Further to our earlier post about drag and drop uploads, we have managed to add some additional features to this. HTML5 allows a user to preview an image before it is uploaded to the server. In a typical web environment, the image needs to adhere to a certain width to height ratio to fit in a particular slot. This becomes a necessity in slideshows, galleries or tightly designed pages. The script below, allows you to crop an image to a given prescribed width to height ratio. The beauty of the script is that it allows you to crop only part of the original image. For example, if you need an image of 400 px width and 200 px height and your original uploaded image is 1000 px wide and 1000 px in height, it will allow you to choose a part of the image and resize it to 400 x 200. This effectively means you can choose an area of 400 x 200 of the original image or 800 x 400 of the original (which is scaled to 400 x 200 post resize) and so on. It will never allow a crop which doesn’t satisfy the above width to height ratio. Similarly it will not allow you to choose a part of the image lesser than 400 x 200.

Click here to view a demo of drag and drop file upload. Once the files are in queue, you have the option of cropping the image before uploading. The files that you upload will show up from the server once the upload is finished. A brief explanation on how we have tackled this.

For the demo, we shall be using Andrew Valums’ Ajax Upload which can be found at and imgAreaSelect which can be found at

We added a few more parameters to be used by the Drag and Drop upload script which is used for cropping the queued images.

$(document).ready(function () {
	uploader = new qq.FileUploader({
		element: document.getElementById('fileuploader'),
		folderName: 'uploads',
		action: 'upload.php',
		//Files with following extensions are only allowed
		allowedExtensions: ['gif','jpg','jpeg','png','txt'],
		showCropTool: 1,
		sizeLimit: 10737418240, // Maximum filesize limit which works without any problems is 30MB. Current limit is set to 10MB = 10 * 1024 * 1024
		params: {
			'uploadedBy': 'Sapnagroup',
			'x1': '0',	// x coordinates of the image
			'y1': '0',		// x coordinates of the image
			'x2': '300',	// x coordinates of the image
			'y2': '150',	// y coordinates of the image
			'cWidth': '300',		// required crop width
			'cHeight': '150',		// required crop heignt
			'oWidth': '800',		// width of the crop preview image
			'oHeight': '600',		// height of the crop preview image
			'rWidth': '300',		// resize width
			'rHeight': '150'		// resize height
		onSubmit: function(id, fileName){

		onComplete: function(id, fileName, responseJSON){ // Customize the output sent to responseJSON in demo.php

				case 'gif':
				case 'jpg':
				case 'jpeg':
				case 'png':
				var imageHTML = '
' + fileName + ' uploaded by ' + responseJSON.uploadedBy + '
'; document.getElementById('imageThumbnails').innerHTML = document.getElementById('imageThumbnails').innerHTML + imageHTML; break; default: // Do nothing break; } if(uploader._filesInProgress < 1){ document.getElementById('message').innerHTML = "All files have been uploaded. The page will refresh itself in 10 seconds." // var t = setTimeout('location.href = location.href;', 10000) } } }); }); var uploader; // Function to update the parameters once a crop region is selected function updateParams(img, selection){ uploader.setParams({ 'x1': selection.x1, 'y1': selection.y1, 'x2': selection.x2, 'y2': selection.y2, 'cWidth': selection.width, 'cHeight': selection.height, 'oWidth': img.width, 'oHeight': img.height, 'rWidth': '300', 'rHeight': '150' }); } // Function to reset all parameters function resetParams(){ uploader.setParams({ 'x1': '0', 'y1': '0', 'x2': '300', 'y2': '150', 'cWidth': '300', 'cHeight': '150', 'oWidth': '800', 'oHeight': '600', 'rWidth': '300', 'rHeight': '150' }); }

We also made a few changes to fileuploader.js, which you can find in the source which is available for download at the end of this post. Particularly important is line number 811. We initialize the crop tool for each image that has been queued for upload and when a crop selection is made we just update the crop selection to used in our server side script using the ‘updateParams’ function.

$('#img_' + item.qqFileId).imgAreaSelect({ parent: '#cropDiv_' + item.qqFileId, x1: self._options.params.x1, y1: self._options.params.y1, x2: self._options.params.x2, y2: self._options.params.y2, persistent: true, resizable: true, onSelectChange: updateParams, parent : self._options.params.parent, minWidth: self._options.params.cWidth, minHeight: self._options.params.cHeight, aspectRatio: self._options.params.cWidth + ':' + self._options.params.cHeight, handles: true, zIndex: 1 });

On the server side we can use the parameters to crop and resize the image. Below is the code used in PHP:

// Get dimensions of the original image
list($currentWidth, $currentHeight) = getimagesize($result['path']);

// The x and y coordinates on the original image where we will begin cropping the image
$left = $_GET['x1'] * ($currentWidth / $_GET['oWidth']);
$top = $_GET['y1'] * ($currentHeight / $_GET['oHeight']);

// This will be the final size of the image (e.g. how many pixels left and down we will be going)
$cropWidth = $_GET['cWidth'] * ($currentWidth / $_GET['oWidth']);
$cropHeight = $_GET['cHeight'] * ($currentHeight / $_GET['oHeight']);

// Crop the image
$canvas = imagecreatetruecolor($cropWidth, $cropHeight);
$currentImage = imagecreatefromjpeg($result['path']);
imagecopy($canvas, $currentImage, 0, 0, $left, $top, $currentWidth, $currentHeight);
imagejpeg($canvas, $result['path'], 100);

// Get dimensions of the cropped image
list($currentWidth, $currentHeight) = getimagesize($result['path']);

// Resize the image
$canvas = imagecreatetruecolor($_GET['rWidth'], $_GET['rHeight']);
$currentImage = imagecreatefromjpeg($result['path']);
imagecopyresampled($canvas, $currentImage, 0, 0, 0, 0, $_GET['rWidth'], $_GET['rHeight'], $currentWidth, $currentHeight);
imagejpeg($canvas, $result['path'], 100);

Download the full source here.