html5 in automotive - web2day 2014
TRANSCRIPT
![Page 1: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/1.jpg)
HTML5 in Automotive!
Alexandre Morgaut
![Page 2: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/2.jpg)
PresentationAlexandre Morgaut
W3C AC member
Wakanda Team
Community manager
Web Architect
JS, REST, NoSQL@amorgaut
AMorgaut
![Page 3: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/3.jpg)
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/
![Page 4: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/4.jpg)
Automotive & Web Platform BG
http://www.w3.org/community/autowebplatform/
![Page 5: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/5.jpg)
![Page 6: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/6.jpg)
![Page 7: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/7.jpg)
![Page 8: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/8.jpg)
![Page 9: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/9.jpg)
![Page 10: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/10.jpg)
![Page 11: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/11.jpg)
MembersIntel QNX Verisign Opera Nokia Blackberry Vodaphone Sharp
Porsche Hyundai Volkswagen Ford* Continental Automotive* KKDI LG Electronics ...
![Page 12: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/12.jpg)
QNX Architecture
![Page 13: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/13.jpg)
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
![Page 14: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/14.jpg)
Other SolutionsAndroid
Compatibility limited to Android devices
Android not yet automotive grade
!
MirrorLink
Responsiveness lacking today
Solves phone to car problem, nothing else
![Page 15: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/15.jpg)
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/
![Page 16: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/16.jpg)
JavaScript API
![Page 17: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/17.jpg)
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
![Page 18: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/18.jpg)
API proposals
Genivi
Tizen
QNX
Webinos
http://www.w3.org/community/autowebplatform/wiki/Main_Page#Auto_and_Web_Platform__API_draft_proposals
![Page 19: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/19.jpg)
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"); } }
![Page 20: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/20.jpg)
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!");!}
![Page 21: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/21.jpg)
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);
![Page 22: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/22.jpg)
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';! } ! } !
![Page 23: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/23.jpg)
Current Drafts
Vehicle Information API
Vehicle Data Interfaces
http://www.w3.org/community/autowebplatform/
![Page 24: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/24.jpg)
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; };
![Page 25: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/25.jpg)
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
![Page 26: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/26.jpg)
Promises
-> CommonJS
-> WHATWG - HTML5
-> W3C
-> ECMAScript 6
![Page 27: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/27.jpg)
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"); });
![Page 28: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/28.jpg)
Ripple Emulator
Blackberry, Apache incubator, Chrome extension, Phonegap/Cordova, QNX…
![Page 29: HTML5 in automotive - web2day 2014](https://reader033.vdocuments.mx/reader033/viewer/2022052821/554a0153b4c905e56c8b50d4/html5/thumbnails/29.jpg)
Thanks
http://www.w3.org/community/autowebplatform/
@amorgaut http://about.me/amorgaut