i can code! for Web.: May 2011

Tuesday, May 31, 2011

controls, autoplay and loop for HTML5 embedded video

The controls attribute is a boolean attribute. If present, it indicates that the author has not provided a scripted controller and would like the user agent to provide its own set of controls.

The autoplay attribute is a boolean attribute. When present, the user agent (as described in the algorithm described herein) will automatically begin playback of the media resource as soon as it can do so without stopping.

The loop attribute is a boolean attribute that, if specified, indicates that the media element is to seek back to the start of the media resource upon reaching the end.

example:

<video src="http://people.opera.com/shwetankd/webm/sunflower.webm"
 controls autoplay loop>
<p>Your browser doesn't support WebM format.</p>
</video>

Monday, May 30, 2011

Very basic to embed WebM in HTML5

Very basic to embed WebM in HTML5 is something like it:

<video src="source url of WebM"
controls>
</video>

example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 WebM Video</title>
</head>
<body>
<h1>Hello HTML5: WebM Video</h1>
<video src="http://people.opera.com/shwetankd/webm/sunflower.webm"
 controls>
<p>Your browser doesn't support WebM format.</p>
</video>

</body>
</html>

Sunday, May 29, 2011

Linking between HTML input and Javascript/canvas

example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>i can code! for Web::HTML5 Canvas</title>
<script type="text/javascript">
var mycontext;

function canvasloader(){
 var mycanvas = document.getElementById("canvas");
 mycontext = mycanvas.getContext("2d");

 var formElement = document.getElementById("textin");
 formElement.addEventListener("keyup", textinChanged, false);

}

function textinChanged(e){
 var target = e.target;
 text = target.value;
 mycontext.fillStyle = "#000000";
 mycontext.fillText(text, 50, 50);
}

</script>
</head>
<body onload="canvasloader();">
<h1>i can code! for Web::HTML5 Canvas</h1>
http://icancode-4-web.blogspot.com/<br/>

<canvas id="canvas" style="border: 1px solid;" width="360" height="100">
Sorry! Your browser doesn't support Canvas.
</canvas>
<form>
 <input id="textin" />
</form>
</body>
</html>

Apply shadow on HTML5 canvas

example:

function canvasloader(){
 var mycanvas = document.getElementById("canvas");
 var mycontext = mycanvas.getContext("2d");
 appyShadow(mycontext);
 
 drawSquare(mycontext);
 drawText(mycontext);

}

function appyShadow(context){
 context.shadowOffsetX = 5;
 context.shadowOffsetY = 5;
 context.shadowColor = 'black';
 context.shadowBlur = 5;
}


function drawText(context){
 var myText = "Hello HTML5";
 context.fillStyle = "#FF0000";
 context.fillText (myText, 50, 50);
 context.fillStyle = "#00FF00";
 context.fillText (myText, 100, 100);
 context.fillStyle = "#0000FF";
 context.fillText (myText, 150, 150);
}

function drawSquare(context){
 context.fillStyle = "gray";
 context.fillRect(25,25,200,200);
}

Saturday, May 28, 2011

browser based visual authoring of HTML5 user interfaces

Maqetta is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces. The Maqetta application itself is authored in HTML, and therefore runs in the browser without requiring additional plugins or downloads.

Basic Text on HTML5 canvas

example:

function canvasloader(){
 var mycanvas = document.getElementById("canvas");
 var mycontext = mycanvas.getContext("2d");

 drawText(mycontext);
}


function drawText(context){
 var myText = "Hello HTML5";
 context.fillStyle = "#FF0000";
 context.fillText (myText, 50, 50);
 context.fillStyle = "#00FF00";
 context.fillText (myText, 100, 100);
 context.fillStyle = "#0000FF";
 context.fillText (myText, 150, 150);
}

Apply scale on HTML5 canvas

example:

var mycontext;
var myImage;

function canvasloader(){
var mycanvas = document.getElementById("canvas");
mycontext = mycanvas.getContext("2d");

myImage = new Image();
myImage.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNVG99cSIdxIuEdKyGvPEsrsuJsWhHLyEO4OHCAhgbSAR97ijeK1R4XZ41dnvMg_YV2M_TM4xHGAtMSw2GX57bndi-Xva5TEX86PSLnbwN9XsHDReKxxjBR47n6yi-snhDJtGfNYeBxI4/s200/editor.png";
myImage.addEventListener("load", myImageLoaded , false);
}

function myImageLoaded(){
doScale(mycontext, 0.5);
mycontext.drawImage(myImage, 0, 0);
doScale(mycontext, 1);
mycontext.drawImage(myImage, 100, 0);
doScale(mycontext, 2);
mycontext.drawImage(myImage, 200, 0);
}

function doScale(context, scale){
context.setTransform(1,0,0,1,0,0); //identity matrix
context.scale(scale, scale); //x scale, y scale
}

Friday, May 27, 2011

Translate + Rotate canvas

example:

<script type="text/javascript">

var mycontext;
var myImage;

function canvasloader(){
var mycanvas = document.getElementById("canvas");
mycontext = mycanvas.getContext("2d");

myImage = new Image();
myImage.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNVG99cSIdxIuEdKyGvPEsrsuJsWhHLyEO4OHCAhgbSAR97ijeK1R4XZ41dnvMg_YV2M_TM4xHGAtMSw2GX57bndi-Xva5TEX86PSLnbwN9XsHDReKxxjBR47n6yi-snhDJtGfNYeBxI4/s200/editor.png";
myImage.addEventListener("load", myImageLoaded , false);
}

function myImageLoaded(){
doTransform(mycontext);
mycontext.drawImage(myImage, 0, 0);
}

function doTransform(context){
context.setTransform(1,0,0,1,0,0); //identity matrix
context.translate(100, 100);
var rotateAngle = 45 * Math.PI/180; //clockwise rotation angle expressed in radians
context.rotate(rotateAngle);
}

</script>

Draw image on canvas, drawImage()

example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas: Draw Image</title>
<script type="text/javascript">

var mycontext;
var myImage;

function canvasloader(){
 var mycanvas = document.getElementById("canvas");
 mycontext = mycanvas.getContext("2d");

 myImage = new Image();
 myImage.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNVG99cSIdxIuEdKyGvPEsrsuJsWhHLyEO4OHCAhgbSAR97ijeK1R4XZ41dnvMg_YV2M_TM4xHGAtMSw2GX57bndi-Xva5TEX86PSLnbwN9XsHDReKxxjBR47n6yi-snhDJtGfNYeBxI4/s200/editor.png";
 myImage.addEventListener("load", myImageLoaded , false);
}

function myImageLoaded(){
 mycontext.drawImage(myImage, 0, 0);
 mycontext.drawImage(myImage, 100, 100);
 mycontext.drawImage(myImage, 200, 200);
}

</script>
</head>
<body onload="canvasloader();">
<h1>HTML5 Canvas: Draw Image</h1>

<canvas id="canvas" style="border: 1px solid;" width="320" height="240">
Sorry! Your browser doesn't support Canvas.
</canvas>

</body>
</html>

Thursday, May 26, 2011

Translate canvas

To translate HTML5 canvas

Apply setTransform() before drawing
setTransform() with a identity matrix - (1,0,0,1,0,0)
call translate with the translation distance in the horizontal and vertical direction
draw!

example:
- without Translate

- with Translate

function canvasloader(){
var mycanvas = document.getElementById("canvas");
var mycontext = mycanvas.getContext("2d");
mycontext.fillStyle = "#0000ff";
mycontext.fillRect(0, 0, 150, 100);
doTransform(mycontext);
drawPath(mycontext);

}

function drawPath(context){
context.strokeStyle = "#000000";
context.lineWidth = 10;
context.beginPath();
context.moveTo(0, 0);
context.lineTo(150, 0);
context.lineTo(150, 100);
context.lineTo(00, 100);
context.closePath();
context.stroke();

}

function doTransform(context){
context.setTransform(1,0,0,1,0,0); //identity matrix
context.translate(100, 100);
}

Wednesday, May 25, 2011

Rotate canvas

To rotate HTML5 canvas
- Apply setTransform() before drawing
- setTransform() with a identity matrix - (1,0,0,1,0,0)
- call rotate with clockwise rotation angle expressed in radians
- draw!

example:
- without rotate:

- with rotate:

function canvasloader(){
 var mycanvas = document.getElementById("canvas");
 var mycontext = mycanvas.getContext("2d");
 mycontext.fillStyle = "#A0A0A0";
 mycontext.fillRect(10, 10, 300, 220);
 mycontext.fillStyle = "#00ff00";
 mycontext.fillRect(20, 20, 200, 100);
 mycontext.fillStyle = "#0000ff";
 mycontext.fillRect(200, 100, 100, 100);
 doTransform(mycontext);
 drawPath(mycontext);
 
}

function drawPath(context){
 context.strokeStyle = "#000000";
 context.lineWidth = 10;
 context.beginPath();
 context.moveTo(50, 50);
 context.lineTo(150, 50);
 context.lineTo(150, 100);
 context.lineTo(50, 100);
 context.closePath();
 context.stroke();
 
}

function doTransform(context){
 context.setTransform(1,0,0,1,0,0); //set transformation matrix as identity matrix
 var rotateAngle = 45 * Math.PI/180; //clockwise rotation angle expressed in radians
 context.rotate(rotateAngle);
}

Monday, May 23, 2011

Embedding a simple Silverlight map onto your Web page

example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Embedding a Map</title>
</head>
<body>
<h1>Embedding a Map</h1>
 <iframe 
  width="600" height="400" 
  frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
  src="http://dev.virtualearth.net/embeddedMap/v1/silverlight/aerial"/>

</body>
</html>

Sunday, May 22, 2011

quadraticCurveTo() and bezierCurveTo()

function drawCurveTo(context){

 context.strokeStyle = "#000000";
 context.lineWidth = 5;

 context.moveTo(50, 0)
 context.quadraticCurveTo(150,100,0,50);

 context.moveTo(0, 150);
 context.bezierCurveTo(125, 0,175,300,300,150);

 context.stroke();
}

Saturday, May 21, 2011

contenteditable in HTML5

Create a simple HTML file, include a paragraph tag <p>., with attribute of contenteditable.

Open it with a browser support HTML5.

The content of the paragraph become editable, you can change the content. And save the page as a new HTML file. It can be noticed that the content will updated with your input.

<!DOCTYPE html>  
<html lang="en">  
<head>  
     <meta charset="utf-8">  
     <title>i can code! for Web</title>  
</head>  
<body>  
     <h1>i can code! for Web</h1>  
  You can edit the text below.
  Save as another HTML file, the content will updated with your input.
     <p contenteditable=true>  
     http://icancode-4-web.blogspot.com/
     </p>  
</body>  
</html>

Friday, May 20, 2011

arcTo

arcTo(x1, y1, x2, y2, radius)

example:

function drawArc(context){

 context.strokeStyle = "#000000";
  context.lineWidth = 5;

 context.moveTo(50,50);
 context.lineTo(50,200);
 context.arcTo(300,200,300, 50, 150);
 context.stroke();

  
}

Draw arc on HTML5 canvas

arc(x, y, radius, startAngle, endAngle, anticlockwise)

example:

function drawArc(context){

 context.strokeStyle = "#000000";
 context.lineWidth = 5;

 context.beginPath();
 context.arc(150, 200, 100, (Math.PI/180)*0, (Math.PI/180)*90, true);
 context.stroke();

 context.beginPath();
 context.arc(400, 200, 100, (Math.PI/180)*0, (Math.PI/180)*270, false);
 context.closePath();
 context.stroke();
 
}

I can code! for Web.

http://icancode-4-web.blogspot.com/

Thursday, May 19, 2011

createLinearGradient

The createLinearGradient(x0, y0, x1, y1) method takes four arguments that represent the start point (x0, y0) and end point (x1, y1) of the gradient.

example:

function drawLinearGradien(context){

 var gradient;
 gradient = context.createLinearGradient(0, 50, 0, 250);
 gradient.addColorStop(0,"blue"); 
 gradient.addColorStop(1,"white");
 context.fillStyle = gradient;
 context.fillRect(50,50,250,200);

 gradient = context.createLinearGradient(350, 0, 600, 0);
 gradient.addColorStop(0,"red"); 
 gradient.addColorStop(1,"white");
 context.fillStyle = gradient;
 context.fillRect(350,50,250,200);
}

lineJoin

The lineJoin attribute defines the type of corners where two lines meet. The three valid values are bevel, round, and miter.

example:

function drawLineJoin(context){

  context.strokeStyle = "#000000";
  context.lineWidth = 20;

  context.lineJoin = "bevel";
  context.beginPath();
  context.moveTo(50, 50);
  context.lineTo(300, 50);
  context.lineTo(300, 100);
  context.stroke();
  context.closePath();

  context.lineJoin = "round";
  context.beginPath();
  context.moveTo(50, 150);
  context.lineTo(300, 150);
  context.lineTo(300, 200);
  context.stroke();
  context.closePath();

  context.lineJoin = "miter";
  context.beginPath();
  context.moveTo(50, 250);
  context.lineTo(300, 250);
  context.lineTo(300, 300);
  context.stroke();
  context.closePath();
}

Wednesday, May 18, 2011

lineCap

The lineCap attribute defines the type on the end of lines.

butt: the end of each line has a flat edge perpendicular to the direction of the line (and that no additional line cap is added).
round: a semi-circle with the diameter equal to the width of the line must then be added on to the end of the line.
square: a rectangle with the length of the line width and the width of half the line width, placed flat against the edge perpendicular to the direction of the line, must be added at the end of each line.

example:

function drawLineCap(context){

 context.strokeStyle = "#000000";
 context.lineWidth = 20;
 context.beginPath();
 context.moveTo(50, 50);
 context.lineTo(300, 50);
 context.stroke();
 context.closePath();

 context.lineCap = "butt"
 context.strokeStyle = "#FF0000";
 context.lineWidth = 20;
 context.beginPath();
 context.moveTo(50, 100);
 context.lineTo(300, 100);
 context.stroke();
 context.closePath();

 context.lineCap = "round"
 context.strokeStyle = "#00FF00";
 context.lineWidth = 20;
 context.beginPath();
 context.moveTo(50, 150);
 context.lineTo(300, 150);
 context.stroke();
 context.closePath();

 context.lineCap = "square"
 context.strokeStyle = "#0000FF";
 context.lineWidth = 20;
 context.beginPath();
 context.moveTo(50, 200);
 context.lineTo(300, 200);
 context.stroke();
 context.closePath();

}

Draw line using Path

example:

function drawPath(context){
 context.strokeStyle = "#000000";
 context.lineWidth = 10;
 context.beginPath();
 context.moveTo(50, 50);
 context.lineTo(100, 0);
 context.lineTo(200, 200);
 context.lineTo(300, 150);
 context.stroke();
 context.closePath();
}

All HTML code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<script type="text/javascript">
function canvasloader(){
 var mycanvas = document.getElementById("canvas");
 var mycontext = mycanvas.getContext("2d");
 mycontext.fillStyle = "#A0A0A0";
 mycontext.fillRect(10, 10, 300, 220);
 mycontext.fillStyle = "#00ff00";
 mycontext.fillRect(20, 20, 200, 100);
 mycontext.fillStyle = "#0000ff";
 mycontext.fillRect(200, 100, 100, 100);
 drawPath(mycontext);
}

function drawPath(context){
 context.strokeStyle = "#000000";
 context.lineWidth = 10;
 context.beginPath();
 context.moveTo(50, 50);
 context.lineTo(100, 0);
 context.lineTo(200, 200);
 context.lineTo(300, 150);
 context.stroke();
 context.closePath();
}

function capturecanvas(){
 var mycanvas = document.getElementById("canvas");
 window.open(mycanvas.toDataURL(),
  "canvasImage",
  "left=0," + 
  "top=0," +
  " width=" + mycanvas.width + "," + 
  "height=" + mycanvas.height);
}
</script>
</head>
<body onload="canvasloader();">
<h1>Hello HTML5 canvas</h1>

<canvas id="canvas" style="border: 1px solid;" width="320" height="240">
Sorry! Your browser doesn't support Canvas.
</canvas>
<form>
<input type="button" id="capture" value="Capture Canvas" onclick="capturecanvas();">
</form>
</body>
</html>

Android + App Engine@Google I/O 2011

This talk will introduce App Engine Tooling for Android. A complete set of Eclipse-based Java development tools for building Android applications that are backed by App Engine. With these tools developers can focus on building fantastic Android applications using common tools and techniques that span the client and server parts of the application AND make it extremely simple to deploy the server side to App Engine. This talk walks through building a fantastic cloud based android application.

Tuesday, May 17, 2011

Capture HTML5 canvas using JavaScript

The canvas image can be exported using toDataURL() function of canvas object. In JavaScript function. capturecanvas(), a new browser window will be opened with the a bitmap of the canvas captured.

function capturecanvas(){
 var mycanvas = document.getElementById("canvas");
 window.open(mycanvas.toDataURL(),
  "canvasImage",
  "left=0," + 
  "top=0," +
  " width=" + mycanvas.width + "," + 
  "height=" + mycanvas.height);
}

A capture button is add in the HTML, it will call JavaScript function capturecanvas() once clicked.

All HTML code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<script type="text/javascript">
function canvasloader(){
 var mycanvas = document.getElementById("canvas");
 var mycontext = mycanvas.getContext("2d");
 mycontext.fillStyle = "#A0A0A0";
 mycontext.fillRect(10, 10, 300, 220);
 mycontext.fillStyle = "#00ff00";
 mycontext.fillRect(20, 20, 200, 100);
 mycontext.fillStyle = "#0000ff";
 mycontext.fillRect(200, 100, 100, 100);
}

function capturecanvas(){
 var mycanvas = document.getElementById("canvas");
 window.open(mycanvas.toDataURL(),
  "canvasImage",
  "left=0," + 
  "top=0," +
  " width=" + mycanvas.width + "," + 
  "height=" + mycanvas.height);
}
</script>
</head>
<body onload="canvasloader();">
<h1>Hello HTML5 canvas</h1>

<canvas id="canvas" style="border: 1px solid;" width="320" height="240">
Sorry! Your browser doesn't support Canvas.
</canvas>
<form>
<input type="button" id="capture" value="Capture Canvas" onclick="capturecanvas();">
</form>
</body>
</html>

Monday, May 16, 2011

FREE Microsoft Web Platform Installer 3.0

The Microsoft Web Platform Installer 3.0 (Web PI) is a free tool that makes getting the latest components of the Microsoft Web Platform, including Internet Information Services (IIS), SQL Server Express, .NET Framework and Visual Web Developer easy. The Web PI also makes it easy to install and run the most popular free web applications for blogging, content management and more with the built-in Windows Web Application Gallery.

Now with Visual Web Developer 2010 Express, ASP.NET 4, and ASP.NET MVC3 for FREE!

Link:
~ http://www.microsoft.com/web/downloads/platform.aspx

A Simple example of HTML5 with canvas

HTML5 with canvas, open with Google Chrome

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<script type="text/javascript">
function canvasloader(){
 var mycanvas = document.getElementById("canvas");
 var mycontext = mycanvas.getContext("2d");
 mycontext.fillStyle = "#A0A0A0";
 mycontext.fillRect(10, 10, 300, 220);
 mycontext.fillStyle = "#00ff00";
 mycontext.fillRect(20, 20, 200, 100);
 mycontext.fillStyle = "#0000ff";
 mycontext.fillRect(200, 100, 100, 100);
}
</script>
</head>
<body onload="canvasloader();">
<h1>Hello HTML5 canvas</h1>

<canvas id="canvas" style="border: 1px solid;" width="320" height="240">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

next:
- Capture HTML5 canvas using JavaScript

Sunday, May 15, 2011

Eclipse IDE for JavaScript Web Developers

Eclipse IDE for JavaScript Web Developers is integrated development tools for JavaScript developers creating Web applications, including a JavaScript IDE, tools for JavaScript, HTML, CSS, and XML.

link:
- http://eclipse.org/downloads/packages/eclipse-ide-javascript-web-developers/heliossr2

HTML5@Wikipedia

HTML5@Wikipedia: HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of the HTML standard (originally created in 1990 and most recently standardized as HTML4 in 1997) and currently remains under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers etc.). HTML5 is intended to subsume not only HTML4, but XHTML1 and DOM2HTML (particularly JavaScript) as well.

http://en.wikipedia.org/wiki/HTML5

HTML5 & What's Next@Google I/O 2011

Mobile and desktop are converging on HTML5 as a strong, portable base for delivering rich experiences. Come learn about the future of HTML5, CSS, DOM, and JavaScript that will help you build better, richer apps even faster.