SlideShare a Scribd company logo
1 of 29
Download to read offline
Augmented Reality with
             JavaScript (using
          Appcelerator Titanium)
                    Jeff Bonnes, December 2012
                    @jeffbonnes / @titaniumdev

Thursday, 13 December 12
Agenda
                    What is Augmented Reality?
                    Appcelerator Titanium
                    History of Augmented Reality in Titanium
                    JavaScript AR Framework in Titanium
                    [Demo]
                    On device testing made easy (TiShadow)


Thursday, 13 December 12
What is Augmented Reality?




Thursday, 13 December 12
Image Recognition vs Geolocation




Thursday, 13 December 12
Demo




Thursday, 13 December 12
Maps are everywhere...




Thursday, 13 December 12
Appcelerator Titanium
               Bridge from JavaScript objects into native
               mobile API
               Cross Platform
                   WebKit KJS JavaScript engine on iOS
                   V8 on Android
                   BB10 and Windows Phone expected 2013




Thursday, 13 December 12
How Titanium works
            JS Engine             ‘Native’




Thursday, 13 December 12
How Titanium works
                           var view = Ti.UI.createView({
            JS Engine        backgroundColor:‘white’       ‘Native’
                           });




Thursday, 13 December 12
How Titanium works
                           var view = Ti.UI.createView({
            JS Engine        backgroundColor:‘white’       ‘Native’
                           });




                           view.top = ‘20dp’;




Thursday, 13 December 12
How Titanium works
                            var view = Ti.UI.createView({
            JS Engine         backgroundColor:‘white’                   ‘Native’
                            });




                            view.top = ‘20dp’;



                           Ti.Geolcation.addEventListener(‘location’,
                           function(e){
                               // e has native stuff that I can use
                           });




Thursday, 13 December 12
Power of JavaScript
                    Adding properties and functions to objects
                    (native proxies)
                    Parasitic inheritance
                    Custom objects
                    Dynamic function signatures
                    CommonJS
                    JSON object creation
                    Execution at run-time


Thursday, 13 December 12
A Map in Titanium




Thursday, 13 December 12
Titanium Augmented Reality




Thursday, 13 December 12
Titanium Augmented Reality




Thursday, 13 December 12
Geolocation

                    My Location (GPS)

                    Point of Interest (Poi) location (lat, long)

                    Bearing / Heading (Compass)

                    Math



Thursday, 13 December 12
Calculations
                           Bearing / Heading




                           Distance




Thursday, 13 December 12
How many calculations?




Thursday, 13 December 12
How many calculations?




Thursday, 13 December 12
How many calculations?




Thursday, 13 December 12
How many calculations?




Thursday, 13 December 12
How many calculations?




Thursday, 13 December 12
How many calculations?




Thursday, 13 December 12
How many calculations?




Thursday, 13 December 12
Demo




Thursday, 13 December 12
Radar




Thursday, 13 December 12
Making it modular




Thursday, 13 December 12
On device testing is slow....
                    Use TiShadow!




Thursday, 13 December 12
Thank You!
                 https://github.com/jeffbonnes/parmavision
                 http://www.appcelerator.com/

                 https://github.com/dbankier/TiShadow
                 http://www.packtpub.com/augmented-reality-
                 using-appcelerator-titanium-starter/book
                  jeffb@gameshape.com

                  http://www.titaniumdevelopment.com.au

                  @titaniumdev




Thursday, 13 December 12

More Related Content

Similar to Augmented Reality with JavaScript and Appcelerator Titanium

Shift Your Game: Mobile 3.0
Shift Your Game: Mobile 3.0Shift Your Game: Mobile 3.0
Shift Your Game: Mobile 3.0
Vivastream
 
Ga london-html5&mobile advertising-tomlimongello
Ga london-html5&mobile advertising-tomlimongelloGa london-html5&mobile advertising-tomlimongello
Ga london-html5&mobile advertising-tomlimongello
Tom Limongello
 
OmniOS Motivation and Design ~ LISA 2012
OmniOS Motivation and Design ~ LISA 2012OmniOS Motivation and Design ~ LISA 2012
OmniOS Motivation and Design ~ LISA 2012
Theo Schlossnagle
 
NodePDX Slides
NodePDX SlidesNodePDX Slides
NodePDX Slides
Kyle Drake
 
Design process
Design processDesign process
Design process
Tim Wright
 
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPAIntegrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
Cheng Ta Yeh
 

Similar to Augmented Reality with JavaScript and Appcelerator Titanium (20)

Progressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancementProgressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancement
 
Html5 new sword for interactive app
Html5 new sword for interactive appHtml5 new sword for interactive app
Html5 new sword for interactive app
 
Sevillajs: Una tarde con Firefox OS
Sevillajs: Una tarde con Firefox OSSevillajs: Una tarde con Firefox OS
Sevillajs: Una tarde con Firefox OS
 
Shift Your Game: Mobile 3.0
Shift Your Game: Mobile 3.0Shift Your Game: Mobile 3.0
Shift Your Game: Mobile 3.0
 
Using CartoDB to analyze OpenStreetMap data
Using CartoDB to analyze OpenStreetMap dataUsing CartoDB to analyze OpenStreetMap data
Using CartoDB to analyze OpenStreetMap data
 
Ga london-html5&mobile advertising-tomlimongello
Ga london-html5&mobile advertising-tomlimongelloGa london-html5&mobile advertising-tomlimongello
Ga london-html5&mobile advertising-tomlimongello
 
OmniOS Motivation and Design ~ LISA 2012
OmniOS Motivation and Design ~ LISA 2012OmniOS Motivation and Design ~ LISA 2012
OmniOS Motivation and Design ~ LISA 2012
 
How AngryNerds Convinced Atlassian to Use Magnolia
How AngryNerds Convinced Atlassian to Use MagnoliaHow AngryNerds Convinced Atlassian to Use Magnolia
How AngryNerds Convinced Atlassian to Use Magnolia
 
Functions and data
Functions and dataFunctions and data
Functions and data
 
Scrum version2
Scrum version2Scrum version2
Scrum version2
 
Cloud Messaging With Cloud Foundry
Cloud Messaging With Cloud FoundryCloud Messaging With Cloud Foundry
Cloud Messaging With Cloud Foundry
 
Node-IL Meetup 12/2
Node-IL Meetup 12/2Node-IL Meetup 12/2
Node-IL Meetup 12/2
 
StORM preview
StORM previewStORM preview
StORM preview
 
Introduction To MongoDB
Introduction To MongoDBIntroduction To MongoDB
Introduction To MongoDB
 
Backbone
BackboneBackbone
Backbone
 
NodePDX Slides
NodePDX SlidesNodePDX Slides
NodePDX Slides
 
Design process
Design processDesign process
Design process
 
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPAIntegrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
 
Zeno rocha - HTML5 APIs para Mobile
Zeno rocha - HTML5 APIs para MobileZeno rocha - HTML5 APIs para Mobile
Zeno rocha - HTML5 APIs para Mobile
 
იოსებ ძმანაშვილი Node.js
იოსებ ძმანაშვილი   Node.jsიოსებ ძმანაშვილი   Node.js
იოსებ ძმანაშვილი Node.js
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Recently uploaded (20)

Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 

Augmented Reality with JavaScript and Appcelerator Titanium