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

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Recently uploaded (20)

Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 

Augmented Reality with JavaScript and Appcelerator Titanium