HTML5 is Awesome!

In this webpage, we are going to provide a basic tutorial for 2 of the many new features of HTML5

HTML5 Logo

Geolocation

Geolocation represents the identification of the position in the world as well as that actual location itself.

View example »

Canvas Animation

Although "animation" may not be the best term to use here, we are talking about the use of the canvas to "animate" data and present it to the user.

View example »

Geolocation Basics

Geolocation represents an API that allows visitors to your site to share their current position. The location of the visitor may be found by any of the following methods:

  • IP address
  • wireless network connection
  • cell tower
  • GPS hardware on the device

The browser determines the actual location using the method of its choosing and passes it to the Geolocation API. Geolocation is supported in current versions of all major browsers, desktop, tablet and smartphones. Using the Javascript builtin object, navigator, you can determine if geolocation is available (the expression, navigator.geolocation, will be true) and then obtain the location data with navigator.geolocation.getCurrentPosition(success-callback, failure-callback). The success-callback witll have the position object as an argument. One of the position properties is the coordinates object which then has properties latitude, longitude and accuracy among others.

This can be seen in the following code snippet

	function checkLocation() {
		
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(getLocation, locationFail);
		} else {
			document.write('You do not have geolocation');
		}

	} // end checkLocation
	
	function getLocation(position) {
		var latitude = position.coords.latitude;
		var longitude = position.coords.longitude;
		var accuracy = position.coords.accuracy;
		var timestamp = position.timestamp;
		
		alert('latitude: ' + latitude + '\nlongitude: ' + longitude + '\naccuracy: ' + accuracy + '\ntimestamp: ' + timestamp);
	}
	
	function locationFail() {
		document.write('We did not get your location. Please check your settings.');
	}
	

The Google Maps API can also draw a map using the location data and put appropriate markings on the map. Of course, the accuracy of the map is only as good as the accuracy of the measuring GPS instrument. Following the above code, a map can show the location with a flag using some additional code

    var myOptions = {
        center: new google.maps.LatLng(latitude, longitude),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("mapDiv"), myOptions);
    var marker = new google.maps.Marker({
        position: myOptions.center,
        map: map
    });
    
    map.setCenter(myOptions.center);
	

The above technique displays the resulting geolocation in a form that is certainly not optimal for human readability. If we include an <article> tag, say with an 'id' of listData, then replace the alert statement with the following...

	$('#listData').append('<br>latitude: ' + latitude + '<br>longitude: ' + longitude + 
    	'<br>accuracy: ' + accuracy + '<br>timestamp: ' + timestamp);
    

This leaves the timestamp in a non-readable fashion, but this, too can be corrected. Replace the timestamp declaration and the alert statement as follows and the timestamp will be easily understood...

    timestamp = new Date(position.timestamp);
    var readable = timestamp.toString();
    
	$('#listData').append('<br>latitude: ' + latitude + '<br>longitude: ' + longitude + 
    	'<br>accuracy: ' + accuracy + '<br>timestamp: ' + readable);
    

Canvas Animation

Canvas "animation" is not a part of CSS3, but the <canvas> element is part of the HTML5 specification. It is a separate javascript API comprising

  • drawing shapes
  • filling colors
  • creating gradients and patterns
  • rendering text
  • copying images, video frames and other canvases
  • manipulating pixels
  • flip-style animations
  • exporting the contents of the element to a static file

The canvas itself can actually be thought of as a true canvas, with a default size of 300x150 pixels. It is created by

            	<canvas id="c"></canvas>
            

The attributes height and width can be included to provide a canvas of any size. Then, to draw on the canvas, we need the "drawing context", which is the context object

        var canvas = document.getElementById("c");
        var context = canvas.getContext("2d");
    

You fill and stroke the shape you will draw using the context object's fillStyle and strokeStyle. These can be one of color, CanvasGradient or CanvasPattern. Continuing on this way, one can draw a rectangle directly, but drawing a circle takes a bit more work, as does the gradient or pattern. With paths, any shape may be drawn.

In our project here, we used jQuery (of course!), the mustache.js for templating and The Filament Group's jQuery-Visualize for charting (drawing and labeling the bar graph of Facebook sites and shares. There were 2 challenges and 2 extra credit items to be accomplished...

  • Change the Colors of the Bars in the Graph -- In the visualize.jQuery.js file, there is configuration variable o defined at the top as an object, one of whose properties is colors contyaining 9 colors, 1 for each of the possible bars on a graph. Since our problem only included 4 bars, we only had to change the first 4 colors.
  • Increase the Text Size in the Legend -- In the visualize-dark.css, there is a selector, .visualize ul.visualize-key with an rule of font-size: 1.2em;, which can be changed to 1.8em to comfortably increase the text size in the legend.
  • Add More Spacing Between Bars -- Returning to the visualize.jQuery.js file, there is a barMargin property in the configuration object which is currently set to 1. By increasing this, you can increase the spacing as desired.
  • Remove the Legend's Background Color -- Again, in the visualize-dark.css, the selector .visualize .visualize-title has a rule background: #444; and this may be omitted to remove the gray color from the legend background and it will be black as the rest of the frame.
  • I added an additional challenge to myself to enlarge the graph canvas I noticed that in visualize.jQuery.js, there were properties height and width of the configurtion object, o. So I just increased each of those numbers to enlarge the canvas.