The Garmin DeviceDisplay JavaScript module is a drop-in web component for easily connecting any web site to Garmin GPS devices. With a few lines of code it can be configured to:
- Generate all the user interface components for communicating with devices.
- Manage the life-cycle necessary to find, read and write to devices.
- Assist the user in downloading the plugin the first time they visit the web site or when they need to upgrade.
Getting Started
Most developers will be able to figure out how to use the DeviceDisplay class from these examples when cross-reference to the Options Documentation. The generated Javascript Documentation (JSDoc) is a good place to find more information about the capabilities of the code.
All example pages have these basic requirements:
- script tag referencing GarminDeviceDisplay.js (automatically includes required scripts)
- script tag referencing prototype.js (kept separate since it is a third party library)
- style tag referencing the standard communicator.css (optional)
- a method named load() that creates the new Garmin.DeviceDisplay object
- registration of the load method in the “onload” attribute of the HTML body element
- div element with the id “garminDisplay” that is passed into the constructor of the Garmin.DeviceDisplay object. This is where the communicator will be rendered.
- unlock code for developer.garmin.com. Note the plugin does not require to be unlocked when running from localhost servers and the local file.
Examples:
Not all examples will be highlighted, but they may be browsed so feel free to look at the source which is may provide helpful hints.
Each example provides only the configuration code specific to the example. The configuration code in each example will not work if the basic requirements bulleted above are not met.
- Hello Device - Displays a connected device.
- Send Waypoint - Sends geo-coordinates to a device with minimal UI
- Read and Map Waypoints - Reads Tracks and Waypoints and previews them on a map.
Look and Feel
Although the Communicator API has a default style that provides a common look and feel in many websites the Communicator may be completely customized to look quite different. The display is controlled by the Cascading Stylesheet (CSS), developers may choose to customize the display’s look and feel to better match the host website.
Since a portion of the Communicator API is open source we encourage others to create their own styles that can be shared with the standard style. If you have a style that you’d like to share please send the file to Developer.Connect@garmin.com and we’ll be sure to post it.