HTML 5 Programming For QNXCAR

Introduction to HTML 5 Programming for the QNX CAR 2 Platform
January 2012, Marc Lapierre
Overview: HTML 5 Programming for QNX CAR 2
Confidential Information of QNX Software Systems Limited
Agenda
Platform Overview HTML 5 JavaScript CSS 3 Performance Tips
QNX CAR Framework JNEXT Extensions PPS Framework APIs
Tools Sencha Touch 2 Sencha Designer Web Packager Web Inspector
HTML, JavaScript, CSS

Works together to create applications HTML defines the data (Model) Defined by a DOM JavaScript defines the behaviour (Controller) CSS defines the display style (View)
Whats new in HTML 5

Application Cache Client-side data storage Geo-location support Native Audio and Video Asynchronous JavaScript loading Web Workers with Message Passing
HTML 5 Application Cache

Caches remote files locally Files remain cached until explicitly updated Setup rules with a manifest Cache only certain items Setup fall-back files if requires resources missing Respond to cache events Caveat: must reload page to get new content
HTML 5 Client-side data storage

More responsive than network calls Reduces server load Increased accessibility the users preferences are remembered 3 types of storage Local Storage Session Storage Database Storage
HTML 5 Geo-location
Provides native access to geo-location APIs Will read from local GPS device, if available Fall back on IP address, WiFi networks Access longitude and latitude
HTML 5 Native Audio & Video

New <audio> and <video> tags Fully customizable user interface with CSS Rendered natively by QNX media engine Supports seeking and progress updates Common media controls (play, pause, volume)
HTML 5 JavaScript Improvements

Load JavaScript asynchronously using async Execution order is not guaranteed Use Web Workers to execute code in the background Does not block user interactions Can have several web workers at once Communicate between threads with messages Recommended for processing large amounts of data
10
What is CSS?
Cascading Style Sheets Define how to display components Solves many problems: Style re-use Separates style from content Quickly redraw items
11
CSS 3 Whats New

Rounded corners Text and box shadows Colors: HSL, Alpha, Gradients
border-radius: 15px; box-shadow: 10px 10px 10px hsla(200, 100%, 50%, 0.5); text-shadow: -5px -5px 1px rgba(0,0,0,0.8); background-image: -webkit-gradient(linear, left top, left bottom, colorstop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(100%,#7db9e8));
12
CSS 3 Transformations
Scale: scale3d(x, y, z); Skew: skew(x); Rotate: rotate3d(x, y, z, angle); Translate: translate3d(x, y, z); Perspective: perspective(p); Matrix: matrix3d();
13
@-webkit-keyframes spin{ 0% { } 50% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); } } . spin10s{ -webkit-animation: spin linear; -webkit-animation-duration: 10s; }
CSS 3 Animations
Use any CSS 3 tags transformations Simple to setup using key frames Alternate directions (fade in, fade out) Loop indefinitely, by time or iteration count Animation timings with cubic-bezier Pause and resume playback Auto-animate with transition attribute
14
CSS 3 Attribute Selectors

Match any attribute on an element Mixin style reusability Match partial or complete attributes p[title=to] { } // matches exactly to p[title^=to] { } // begins with to p[title$=to] { } // ends with to p[title*=to] { } // contains to Example: div[disabled=true] { opacity: 0.5 }
15
What else is new?

Stack multiple background images Word wrap Text overflow (clip, ellipsis) Opacity Web fonts Multiple columns Resizable elements Navigation index and targets
16
Performance General Tips

Avoid <canvas> elements Opacity and rounded corners Disconnect DOM elements before modifying them Avoid JavaScript libraries designed for Desktop use Sencha Touch 2 jsPerf jQuery Mobile Alice JavaScript performance tools: Benchmark.js
17
Performance Animation Tips

Use CSS instead of JavaScript animations 2D vs 3D animations 2D is software rendered 3D is GPU accelerated Instead of translateX(100px); Use translate3d(100px, 0px, 0px);
HTML 5 Programming for QNX CAR 2
Questions?
Platform Overview HTML 5 JavaScript CSS 3 Performance & Best Practices
19
HTML Applications WebWorks Components

Security
HTML Home Screen JS Lifecycle API
Emulated Web Server App Packaging (.bar)
QNX CAR Framework

JNEXT Extensions Multimedia Radio Navigation
Sencha JS/CSS3 Widgets JS Native Services API HTML5 browser engine

JNEXT PPS JNEXT Comp Mgr JNEXT SQL
Vehicle Status Bluetooth Application Management Voice Commands
HMI Framework Components Authorization Composition Launcher Manager Manager QNX CAR Components Radio Navigation Multimedia
Installer
Speech
20
JNEXT Extensions
JavaScript Native Extensions Based on NPAPI (Netscape Plugin API) Access native services from JavaScript Screen SQLite PPS <your service here>
User Interface Framework API PPS Native Application Hardware DSP
21
PPS
Persistent Publish Subscribe Many applications can listen or write to a service Event driven Acts as a bridge between applications JavaScript Native Example: Radio application
22
Automotive Multimedia Engine

Access media library Manage media sources (iPod, USB stick, etc.) Playback audio and video Listen for media voice commands Full ID3 support and Gracenote integration Play, pause, stop, volume controls Supports seeking and playback status events Support for DLNA
23
Radio
Supports AM, FM and HD radio Includes HD radio metadata Station presets for each band Seek and Scan functionality Simulation mode for boards without an antenna Supports TI radio tuner on Jacinto 5 Radio profiles configurable for different regions
24
Navigation
Open GL maps with JNEXT screen API Listen for navigation events using PPS Turn by turn updates Distance updates Access full route data Access navigation data from other applications
25
Vehicle Status
Vehicle Speed Outside Temperature Tire Pressure Any other analog or digital sensor ODB-II Data (CAN, MOST, etc.) Coolant Temperature Oil Pressure Check Engine Light / Codes
26
Bluetooth
Device configuration Initiate or accept device pairings Query for available profiles Hands-Free profile Serial Port profile MAP profile Phonebook Access profile BlackBerry Bridge applications
27
Application Management
Get a list of applications Determine which applications are running Listen for new application installations Start and stop applications Switch between active applications Position application windows Receive application events
28
Voice Commands
Multimedia Play a song/artist/album Skip to next or previous track Navigation Search POIs Navigate to a destination Can be added to any application Reusable for steering wheel controls, etc.
Questions?
30
Sencha Touch 2
JavaScript framework optimized for mobile Rich JavaScript components CSS 3 animations MVC architecture Dynamic dependency loading Stunning interactive charts Reduced development time
Image Sencha Inc. All rights reserved.
31
Optimized for embedded

Mobile platforms are embedded platforms Performance is key Hardware accelerated animations Event based architecture Modular design Auto-detects platform and optimizes
32
Rich Components & Animations

Lists Data Grids Forms (buttons, drop-down menus, check boxes, ) Toolbars Tabs Overlays Carousels and all of these components can be animated!
33
MVC Architecture
Clean code = happy developers Facilitates teamwork Keep applications modular and organized Respond to events from multiple controllers Allows dynamic loading within your application
34
Dynamic Dependency Loading

Load what you need when you need it Faster start-up time Lowers memory usage No-hassle setup
35
Sencha Designer
Create applications quickly and easily Drag and Drop user interface Create custom components Easy data connectivity Automatic code generation
36
Stunning Charts
Generate charts from your datasets Optimized for mobile & embedded Hardware accelerated animations Interactive Potential uses: Fuel efficiency CAN BUS monitoring Data logging
37
Reduced Development Time

Complex applications in weeks, not months MVC structure keeps code clean, bug count low Easy to pin-point causes of bugs Spend less time making common components
Questions?
39
Web Packager
Web Packager binaries and packaging / installation instructions are available on Foundry 27 Binaries Packaging and Installation Instructions Will be replaced by BlackBerry WebWorks with automotive APIs WebWorks official site Ripple
40
Web Inspector - Elements

Examine and modify DOM elements Modify classes, add/remove nodes, etc. Modify DOM on-the-fly Review and modify CSS See all CSS classes for an element See which attributes get overridden Modifications appear in browser on-the-fly Great tool for UI debugging
41
Web Inspector - Resources

See all files loaded by the application HTML pages Images, Scripts, Stylesheets Databases, Local Storage, Session Storage Application Cache Cookies
42
Web Inspector - Network

List of all network request For each request, you can see A timeline of when each file started to load and the duration of each request HTTP response codes Transfer time and latency
43
Web Inspector - Scripts

List of all loaded scripts Set breakpoints Step through the code Inspect variables / modify them on-the-fly Execute arbitrary code from the console
Questions?
2011 QNX Software Systems Limited and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of QNX Software Systems Limited (QSS) as of the date of this presentation. Because QSS must respond to changing market conditions, it should not be interpreted to be a commitment on the part of QSS, and QSS cannot guarantee the accuracy of any information provided after the date of this presentation. QSS MAKES NO WARRANTIES, REPRESENTATIONS OR CONDITIONS EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Marc Lapierre, Software Developer mlapierre@qnx.com

HTML 5 Programming For QNXCAR

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML 5 Programming For QNXCAR

Загружено:

Авторское право:

Доступные форматы

Introduction to HTML 5 Programming for the QNX CAR 2 Platform

January 2012, Marc Lapierre

Overview: HTML 5 Programming for QNX CAR 2

Confidential Information of QNX Software Systems Limited

Platform Overview HTML 5 JavaScript CSS 3 Performance Tips

QNX CAR Framework JNEXT Extensions PPS Framework APIs

Tools Sencha Touch 2 Sencha Designer Web Packager Web Inspector

Confidential Information of QNX Software Systems Limited

HTML, JavaScript, CSS

Confidential Information of QNX Software Systems Limited

Whats new in HTML 5

Confidential Information of QNX Software Systems Limited

HTML 5 Application Cache

Confidential Information of QNX Software Systems Limited

HTML 5 Client-side data storage

Confidential Information of QNX Software Systems Limited

Confidential Information of QNX Software Systems Limited

HTML 5 Native Audio & Video

Confidential Information of QNX Software Systems Limited

HTML 5 JavaScript Improvements

Confidential Information of QNX Software Systems Limited

Confidential Information of QNX Software Systems Limited

CSS 3 Whats New

Confidential Information of QNX Software Systems Limited

Confidential Information of QNX Software Systems Limited

Confidential Information of QNX Software Systems Limited

CSS 3 Attribute Selectors

Confidential Information of QNX Software Systems Limited

What else is new?

Confidential Information of QNX Software Systems Limited

Performance General Tips

Confidential Information of QNX Software Systems Limited

Performance Animation Tips