HTML5 AUTOMOTIVE 2013 White Paper Series

Transcription

1 HTML5 AUTOMOTIVE 2013 White Paper Series HTML5 based automotive apps are very adaptable and gaining popularity. WHAT S INSIDE HTML5 BENEFITS AND CHALLENGES page 1-2 SUGGESTED APPROACH page 3 APPLICATION ARCHITECTURE page 4-5 CONCLUSION AND SOURCES page 5 Easy to develop and adapt vs. optimization for automotive High-level development steps to achieve a solution Detailed illustration for JS application and multiple screen integration Building and maintaining an optimized browser

2 INTRODUCTION In our latest white paper we presented the rise of HTML5, the ongoing discussion among technologists about the suitability of HTML5 for mobile application development and the contrast between HTML5 and the traditional native development approach. In this white paper, we are focusing on the application of HTML5 in the complex automotive environment. Automotive systems must interact with external devices and with the Cloud, bringing new and complex integration and support challenges. Managing the interaction between these systems requires technologically advanced approaches in order to provide the best results. HTML5 BENEFITS Easy to develop and adapt Standard technology known to a wide pool of developers Easy to change the style utilizing CSS Supported on a broad range of hardware platforms The fact that HTML5 applications can be easily developed and adapted to various mobile devices lends itself well towards automotive systems, which, as a platform, have their own particular technology-based demands. In the market today, there are many HTML5 apps relevant to automotive systems and with the millions of developers working in HTML5 (JavaScript being the most popular language) we can expect to see an increase in the number of HTML5 based automotive apps as HTML5 continues to gain popularity. HTML5 provides the necessary infrastructure for automotive application development. An added benefit is that the style of the apps can be easily changed via CSS making this an adaptable process perfect for multiple platforms and Cloud technologies. Page 1

3 CHALLENGES AND SUGGESTED APPROACH HTML5 CHALLENGES A primary challenge to the realization of effective HMTL5 applications in the vehicle is building and maintaining a browser that is optimized to work specifically on automotive hardware. Unlike smartphones with a lifespan of 2-3 years, automotive hardware must remain relevant and well maintained for the entire lifetime of the vehicle (10 years). Consequently, the browser being utilized by automotive systems must have that same longevity while still supporting current technological standards as new developments arise. Another challenge is that the applications must be able to function as part of the vehicle-specific user interface. If the vehicle has multiple screens (head-unit, cluster display, high-mounted display, etc.), the applications must be able to run and interact with all screens simultaneously. Building and maintaining a browser Attracting third party developers Security and safety Multiple screens Rich UI and animations Of foremost importance with creating in-vehicle applications, is the safety and security of the automotive system, since any type of compromise puts the user at an increased risk. should be user restricted while driving and should never be allowed to corrupt the automotive system. Only specially provisioned applications should have access to the vehicle s information. OUR APPROACH The following are some high-level development steps for building a HTML5 solution: 1BUILD A BROWSER - The most challenging of the tasks, this step involves licensing or building a browser in-house and integrating with the target platform. Typically, integration and optimization with both the hardware and input methods are involved while unnecessary components are removed and performance accelerated. Restricted browser vendors (such as Dolfin, Obigo, Access Systems and ZetaKey) can be used. The key advantage of working with a third party web browser provider is that they can be expected to develop and maintain the solution over the lifespan of the vehicle. Another option is to develop an in-house solution based on the Webkit browser. The Webkit browser can be based on the QT distribution or the latest version can be obtained through the web. The Webkit browser can be further optimized with a faster Javascript engine (i.e. V8 from Google). Another option is to use another well-maintained open source browser such as Chromium (Google based). Page 2

4 2 OUR APPROACH High-level development steps continued... NATIVE INTEGRATION - The browser can be further integrated with native components. The challenging user interface tasks can be handled using native components, either by utilizing browser plugins or by running separate processes, which can interact with the HTML applications via HTML/Socket servers. Examples of such components include the following: media player, navigation/mapping, hands-free phone integration, etc. Access to this functionality can be given to third party applications though specific APIs DEVELOPMENT STEPS BUILD A BROWSER NATIVE INTEGRATION CREATE A SIMULATION ENVIRONMENT HARDWARE BUTTON INTEGRATION APPLICATION JS ARCHITECTURE 3CREATE A SIMULATION ENVIRONMENT - In order to provide third party developers with the ability to create and test their 6 PROPRIETARY SDK applications, a simulation environment must be provided for desktop OS s (Windows, Mac and possibly Linux). The simulation environment should mirror the target platform browser environment, incorporate a user interface to allow hardware buttons to be simulated, provide the ability to install and remove 7 MULTIPLE SCREEN INTEGRATION applications and provide a console output and web application debugging capabilities. Web Inspector can be enabled for Webkit browsers for HTML element viewer and JavaScript debugging HARDWARE BUTTON INTEGRATION - Automotive systems may have touch screen controls and/or special hardware controls (steering wheel buttons, rotary knobs, etc). These controls must be integrated within the platform. It is highly recommended these controls be developed as standard navigation controls not requiring a special API (i.e. a rotary button that acts as a tab-control which changes the active focus). However, these controls can expose an extended JavaScript API to allow certain applications to direct them differently. The browser can inspect if the active element has a registered handler for the special control and if so, utilize its function, but if there is no registered handler, the browser can resort to the standard behavior. APPLICATION JS ARCHITECTURE - One of the major requirements and benefits of a HTML5 based automotive system is to allow third party applications to run. The system must provide a platform where the applications can be downloaded, executed and can communicate fully with each other. A possible architecture is illustrated and described in detail on page 4. PROPRIETARY SDK - Automotive systems may provide additional functionality such as access to vehicle information, GPS, diagnostics information, driving status, etc. The automotive system may also provide a proprietary SDK to allow third party applications to communicate with each other and provide a better integration experience. This can be achieved by using a JavaScript API that applications are able to easily link to and use. It is recommended that a standard JavaScript API be used for standard functionality such as location API (GPS). This will allow the applications to be more portable and easier to develop. 7MULTIPLE SCREEN INTEGRATION - In the automotive environment applications can utilize multiple screens, such as center stack display where the main application can run, and other displays such as the instrument cluster where additional information can be displayed (i.e. Internet radio station, the next turn-by-turn instruction, etc.). A possible multi-screen architecture is illustrated and described on page 5. Page 3

5 APPLICATION JS ARCHITECTURE JQuery Third Party jquery Widgets and UI Frameworks,.css Custom Widgets and Modules,.css,.css,.hmtl Extensions JS Library *optional App Management Framework manages App Connector Library HTML5 is implemented as the main user interface framework using the standard HTML approach. Abstractions are created through the JavaScript libraries. Independent JavaScript components and applications are used for a modular approach. For more complicated user interface elements, the browser has the ability to be extended with native components. Modules are kept separated for easier development and application maintenance. jquery is used as the base user interface framework because of the availability of third party user interface widgets. User interface frameworks are also available as an extension of jquery. The lifetime and window management of the applications are managed through the App Management Framework. These applications run separately through div and iframe elements. The App Connector Library is the communication liaison between the applications and the App Framework Management which are independent modules. Both the App Management Framework and the App Connector Library utilize JavaScript. The Extension JS Library is an optional feature. As long as everything performs correctly using pure JS/HTML, this feature is not necessary. Its role is to expose the native plug-in functionality as JavaScript. Page 4

6 MULTIPLE SCREEN ARCHITECTURE High Mounted Display (HMD),.css,.html Webkit AppHost (Qt) Instrument Cluster Display (ICD) Intra-System Messaging Module The automotive system has the ability to run multiple applications as illustrated above by using either a high mounted display (HMD), an instrument cluster display (ICD) or a center stack display (CSD). The communicate with the Intra-System Messaging Module (ISM) via an AppHost (Qt). The ISM allows applications to broadcast messages or register message listeners. The AppHost broadcasts messages to other hosts and in return these are translated to JavaScript and are broadcast back to the ISM. This mechanism can be used for animation or other UI synchronization between the screens.,.css,.html Webkit AppHost (Qt) Center Stack Display (CSD),.css,.html Intra-System Messaging Module Intra-System Messaging Module CONCLUSION As highlighted above the main challenge to successful deployment of a HTML5 based system is building and maintaining an optimized browser specifically for automotive systems that is relevant for the entire lifetime of a vehicle. Other automotive specific factors must also be considered such as vehicle specific Human Machine Interfaces and multi-screen systems. The high-level architectures presented above can provide an effective approach for addressing some of these unique automotive challenges. Webkit SOURCES 1 AppHost (Qt) Page 5

7 ABOUT ABALTA Since 2003, Abalta Technologies has been focused on delivering innovative software solutions to the automotive industry. From embedded automotive applications to connected vehicle solutions, Abalta has worked with OEMs and Tier One suppliers to deliver meaningful innovations to their customers. Each member of our team has helped pave the way for the advancement of the connected vehicle today and Abalta continues to deliver meaningful software experiences for businesses and consumers alike. Our experience in developing and testing software spans industries, global markets and technical platforms. From automotive-grade solutions to smart phone apps and in between, Abalta has delivered hundreds of proven solutions to the market. Abalta s success in the field follows the continued adoption of technology in our lives today. We have managed programs across numerous segments including outdoor recreation, sport & fitness, navigation, travel & tourism and enterprise. Leveraging our prowess in software design and development, we have helped consumers connect with the world around them, with the brands they prefer, with their vehicles and with each other. Given our focus and dedication to the automotive and mobile technologies, our value-add extends beyond development with a rich depth of expertise and awareness from which our customers and partners can benefit. From technology advice to market awareness, Abalta maintains a view of the field that is unrivaled in the market today. Across our customer engagements, this knowledge has helped our partners bring ideas to market more quickly and more efficiently while improving the final result. Abalta Founder and President, Michael O Shea, merged Irish roots with a strong mission. Starting with the name Abalta -- which means talented and capable in Irish Gaelic -- and working towards completing the mission: To provide services and solutions to customers that would positively impact their businesses and the world. Bring unique talents and innovative capabilities to the table, resulting in their customers saying Those guys really made a difference here. LOS ANGELES SAN DIEGO BULGARIA 3510 Torrance Blvd., Suite 220 Torrance, California U.S.A. +1 (310) Weathers Place, Suite 101 San Diego, California U.S.A. +1 (858) Mladost 1-A, Bl. 548, Office 305 Sofia 1729, BULGARIA ABALTA TECHNOLOGIES, INC. 2013