Developing for Google Glass
Barry Burd
Drew University
Barry@Burd.org
Slides available at
http://allmycode.com/tcf
This presentation © 2014 Barry Burd
1
Agenda
• What's is all about?
• Try them on
• Developing for Glass
• The Mirror API
• The (Android) Glass Development Kit
•?&!
Today at TCF
10:15-11:10
Android 1
11:20-12:15
Android 2
12:25-1:30
Google Glass
Time?
Book signing
2
Availability
• Available to Explorers for $1500 (If you're interested, I have invites.)
• Available to the general public sometime in 2014(?)
• You can try it today
3
The MyGlass page
4
Network Connections
• WiFi directly to unsecured hotspot
• WiFi directly to secured hotspot via MyGlass setup
• Wifi tethering to Android phone or iPhone
5
The Card metaphor
(device
settings)
Ewing, NJ
8:00
64o
"ok glass"
(next most
(most recent card) recent
card)
Your current timeline
6
Controlling the device
• Voice commands
• "OK Glass" activates voice commands
• Head movements
• Lifting head brings Glass out of dormancy
• Swipes on the side
• Tapping brings Glass out of dormancy or drills down into a card (for a "subtimeline")
• Side-to-side swipe is like a carousel for the cards
• Down-swipe is "dismiss" or "back" or "become dormant"
• (No keyboard input that I'm aware of without a hack)
7
Demos
• Take a picture; take a video
• Google for something
• Get directions
• Make a video call (use Add Contact on MyGlass)
• Identify song
• Word Lens
• How do you say " " in " "?
• My learn-a-language app
http://glass-apps.org/google-glass-application-list
8
9
Developing for Glass
10
Mirror API
• https://developers.google.com/glass/playground
• (Barry - Don't forget to plug in USB; delete all elements from timeline
before starting)
11
{
"text": "This item auto-resizes according to the text length",
"notification": {
"level": "DEFAULT"
}
}
CSS
More detailed
JSON
12
(more detail)
{
"kind": "mirror#timelineItem",
"id": "d774ac76-977b-426d-9098-19e8a4bd5367",
"created": "2014-02-26T04:12:15.063Z",
"updated": "2014-02-26T04:12:15.063Z",
"etag": "1393387935063",
"text": "This item auto-resizes according to the text length",
"notification": {
"level": "DEFAULT"
}
}
13
14
{
"kind": "mirror#timelineItem",
"id": "cedf4878-b2e7-4a9e-9fb8-6d6b66527932",
"created": "2014-02-26T04:14:20.120Z",
"updated": "2014-02-26T04:14:20.120Z",
"etag": "1393388060120",
"html": "<article>\n <section>\n
<p class=\"text-auto-size\">This <em
class=\"yellow\">paragraph</em> auto-resizes according to the <strong
class=\"blue\">HTML</strong> content length.\n
</p>\n
</section>\n</article>\n",
"notification": {
"level": "DEFAULT"
}
}
15
<article class="photo">
<img src=
"https://mirror-api-playground.appspot.com/links/filoli-spring-fling.jpg"
width="100%" height="100%">
<div class="photo-overlay"/>
<section>
<p class="text-auto-size">Spring Fling Fundraiser at Filoli</p>
</section>
</article>
16
<article class="cover-only">
<section>
<p class="text-auto-size">This is the cover card of a long list</p>
</section>
<footer>
<p>Hover to scroll</p>
</footer>
</article>
<article class="auto-paginate">
<ul class="text-x-small">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
<li>Sixth item</li>
<li>Seventh item</li>
<li>Eighth item</li>
<li>Ninth item</li>
<li>Tenth item</li>
</ul>
</article>
* "Hover" means "tap"
* About five of the
items fit on a detail
page, so the detail
page has a scrollbar.
17
Developing with Android: Handling Cards
swipe
18
Developing with Android: Handling Cards
19
The code:
public class CardScrollActivity extends Activity {
private List<Card> mCards;
private CardScrollView mCardScrollView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
createCards();
}
mCardScrollView = new CardScrollView(this);
ExampleCardScrollAdapter adapter =
new ExampleCardScrollAdapter();
mCardScrollView.setAdapter(adapter);
mCardScrollView.activate();
setContentView(mCardScrollView);
20
private void createCards() {
mCards = new ArrayList<Card>();
Card card;
card = new Card(this);
card.setText("This card has a footer.");
card.setFootnote("I'm the footer!");
mCards.add(card);
card = new Card(this);
card.setText("This card has a kitten background image.");
card.setFootnote("How can you resist?");
card.setImageLayout(Card.ImageLayout.FULL);
card.addImage(R.drawable.kitten_bg);
mCards.add(card);
}
card = new Card(this);
card.setText("This card has a mosaic of kitties.");
card.setFootnote("Aren't they precious?");
card.setImageLayout(Card.ImageLayout.LEFT);
card.addImage(R.drawable.kitten_small_1);
card.addImage(R.drawable.kitten_small_2);
card.addImage(R.drawable.kitten_small_3);
mCards.add(card);
21
private class ExampleCardScrollAdapter extends CardScrollAdapter {
@Override
public int findIdPosition(Object id) {
return -1;
}
@Override
public int findItemPosition(Object item) {
return mCards.indexOf(item);
}
@Override
public int getCount() {
return mCards.size();
}
@Override
public Object getItem(int position) {
return mCards.get(position);
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
return mCards.get(position).toView();
}
}
22
Developing with Android: The Level App
23
Developing with Android
mLevelView = (LevelView) findViewById(R.id.level);
mSensorManager =
(SensorManager) getSystemService(Context.SENSOR_SERVICE);
registerListeners();
private void registerListeners() {
mSensorManager.registerListener
(this, mSensorManager.getDefaultSensor(Sensor.TYPE_GRAVITY),
SensorManager.SENSOR_DELAY_NORMAL);
}
public void onSensorChanged(SensorEvent event) {
if (event.sensor.getType() == Sensor.TYPE_GRAVITY) {
computeOrientation(event);
}
private void computeOrientation(SensorEvent event) {
float angle = (float) -Math.atan(event.values[0]
/ Math.sqrt(event.values[1] * event.values[1]
+ event.values[2] * event.values[2]));
mLevelView.setAngle(angle);
}
24
Developing with Android
public void setAngle(float angle) {
mAngle = angle;
// Redraw the line.
invalidate();
}
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = canvas.getWidth();
int height = canvas.getHeight() / 2;
// Compute the coordinates.
float y = (float) Math.tan(mAngle) * width / 2;
}
// Draw the level line.
canvas.drawLine(0, y + height, width, -y + height, mPaint);
25
?&!
Barry Burd
Drew University
Barry@Burd.org
Slides available at
http://allmycode.com/tcf
Today at TCF
10:15-11:10
Android 1
11:20-12:15
Android 2
12:25-1:30
Google Glass
Time?
Book signing
26