HTML5 Tutorial

This tutorial is mainly about mobile web application and game development using PhoneGap API. 

Following diagram shows the basic idea behind the  PhoneGap API. Application is developed just like web pages using HTM5, JavaScript and CSS.  PhoneGap API is used to access the native mobile relaeted API.

 We can create project by using different SDK, here we show first project for Android using Eclipse  and later we show also for windows phone.

Assuming we have Eclipse/PhoneGap installed properly.

A. Open a command prompt (console or the black window) and go to C:\html\phonegap\phonegap-2.9.0\phonegap-2.9.0\lib\android\bin (your phonegap android bin directory, we are creating a project for Eclipse Android)

B Run the following  command  .\create C:\Users\develop\workspace\OptimumMove com.hemelix.optimummove optimummove  (where  OptimumMove is my app name  and  com.hemelix.optimummove is package name), press enter

C. Got to the workspace folder  C:\Users\develop\workspace\OptimumMove\cordova   and  type  build --debug

D. Get an Eclipse project in the folder and  import it. I get sometimes this error "invalid project description" , I solved it by copying whole project  to some other folder  and  import it from there, Not sure why it happened but  worked. When importing, you have to use existing code to Android workspace  option

 

Problem: If we build the project we may get the following error, which can be solved if we copy the project to other folder and open it with Eclipse

Invalid project description.

C:\Users\develop\workspace\OptimumMove overlaps the location of another project: ´OptimumMove'

 Open the project in Eclipse and run it.

 

Rotate and image with html5 and change rotation speed with with mouseover and mouseout event

Steps

1. Copy the source code and save it somewhere as html file (for example index.html)

2. Copy the image and save it into the same  folder as compass.png

3. Open the index.html file with any browser and bring your mouse on the image  and take it out. See that compass rotate with different speed.

4. See the YouTube video

 <!DOCTYPE html>

<html> 

<head>

<script type="application/javascript">

function init() {

var canvas = document.getElementById("canvas");

if (canvas.getContext) {

var ctx = canvas.getContext("2d");

var rot = 0;

var TO_RADIANS = Math.PI/180.0;

var speed = 1;

var img = new Image();

img.src = "compass.png";

img.onload = function() {

ctx.drawImage(img, 0, 0);

}; 

function rotate() {

var xOffset = img.width / 2;

var yOffset = img.height / 2;

ctx.save();

ctx.translate(xOffset, yOffset);            

rot = rot +speed;

if(rot == 360) rot = 0;

ctx.rotate(rot*TO_RADIANS);            

ctx.drawImage(img, -img.width/2, -img.height/2);            

ctx.restore();

}

setInterval(rotate, 50);

canvas.addEventListener('mouseover', function(evt) {

speed = 10;

}, false);

canvas.addEventListener('mouseout', function(evt) {

speed = 1;

}, false);  

}

}

</script>

<title>Rotate an image on canvas</title>

</head>

<body onload="init();">

<canvas id="canvas" width="300" height="300"></canvas>

</body>

</html>

 

http://www.hemelix.com/html5-references