Mobile-Web-App

Monday, January 30, 2012

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>