html 5 programming for qnxcar

7/27/2019 HTML 5 Programming for QNXCAR

1/45

Introduction to HTML 5 Programmingfor the QNX CAR 2 Platform

January 2012, Marc Lapierre


2/45

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

Overview: HTML 5 Programming for QNX CAR 2

Agenda


3/45

HTML, JavaScript, CSS

Works together to create applications

HTML defines the data (Model)

Defined by a DOM

JavaScript defines the behaviour (Contro

CSS defines the display style (View)


4/45

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


5/45

HTML 5 Application C

Caches remote files locally

Files remain cached until explicitly upda

Setup rules with a manifest

Cache only certain items

Setup fall-back files if requires resou

Respond to cache events

Caveat: must reload page to get new con


6/45

HTML 5 Client-side da

More responsive than network calls

Reduces server load

Increased accessibility the users preferemembered

3 types of storage

Local Storage

Session Storage

Database Storage


7/45

HTML 5 Geo-location

Provides native access to geo-location A

Will read from local GPS device, if avail

Fall back on IP address, WiFi networks

Access longitude and latitude


8/45

HTML 5 Native Audio

New and tags

Fully customizable user interface with C

Rendered natively by QNX media engine

Supports seeking and progress updates

Common media controls (play, pause, vo


9/45

HTML 5 JavaScript Imp

Load JavaScript asynchronously using

Execution order is not guaranteed

Use Web Workers to execute code in the

Does not block user interactions

Can have several web workers at onc

Communicate between threads with

Recommended for processing large a


10/45

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/45

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.

text-shadow : -5px -5px 1px rgba( 0,0,0,0.8 );

background-image: -webkit-gradient( linear, left top, le

stop( 0%,#1e5799 ), color-stop( 50%,#2989d8 ), color-st


12/45

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/45

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 co

Animation timings with cubic-bezier

Pause and resume playback

Auto-animate with transition attribute

@-webkit-keyframes spin{

0% {

}

50% {

-webkit-transform : rotate( 180deg );

}

100% {

-webkit-transform : rotate( 360deg );

}

}

. spin10s{

-webkit-animation: spin linear ;

-webkit-animation-duration : 10s ;

}


14/45

CSS 3 Attribute Selecto

Match any attribute on an element

Mixin style reusability

Match partial or complete attributes

p[title =to ] { } // matches exac

p[title ^=to ] { } // begins with

p[title $=to ] { } // ends with to

p[title *=to ] { }// contains to

Example: div[ disabled =true ] {opac


15/45

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/45

Performance General T

Avoid elements

Opacity and rounded corners

Disconnect DOM elements before modif

Avoid JavaScript libraries designed for D

Sencha Touch 2 jQuery Mobi

JavaScript performance tools:

jsPerf Benchmark.js
http://www.sencha.com/blog/sencha-touch-2-developer-preview/http://www.sencha.com/blog/sencha-touch-2-developer-preview/http://jquerymobile.com/http://jsperf.com/http://jsperf.com/http://benchmarkjs.com/http://benchmarkjs.com/http://benchmarkjs.com/http://benchmarkjs.com/http://jsperf.com/http://jsperf.com/http://jquerymobile.com/http://www.sencha.com/blog/sencha-touch-2-developer-preview/http://www.sencha.com/blog/sencha-touch-2-developer-preview/


17/45

Performance Animation

Use CSS instead of JavaScript animation

2D vs 3D animations

2D is software rendered

3D is GPU accelerated

Instead of

translateX( 100px );

Use

translate3d( 100px , 0px, 0px);


18/45

Platform OverviewHTML 5JavaScriptCSS 3Performance & Best Practices

QNX CAR Framework JNEXT Extensions PPS Framework APIs


HTML 5 Programming for QNX CAR 2

Questions?


19/45

QNX CAR Framework

JNEXT Extensions

Multimedia

Radio

Navigation

Vehicle Status

Bluetooth

Application Management

Voice Commands

HTML Applications

Multimedia

Launcher AuthorizationManagerComposition

Manager

JS Native Services API

Sencha JS/CSS3 Widgets

JS Lifecycle API

HTML5 browser engine

JNEXT PPS

Radio Navigation

HTML Home Screen

WebWorks Components

Emulated Web Server

Security

App Packaging (.bar)

JNEXT Comp Mgr JNEXT SQL

HMI Framework Components

Speech

Installer

QNX CAR Components


20/45

JNEXT Extensions

JavaScript Native Extensions

Based on NPAPI (Netscape Plugin API)

Access native services from JavaScript

Screen

SQLite

PPS


21/45

PPS

Persistent Publish Subscribe

Many applications can listen or write to

Event driven

Acts as a bridge between applications

JavaScript Native

Example: Radio application

UserInterface

FrameworkAPI

PPS

NativeApplication

HardwareDSP


22/45

Automotive Multimedia E

Access media library

Manage media sources (iPod, USB stick

Playback audio and video

Listen for media voice commands

Full ID3 support and Gracenote integrati

Play, pause, stop, volume controls

Supports seeking and playback status ev

Support for DLNA


23/45

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 a

Supports TI radio tuner on Jacinto 5

Radio profiles configurable for different


24/45


25/45

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/45

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/45

Application Management

Get a list of applications

Determine which applications are runnin

Listen for new application installations

Start and stop applications

Switch between active applications

Position application windows

Receive application events


28/45

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


29/45


QNX CAR FrameworkJNEXT ExtensionsPPSFramework APIs



Questions?


30/45

Sencha Touch 2

JavaScript framework optimized for mob

Rich JavaScript components

CSS 3 animations

MVC architecture

Dynamic dependency loading

Stunning interactive charts

Reduced development time

Image Sencha Inc. All rights reserved.


31/45

Optimized for embedded

Mobile platforms are embedded platform

Performance is key

Hardware accelerated animations

Event based architecture

Modular design

Auto-detects platform and optimizes


32/45

Rich Components & Anim

Lists

Data Grids

Forms (buttons, drop-down menus, check

Toolbars

Tabs

Overlays

Carousels

and all of these components can be an


33/45

MVC Architecture

Clean code = happy developers

Facilitates teamwork

Keep applications modular and organize

Respond to events from multiple control

Allows dynamic loading within your app


34/45

Dynamic Dependency Lo

Load what you need when you need it

Faster start-up time

Lowers memory usage

No-hassle setup


35/45

Sencha Designer

Create applications quickly and easily

Drag and Drop user interface

Create custom components

Easy data connectivity

Automatic code generation



36/45

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/45

Reduced Development Ti

Complex applications in weeks, not mon

MVC structure keeps code clean, bug co

Easy to pin-point causes of bugs

Spend less time making common compo


38/45



ToolsSencha Touch 2Sencha Designer

Web Packager Web Inspector


Questions?


39/45

Web Packager

Web Packager binaries and packaging / iinstructions are available on Foundry 27

Binaries

Packaging and Installation Instructio

Will be replaced by BlackBerry WebWorautomotive APIs

WebWorks official site

Ripple
http://community.qnx.com/sf/frs/do/viewRelease/projects.qnx_car_2/frs.alpha_1.packager_toolshttp://community.qnx.com/sf/frs/do/viewRelease/projects.qnx_car_2/frs.alpha_1.packager_toolshttp://community.qnx.com/sf/wiki/do/viewPage/projects.qnx_car_2/wiki/PackageHtml5Apphttps://bdsc.webapps.blackberry.com/html5/https://bdsc.webapps.blackberry.com/html5/http://ripple.tinyhippos.com/http://ripple.tinyhippos.com/http://ripple.tinyhippos.com/http://ripple.tinyhippos.com/https://bdsc.webapps.blackberry.com/html5/https://bdsc.webapps.blackberry.com/html5/http://community.qnx.com/sf/wiki/do/viewPage/projects.qnx_car_2/wiki/PackageHtml5Apphttp://community.qnx.com/sf/frs/do/viewRelease/projects.qnx_car_2/frs.alpha_1.packager_toolshttp://community.qnx.com/sf/frs/do/viewRelease/projects.qnx_car_2/frs.alpha_1.packager_tools


40/45


41/45

Web Inspector - Resource

See all files loaded by the application

HTML pages

Images, Scripts, Stylesheets

Databases, Local Storage, Session St

Application Cache

Cookies


42/45

Web Inspector - Network

List of all network request

For each request, you can see

A timeline of when each file started tduration of each request

HTTP response codes

Transfer time and latency


43/45

Web Inspector - Scripts

List of all loaded scripts

Set breakpoints

Step through the code

Inspect variables / modify them on-the-f

Execute arbitrary code from the console



44/45



ToolsSencha Touch 2Sencha DesignerWeb PackagerWeb Inspector


Questions?


45/45

2011 QNX Software Systems Lnames are or may be registrademarks in the U.S. an

information herein is for informarepresents the current view o

Limited (QSS) as of the date of t

QSS must respond to chanshould not be interpreted to bpart of QSS, and QSS cannot

any information provpresentation. QSS

REPRESENTATIONS OR COOR STATUTORY, AS T

Marc Lapierre, Software [email protected]

html 5 programming for qnxcar

Documents