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

Whats 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

http://www.html5rocks.com/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

Whats happening day-to-day? www.html5trends.com

http://www.html5trends.com/http://www.html5trends.com/http://www.html5trends.com/

Is an HTML5 app limited?

Not really! Heres 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

http://chrome.angrybirds.com/resortico.comhttp://www.benjoffe.com/code/games/torus/http://www2.nihilogic.dk/labs/canvas_music_visualization/http://creativefan.com/20-shockingly-cool-html5-canvas-applications/http://hootsuite.com/http://mail.google.com/http://www.google.com/calendarhttps://docs.google.com/http://developers.facebook.com/docs/guides/mobile/https://touch.www.linkedin.com/login.htmlhttps://read.amazon.com/http://blog.box.net/tag/html5/http://www.pandora.com/http://creativefan.com/html5-apps/http://www.hongkiat.com/blog/html5-web-applications/

Dispelling the myths

HTML5 apps require an Internet connection

Falseyou 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 tags

, , , , ,

, , ,

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

http://www.chromeexperiments.com/webglhttp://www.ibiblio.org/e-notes/webgl/webgl.htmhttp://www.ibiblio.org/e-notes/webgl/webgl.htmhttp://www.ibiblio.org/e-notes/webgl/webgl.htm

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

Whats 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 iPadAndroid 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.

http://html5test.com/

Maintaining WebKit

Tempting to Do It Yourselfinitially thats 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

QNXs Torch browser team has 50 dedicated engineers,

working on browser technologies since 2001

QNX CAR HMTL5 framework