Mobile-Web-App

Tuesday, September 4, 2012

Free eBook download: An Introduction to Programming in Go

The book An Introduction to Programming in Go is available for purchase at Amazon.com. It is also available for free online.

This book is a short, concise introduction to computer programming using the language Go. Designed by Google, Go is a general purpose programming language with modern features, clean syntax and a robust well-documented common library, making it an ideal language to learn as your first programming language.

Monday, September 3, 2012

HTML5 and Javascript example; detect Touch event and free-draw on canvas for mobile device.

Last example "HTML5 and Javascript example; detect mouse event and free-draw on canvas" demonstrate how to detect mouse event for desktop browser with mouse input. But it cannot work on mobile device with touch input!

In order to detect touch event on mobile device, we have to implement EventListener of touchstart, touchend and touchmove. To retrieve the X, Y position of the touch events, read via event.touches[0].pageX and event.touches[0].pageY.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">

var canvas;
var context; 
var mouseon;
var touchon;

$(window).bind("resize", resetCanvas);

function loadcanvas(){
 window.scrollTo(0, 1);
 resetCanvas();
 
 mouseon = false;
 
 document.body.addEventListener(
  "mousedown",
  function(event){
   context.moveTo(event.pageX, event.pageY);
   mouseon = true;
  },
  false
 ); 

 document.body.addEventListener(
  "mouseup",
  function(event){
   mouseon = false;
  },
  false
 );
 
 document.body.addEventListener(
  "mousemove",
  function(event){
   if(mouseon){
    context.lineTo(event.pageX, event.pageY);
    context.stroke();
   }
  },
  false
 );
 
 document.body.addEventListener(
  "touchstart",
  function(event){
   context.beginPath();
   context.moveTo(event.touches[0].pageX, event.touches[0].pageY);
   touchon = true;
   context.preventDefault();
   
   
  },
  false
 ); 

 document.body.addEventListener(
  "touchend",
  function(event){
   touchon = false;
  },
  false
 );
 
 document.body.addEventListener(
  "touchmove",
  function(event){
   if(touchon){
    context.lineTo(event.touches[0].pageX, event.touches[0].pageY);
    context.stroke();
   }
  },
  false
 );

}

function drawBackground(){

 context.fillStyle = "#505050";
 context.fillRect(0, 0, canvas.width, canvas.height);
 
}

function resetCanvas(){
 canvas = document.getElementById("mycanvas");

 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight; 
 
 context = canvas.getContext("2d");
 
 drawBackground();
}

</script>
</head>
<body onload="loadcanvas();">

<canvas id="mycanvas">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Please notice that it doesn't work on all mobile browsers currently. Here is the result of running on various browsers at Android device (HTC One X).

Run on Firefox Mobile, it work as expected and have the best result.

Run on Opera Mobile, work but slow response.

Run on Chrome, NOT work! Only part of the touch path drawn.

Sunday, September 2, 2012

HTML5 and Javascript example; detect mouse event and free-draw on canvas.

Example to detect mouse event and free-draw on HTML5 canvas, using Javascript.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">

var canvas;
var context; 
var mouseon;

$(window).bind("resize", resetCanvas);

function loadcanvas(){
 window.scrollTo(0, 1);
 resetCanvas();
 
 mouseon = false;
 
 document.body.addEventListener(
  "mousedown",
  function(event){
   context.moveTo(event.pageX, event.pageY);
   mouseon = true;
  },
  false
 ); 

 document.body.addEventListener(
  "mouseup",
  function(event){
   mouseon = false;
  },
  false
 );
 
 document.body.addEventListener(
  "mousemove",
  function(event){
   if(mouseon){
    context.lineTo(event.pageX, event.pageY);
    context.stroke();
   }
  },
  false
 );

}

function drawBackground(){

 context.fillStyle = "#505050";
 context.fillRect(0, 0, canvas.width, canvas.height);
 
}

function resetCanvas(){
 canvas = document.getElementById("mycanvas");

 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight; 
 
 context = canvas.getContext("2d");
 
 drawBackground();
}

</script>
</head>
<body onload="loadcanvas();">

<canvas id="mycanvas">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Saturday, September 1, 2012

New options for the Maps Ad Unit

Google have provided ways to add AdSense to Google Maps via the Maps Ad Unit, to monetize sites that use the Google Maps API. And now, Google are adding two new extensions to that feature. This means more choices for ads with your maps and an improved experience for your users.

Know more: Google Geo Developers Blog

Friday, August 31, 2012

HTML5 Canvas, fill background

In the example, the function resetCanvas() will fill background according to canvas size. Also, bind the "resize" event to resetCanvas() function using jQuery, such that when user re-size the window, the background always follow to new window size.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">

var canvas;
var context; 

$(window).bind("resize", resetCanvas);

function loadcanvas(){
 window.scrollTo(0, 1);
 resetCanvas();
}

function drawBackground(){

 context.fillStyle = "#505050";
 context.fillRect(0, 0, canvas.width, canvas.height);
 
}

function resetCanvas(){
 canvas = document.getElementById("mycanvas");

 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight; 
 
 context = canvas.getContext("2d");
 
 drawBackground();
}

</script>
</head>
<body onload="loadcanvas();">

<canvas id="mycanvas">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Tuesday, August 28, 2012

Detect screen size using Javascript

Example to detect screen size using Javascript:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>Mobile-Web-App: Detect Resize</title>
<script type="text/javascript">

function doOnLoad(){

 window.addEventListener(
  "resize", 
  function() {
   var orientation;
   var windowWidth = window.innerWidth;
   var windowHeight = window.innerHeight;

   if(windowWidth > windowHeight){
    orientation = "Landscape";
   }else if(windowWidth < windowHeight){
    orientation = "Portrait";
   }else{
    orientation = "Square";
   }   
   
   document.getElementById("browserinfo").innerHTML 
    = orientation + " : " + windowWidth + " x " + windowHeight 
    + "<br/>Screen Size: " + screen.width + " x " + screen.height;
  }, 
  false);

}

</script>
</head>
<body onload="doOnLoad();">
<h1>Mobile-Web-App: Javascript Exercise - Detect Resize</h1>
<div id="browserinfo"></div>
</body>
</html>

Monday, August 27, 2012

Detect orientation change using Javascript

Example to detect orientation change using Javascript in browser.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>Mobile-Web-App: Detect Orientation Change</title>
<script type="text/javascript">

function doOnLoad(){
 var supportOrientationChange = "onorientationchange" in window;
 
 if(supportOrientationChange){
  document.getElementById("browserinfo").innerHTML 
   = "onorientationchange supported";
  
  window.addEventListener(
   "orientationchange", 
   function() {  
    document.getElementById("browserinfo").innerHTML 
     = window.orientation + " : " + screen.width + " x " + screen.height;
    }, 
   false);
 }else{
  document.getElementById("browserinfo").innerHTML 
   = "onorientationchange NOT supported";
 }
 

}

</script>
</head>
<body onload="doOnLoad();">
<h1>Mobile-Web-App: Javascript Exercise - Detect Orientation Change</h1>
<div id="browserinfo"></div>
</body>
</html>