Augmented Reality application is clean, efficient and usable. It shows how to hide the processing from the user and build a display which updates and rotates smoothly.

This article by Trevor Ward, author of Augmented Reality using Appcelerator Titanium Starter, dives into the open source code base of the augmentedTi example application, explaining how it has been implemented.

(For more resources related to this topic, see here.)

An overview

The augmentedTi application has been developed to demonstrate Augmented Reality in action; it has been coded using the Appcelerator Titanium Framework. This framework enables a "code once, adapt everywhere" approach to mobile application development.

It uses the commonJS architecture at its core and has a set of best practices, which can be read at https://wiki.appcelerator.org/display/guides/Best+Practices. The application follows these guidelines and also implements an MVC style architecture, using a controller, and event driven flow control methodology incorporating localization.

At the current time trying to implement a CSS applied look and feel using the frameworks JSS method is not viable. The application gets around the issue of hard coding fonts, colors, and images into the application by using two files—ui/layout.js and ui/images.js. These files contain the look, feel, and images applied throughout the application, and are standalone modules, enabling them to be included in any other modules.

The application

As you start to explore the application you will see that the main bootstrap file app.js only contains the require of the controller file and the call to the initial function startApp():

var ctl = require('/control/controller');
ctl.startApp();

To implement methodology for separating the code into distinct commonJS modules, the following file structure is applied:

i18n/en/strings.xml
resources/app.js
resources/control/controller.js
resources/images
resources/services/googleFeed.js
location.js
resources/tools/augmentedReality.js
common.js
iosBackgroundService.js
persHandler.js
ui/images.js
layout.js
common/activity.js
titleBar.js
screens/ARScreen.js
homeScreen.js

The main file which controls the application is controller.js. When an activity is completed, the control is returned here and the next activity is processed. This has an implication with enabling the program flow—application-level event listeners have to be added, using up resources. The application gets around this by creating a single custom event listener, which then calls a function to handle the flow. The fire event is handled within the tools/common.js file by providing a single function to be called, passing the required type and any other parameters:

Ti.App.addEventListener('GLOBALLISTENER', function(inParam){
var gblParams = {};
for(var paramKeyIn in inParam) {
if(inParam[paramKeyIn]) {
gblParams[paramKeyIn] = inParam[paramKeyIn];
}}
processGlobalListener(gblParams);});
function launchEvent(inParam){
var evtParams = {};
for(var paramKeyIn in inParam) {
if(inParam[paramKeyIn]) {
evtParams[paramKeyIn] = inParam[paramKeyIn];
}}
Ti.App.fireEvent('GLOBALLISTENER', evtParams);}
common.launchEvent({
TYPE : 'ERROR',
MESS : 'E0004'});

Throughout the application's commonJS modules, a standard approach is taken, defining all functions and variables as local and exporting only those required at the end of the file:

exports.startApp = startApp;

In keeping with the commonJS model, the modules are only required when and where they are needed. No application-level global variables are used and each part of the application is split into its own module or set of modules.

Within the application where data has to be stored, persistent data is used. It could have been passed around, but the amount of data is small and required across the whole application. The persistent data is controlled through the tools/persHandler.js module, which contains two functions—one for setting and one for getting the data. These functions accept the parameter of the record to update or return.

var persNames = {
lon : 'longitude',
lat : 'latitude',
width : 'screenWidth',
height : 'screenHeight',
bearing : 'bearing'
};
function putPersData(inParam){
Ti.App.Properties.setString(persNames[inParam.type],
inParam.data);
return;}
persHandler.putPersData({
type : 'width',
data : Ti.Platform.displayCaps.platformWidth
});

The application does not use the in-built tab navigation; instead it defines a custom title bar and onscreen buttons. This enables it to work across all platforms with the same look and feel. It also uses a custom activity indicator.

Augmented Reality

This section explains what Augmented Reality is and the solution provided within the augmentedTi application.

With all technology something and somebody has to be first. Mobile computing and especially smart phones are still in their infancy. Resulting in new technologies, applications, and solutions being devised and applied almost daily.

Augmented Reality is only now becoming viable, as the devices, technology, and coding solutions are more advanced. In this section a coding solution is given, which shows how to implement location-based Augmented Reality. It should work on most smart phones, and can be coded in most frameworks and native code. The code examples given use the Appcelerator Titanium Framework only. No additional modules or plugins are required.

Summary

This article dived into the open source code base of the augmentedTi example application, explaining how it has been implemented.

Resources for Article :

Further resources on this subject:

• iPhone: Customizing our Icon, Navigation Bar, and Tab Bar [Article]
• Animating Properties and Tweening Pages in Android 3-0 [Article]
• Flash Development for Android: Visual Input via Camera [Article]

Augmented Reality using Appcelerator Titanium Starter [Instant]

Learn to create Augmented Reality applications in no time using the Appcelerator Titanium Framework with this book and ebook.

Published: October 2012
eBook Price: $9.99
Book Price: $19.99
See more

close

Select your format and quantity:

Book 01234567891011121314151617181920

eBook 01234567891011121314151617181920

About the Author :

Books From Packt