HTML5 in automotive  - web2day 2014
Upcoming SlideShare
Loading in...5

HTML5 in automotive - web2day 2014






Total Views
Views on SlideShare
Embed Views



3 Embeds 8 6 1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NoDerivs LicenseCC Attribution-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

HTML5 in automotive  - web2day 2014 HTML5 in automotive - web2day 2014 Presentation Transcript

  • HTML5 in Automotive ! Alexandre Morgaut
  • Presentation Alexandre Morgaut W3C AC member Wakanda Team Community manager Web Architect JS, REST, NoSQL @amorgaut AMorgaut
  • System Application WG MISSION 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
  • Automotive & Web Platform BG
  • Members Intel 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 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
  • Other Solutions Android 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.
  • JavaScript API
  • Considered W3C APIs Web Sockets App Cache Web Storage Geolocation Device Orientation Web Audio Media Capture Proximity Sensor Telephony API ... CollectionOfApis
  • API proposals Genivi Tizen QNX Webinos 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 + 'nn' ); } } ! 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
  • 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 Interface VehiculeSpeed 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 @amorgaut