The HTML5 Effect - How HTML5 Will Change the Networked Car · PDF fileThe HTML5 Effect - How...

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of The HTML5 Effect - How HTML5 Will Change the Networked Car · PDF fileThe HTML5 Effect - How...

  • 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


  • What is HTML5?



    Dispelling the myths

    Chrome vs



    HTML5 features

    New features

    New tags

    New CSS


    HTML5 architecture

    HTML5 for automotive


    Problems it solves

    Example HTML5


    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


  • 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?

  • Is an HTML5 app limited?

    Not really! Heres some examples of what you can do

    Games,, Torus

    Certain classes of games can easily be handled

    3D + Graphical effects


    WebGL for OpenGL/3D apps

    Direct canvas manipulation

    Rich apps

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

    LinkedIn, Kindle Cloud Reader,, Pandora

    Also see

    CreativeFan, HongKiat

    3D + Graphical effects

    Rich apps


  • 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


    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

    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

  • 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


  • Torch optimizations for speed, power + memory

    Upstream WebKit is not optimized for mobile use

    Torch browser optimized for:

    power consumption (e.g. throttle background


    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


    Memory manager



    MIME type

    content filters OS services

    Browser control API




    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










    Chrome QNX(PlayBook)

    Safari iPadAndroid Firefox






    OS2 OS1









    8 9

    Maintaining a browser: the arms race

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

  • 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