html5 in automotive - web2day 2014

HTML5 in Automotive!

Alexandre Morgaut

PresentationAlexandre Morgaut

W3C AC member

Wakanda Team

Community manager

Web Architect

JS, REST, NoSQL@amorgaut

AMorgaut

System Application WGMISSION

Define a runtime environment

Define a security model

Define APIs to provide native like applications

SPECIFICATIONS

App Lifecycle, App URI, Task Sceduler

Contacts, Messaging, Telephony, TCP UDP Sockets

http://www.w3.org/2012/sysapps/

Automotive & Web Platform BG

http://www.w3.org/community/autowebplatform/

MembersIntel QNX Verisign Opera Nokia Blackberry Vodaphone Sharp

Porsche Hyundai Volkswagen Ford* Continental Automotive* KKDI LG Electronics ...

QNX Architecture

Why HTML5 for Auto

Build on something bigger than automotiveEcosystem – developers, tools, companiesStandards – no vendor lock-inFlexibility – fluid deployment and architecturesBranding – brand same app on different cars with CSSLifespan – will be supported for long timeTime to market – easy to use and leveragePowerful – rich application environmentCross-platform – deploy apps on phones and car

Other SolutionsAndroid

Compatibility limited to Android devices

Android not yet automotive grade

!

MirrorLink

Responsiveness lacking today

Solves phone to car problem, nothing else

TIZEN IVI in Jaguar LandRover

The proof of concept has been created on openly available hardware with an Intel CPU, using the Tizen open source Linux distribution as a software platform with latest HTML5 graphical user interface. Tizen was chosen as a GENIVI compliant reference.http://www.tizenexperts.com/2013/04/jaguar-land-rover-kerjasama-dengan-xchanging-dan-arynga-untuk-update-software-tizen-ivi/

http://tizentalk.com/2013/05/tizen-ivi-proof-of-concept-on-the-land-rover/

JavaScript API

Considered W3C APIsWeb Sockets

App Cache

Web Storage

Geolocation

Device Orientation

Web Audio

Media Capture

Proximity Sensor

Telephony API

...

http://www.w3.org/community/autowebplatform/wiki/Main_Page/CollectionOfApis

API proposals

Genivi

Tizen

QNX

Webinos

http://www.w3.org/community/autowebplatform/wiki/Main_Page#Auto_and_Web_Platform__API_draft_proposals

Genevi/LGE code example

// Define constants for transmissionGearType var TRANSMISSIONGEARTYPE_AUTO = 1; var TRANSMISSIONGEARTYPE_MANUAL = 2; // Get a transmission gear type from VehicleInfoEvent vehicle.get("vehicleinfo_transmissiongeartype", handleVehicleData, handleError) !function handleVehicleData(data) { if (data.transmissionGearType == TRANSMISSIONGEARTYPE_AUTO) { console.log("Automatic transmission equipped"); } else if (data.transmissionGearType == TRANSMISSIONGEARTYPE_MANUAL) { console.log("Manual transmission equipped"); } }

Tizen code example

navigator.vehicle.get("HVAC", onsuccess, onerror);! !function onsuccess(value) {! var hvacsettings = value;! value.AirflowDirection = value.AIRFLOWDIRECTION_FRONT | value.AIRFLOWDIRECTION_DEFROSTER;! navigator.vehicle.set("HVAC", value, onsetsuccess, onerror);!}!function onerror(e) {! window.console.error(e.message);!}!function onsetsuccess() {! window.console.log("success!");!}

QNX code example

//define a callback function function myCallback(audioMixerItems) { //iterate through the changed items for (var i = 0; i < audioMixerItems.length; i++) { console.log( //a car.audiomixer.AudioMixerSetting value "audio mixer item setting = " + audioMixerItems[i].setting + '\n' + //a car.Zone value "audio mixer item zone = " + audioMixerItems[i].zone + '\n' + //a numeric value "audio mixer item value = " + audioMixerItems[i].value + '\n\n' ); } } !var watchId = car.audiomixer.watchAudioMixer(myCallback);

Webinos code example

 // checking if driver door is openend. vehicleService is the vehicle service,! // discovered through the webinos Discovery API, ! // that has been selected by the user  ! vehicleService.vehicle.addEventListener("doors", doorHandler);! function doorHandler(doors){!  if(doors.driver){!        document.getElementById("info").innerHTML = 'Please close driver door';!  }  ! }  !

Current Drafts

Vehicle Information API

Vehicle Data Interfaces

http://www.w3.org/community/autowebplatform/

Vehicle Information API

The VehicleInterface interface represents the base interface to get and set all vehicle properties. ![NoInterfaceObject] interface VehicleInterface { Promise get (optional Zone zone); Promise set (object value, optional Zone zone); unsigned short subscribe (VehicleInterfaceCallback callback, optional Zone zone); void unsubscribe (unsigned short handle); readonly attribute Zone[] zones; };

Vehicle Data InterfaceVehiculeSpeed

EngineSpeed

VehiculePowerModeType

PowerTrainTorque

AcceleratorPedalPosition

ThrottlePosition

TripMeter

Diagnostic

Transmission

CruiseControlStatus

LightStatus

InteriorLightStatus

Horn

Chime

Fuel

EngineOil

Acceleration

EngineCoolant

DeadReckoning

Odometer

TransmissionOil

TransmissionClutch

Brake

…

7 categories - 53 Interfaces

Promises

-> CommonJS

-> WHATWG - HTML5

-> W3C

-> ECMAScript 6

Promise example

var vehicle = navigator.vehicle; var zone = new Zone; !vehicle.climateControl.set(value, zone.driver).then(function() { // first callback manage success console.log("successfully set acStatus"); }, function(error) { // second callback manage error console.log("there was an error"); });

Ripple Emulator

Blackberry, Apache incubator, Chrome extension, Phonegap/Cordova, QNX…

Thanks

http://www.w3.org/community/autowebplatform/

@amorgaut http://about.me/amorgaut