CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
At CES 2013, General Motors announced the availability of a new SDK to allow third party developers to create apps to run on GM’s in-dash infotainment system. For the first time ever, third party developers could download an SDK and develop apps to run on the vehicle’s infotainment system.
GM’s in-vehicle SDK is based on a WebKit HTML5 engine that supports most features of Google Chrome including the Canvas and Video elements. In addition to this very capable browser platform, the GM SDK adds JavaScript APIs to interact with the vehicle and CSS styles to allow your application to be visually consistent with the rest of the infotainment system.
Getting the Toolkit
Go to http://developer.gm.com and register to join their developer program. To download the SDK, go to the “FAQ” page and download the SDK from the “Documentation and Downloads” section. The SDK zip file contains a Word document describing how to install it into Eclipse. Please note, you have to have the Eclipse Juno EE version for the GM SDK to work properly. It will install successfully on some of the other editions only to error out when you try to actually create a project.
Running For The First Time
After you’ve installed the SDK into eclipse, you will have a new option called, “New Dashboard Web Application Project” in the GM folder of your new file dialog. Choosing this option will take you through a wizard to configure a project for you that will be compatible out of the gate with the GM infotainment emulator. On the template step of this wizard, choose “Code Samples ATT Project” and accept all of its default configuration for the facets step.
If you click run on the generated project, your application will run inside of the GM Infotainment Emulator shown in the image below. The first screen of the emulator is the 3rd party app selection screen. All of the apps you have created in the emulator will appear here. The icon and the app name can be changed by altering the Config.xml file in your project. The Config.xml file also defines what HTML file the user will be navigated to when they tap your application to launch it.
The GM Infotainment Emulator’s App Choosing Screen
The emulator itself has buttons to fire events like vehicle ignition, gear shifts and emulating the vehicles built in navigation capability so you can design apps that interact with the GM supplied navigation functions. The emulator is actually an instance of Google Chrome and if you right-click a blank area and choose inspect you have access to the full suite of Chrome development tools including the ability to see the error console, which is indispensable for script debugging.
The generated project template is a large test-harness of GM API functions and provides a good source of examples to copy/paste from as you explore the toolkit. Running this pre-configured template results in an output seen in the screenshot below.
The default application template in action
In-Dash UI
You can technically make your app look like anything you want including the ability to tweak or change every last bit of CSS and HTML you desire. That said, your app will provide a better experience for the user if you try to stick with the button styles and basic conventions of GM’s infotainment system. It would be jarring for users to be clicking through a system where they have learned that buttons look a particular way only to click into your app and have them look completely different.
To utilize the UI APIs provided you will need to create html tags that will serve as containers for the GM API to render its buttons and widgets inside of.
<div id="ButtonContainer"></div>
You then create a new instance of the object you want to create passing in all of the parameters, then call render to get the component to actually emit the HTML and wire up the JavaScript events on the page.
var sayHello = new gm.widgets.Button({ label: "Say Hello",
callBack: function() {
gm.ui.showAlert(function(){}, function(){},
{
alertTitle : 'The Alert Title',
alertDetail : 'Some details about the alert.',
primaryAction : function(){
//OK
},
secondaryAction : function() {
//CANCEL
},
primaryButtonText : 'OK',
secondaryButtonText : 'CANCEL'
});
},
parentElement: document.getElementById('ButtonContainer')
});
sayHello.render();
In-dash infotainment systems don’t have an external keyboard and the space is much more limited than the typical smartphone. For this reason, when keyboard input is necessary, you need to initialize a keyboard component for each section of your page that has keyboard input. Before you just apply it to the body tag, keep in mind there are different keyboards including number only inputs so it’s best to keep the keyboard components constrained to particular parts of the UI.
As before, in the HTML you only include the container.
<div id="text-input"></div>
In the JS file, you create an instance of the TextField referencing your container HTML element then call the render() function to create the GM infotainment styled textbox. Next you need to create an instance of the Keyboard object also referencing the parent html element again.
var textField = new gm.widgets.TextField({
parentElement: document.getElementById('text-input')
});
textField.render();
new gm.widgets.Keyboard({sender: 'text-input', language: "en-US",
kbType:1, feedbackMode: 0, Theme: 'gmc'});
If you have multiple TextFields with the same parent managed by the keyboard, when the user touches the first text field they will enter a kind of “keyboard wizard” where they will be prompted to fill each textbox in order before the window dismisses.
Non-UI Capabilities
The non-UI parts of the toolkit allow you to access a wide variety of vehicle telematics including VIN, fuel level, tire pressure and much more. You can query the audio system to see what radio station it is tuned to or play your own audio or even video.
When the user has a GPS destination set they are navigating to, you can query that destination and track progress toward it. You can utilize this information to present information that you think is relevant to their current journey.
If the user has a phone paired to the infotainment system, you can place calls, send text messages and access the internet. Since users won’t always have their phone paired, it is critical that your application behave appropriately when offline and if you need the internet to complete a particular operation that your provide suitable prompts to direct them to connect their phone.
Driver Distraction
Driver distraction is always a concern on any application that can run in-vehicle and you should be very sensitive to this or your application will not be approved for use. The GM SDK provides the ability to query the vehicle’s speed to know whether or not the vehicle is in motion. If the vehicle is in motion your app should go into a minimal interaction mode to disallow keyboard input, playing of video and anything else that could be deemed a material driver distraction.
Conclusion
GM’s innovative in-vehicle SDK is a breakthrough first for the automotive industry and holds great promise for innovation. For far too long, vehicle infotainment systems were limited to a few pre-loaded first party apps but not for the first time any developer can create and innovate on the in-vehicle platform.
About the Author:
David Talbot has over 14 years of experience in the software industry and specializes in building rich UI web applications. He is also the author of Applied ADO.NET and numerous articles on technology. He can be reached at david@legendarycode.com
