The Google Glass Explorer Edition interface is built around a scrolling timeline metaphor. When you awake Glass, you are presented with a clock to invoke speech commands. Navigate left with a swipe and you will see Glass Settings, Google Now cards, and pinned timeline items. Swipe to the right and you will see timeline items arranged in chronological order.
(picture)
Google Glass displays these timeline items in chronological order based upon the time that the item was last updated. On the Explorer Edition, Glass will retain approximately one week’s worth of timeline items. Each one of the timeline items was installed via the Mirror API.
If you have not set up the Mirror API Playground from the last chapter, do it now, because we are going to use the Playground to create our first timeline item.
Open the Mirror API Playground page. You may have to click/tap Authorize again. We are going to create the simplest possible timeline item. Type or paste the following into the playground text area.
{
"text": "Hello World",
"notification": {
"level": "DEFAULT"
}
}
Click/tap the Insert Item button. If you wearing your Glass device, you should now see a Hello World timeline item. Web developers who have been building applications during the past 5 years will immediately recognize the above as JSON. All Mirror API structures are represented as JSON. You will be seeing a lot JSON as we explore the functionality of timeline items.
When you inserted the item using the playground, you’ll notice that Mirror API added some information to the structure.
{
"kind": "mirror#timelineItem",
"id": "8e895b7b-fc95-417e-a884-4f040428ede7",
"created": "2013-10-14T00:20:47.237Z",
"updated": "2013-10-14T00:20:47.237Z",
"etag": "\"bk_m-qJlDf-D_Wbh5O8DEyGgV8M/-oWNWpre-BeqxhD8uzsM6glfn-Q\"",
"text": "Hello World",
"notification": {
"level": "DEFAULT"
}
}
Every timeline item features a unique identifier. You can use this identifier to update a specific timeline item. The playground will detect that the JSON contains an id and provide an update button to update the timeline item.
Now, if you view the Timeline item on a Glass device, try tapping it. Nothing happens. You will find that there’s no way to delete the timeline item from Glass. Yes, it’s a little frustrating. The playground includes a button to delete the item, but we are going to do something a little more elegant.
We will now update the timeline item to include a menu. If a timeline item is equipped with a menu, tapping on that timeline item will display a horizontal scrolling list of menu items. We are going to add a menu item by including the following in our JSON.
{
"text": "Hello World",
"menuItems": [
{
"action": "DELETE"
}
],
"notification": {
"level": "DEFAULT"
}
}
If we add the menuItems to our JSON and press Update Item in the playground, our timeline item now includes a Delete option. When you select Delete menuItem, the timeline item is removed from your Glass timeline.
Delete is one of the built-in menu commands that is provided by the Mirror API. While the function of the DELETE menu item is obvious, let’s try adding a READ_ALOUD menu item.
{
"text": "Hello World",
"speakableText": "This is Hello World",
"menuItems": [
{
"action": "DELETE"
},
{
"action": "READ_ALOUD"
}
],
"notification": {
"level": "DEFAULT"
}
}
Insert or update this item and you will now see a “Read Aloud” menu item. When you select that menu option, Glass will speak the the speakableText provided in the above. We have Glass talking to us without a writing a line of code.
At the time of this writing, Glass supports eight built-in menu item actions. Each of these built-in actions can be customized. For example, we can update the READ_ALOUD action item to include a custom display message.
{
"action": "READ_ALOUD",
"values":[
{
"displayName":"What is this?"
}
]
}
By adding the values array, a developer can specify their own display name and 50x50 icon for a menu item. As demonstrated with our Hello World example, you can use the Mirror API Playground to experiment with timeline items. It is an invaluable tool to test and evaluate application elements, proving out your JSON before you even write a line of code.
Our Hello World example is the simplest type of timeline item -- text item. Timeline items can also feature complicated HTML-style layouts. Before you get excited about HTML layouts, it is important to understand that the Explorer Edition does not support JavaScript or custom CSS for timeline items. You must work within the constraints of the Mirror API.
(picture of templates)
If you select templates under the Mirror API playground, you will see examples of supported styles. HTML timeline items typically follow this basic tag structure. Figure, section, header, and footer elements are optional.
<article>
<figure/>
<header/>
<section>
...
</section>
<footer/>
</article>
If your HTML does not follow this structure, it will render as a small font on the device or not at all. HTML tag support is very limited and if you use an unsupported tag type, it will be stripped out. You can consult the Google Mirror API timeline reference for supported tags.
With this basic understanding timeline item HTML support, it’s time to jazz up our Hello World example. Note: Given that we are are including this HTML in a JSON string, we have to escape the quotation marks ie. use \”.
“html”:
“<article>
<section>
<div class=\"text-x-large\">
<p class=\"yellow\">Hello World</p>
</div>
</section>
<footer>You made this</footer>
</article>”
We replace the “text” attribute in our timeline item JSON and we now have a more colorful timeline item. In the lower left, it reminds us that we created this timeline item. With the Mirror API Playground and a little JSON, we have a powerful tool to help us with our Glass development.
There has been error in communication with Booktype server. Not sure right now where is the problem.
You should refresh this page.