Below is a detailed look at Layar API v.7.1 from Layar CTO Dirk Groten.

We just released new versions of Layar for both the iOS and Android platforms, going from version 7.0.x to 7.1. The release notes for end-users mention only a few minor fixes, so this wouldn’t seem to justify a version update. Behind the scenes, however, this is a major update which includes support for the new API v7.1. 

So exactly what did we introduce with the new API?

• Support for HTML widgets - Objects can now have content type text/html, meaning that HTML content can be rendered directly in AR.
• Slicing of reference images - Reference images can be linked to other reference images, so that when one reference image is recognized and tracked, content placed on the linked reference images will also be shown.

Reference Image Slicing

When, as a content provider, you upload a page to augment using the Layar Creator or via the Layar Publishing site, we will generate a feature binary file for your image which contains the unique tracking features of your image. 

When the user points his phone to your page, we’ll recognize it first server-side, send the corresponding feature file to the phone and then match the features with the camera image, allowing us to display content at the right position on top of the page.

This works fine if a relatively large number of features can be matched. In other words, the user needs to hold his phone in such a way that a significant part of the page (more or less half is needed) is in the camera view. So what if the user holds his phone closer to the page in order to better see the content? If there aren’t enough features to match, we’ll lose track of the image and the augments will disappear. 

That’s why we’ve introduced what we call “slicing.” By slicing the reference image into smaller pieces, we can extract more features for each part and therefore match enough features even if the user holds his phone close to the page. The trick here is that features are not scaling-invariant, i.e., just extracting more features on the larger image wouldn’t have done the job (except creating a larger file to download which we want to avoid). 

So now every page you upload using the Layar Creator will automatically be sliced where appropriate. The device will load features for the entire page but also for parts of the page so that when the user zooms in, tracking is still retained. 

Try it out! You’ll see that you can now hold your phone much closer to the page and still see the content appear with Layar v7.1.

For Layar developers hosting their own layers, we can’t apply the same trick, because we don’t know where the content is placed and we want to avoid randomly generate additional feature files that users have to download to their device. The slicing API however does allow some neat tricks, like being able to fully track all sides of a box simultaneously, but that will be the subject of another blog post very soon.

HTML Widgets

The other big change in 7.1 is the added support for text/html augments. Up to now, all you could place in AR were static objects (images or 3D objects). If you hosted your own layer you could make them seem dynamic by generating them on-the-fly on your server. Our API allowed you to replace a POI with another, for example to give a dynamic effect when a user clicked on a POI.

With the support of HTML, we make it much easier for you to create dynamic content. The content of the object is fetched live from the URL you specify when it needs to be rendered and in the same way can be updated live when the user interacts with it. Some examples:

• Show the live tennis match scores on top of a page about a particular player. When clicking on the scoreboard, a full-screen view is opened showing detailed stats about the match.
• Display the latest tweet with hashtag #layar: every user pointing his device at the page will see the most recent tweet about Layar. You can script your object to automatically refresh and if a new tweet is posted, replace the content to reflect the latest tweet.
• Create a rating widget that you place on every article in your printed catalog. Users can rate an article and see the average rating for all users, all live.
• Let users swipe through different images of the same couch placed on top of an image of a living room. A simple image carousel does the trick.

The documentation for the new API can be found here. All you have to do to create an HTML widget is to specify a URL for the HTML content to be fetched and specify the pixel size of your widget. That’s it. Layar will open a little web view at the location specified and render your HTML content inside it. 

What’s important to keep in mind is the following:

• The background is transparent, unless you specifically set a background color in your CSS. This way, you can place multiple elements in one page that seem to be independent of each other. E.g. use this to place a button that controls another part of the page, like a ‘dress up’ button that when clicked will make a dress appear on top of a model on the page.
• Whenever content is loaded for the entire page (e.g. a link is clicked that would cause a page reload), that content will be loaded in full-screen mode rather than within the HTML widget. This makes it easy to create a widget with dynamic content linking to more detailed pages that should be browsed normally
• We have full support for Javascript. So if you want to load content dynamically inside your widget, use AJAX calls and replace elements in the DOM tree with new elements. For example, you let users vote within the widget, post their vote and replace the content of the widget to show the current voting once the vote has been cast.

As a Layar Developer, you can start experimenting with HTML widgets now. Just download the latest versions of Layar for iPhone or Android to try it out. We’re curious to hear your findings, especially since we’re a bit dependent on iOS and Android native support of HTML as to what can be done and what cannot. 

What’s Next?

HTML Widgets in Layar Creator

HTML widgets are now supported in our app, but it’s not yet possible to place them using the Layar Creator. We’ll add that very soon! You’ll be able to just drag-and-drop your “viewport” to the page you want to augment, enter the URL of the HTML to be rendered in the widget and directly preview the content on top of your page. It doesn’t get much simpler than that!

It’ll be easy enough to place an HTML widget using the Layar Creator, but someone still needs to do the programming to create useful and appealing content. For Layar developers, this is a great opportunity to create a library of widgets that others can use.