Download - The HTML5 Effect - How HTML5 Will Change the Networked Car · The HTML5 Effect - How HTML5 Will Change the Networked Car ... Firefox IE 28-Mar-11 18-Oct-11 10 14 ... How HTML5 Will

Transcript

Renesas Electronics America Inc. © 2012 Renesas Electronics America Inc. All rights reserved.

Class ID:

The HTML5 Effect - How HTML5 Will Change the Networked Car QNX Software Systems

9C03I

What is HTML5?

• Overview

• Trends

• Dispelling the myths

• Chrome vs

chromeless

Agenda

HTML5 features

• New features

• New tags

• New CSS

• WebGL

• HTML5 architecture

HTML5 for automotive

• Overview

• Problems it solves

• Example HTML5

integration

• What’s left

QNX and HTML5

• Torch browser

• QNX CAR 2 framework

• Comparative solutions

What is HTML5?

• Shorthand for mix of web technologies

– HTML5 + CSS3 + JavaScript

– Also can include AJAX + JSON + XML + XHTML

• Goal is to improve semantics, efficiency, usability and

interoperability of web development

– Specify enough implementation to ensure

compatibility

• http://www.html5rocks.com

HTML5 trend • Installed base for mobile devices with HTML5 forecast to exceed 500 million before

2012, more than 2.1 billion in 2016

• “HTML5 features will enable the web to challenge native applications in terms of rich user experiences.” – HTML5 for Mobile Devices and Tablets, ABIResearch, June 2011

• “Growing support is rapidly establishing HTML5 as the dominant cross-platform runtime.” • HTML5 threatens to Disrupt the Disruptors, CCS Insight, July 2011

• “Something in the last 18 months kicked the HTML5 adoption machine into overdrive.” • Why companies are flocking to HTML5, CNN Money, August 2011

• What’s happening day-to-day? www.html5trends.com

Is an HTML5 app limited?

Not really! Here’s some examples of what you can do…

Games

• chrome.angrybirds.com, resortico.com, Torus

• Certain classes of games can easily be handled

3D + Graphical effects

• SoundManager2

• WebGL for OpenGL/3D apps

• Direct canvas manipulation

Rich apps

• HootSuite, Google (Gmail, calendar, docs), Facebook,

LinkedIn, Kindle Cloud Reader, Box.net, Pandora…

Also see

• CreativeFan, HongKiat

3D + Graphical effects

Rich apps

Games

Dispelling the myths

• “HTML5 apps require an Internet connection”

– False—you can build unconnected embedded

systems using HTML5; even browser has offline apps

• “HTML5 is very far way”

– False – ratification has been estimated 2020,

however W3C recommendation status is expected in

2014. HTML5 is here now.

• “HTML5 needs a browser”

– No; you need a chromeless browser or HTML5 engine

Chrome vs Chromeless

• “Chromeless” is a plain HTML5 rendering engine

• “Chrome” is the UI that the browser adds

– toolbar, navigation, buttons, menus, status,

scrollbars, history, etc.

– Plug-in management

Browser chrome

Java Script HTML5

rendering engine

Browser plug-ins

New features in HTML5

• Standalone app features

– local storage, database access, offline applications,

threading, drag + drop, file access, geolocation,

orientation, speech

• Multimedia improvements

– audio, video, canvas, webGL, inline SVG

• Sandbox

– nested browsing through iframe

New semantics tags

• Replacements for overused <div> tags

– <article>, <aside>, <footer>, <header>, <hgroup>,

<mark>, <nav>, <section>, <time>

• Application markup improvements

– New controls like lists, menus, meters, etc

– New form types: email, date, search, tel, color, etc.

• Better DOM manipulation & selection

– Elements by class, CSS, custom data

New CSS3 features

• Hardware acceleration (certain implementations)

• Transitions, transforms, animations

– Ease in/out, linear, or custom applied to position,

colors, fonts, boxes, sizing, alpha, strokes, shadows,

borders & margins, etc.

– Scale, shear, rotate, translate, 3D

• Text control

– selection, wrapping, font options, alpha

• Stylistic elements

– gradients, rounded corners, shadows,

reflections, borders

Web GL

• JavaScript interface to 3D graphics

• WebGL based on OpenGL ES 2.0

• Renders to HTML Canvas, uses DOM

• Managed by Khronos group

• http://www.chromeexperiments.com/webgl

• http://www.ibiblio.org/e-notes/webgl/webgl.htm

WebGL Bookcase

Games Ocean Simulation

Why HTML5 for auto?

Build on something bigger than automotive

• Ecosystem – developers, tools, companies

• Standards – no vendor lock-in

• Flexibility – fluid deployment and architectures

• Branding –brand same app on different cars with CSS

• Lifespan – will be supported for long time

• Time to market – easy to use and leverage

• Powerful – rich application environment

• Cross-platform – deploy apps on phones and car

Example HTML5 integration

QNX and HTML5

QNX “Torch” Browser

Support for HTML5 standards • Audio and video (through QNX multimedia technology) • Geo-location • Canvas • WebSockets • Offline applications • Session storage

Enhanced browser • High performance panning and scrolling (composition

manager) • Pixel-accurate zooming • Physics-based scrolling and panning • Adobe Flash Player 11 based plug-in • JavaScript JIT

What’s in a browser?

Browser requires a lot of functionality beyond WebKit

– WebKit is a rendering engine, not a browser

Additions provided by QNX to make a full browser

• Platform abstraction layer

• Zooming, scrolling, panning, and tile management

• Image caching, page caching

• Event handling for touch, mouse, keyboard, gesture

• History, bookmarks, page navigation

• User configuration and settings

• Networking, URL management

• Multimedia support, GPU acceleration

• Plug-in support

• Download management

• etc

Torch optimizations for speed, power + memory

• Upstream WebKit is not optimized for mobile use

• Torch browser optimized for:

– power consumption (e.g. throttle background

threads)

– memory usage (e.g. unified tile pool)

– overall speed (e.g. selective image down-sampling)

WebKit

WebKit architecture

• HTML5 in a browser

– Browser-based apps and websites

• HTML5 out of the browser

– UI/HMI can be built in HTML5

– Standalone apps

– Chromeless container runs HTML5 content

WebCore JavaScript

Core

Memory manager

HTTP

framework

MIME type

content filters OS services

Browser control API

Video

SVG

Audio

Browser UI

OS adaptation

Browser components/framework

QNX enhanced process model

WebKit QNX

Same browser, same tab √ √

Same browser, new tab - √

Same browser, different process - √

New browser, existing tab - √

New browser, new tab - √

• Instituting new process models extremely hard to do

with WebKit as it stands

• Torch browser provides ultimate trade-off flexibility in

– multi-threaded execution

– memory consumption

– crash resiliency

0

50

100

150

200

250

300

350

400

450

Chrome QNX(PlayBook)

Safari iPad Android Firefox IE

28-Mar-11

18-Oct-11

10

14

OS2 OS1

5.0.5

5.1

iOS4

iOS5

2.3

3.2

3.5

7

8 9

Maintaining a browser: the arms race

Scores are reported values when running each browser against html5test.com, indicating level of support for new HTML5 features. Html5test.com continually raises the total score as new features are adopted and added to the tests.

Maintaining WebKit

Tempting to “Do It Yourself”—initially that’s what QNX did

Challenging without dedicated engineers and expertise

• Sub-optimal performance

• Portability problems between GPUs

• Finding and fixing crashes

• Finding and fixing memory leaks

Difficult to keep updated

• Very fast moving port

• Inability to synchronize with upstream builds

• Difficult to re-submit changes into trunk

QNX’s Torch browser team has 50 dedicated engineers,

working on browser technologies since 2001

QNX CAR HMTL5 framework

• Comparable to ChromeOS or WebOS, but for automotive

– Pure HTML5 environment w/ front-end + apps

(unlike ChromeOS or WebOS)

– Pure HTML5 allows entire user interface (behaviour,

launcher, controls, apps, etc) to be reskinned easily

– Sencha Touch or other third party for widgets

– QNX-designed infotainment skin

• App world integration

QNX CAR and native access

• Bindings to native

– general PPS, app launcher, authorization manager,

– graphics & composition manager

(window management of other processes, etc)

– SQL database

• Interact + control any app from HTML5

QNX CAR and WebWorks

• WebWorks is the RIM SDK for building HTML5 apps

– Targets BlackBerry phones and PlayBook with profiles

• QNX CAR leverages parts of WebWorks (tools & runtime)

– Whitelisting for all resources, and cross-origin calls

– .bar packaging tools

– “Ripple”: embedded browser emulator environment

• QNX CAR APIs replace mobile-centric WebWorks APIs

– OEMs can extend or implement new APIs

– OEMs control what native APIs are exposed

• WebWorks futures: “Automotive” profile

QNX CAR HTML5 tooling

• Web Inspector

– accessed locally (on target) or remote (on host)

– examine and debug, performance statistics

– created by Torch team and donated to WebKit

• WebWorks packaging

– creation of bar file

– container for html, javascript, images, audio, config,

data files, etc

• Third party tools (Sencha, jquery, etc)

– provided by third party, tested with QNX CAR

– toolset not yet locked down

What’s left to solve for HTML5 in the car?

– Driver distraction framework

• QNX working on a proposal, will be working to standardize through ITU-T

– As yet unproven in automotive

• Testing out early access with several lead OEM/Tier1’s now

– Needs optimization to match performance

• Torch browser provides mobile optimizations + GPU h/w acceleration

– Tooling not quite there

• QNX will have web inspector, WebWorks packaging, Sencha tools

– Auto-specific frameworks

• QNX CAR 2 framework is fully HTML5 and auto-centric

Other solutions?

• Android

– Provides a solution to bringing apps into the car

– Can run HTML apps, but not a pure HTML environment

– Android app compatibility limited to Android devices

– Android not yet automotive grade

• Memory leaks, fragmentation, boot time, automotive multimedia, native access, app

lifecycle

• Commercial/licensing challenges

• MirrorLink

– Responsiveness lacking today

– Solves phone apps in car problem, nothing else

© 2012 Renesas Electronics America Inc. All rights reserved. 28

Questions?

© 2012 Renesas Electronics America Inc. All rights reserved. 29

Please utilize the ‘Guidebook’ application to leave feedback

or

Ask me for the paper feedback form for you to use…

Please Provide Your Feedback…

Renesas Electronics America Inc. © 2012 Renesas Electronics America Inc. All rights reserved.

© 2011 QNX Software Systems Limited. QNX, NEUTRINO,

MOMENTICS, AVIAGE, PHOTON, PHOTON MICROGUI are

trademarks of QNX Software Systems Limited, which are

registered trademarks and/or used in certain

jurisdictions. All other trademarks belong to their

respective owners. 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.

The HTML5 Effect - How HTML5 Will Change the Networked Car

Renesas DevCon 2012

Session 9C03I