Mobile-Web-App

Friday, February 3, 2012

jQuery Mobile and canvas, with drawing

Example:

<!doctype html>
<head>
<title>Mobile-Web-App: jQuery Mobile - canvas</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>

<script>
$(document).ready(function () {
 var canvasWidth = $("#canvas").width();
 var canvasHeight = $("#canvas").height();

 var canvas = $("#canvas").get(0);
 var context = canvas.getContext("2d");
 drawRects(context);
 
});

function drawRects(c){
 c.lineWidth = 20;
 
 //default color
 c.fillRect(20, 10, 30, 130);
 
 //Rect in red
 c.fillStyle = "#FF0000";
 c.fillRect(70, 10, 30, 130);

 //Rect fill gradient
 //source and destination (x,y) coordinates for the gradient:
 //- createLinearGradient(srcX, srcY, destX, destY)
 gradient = c.createLinearGradient(100, 10, 130, 140);
 gradient.addColorStop(0,"blue");  //start from blue
 gradient.addColorStop(1,"green"); //end to green
 c.fillStyle = gradient;
 c.fillRect(120, 10, 30, 130);
 
 gradient2 = c.createLinearGradient(170, 10, 300, 140);
 gradient2.addColorStop(0,"red");  //start from red
 gradient2.addColorStop(1,"blue"); //end to blue
 c.fillStyle = gradient2;
 c.fillRect(170, 10, 130, 130);

}
</script>

</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
<h3>Mobile-Web-App</h3>
</div>

<div data-role="content">
<h1>jQuery Mobile - canvas</h1>
<canvas id="canvas">Sorry! Your browser doesn't support Canvas.</canvas>
</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>

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

jQuery Mobile and canvas

Example of jQuery Mobile and canvas.

<!doctype html>
<head>
<title>Mobile-Web-App: jQuery Mobile - canvas</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>

<script>
$(document).ready(function () {
 var canvasWidth = $("#canvas").width();
 var canvasHeight = $("#canvas").height();

 alert("Canvas Size: " + canvasWidth.toString() + " X " + canvasHeight.toString());
</script>

</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
<h3>Mobile-Web-App</h3>
</div>

<div data-role="content">
<h1>jQuery Mobile - canvas</h1>
<canvas id="canvas">Sorry! Your browser doesn't support Canvas.</canvas>
</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>

next: jQuery Mobile and canvas, with drawing

Thursday, February 2, 2012

jQuery Mobile - $(document).ready()

$(document).ready(handle) Specify a function (handle) to execute as soon as the DOM is loaded.

Example of using $(document).ready() in jQuery Mobile.

<!doctype html>
<head>
<title>Mobile-Web-App: jQuery Mobile .ready()</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>

<script>
$(document).ready(function () {
alert("Page Ready");
});
</script>

</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
<h3>jQuery Mobile .ready()</h3>
</div>

<div data-role="content">
<h1>$(document).ready(handle)</h1>
<p>Specify a function to execute when the DOM is fully loaded.</p>
</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>

Generate QR code using Google Chart Tools

QR codes are a popular type of two-dimensional barcode. They are also known as hardlinks or physical world hyperlinks. QR Codes store up to 4,296 alphanumeric characters of arbitrary text. This text can be anything, for example URL, contact information, a telephone number, even a poem! QR codes can be read by an optical device with the appropriate software. Such devices range from dedicated QR code readers to mobile phones.

Google Chart Tools: Infographics provide API to generate QR Code easily.

It's a example to create QR Code using Google Chart Tools, and display on canvas.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: create QR code</title>
<script type="text/javascript">

var canvas;
var context;

function loadcanvas(){

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

function enter() {
 
 var QRprefix = "https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=";
 var userenter = document.getElementById("textin").value;
 
 var QRimage = new Image;
 QRimage.src = QRprefix + userenter;
 
 QRimage.addEventListener("load",
    function(){
     context.drawImage(QRimage, 0, 0);
    } ,
    false);

}

</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: create QR code</h1>

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

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>