Prince2/DotNetLearner/HTML5: February 2013

Tuesday, February 12, 2013

WEB Workers (Part 2)

Below is the simple code to see WEB Workers in action

The Main file code
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>

The js file code

function showMessage()
{
postMessage("Hello World.");
}

Sunday, February 10, 2013

Web Workers (Run Locally)

How to run WEB Worker locally with Google Chrome.

IE version 10 supports WEB Workers the previous versions doesnot support.

I face this problem while creating and testing WEB Workers object on my local machine and nothing was happening. In order to run the code on your local machine with Google chrome we have to enable the flag via parameters while running the code

Right click on the browser icon and select properties there a window will appear and you will see Target field. Use following command and append it in the Target field while running Chrome. Please make sure to close all Chrome windows.

--allow-file-access-from-files
The Target field Look something like following C:\Users\UserNameHere\AppData\Local\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

Note: this is risky way of running and testing your code.
Please deploy your code on webserver and you dont need to
make these changes.
Please be aware to remove the above changes from browser.

Saturday, February 9, 2013

HTML5 WEB Workers Part 1

Javascript is designed to run in single Thread environment.

Javascript does not support Multi Threading. Javascript is single threaded and this is major hindrance in implementing some cool capabilities in applications.There are other workarounds used by developers but they dont provide the flexibility which is now available with introduction of WEB Workers in HTML5.

WEB Workers are perfect for keeping your UI refresh, performant and responsive for users.

Types of WEB Workers

Dedicated Workers
Shared Workers

Note: Only Dedicated Workers are discussed in this article

WEB Worker and DOM

Since WEB worker are external files they don't have access to following Javascript objects.

The window object
The document object
The parent object

Continued Part 2

Wednesday, February 6, 2013

CANVAS 2D API (HTML5 CANVAS Part 3)

Drawing on canvas can be done by canvas 2D API
There are plethora of Methods and Properties in canvas 2D API.

2D API reference:click

HTML5 CANVAS Part 2

Canvas Path
To draw a straight line in canvas we use following

moveTo(x,y) starting point of the line.
lineTo(x,y) end point of the line.
stroke() is used to draw the actual line.

The below is the code to draw lines

<canvas ID="canvas_1" width="300px" height="150px" style="border:1px solid;">
Browser Doesnot support HTML5 canvas tag.
</canvas>

<script>
var c= document.getElementById("canvas_1");
var ctx = c.getContext("2d");

//this draw the first line
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

//this draw the second line
ctx.moveTo(300,0);
ctx.lineTo(0,150);
ctx.stroke();
</script>
End of Draw Line section

Draw a Circle
To draw a circle we have to use following functions

beginPath()set the new context point.
arc(x,y,r,start,stop)to define how the circle will be drawn.
stroke() draw the circle.

<canvas ID="canvas_circle" width="300px" height="150px" style="border:1px solid;">
Browser Doesnot support HTML5 canvas tag.
</canvas> <script>
var c=document.getElementById("canvas_circle");
var ctx= c.getContext("2d");

//This fill Rectangle Rectangle.

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,300,150);

//This draws Circle.

ctx.beginPath();
ctx.arc(150,75,70,0,2*Math.PI);
ctx.stroke();
</script>

End of Draw Circle section