Mobile-Web-App

Thursday, February 2, 2012

Using Javascript load image on HTML5 Canvas

In the html example here, a Image is defined, with src property of the url of the image to be loaded. Using the addEventListener() function to define the callback function(), listen the event of "load". The 3rd parameter "false" specify that it will called AFTER the "load" operation completed.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: Load image on HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
 var canvas;
 var context;
 
 var image;
 var image_src = "http://goo.gl/BlQEX";

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

 image = new Image();
 image.src = image_src;
 
 //Define callback function(), it will be called after the event "load".
 //The 3rd parameter "false", define that it will be called after "load" event completed.
 image.addEventListener("load",
    function(){
     context.drawImage(image, 0, 0);
    } ,
    false);
 
}

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

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

</body>
</html>

Wednesday, February 1, 2012

Qt SDK 1.2 released

A new Qt SDK, the Qt SDK 1.2, is now available for download, and it makes it easier than ever to create rich applications with improved performance.

The new SDK includes the latest version of Qt Creator (2.4.1) as well as Qt 4.8 for desktop and embedded Windows, Mac and Linux/X11 (released as stand-alone in December).

The SDK update also contains mobile improvements for the Symbian and MeeGo Harmattan 1.2 targets, new Qt mobility examples in Qt Creator and easy integration of the Qt In-App Purchasing API, which enables developers to build in-app purchasing into their Qt mobile application.

Know more: The Qt Blog - New Qt SDK features updated Qt Creator, Qt 4.8 for desktop and new Qt mobility APIs ~ by Daniel Kihlberg on February 1, 2012

HTML5 Canvas + Javascript - interactive user input and convas's element

Using JavaScript update HTML5 canvas Text

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

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

}

function enter() {
  var userenter = document.getElementById("textin").value;
  context.fillText(userenter, 50, 50);
}

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

<canvas id="mycanvas" style="border: 5px solid;" width="400" height="100">
Sorry! Your browser doesn't support Canvas.
</canvas>
<form>
<input id="textin" type="text" />
<input type="button" value="Enter" onClick="enter()" />
</form>
</body>
</html>

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!