Your SlideShare is downloading. ×
  • Like
HTML5 in automotive  - web2day 2014
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5 in automotive - web2day 2014

  • 980 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
980
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
21
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 in Automotive ! Alexandre Morgaut
  • 2. Presentation Alexandre Morgaut W3C AC member Wakanda Team Community manager Web Architect JS, REST, NoSQL @amorgaut AMorgaut
  • 3. 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 http://www.w3.org/2012/sysapps/
  • 4. Automotive & Web Platform BG http://www.w3.org/community/autowebplatform/
  • 5. Members Intel QNX Verisign Opera Nokia Blackberry Vodaphone Sharp Porsche Hyundai Volkswagen Ford* Continental Automotive* KKDI LG Electronics ...
  • 6. QNX Architecture
  • 7. 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
  • 8. Other Solutions Android Compatibility limited to Android devices Android not yet automotive grade ! MirrorLink Responsiveness lacking today Solves phone to car problem, nothing else
  • 9. 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/
  • 10. JavaScript API
  • 11. Considered W3C APIs Web 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
  • 12. API proposals Genivi Tizen QNX Webinos http://www.w3.org/community/autowebplatform/wiki/ Main_Page#Auto_and_Web_Platform__API_draft_proposals
  • 13. 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"); } }
  • 14. 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!");! }
  • 15. 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);
  • 16. 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';!   }  !  }  !
  • 17. Current Drafts Vehicle Information API Vehicle Data Interfaces http://www.w3.org/community/autowebplatform/
  • 18. 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; };
  • 19. 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
  • 20. Promises -> CommonJS -> WHATWG - HTML5 -> W3C -> ECMAScript 6
  • 21. 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"); });
  • 22. Ripple Emulator Blackberry, Apache incubator, Chrome extension, Phonegap/Cordova, QNX…
  • 23. Thanks http://www.w3.org/community/autowebplatform/ @amorgaut http://about.me/amorgaut