Google Glass, the GDK, and HTML5

  • View

  • Download

Embed Size (px)


This presentation discusses how to create Glassware using the Mirror API, the GDK, and HTML5, along with a discussion of Live Cards and Immersions. Various demos are presented, and you will see a quadcopter launched, along with the code.

Text of Google Glass, the GDK, and HTML5

D3 Data Visualization

Google Glass, the GDK, and HTML5-Based Mobile Apps

SVCC (10/11/2014)

Oswald Campesato

Topics in This Session

Google Glass and Glassware

Glass Features (condensed summary)

What is the Mirror API

Some HTML5 Technologies

What is the GDK

PhoneGap and Google Glass

What about Android Wear

Some Glass Features (briefly)

Directions (ok glassget directions)

Video (ok glasstake a video)

Camera (ok glasstake a picture)

Translate (scan text and translate)

Answer gmail (voice input)

Voice-activated Android apps

Pictures/videos are backed up on G+

Touch pad (gesture detection in GDK):

Swipe left/right/down; tap; scroll

How to Create Glassware

Use the Glass Mirror API (lightweight/server-side)

Use Eclipse (or Android Studio) with the GDK

Use PhoneGap and add Glass-related plug-ins

Use the GDK + Mirror API to create hybrid apps:

Note: Glass hybrid apps refer to GDK + Mirror API, which is different from HTML5 hybrid apps

Glass Pattern Building Blocks

UI elements:

+ Static cards (Card class is deprecated)

+ Live cards (Android service): low & high frequency

+ Immersions

Voice commands:

+ Focus on the action, not the agent

+ Decrease time from intent to action

+ Is colloquial and easy to say

+ Is general enough to apply to multiple Glassware

Internet Access for Glass

Go to

Enter the name of a WiFi and the password

Scan the QR code with Glass

Okay Glassget directions (or whatever)

Note: GG remains tethered to your Android device even when you switch it off

Screencasting GG via MyGlass

1) Launch MyGlass on your Android phone

2) Tap MyGlass (top of device screen)

3) Tap Screencast (bottom of drop-down list)

4) Swipe left or right on your Android device

+ Swipe gestures update GG (and vice versa)

+ swipe left/forward: displays the present/future

+ swipe right/backward: displays the past

NB: Screencasting Glass-to-iOS-device works as well, but not from an iOS device to Glass

The Glass Mirror API (1)

lightweight: processes only on server-side

Reduces battery consumption (versus GDK)

Provides access to server-side Glass APIs

Easy to install

Supports static cards and timeline mgmt

Support for various languages:


A sandbox is available

Access requires a registered Glass device

The Glass Mirror API (2)

Static cards can contain:

+ Text, HTML, media (images and videos)

+ Standard and custom menu items

+ multiple pages (articles)

+ auto or manual pagination

Timeline management:

+ Subscribe to timeline notifications

+ LBS (location-based services)

The Glass Mirror API (3)

Disadvantages of using the Mirror API:

1) Internet access is required:

+ apps only work when in WiFi range

2) limited number of API calls (1000/day)

3) no voice trigger

4) No real-time (no animation)

5) Time delay receiving server response(s)

6) No device access:

+ Camera/Compass/GPS

NB: infrequent location updates

Glass Mirror API: what happens?

Step #1: user authenticates

Step #2: Glass stores credentials (server-side)

Step #3: Glass inserts static card in timeline

Step #4: Glass synchronizes timeline

Step #5: user sees static card on Glass

Glass Mirror API Quick Start Samples:

The GDK: Glass Development Kit

An add-on to the Android SDK

The GDK provides Android-based APIs

provides Glass-specific APIs

GDK-based Glassware runs on Glass itself

Use standard Android development tools

ICS (4.0.3) or higher

Simple installation: adb install abc.apk

Supports Timeline, cards, and immersions

Support for sensors, Menu, and UI

Support for touch pad and gestures

Support for media (sound/camera/voice)

The +/- of the Glass GDK


+ GDK-based apps work offline (Internet not required)

+ Unlimited access to GDK-based apps

+ Support for voice trigger

+ Real-time support (smoother experience)

+ support for animation effects

+ No delay (no server access required)

+ Device access (camera/compass/etc)


+ apps can drain the battery

+ more difficult to install GDK-based apps

Glass GDK Set-up

Option #1 software installation:

Eclipse (3.5 or higher?)

JDK 1.6 (or higher)

ADT installation

Option #2 software installation:

Android Studio (complete zip file)

Enable Debug Mode on Glass

+ swipe to "Settings" -> "Device info

+ tap to open device menu

+ select "Turn on debug"

The Android adb Utility

Install apks on devices: adb install abc.apk

List available devices: adb devices

List apks on Glass: adb shell pm list packages f

Launch the Glass home card:

adb shell am start -n

Create/Deploy Hello World in Eclipse

CREATE the application:

1) Launch Eclipse or Android Studio

2) File > New > Android Application Application

3) specify HelloWorld for Application Name

4) API 15 (or API 19) for all SDK-related options

5) Click Next 4 times and click Finish once

DEPLOY the app to a device:

Run > Run > Android Application > OK

ELAPSED TIME: 60 seconds

Android Project Structure

The top-level project directory contains the following:

./src: Java code (usually in a package)

./res/values: XML files with text strings and layout styles

./res/layout: XML files for layouts (such as activity classes)

./res/drawable: static images (*)

./res/assets/www: HTML-related assets

./libs: JAR files

./gen: generated code

./bin: apk file (and other stuff)

AndroidManifest.xml is the main control file

NB: assets are mapped to properties in

(*) drawable-hdpi, drawable-mdpi, and so forth

Android App Components

Activity: essentially a screen in an application

Intent: launch Activity (provides other stuff)

Service: background operations (no UI), such as downloads

Broadcast receiver (listens to system-wide events)

Content provider: manages shared app data, such as contacts

Also defined in AndroidManifest.xml

The PhoneGap Way (HTML5)

Install node and npm

Install PhoneGap: npm install g phonegap

Create an app: cordova create test1

Go to root directory: cd test1

Add Android: cordova platform add android

cordova plugin add

cordova plugin add

cordova plugin add

Deploy Android apk: cordova run

What is CardBuilder?

Replaces deprecated Card class with new layouts

TEXT and TEXT_FIXED: text content and a footer

COLUMNS and COLUMNS_FIXED: display a mosaic or icon on the left side and text on the right side

AUTHOR: an avatar, primary+secondary headings, and body text

TITLE: an image or mosaic with a name and icon

ALERT and MENU: for dialogs with warning messages and action confirmation flows

improvements to GestureDetectors scroll handling

GDK samples fully support Android Studio

What is a Glass Card?

A Card is a unit of work (one screen)

A Card contains:

+ Main body text

+ Left-aligned footer

+ Right-aligned footer for a timestamp

+ One image for the background

Creating a (deprecated) Card (native code):

+ set the properties of the card

+ invoke Card.toView() to convert to an Android view

Glass Live Cards

Native Glassware sits on Timeline (left-side)

display real-time info (weather/news/etc)

frequent updates (running in background)

Similar to Android Widgets (or Service)

Display text and images (and 3D graphics)

a 'stop' option is required for live cards

Live Card Project (1)

Create Android Project in Eclipse (or Android Studio)

Specify version 15 or higher

Rename MainActivity to MenuActivity

Remove launcher/main intent filters from manifest

Add Service as the main component, which handles Live Card creation/management

Live Card Project (2)

Implement Live Card Service (override 2 methods)

onStartCommand() method:

called when service is started

Create a live card and publish it

If live card already exists, then display it

onDestroy() method:

Called when service is destroyed

Unpublish the live card

Glass Immersions

They run outside the Timeline

Typically consist of Android Activities

fully-customizable screens

you can design your own UI

Access to all user input

Better for interactive experiences

Touch Gestures on Glass