Build Augmented Reality Apps with Sencha Touch & Moodstocks

Build augmented reality apps with Sencha Touch using the Moodstocks SDK & Moodstocks PhoneGap plugin.

Transcript

1. Build Augmented Reality Apps with Sencha Touch & Moodstocks Qian @bonbonking Sencha Meetup #2 Moodstocks Software Engineer
3. Moodstocks Overview Mobile App Moodstocks API client server reference images up to millions images Moodstocks SDK image signatures up to 10k images query match ID or nil server-side search for large DB sync
4. Moodstocks SDK Overview Mobile App Wrapper Core Library Objective-C Java C
5. Moodstocks SDK with PhoneGap Objective-C Java C PhoneGap Plugin Native Files Web App PhoneGap Plugin Javascript Files WebView Wrapper Core Library Objective-C Java HTML CSS Javascript
6. Moodstocks PhoneGap Plugin API • Open - initialize the scanner • Sync - synchronize image signatures • Scan - launch the scan session • Pause - pause the scan session • Resume - resume the scan session • Close - close the scanner
7. Building an AR Overlay Web Overlay Native Camera View
8. Why Sencha Touch? • Rich UI components • Optimized for mobile platforms • Command line tool • Doc, code examples, the community! • From v2.3: Support for PhoneGap
9. Our Demo
10. Overlay Container View Ext.define('MSDemo.view.Overlay.Container', {! extend: 'Ext.Container',! xtype: 'overlayContainer',! id: 'overlayContainer',! ! config: {! centered: true,! width: 250,! height: 300,! modal: true,! hideOnMaskTap: true,! ! showAnimation: {! type: 'slideIn',! direction: 'right'! },! ! items: [! //...! ]! }! });
11. Who uses it? • L’Occitane en Provence • Open Food Facts • You?
12. What’s next? • Official doc • https://moodstocks.com/docs/phonegap/ • Demo video • http://y2u.be/jCKrTxTJZ2U • Moodstocks PhoneGap plugin • https://github.com/Moodstocks/moodstocks-phonegap-plugin
13. Thanks! Questions? Comments? qian@moodstocks.com | @bonbonking