Mobile-Web-App: January 2012

Tuesday, January 31, 2012

HTML5 Canvas - fillRect(), with solid color/LinearGradient

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas - fillRect</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context; 

 canvas = document.getElementById("mycanvas");
 context = canvas.getContext("2d");
 
 drawRects(context);
}

function drawRects(c){

 c.lineWidth = 20;

 //default color
 c.fillRect(50, 50, 50, 100);
 
 //Rect in red
 c.fillStyle = "#FF0000";
 c.fillRect(150, 50, 50, 150);
 
 //Rect fill gradient
 //source and destination (x,y) coordinates for the gradient:
 //- createLinearGradient(srcX, srcY, destX, destY)
 gradient = c.createLinearGradient(250, 50, 250, 200);
 gradient.addColorStop(0,"blue");  //start from blue
 gradient.addColorStop(1,"green"); //end to green
 c.fillStyle = gradient;
 c.fillRect(250, 50, 50, 150);
 
 gradient2 = c.createLinearGradient(350, 50, 500, 200);
 gradient2.addColorStop(0,"red");  //start from red
 gradient2.addColorStop(1,"blue"); //end to blue
 c.fillStyle = gradient2;
 c.fillRect(350, 50, 150, 150);
 
}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas - fillRect</h1>
 
<canvas id="mycanvas" style="border: 5px solid;" width="550" height="250">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Compare to: jQuery Mobile and canvas, with drawing

Check if the browser support canvas, using Javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: Javascript Exercise</title>
<script type="text/javascript">
function checkcanvas(){
 if(document.createElement('canvas').getContext){
  alert("Very Nice! Your browser support canvas:)");
 }else{
  alert("Sorry! your browser doesn't support Canvas");
 }
}

</script>
</head>
<body onload="checkcanvas();">
<h1>Mobile-Web-App: Javascript Exercise - Check Canvas</h1>

</body>
</html>

Android Developer Hangouts on every Wednesday at 2pm Pacific Time

Google have launched Android Developers on Google+.

Also, Android Developer Hangouts have been a great way to answer questions from developers around the world. It will be broadcasted On Air Office Hours using Google+ Hangouts every Wednesday at 2pm Pacific Time (10pm UTS). Googel engineers do weekly technical Q&A (Wednesday's at 2pm PT (10p GMT), but also do hold developer interviews, live app "surgeries", and more focussed Q&A around topics like game development and UI design.

Add Android Developers on Google+ to your circles

Now have a Google+ page for +Android Developers. Google's Android engineers will use it to host Hangouts for developers, talk about the latest releases, development and design tips, and much more.

Add +Android Developers to your circles!

Monday, January 30, 2012

HTML5 Canvas - Apply shadow of Text

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context;

 canvas = document.getElementById("mycanvas");
 context = canvas.getContext("2d");
 
 drawText(context);
}

function drawText(c){
 setShadow(c, "#FF0000");
 c.font = "30pt helvetica";
 c.fillStyle = "#FF0000";
 c.fillText ("Mobile-Web-App", 50, 50);
 
 setShadow(c, "#00FF00");
 c.font = "18pt helvetica";
 c.fillStyle = "#00FF00";
 c.fillText ("http://mobile-web-app.blogspot.com/", 50, 100);
 
 setShadow(c, "#0000FF");
 c.font = "16pt helvetica";
 c.fillStyle = "#0000FF";
 c.fillText ("HTML5 canvas - Text", 50, 150);
 
}

function setShadow(c, color){
 c.shadowOffsetX = 5;
 c.shadowOffsetY = 5;
 c.shadowColor = color;
 c.shadowBlur = 5;
}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas - Text</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="450" height="250">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

HTML5 Canvas - draw text on canvas

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context;

 canvas = document.getElementById("mycanvas");
 context = canvas.getContext("2d");
 
 drawText(context);
}

function drawText(c){
 c.font = "30pt helvetica";
 c.fillStyle = "#FF0000";
 c.fillText ("Mobile-Web-App", 50, 50);
 c.font = "18pt helvetica";
 c.fillStyle = "#00FF00";
 c.fillText ("http://mobile-web-app.blogspot.com/", 50, 100);
 c.font = "16pt helvetica";
 c.fillStyle = "#0000FF";
 c.fillText ("HTML5 canvas - Text", 50, 150);
 
}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas - Text</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="450" height="250">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Related:
- HTML5 Canvas - Apply shadow of Text

Hello World Enyo 2.0

Example of web html using Hello Enyo 2.0, browsing on Android device

<!doctype html>
<html>
<head>
  <title>Enyo</title>
  <script src="enyo-2.0b/enyo.js" type="text/javascript"></script>
</head>
<body>
  <script type="text/javascript">
      new enyo.Control({content: "Hello From Enyo"}).write();
  </script>
</body>
</html>

About Enyo:
- Enyo now beyond webOS!

Enyo now beyond webOS!

Enyo 2, released in January 2012, takes Enyo beyond webOS. It doesn’t yet include a UI package, but features a tight, cross-platform core that will serve as the foundation for future Enyo development, supporting libraries and add-ons of all kinds.

Enyo is an open source object-oriented JavaScript framework emphasizing encapsulation and modularity. Enyo contains everything you need to create a fast, scalable mobile or web application:

Built from the ground-up for mobile first - Enyo powers webOS, and was designed from the beginning to be fast and work great on mobile devices
Now available for desktop and cross-browser development - Enyo 2.0 now runs across mobile environments and desktop browsers including Chrome, Firefox, and Internet Explorer
Highly customizable and extensible - Enyo core can be expanded with modules, UI widgets, and more
Lightweight and fast - Enyo 2.0 core is about 13KB gzipped, and built for fast application rendering and performance
Simple, self-contained, and easy to digest - Build increasingly complex functionality starting with simple, reusable components
Built to scale - Enyo was created on the principles needed to build vast, complex mobile and web applications
Open Source - Enyo is available under the Apache License, Version 2.0.

Learn more about Enyo: http://enyojs.com/

Sunday, January 29, 2012

HTML5: Capture Canvas using CANVAS.toDataURL()

The function CANVAS.toDataURL() returns the content of the current canvas as an image that you can use as a source for another canvas or an HTML element.

Example:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
var canvas;
var context;

function loadcanvas(){
 canvas = document.getElementById("mycanvas");
 context = canvas.getContext("2d");
 sliderOnChange(); //Draw the default position
}

function sliderOnChange() {

 var varTranslate = document.getElementById("slTranslate").value;
 var varRotate = document.getElementById("slRotate").value;
 var varScale = document.getElementById("slScale").value;

 clearCanvas();
 doTransform(varTranslate, varRotate, varScale);
 drawSomething();
 
 var btnCaptureCanvas = document.getElementById("capturecanvas");
 btnCaptureCanvas.onclick = btnCaptureCanvasListener;
 
 function btnCaptureCanvasListener(){
  window.open(canvas.toDataURL(), "canvasImage",
   "left=0," + "top=0," + "width=" + mycanvas.width + "," + "height=" + mycanvas.height);
 }
}

function doTransform(vTranslate, vRotate, vScale){
 context.setTransform(1,0,0,1,0,0); //identity matrix
 context.translate(vTranslate, 0);
 var angle = vRotate * Math.PI/180; //angle in radians
 context.rotate(angle);
 context.scale(vScale, vScale); //x scale, y scale
}

function drawSomething(){
 context.fillStyle = "#000000";
 context.fillRect(0, 0, 100, 100); //( X, Y, WIDTH, HEIGHT)
}

function clearCanvas(){
 context.setTransform(1,0,0,1,0,0); //identity matrix
 context.translate(0, 0);
 context.clearRect(0, 0, canvas.width, canvas.height);
}

</script>

</head>
<body onload="loadcanvas();">
<center>
<canvas id="mycanvas" style="border: 5px solid;" width="400" height="250">
Sorry! Your browser doesn't support Canvas.
</canvas>
<div>
Translate
<input id="slTranslate" type="range"
 min="0" max="400" value="0"?
 onChange="sliderOnChange()"
 step="1"/>
Rotate
<input id="slRotate" type="range"
 min="0" max="360" value="0"?
 onChange="sliderOnChange()" step="1"/>
 Scale
<input id="slScale" type="range"
 min="0.1" max="2" value="1"?
 onChange="sliderOnChange()" step="0.1"/>
</div>
<input type="button" id="capturecanvas" value="Capture Canvas">
</center>

</body>
</html>

Saturday, January 28, 2012

Implement Slider using jQuery UI

jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

Example of Implementing Slider using jQuery UI (It can run on both Firefox and Google Chrome)

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>

<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 20pt helvetica}

#mytext {
font-size: 24px
}

</style>
<script>
$(function() {
$( "#slider" ).slider({
 value:50,
 min: 0,
 max: 100,
 step: 1,
 slide: function( event, ui ) {
  $( "#mysetting" ).val( ui.value); 

 }
});
$( "#mysetting" ).val( $( "#slider" ).slider( "value" ) );
});
</script>
</head>
<body>
<center>
<div id="slider"></div>
<p/>
<output type="text" id="mysetting" />

</center>

</body>
</html>

Friday, January 27, 2012

HTML5 Canvas@((Context.(translate x rotate x scale)) + jQuery Slider)

Merge with the previous post about translate, rotate and scale on context, and how to implement slider using jQuery. We have a demonstration here:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

var canvas;
var context;

function loadcanvas(){
 
 canvas = document.getElementById("mycanvas");
 context = canvas.getContext("2d");

 sliderOnChange(); //Draw the default position
}

function sliderOnChange() {

 var varTranslate = document.getElementById("slTranslate").value;
 var varRotate = document.getElementById("slRotate").value;
 var varScale = document.getElementById("slScale").value;
 
 clearCanvas();
 doTransform(varTranslate, varRotate, varScale);
 drawSomething();
}

function doTransform(vTranslate, vRotate, vScale){
 context.setTransform(1,0,0,1,0,0); //identity matrix
 context.translate(vTranslate, 0);
 var angle = vRotate * Math.PI/180; //angle in radians
 context.rotate(angle);
 context.scale(vScale, vScale); //x scale, y scale
}

function drawSomething(){
 context.fillStyle = "#000000";
  context.fillRect(0, 0, 100, 100); //( X, Y, WIDTH, HEIGHT)
}

function clearCanvas(){
 context.setTransform(1,0,0,1,0,0); //identity matrix
 context.translate(0, 0);
 context.clearRect(0, 0, canvas.width, canvas.height);
}

</script>

</head>
<body onload="loadcanvas();">
<center>
<canvas id="mycanvas" style="border: 5px solid;" width="400" height="250">
Sorry! Your browser doesn't support Canvas.
</canvas>
<div>
Translate
<input id="slTranslate" type="range" 
 min="0" max="400" value="0"? 
 onChange="sliderOnChange()" 
 step="1"/>
Rotate
<input id="slRotate" type="range" 
 min="0" max="360" value="0"? 
 onChange="sliderOnChange()" step="1"/>
Scale
<input id="slScale" type="range" 
 min="0.1" max="2" value="1"? 
 onChange="sliderOnChange()" step="0.1"/>
</div>

</center>

</body>
</html>

Check the posts for each individual topic:

Thursday, January 26, 2012

Building Android Apps with HTML, CSS, and JavaScript: Making Native Apps with Standards-Based Web Tools - 2nd Edition

It’s true: if you know HTML, CSS, and JavaScript, you already have the tools you need to develop Android applications. Now updated for HTML5, the second edition of this hands-on guide shows you how to use open source web standards to design and build apps that can be adapted for any Android device.

You’ll learn how to create an Android-friendly web app on the platform of your choice, and then use Adobe’s free PhoneGap framework to convert it to a native Android app. Discover why device-agnostic mobile apps are the wave of the future, and start building apps that offer greater flexibility and a much broader reach.

Convert a website into a web application, complete with progress indicators and other features
Add animation with JQTouch to make your web app look and feel like a native Android app
Make use of client-side data storage with apps that run when the Android device is offline
Use PhoneGap to hook into advanced Android features, including the accelerometer, geolocation, and alerts
Test and debug your app on the Web with real users, and submit the finished product to the Android Market

Implement Slider using jQuery

Example to implement slider using jQuery input of "range" type:
(As this is writing, Firefox not yet implemented Slider. Please test on Google Chrome.)

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 20pt helvetica}

#mytext {
font-size: 24px
}

</style>
</head>
<body>
<center>
<input id="slide" type="range" min="8" max="100" value="24"? onChange="sliderOnChange(this.value)" step="1"/>
<p id="mytext">24px</p>

</center>
<script>

function sliderOnChange(fontsize) {
$("#mytext").css("font-size", fontsize+"px");
document.getElementById("mytext").innerHTML = fontsize+"px";
}

</script>
</body>
</html>

HTML5 Canvas: Clear canvas

To clear canvas, call:
context.clearRect(0, 0, canvas.width, canvas.height);

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
var canvas;
var context;

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

drawPath(context, "#000000");

var btnClearCanvas = document.getElementById("clearcanvas");
btnClearCanvas.onclick = btnClearCanvasListener;

function btnClearCanvasListener(){
 context.clearRect(0, 0, canvas.width, canvas.height);
}

}

function drawPath(c, color){
c.fillStyle = color;
c.fillRect(100, 0, 50, 50); //( X, Y, WIDTH, HEIGHT)
}


</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="400" height="350">
Sorry! Your browser doesn't support Canvas.
</canvas>
<form>
<input type="button" id="clearcanvas" value="Clear Canvas">
</form>
</body>
</html>

HTML5 Canvas: Scale canvas

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context; 

 canvas = document.getElementById("mycanvas");
 context = canvas.getContext("2d");
 
 scaleCanvas(context, 0.5);
 drawPath(context, "#ff0000");
 scaleCanvas(context, 1);
 drawPath(context, "#00ff00");
 scaleCanvas(context, 2);
 drawPath(context, "#0000ff");
}

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

function drawPath(c, color){
 c.fillStyle = color;
 c.fillRect(100, 0, 50, 50); //( X, Y, WIDTH, HEIGHT)
}


</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas</h1>
 
<canvas id="mycanvas" style="border: 5px solid;" width="400" height="350">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

HTML5 Canvas: Rotate canvas

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context;

 canvas = document.getElementById("mycanvas");
 context = canvas.getContext("2d");
 
 rotateCenter(context);
 drawPath(context);
}

//Rotate canvas
function rotateCenter(c){
 c.setTransform(1,0,0,1,0,0); //identity matrix
 var angle = 30 * Math.PI/180; //angle in radians
 c.rotate(angle);
}

function drawPath(c){

 c.fillStyle = "#000000";
 c.fillRect(100, 0, 50, 50); //( X, Y, WIDTH, HEIGHT)
}


</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="400" height="350">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

HTML5 Canvas: Move center of canvas using Context.translate()

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context;

 canvas = document.getElementById("mycanvas");
 context = canvas.getContext("2d");
 
 drawPath(context, "#000000"); //Draw before translate
 transformCanvasCenter(context, canvas.width/2, canvas.height/2);
 drawPath(context, "#A0A0A0"); //Draw after translate
}

//Move center of Canvas using Context.translate()
function transformCanvasCenter(c, offx, offy){
 c.setTransform(1,0,0,1,0,0); //identity matrix
 c.translate(offx, offy);
}

function drawPath(c, color){

 c.fillStyle = color;
 c.fillRect(0, 0, 100, 100); //( X, Y, WIDTH, HEIGHT)
}


</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="400" height="350">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Wednesday, January 25, 2012

HTML5: draw cubic Bézier curve using bezierCurveTo()

The bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) method must ensure there is a subpath for (cp1x, cp1y), and then must connect the last point in the subpath to the given point (x, y) using a cubic Bézier curve with control points (cp1x, cp1y) and (cp2x, cp2y). Then, it must add the point (x, y) to the subpath.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context;
 
 //get element by ID of "mycanvas"
 canvas = document.getElementById("mycanvas");
 
 //create a "2d" context object
 context = canvas.getContext("2d");
 
 drawPath(context);
}

function drawPath(c){

 drawBezierCurveTo(c, 50, 50, 100, 0, 250, 150, 300, 50);
 
 for (i = 0; i <= 350; i = i + 20)
 {
  drawBezierCurveTo(c, 50, 250, 100, 200, i, i, 300, 250);
 }
}

function drawBezierCurveTo(c, moveToX, moveToY, cp1x, cp1y, cp2x, cp2y, x, y){

 c.lineWidth = 3;
 
 c.strokeStyle = "#000000";
 c.beginPath();
 c.moveTo(moveToX, moveToY);
 c.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
 c.stroke();
 
 
}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="400" height="350">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Tuesday, January 24, 2012

HTML5: more on quadraticCurveTo() - how the Quadratic Curve affected by the control point

Refer to last post "HTML5: draw quadratic Bézier curve using quadraticCurveTo()". We are going to change the control point's x and y to know more about the how the Quadratic Curve affected.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context;
 
 //get element by ID of "mycanvas"
 canvas = document.getElementById("mycanvas");
 
 //create a "2d" context object
 context = canvas.getContext("2d");
 
 drawPath(context);
}

function drawPath(c){
 drawQuadraticCurveTo(c, 100);
 
 for (i = 0; i <= 300; i = i + 20)
 {
  drawQuadraticCurveTo(c, i, i, i);
 }
}

function drawQuadraticCurveTo(c, cpx, cpy){

 c.lineWidth = 3;
 
 c.strokeStyle = "#000000";
 c.beginPath();
 c.moveTo(50, 150)
 c.quadraticCurveTo(cpx, cpy, 250, 150); //(cpx, cpy, x, y)
 c.stroke();
}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas</h1>

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

HTML5: draw quadratic Bézier curve using quadraticCurveTo()

The quadraticCurveTo(cpx, cpy, x, y) method must ensure there is a subpath for (cpx, cpy), and then must connect the last point in the subpath to the given point (x, y) using a quadratic Bézier curve with control point (cpx, cpy), and must then add the given point (x, y) to the subpath.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context;
 
 //get element by ID of "mycanvas"
 canvas = document.getElementById("mycanvas");
 
 //create a "2d" context object
 context = canvas.getContext("2d");
 
 drawPath(context);
}

function drawPath(c){

 c.lineWidth = 3;
 
 c.strokeStyle = "#ff0000";
 c.beginPath();
 c.moveTo(150, 100)
 c.quadraticCurveTo(100,200,100,150); //(cpx, cpy, x, y)
 c.stroke();
 
 c.strokeStyle = "#00ff00";
 c.beginPath();
 c.moveTo(150, 100)
 c.quadraticCurveTo(250,200,100,150); //(cpx, cpy, x, y)
 c.stroke();
 
 c.strokeStyle = "#0000ff";
 c.beginPath();
 c.moveTo(200, 150)
 c.quadraticCurveTo(300,250,250,100); //(cpx, cpy, x, y)
 c.closePath();
 c.stroke();
 
}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="400" height="300">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Monday, January 23, 2012

HTML5 canvas: Draw arc

Example of drawing arc on HTML5 canvas:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context; 
 
 //get element by ID of "mycanvas"
 canvas = document.getElementById("mycanvas");
 
 //create a "2d" context object
 context = canvas.getContext("2d");
 
 drawPath(context);
}

function drawPath(c){

 c.lineWidth = 1;
 c.strokeStyle = "#000000";
 
 c.beginPath();
 //context.arc(centerX, centerY, radius, startAngle, endAngle, antiClockwise);
 c.arc(100, 100, 50, (Math.PI/180)*0, (Math.PI/180)*90, true);
 c.stroke();
 
 c.beginPath();
 c.arc(250, 100, 50, (Math.PI/180)*0, (Math.PI/180)*270, false);
 c.closePath();
 c.stroke();
 
 //context.arcTo(controlX,controlY,endX,endY,radius)
 c.moveTo(100,200);
 c.arcTo(100, 250, 200, 300, 50);
 c.stroke();
 
 c.moveTo(200,200);
 c.arcTo(200, 250, 300, 300, 75);
 c.stroke();

 
}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas</h1>
 
<canvas id="mycanvas" style="border: 5px solid;" width="400" height="300">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

HTML5 canvas: Draw Line with lineJoin

lineJoin defines how the corners where two lines meet. Valid values:

bevel
round
miter

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context;
 
 //get element by ID of "mycanvas"
 canvas = document.getElementById("mycanvas");
 
 //create a "2d" context object
 context = canvas.getContext("2d");
 
 drawPath(context);
}

function drawPath(c){

 c.lineWidth = 20;

 <!-- default lineJoin -->
 c.strokeStyle = "#000000";
 c.beginPath();
 c.moveTo(50, 50);
 c.lineTo(150, 50);
 c.lineTo(150, 150);
 c.lineTo(50, 150);
 c.lineTo(50, 50);
 c.stroke();
 c.closePath();
 
 <!-- lineJoin "bevel" -->
 c.lineJoin = "bevel";
 c.strokeStyle = "#ff0000";
 c.beginPath();
 c.moveTo(125, 125);
 c.lineTo(225, 125);
 c.lineTo(225, 225);
 c.lineTo(125, 225);
 c.lineTo(125, 125);
 c.stroke();
 c.closePath();
 
 <!-- lineJoin "round" -->
 c.lineJoin = "round";
 c.strokeStyle = "#00ff00";
 c.beginPath();
 c.moveTo(200, 50);
 c.lineTo(300, 50);
 c.lineTo(300, 150);
 c.lineTo(200, 150);
 c.lineTo(200, 50);
 c.stroke();
 c.closePath();
 
 <!-- lineJoin "miter" -->
 c.lineJoin = "miter";
 c.strokeStyle = "#0000ff";
 c.beginPath();
 c.moveTo(275, 125);
 c.lineTo(375, 125);
 c.lineTo(375, 225);
 c.lineTo(275, 225);
 c.lineTo(275, 125);
 c.stroke();
 c.closePath();
 

 
}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="400" height="300">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Sunday, January 22, 2012

HTML5 canvas: Draw Line with lineCap

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 will 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.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context;
 
 //get element by ID of "mycanvas"
 canvas = document.getElementById("mycanvas");
 
 //create a "2d" context object
 context = canvas.getContext("2d");
 
 drawPath(context);
}

function drawPath(c){

 c.lineWidth = 20;

 <!-- default lineCap -->
 c.strokeStyle = "#000000";
 c.beginPath();
 c.moveTo(50, 50);
 c.lineTo(150, 50);
 c.lineTo(150, 150);
 c.lineTo(50, 150);
 c.lineTo(50, 50);
 c.stroke();
 c.closePath();
 
 <!-- lineCap "butt" -->
 c.lineCap = "butt";
 c.strokeStyle = "#ff0000";
 c.beginPath();
 c.moveTo(125, 125);
 c.lineTo(225, 125);
 c.lineTo(225, 225);
 c.lineTo(125, 225);
 c.lineTo(125, 125);
 c.stroke();
 c.closePath();
 
 <!-- lineCap "round" -->
 c.lineCap = "round";
 c.strokeStyle = "#00ff00";
 c.beginPath();
 c.moveTo(200, 50);
 c.lineTo(300, 50);
 c.lineTo(300, 150);
 c.lineTo(200, 150);
 c.lineTo(200, 50);
 c.stroke();
 c.closePath();
 
 <!-- lineCap "square" -->
 c.lineCap = "square";
 c.strokeStyle = "#0000ff";
 c.beginPath();
 c.moveTo(275, 125);
 c.lineTo(375, 125);
 c.lineTo(375, 225);
 c.lineTo(275, 225);
 c.lineTo(275, 125);
 c.stroke();
 c.closePath();

}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="400" height="300">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Saturday, January 21, 2012

FREE eBook: Qt Quick Application Developer Guide for Desktop

Qt Quick Application Developer Guide for Desktop will familiarize you with the development of feature-rich applications that you can deploy onto various desktop platforms. This guide walks you through the implementation of a simple application called NoteApp inspired by the modern fluid UIs. NoteApp is a tool for managing daily notes which uses various advanced UI concepts including animations, database storage and Javascript usage for application logic rather than common well-known UI Elements used in desktop applications such as toolbars, menus and dialogs.

Download this guide in your preferred format:
- ePub
- PDF
- Qt Help

HTML5 canvas: Draw Line on Path

Example of HTML5 canvas, draw line on path:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context;
 
 //get element by ID of "mycanvas"
 canvas = document.getElementById("mycanvas");
 
 //create a "2d" context object
 context = canvas.getContext("2d");
 
 drawPath(context);
}

function drawPath(c){
 c.strokeStyle = "#ff0000";
 c.lineWidth = 10;
 c.beginPath();
 c.moveTo(0, 0);
 c.lineTo(100, 0);
 c.lineTo(100, 100);
 c.lineTo(0, 100);
 c.lineTo(0, 0);
 c.stroke();
 c.closePath();
 
 c.strokeStyle = "#00ff00";
 c.lineWidth = 1;
 c.beginPath();
 c.moveTo(50, 50);
 c.lineTo(250, 50);
 c.lineTo(250, 250);
 c.lineTo(50, 250);
 c.lineTo(50, 50);
 c.stroke();
 c.closePath();
 
 c.strokeStyle = "#0000ff";
 c.lineWidth = 20;
 c.beginPath();
 c.moveTo(200, 200);
 c.lineTo(300, 200);
 c.lineTo(300, 300);
 c.lineTo(200, 300);
 c.lineTo(200, 200);
 c.stroke();
 c.closePath();
 
}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="400" height="300">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Friday, January 20, 2012

HTML5 canvas, with example of fillRect()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context;
 
 //get element by ID of "mycanvas"
 canvas = document.getElementById("mycanvas");
 
 //create a "2d" context object
 context = canvas.getContext("2d");
 
 context.fillStyle = "#A0A0A0";
 context.fillRect(20, 20, 360, 260); //( X, Y, WIDTH, HEIGHT)

 context.fillStyle = "#505050";
 context.fillRect(50, 50, 300, 200);
 context.fillStyle = "#000000";
 context.fillRect(200, 150, 50, 50);
}
</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas</h1>

<canvas id="mycanvas" style="border: 5px solid;" width="400" height="300">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Thursday, January 19, 2012

Set javaws (Java Web Start) for running appMobi XDK on Ubuntu Linux

Once you install appMobi XDK in Google Chrome, running on Linux(such as Ubuntu). MAY BE it cannot run due to error in javaws (Java Web Start). It's because the default javaws of Ubuntu Linux is from openJDK, you have to set the javaws of Oracle JDK.

Suppose you have installed Oracle JDK correctly. The follow steps show how to set javaws using Oracle JDK.

First of all, Check your installed javaws. Open a Terminal and enter the command.
$ sudo update-alternatives --config javaws

Normally, you have only ONE javaws in aternative javaws list.

You have to re-assign javaws use alternative from Oracle JDK. In my case, my jdk installed at /usr/lib/jvm/jdk1.7.0_02/, and my javaws is installed at /usr/lib/jvm/jdk1.7.0_02/bin/javaws.

Enter the command:
$ sudo update-alternatives --install /usr/bin/javaws javaws /usr/lib/jvm/jdk1.7.0_02/bin/javaws 1

Finally, re-enter the command:
$ sudo update-alternatives --config javaws

and select the expected javaws in the list.

appMobi HTML5 XDK

The appMobi XDK is the world’s first HTML5 powered mobile application development tool. With it, you can create, debug and build customized, robust HTML5 apps in hours. appMobi's cloud-based build system turns your HTML5-based apps into 100% native API-compliant mobile apps for iOS or Android, or you can deploy them as webapps or Chrome apps. All from a single code base!

It can be install from Google Chrome Extention. To know more visit: https://chrome.google.com/webstore/detail/onmkoldigcfmebcinpmineoadckalllb

If you install it on a machine running Ubuntu Linux (or others using javaws of openJDK), you have to set javaws using Oracle JDK version. Refer Set javaws (Java Web Start) for running appMobi XDK on Ubuntu Linux

jQ.Mobi Open Source Mobile HTML5 JavaScript Framework Introduction

This video introduces the jQ.Mobi JS framework and compares its speed, size, and cross platform support with jQuery Mobile, Sencha Touch. More info at http://www.jqmobi.com. Test drive jQ.Mobi on your mobile device at www.jqmobi.com/testdrive

Wednesday, January 18, 2012

BackDay - WordPress

http://wordpress.org/

BlackDay - Wikipedia

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

Tuesday, January 17, 2012

Play Angry Birds on Google Chrome

Visit chrome.angrybirds.com to play Angry Birds on Google Chrome.

Monday, January 16, 2012

Using Android fonts on webpage

Using Android fonts on webpage

Last article demonstrate how to Using Google web fonts in your web page. If you have a webpage/web-app target Android audiences, and want your app have Android look and feel, you can embed Android fonts provided by Google web fonts: Droid Sans, Droid Sans Mono and Droid Serif.

Open http://www.google.com/webfonts in your browser, type droid in the search box. All the three Android fonts will be listed.

Search droid in http://www.google.com/webfonts

Last article I show how to embed one fonts, now I will show how to use Collection.

Click Collection buttons in all three available fonts, they will be listed in the bottom. And then click the Use button.

Almost done! Verify your settings below and then copy the code for your website.

Scroll down to 3. Add this code to your website, copy the code as the first element in the of your HTML document.

<link href='http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono|Droid+Serif' rel='stylesheet' type='text/css'>

Add the font name to your CSS styles just as you'd do normally with any other font.
font-family: 'Droid Sans', sans-serif;
font-family: 'Droid Sans Mono', sans-serif;
font-family: 'Droid Serif', serif;

like as:
h1 { font-family: 'Droid Sans', sans-serif; font-weight: 400; }

Example:

<!doctype html>
<head>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono|Droid+Serif' rel='stylesheet' type='text/css'>
</link>
<title>Mobile-Web-App: Android Fonts</title>
<meta charset="utf-8"></meta>
<meta name = "viewport" content = "width = device-width, height = device-height" />
 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

    <style>
h2 { font-family: 'Droid Sans', sans-serif; font-weight: 400; } 
h3 { font-family: 'Droid Sans Mono', sans-serif; font-weight: 400; }
h4 { font-family: 'Droid Serif', serif; font-weight: 400; } 
    </style>

</head>
<body>
 
<div data-role="page" id="home">
<div data-role="header">
<h1>Google Web Fonts: Droid</h1>
</div>
 
<div data-role="content">
<h2>Droid Sans</h2>
<h3>Droid Sans Mono</h3>
<h4>Droid Serif</h4>
</div>
 
<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
 
</div>
 
</body>
</html>

Sunday, January 15, 2012

Using Google web fonts in your web page: Hundreds of free, open-source fonts optimized for web!

About Google Web Fonts

Google Web Fonts makes web fonts quick and easy to use for everyone, including professional designers and developers. We believe that there should not be any barriers to making great websites.

Our goals are to create a directory of core web fonts for the world and to provide an API service so that anyone can bring quality typography to their webpages.

The API service runs on Google's servers. They are fast, reliable and tested. Google provide the service free of charge. It is possible to add Google Web Fonts to a website in seconds.

A web built with web fonts is a web that is more beautiful, more readable, more accessible and more open.

Open Source Fonts

All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues. You can even improve or customize them and collaborate with the original designer. And you can use them in every way you want, privately or commercially – in print, on your computer, or in your websites.

We are working with designers around the world to publish quality typeface designs that are made for the web. If you design fonts and would like to contribute your own designs, please get in touch. Fonts in the directory can become very popular and seen by millions of people every day.

— The Google Web Fonts Team

It's very easy to use any Google web fonts on your page:

Visit Google web fonts http://www.google.com/webfonts, click "Start choosing fonts" to start.

Scroll to choose the fonts, for example: Flavors. Click Quick-use.

Now your fonts is prepared.

scroll down to "3. Add this code to your website:", copy the code as the first element in the <head> of your HTML document.

<link href='http://fonts.googleapis.com/css?family=Flavors' rel='stylesheet' type='text/css'>

Add the font name to your CSS styles just as you'd do normally with any other font.

h1 { font-family: 'Flavors', cursive; font-weight: 400; }

Example:

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Flavors' rel='stylesheet' type='text/css'>
<title>Google Web Fonts</title>

<style>
h1 { font-family: 'Flavors', cursive; font-weight: 400; }
</style>
</head>
<body>

<h1>Mobile-Web-App: Google Web Fonts</h1>

</body>
</html>

next:
- Using Android fonts on webpage

Pro jQuery Mobile

You need to build an app, and you need it to run everywhere. And you need it now! jQuery Mobile gives you the ability to write once and run everywhere using jQuery and jQuery UI. Pro jQuery Mobile will teach you how to create themable, responsive, native-looking applications for iOS, Android, Windows Phone, Blackberry, and more.

Discover what sets jQuery Mobile apart from other mobile web development platforms
Walk through practical examples of jQuery Mobile features, including design elements and event handling
Dig into the jQuery API, integrate web services, and learn how to publish to app stores with Phone Gap

jQuery Mobile is a framework for delivering cross-platform mobile web applications with a unified interface. jQuery Mobile combines responsive layouts with progressive enhancement to render the best possible user experience from a single code base. With Pro jQuery Mobile, you'll be creating amazing mobile apps in no time.

Pro iOS Web Design and Development: HTML5, CSS3, and JavaScript with Safari

With Pro iOS Web Design and Development, you’ll design websites and develop web applications for iPhone and iPad using web standards deployed with Apple's Safari browser.

Utilizing the very latest web and mobile technologies and releases, this book shows every web professional how to use HTML5 to do the heavy lifting, CSS3 to create the look and feel, and JavaScript to add program logic to their mobile sites and Web applications.

In addition, you’ll learn how to address the specific features made available through Apple's iOS, especially with regard to designing Web-based touch-screen interfaces.

Pro iOS Web Design and Development will help you deliver rich mobile user experiences without compromise by optimizing your sites for WebKit and Safari, the de facto standard for the iPhone, iPad, and iPod touch.

Friday, January 13, 2012

jQuery Mobile: ul element, with data-role="listview"

Example of html <ul> element in jQuery Mobile, with data-role="listview".

<!doctype html>
<head>
 <title>Mobile-Web-App: listview</title>
 <meta charset="utf-8">
 <meta name = "viewport" content = "width = device-width, height = device-height" />

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
<h1>jQuery Mobile: listview</h1>
</div>

<div data-role="content">
<ul id="myitems" data-role="listview" data-filter="true" data-inset="true" >
 <li><a href="http://jquerymobile.com/">jQuery Mobile</a></li>
 <li><a href="http://www.microsoft.com/">Microsoft</a></li>
 <li><a href="http://www.google.com/">Google</a></li>
 <li><a href="http://www.ibm.com/">IBM</a></li>
</ul>
</div>

<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>

</div>

</body>
</html>

Related article:
- jQuery Mobile: listview with data-filter: insert <li> elements using Javascript code.

Thursday, January 12, 2012

FREE eBook: Programming Windows Phone 7, by Charles Petzold, from Microsoft

The book "Programming Windows Phone 7" is a gift from the Windows Phone 7 team at Microsoft to the programming community. Within the pages that follow, it show you the basics of writing applications for Windows Phone 7 using the C# programming language with the Silverlight and XNA 2D frameworks.

Download link:

TABLE OF CONTENTS

Part I The Basics

1 Hello, Windows Phone 7

Targeting Windows Phone 7

The Hardware Chassis

Sensors and Services

File | New | Project

A First Silverlight Phone Program

The Standard Silverlight Files

Color Themes

Points and Pixels

The XAP is a ZIP

An XNA Program for the Phone

2 Getting Oriented

Silverlight and Dynamic Layout

Orientation Events

XNA Orientation

Simple Clocks (Very Simple Clocks)

3 An Introduction to Touch

Low-Level Touch Handling in XNA

The XNA Gesture Interface

Low-Level Touch Events in Silverlight

The Manipulation Events

Routed Events

Some Odd Behavior?

4 Bitmaps, Also Known as Textures

XNA Texture Drawing

The Silverlight Image Element

Images Via the Web

Image and ImageSource

Loading Local Bitmaps from Code

Capturing from the Camera

The Phone’s Photo Library

5 Sensors and Services

Accelerometer

A Simple Bubble Level

Geographic Location

Using a Map Service

6 Issues in Application Architecture

Basic Navigation

Passing Data to Pages

Sharing Data Among Pages

Retaining Data across Instances

The Multitasking Ideal

Task Switching on the Phone

Page State

Isolated Storage

XNA Tombstoning and Settings

Testing and Experimentation

Part II Silverlight

7 XAML Power and Limitations

A TextBlock in Code

Property Inheritance

Property-Element Syntax

Colors and Brushes

Content and Content Properties

The Resources Collection

Sharing Brushes

x:Key and x:Name

An Introduction to Styles

Style Inheritance

Themes

Gradient Accents

8 Elements and Properties

Basic Shapes

Transforms

Animating at the Speed of Video

Handling Manipulation Events

The Border Element

TextBlock Properties and Inlines