Mobile Apps built with HTML5 are great... when the
mobile device you're targeting can support all of the features you need
for delivering a top flight user experience. To help the rubber meet the
road, you sometimes need libraries to access native OS capabilities
like the camera and you could use an accelerated canvas to deliver
powerful and responsive mobile apps! Learn how the polyfill libraries and Intel’s accelerated canvas can do exactly what is needed!
Introduction to Polyfills
On a beautiful day in the near future, every
browser will be able to access the latest and most powerful technologies
the second they are dreamed up at the W3C. Using only W3C standard HTML
and JavaScript, you’ll be able to access every native piece of
hardware. All the enterprising developer will need is HTML and
JavaScript skills to code any app they can imagine.
Unfortunately, this isn’t the world we live in
right now. If you want to create a modern installed HTML5 app, you’re
going to need some polyfills to make a hybrid app.
A polyfill is a piece of code that bridges what the
browser is capable of out-of-the-box and what you need it to do. There
are two main kinds of polyfill libraries. There are compatibility
polyfills that add support for new W3C technologies to browsers that
don’t understand them by default, and there are polyfills that add APIs
to JavaScript to access native operating system resources.
Using Compatibility Polyfills
Most mobile browsers are capable of more modern
capabilities than the current low-watermark for compatibility on the
internet, Internet Explorer 8. Many features of HTML5 and CSS3 are
functional and have been working since Android 2.2 with a few exceptions
like SVG (Scalable Vector Graphics) and DataList support.
Using a Polyfill for SVG Compatibility
SVG is extremely helpful in rendering complex
charts and beautiful multi-colored icons that look great on high
resolution screens. Android devices prior to 2.3 don’t support SVG. If
you need to render SVG graphics on an older Android device, canvg.js can help you out. All you need to do is declare a canvas in your HTML and make a one line JavaScript call to canvg to load and render your SVG.
<canvas id="YourIcon" width="32px" height="32px"></canvas>
<script language="text/javascript">
canvg('YourIcon', 'IconFile.svg');
</script>
Using a Pollyfill for Tag Support.
The DataList tag is very useful in providing suggestion list driven text boxes. Neither Android nor iOS web browsers support this tag. The jquery.datalist plugin comes to the rescue. This particular plugin even allows you to structure your HTML as you would a normal HTML5 datalist and just add a single JavaScript call to your web page to progressively add in support:
$('input[list]').datalist();
The above jQuery call will find all of the HTML5 DataLists on the page, then apply the data list effect via progressive JavaScript enhancement.
Accessing Native Capabilities Using Polyfills
Many HTML5 apps installed on mobile devices need to
access native hardware capabilities of the device that are not
typically exposed to the browser. The Cordova and AppMobi
APIs provided by the Intel XDK New enables the creation of a hybrid app
that can bridge the gap between what is typically exposed to the
browser and the native hardware on the device.
The Intel XDK New
is a recent entrant into the area of multi-platform HTML apps. Intel
brought together a portfolio of leading products category leading
technology like AppMobi, Impact.js, Cordova
and more to deliver an end-to-end experience of native capabilities
exposed to more cross-platform friendly HTML and JavaScript.
One of the key goals of the Intel XDK New is to
provide that native compatibility polyfill capability between your HTML5
app and the kinds of native resources necessary to deliver a full
featured application. The polyfills in the Intel XDK New allow you to
take pictures, scan barcodes, access contacts on the device, sign on to OAuth
apps like Facebook, play media and access the device’s accelerometer.
In this article, we’ll take a look at accessing the device’s camera and
accelerometer as well as how to turbocharge your graphics with the
accelerated canvas.
Camera and File Upload
One of the most common pieces of native hardware
access necessary for a mobile app is access to the device’s camera. For
example, if you wanted to add the ability for your app to take a picture
of the user to use for their avatar, you would need a way of accessing
the device’s camera.
The W3C standard APIs for web RTC (Real-Time
Communications) that would provide native camera access are still
evolving and even once fully evolved might still prove impractical on a
mobile device’s interface compared to launching the device’s native
camera app. The AppMobi “TakePicture” API launches
a device’s native camera app and allows the user to take a picture.
Once the picture has been taken, your app will come back into the
foreground and can return a URL (file://path/on/device.jpg format) for accessing the image file.
Once your app has a reference to the file on the
local disk, you can pass it to an IMG tag to display it or you can use
another polyfill to upload the file to a web server. Although there are
standard JavaScript APIs to do file uploads across the internet, it
might not work if you use one of the APIs that provides progress reporting. The AppMobi “uploadToServer” API takes care of the compatibility layer to upload the file and report progress back to your application.
function CapturePhoto() {
document.addEventListener("appMobi.camera.picture.add",PicDone);
AppMobi.camera.takePicture(70,//Quality between 0 and 100
false,//Save to device’s library
"jpg");//jpg or png
}
function PicDone (e) {
if (e.success)
{
var urlToPic = AppMobi.camera.getPictureURL(evt.filename);
AppMobi.file.uploadToServer(urlToPic,
"http://www.yourserver.com/uploadImage.php", //url
"", //folder
"image/jpeg",//mime type
"ProgressUpdated");//callback
}
}
function ProgressUpdated(bytesSent,totalBytes)
{
var progress = 0;
if(totalBytes>0)
{ progress =(bytesSent/totalBytes)*100; }
$('#ProgressDisplay').html(progress +"%");
}
Working with the Accelerometer
The accelerometer on mobile devices measures how
the device is moved in 3D space. This can be used to add an additional
layer of interaction for your users beyond just pressing on the screen.
You can use the accelerometer to allow the user to scroll by tilting the
device or clear the screen like an etch-a-sketch by shaking it. Many
games use the accelerometer to turn the whole device into steering wheel
to fly through imaginative worlds.
To take the hybrid app approach to access the accelerometer using the polyfill in the Intel XDK New, register an event handler with AppMobi.accelerometer.watchAcceleration.
Your function will be passed an object containing the device’s X, Y,
and Z position. When you register your event, you will also need to
define how frequently you want your function called to measure the
accelerometer. If you set it too infrequently it will feel unresponsive,
if you set it too frequently it will take up too much CPU time.
The code example below registers a handler for the
accelerometer to report the device’s position 24 times per second.
Feature films run at 24 frames per-second and most casual games work
well at this frame-rate.
AppMobi.accelerometer.watchAcceleration(function(acl) {
$('#ACLStatus').html('x: '+ acl.x
+'y: '+ acl.y
+'z: '+ acl.z);
}, { frequency: 24 });//Report 24x per second
}, { frequency: 24 });//Report 24x per second
Note:
To test out your app before loading it on a real device, the Intel XDK
New includes the built-in capability to simulate device movement by
either entering numeric values for tilt or dragging a 3D version of the
phone around.
Accelerated Canvas
The HTML5 canvas element provides a drawing surface
for you to be able to draw anything you want on-screen. For most
purposes, the normal canvas tag provides the capabilities you need with
adequate performance but if you are developing games you need a higher
performance solution. This is where the accelerated canvas comes in.
The normal canvas element runs inside of the
browser where every pixel must be evaluated to see if there is something
above it, below it, if someone is clicking it, etc. All of this
capability comes with overhead. With the accelerated canvas, you lose
this functionality in exchange for up to ten times faster drawing
performance. The net effect is you can create rich graphics games, cross
platform, with near native performance.
To use the accelerated canvas in
the Intel XDK New, you don’t create an HTML page with a canvas tag on
it. Create your app with a single html page with no content in the BODY
tag. Then call “AppMobi.canvas.load('YourCanvasScript.js')”.
This will initialize the accelerated canvas in full screen mode. The
script file you pass the load function to will run inside of the
accelerated canvas.
This designation of “inside of accelerated canvas”
and “outside of accelerated canvas” code is important because the code
that is running inside of the accelerated canvas can’t communicate with
the regular HTML page directly. To call a function on your canvas from
your HTML page, execute “AppMobi.canvas.execute('YourCanvasFunction()')”. To call a function on your HTML page from the canvas side, execute, “AppMobi.webview.execute('YourPageFunction()')”.
The canvas itself doesn’t have the ability to have elements on it that
can receive events so the communications between the HTML and
accelerated canvas layers is critical.
From an API standpoint, the only other major
differences between the API used for a normal canvas and the accelerated
canvas is how you get the context and the necessity to call “present()”
when you are done drawing the frame. On a typical HTML5 canvas element,
as you call each drawLine and fillRect,
the canvas is updated when you make the API call. The accelerated
canvas gains efficiency by drawing off-screen then painting the entire
frame to the user interface when you call “present()”.
The example below creates a context reference to
the accelerated canvas, draws a red rectangle then calls present to
paint the canvas to the screen.
var context = AppMobi.canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(0,0,100,100);
context.present();
For more information on how to get started with the accelerated canvas, check out the Game Interface Implementation guide on Intel’s web site.
Conclusion
Cross-device HTML5 development allows you to write
your code once and run it everywhere from the internet to the latest and
greatest mobile devices. Careful use of polyfills like the ones in the
Intel XDK New allow you to make a hybrid app and access everything your
app needs to be able to do in between what HTML can do out-of-the-box
and native capabilities.
This article was reprinted from htmlgoodies.
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training in India. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai
ReplyDeleteGreat Article
DeleteIEEE Final Year Projects for CSE
IEEE Project Centers in Chennai
Outsourcing to Eastern Europe has a range of advantages due to its attractive cost-to-quality ratio. I would recommend checking out this article to learn more about the software development in Eastern Europe .
ReplyDeleteGreat article to read. Yes mobile apps running with HTML coding are have better features and usefulness.
ReplyDeleteWould love to read related blogs in future. Think to share , a web designing company in kolkata known for building very creative and responsive website, Click here to know more about Web Designing Company in Kolkata
We are really grateful for your blog post. You will find a lot of approaches after visiting your post. Great work.
ReplyDeleteWe are the fast-growing web designing company in usa and creating top-notch websites by the experts experienced for years. Our dedicated experts always get up-to-date with the latest technology and its application.