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. 

Bol.com, the largest online retailer in the Netherlands and Belgium, which features books, movies, music, games and more, has placed an enormous amount of its catalogue on Layar. Covers of over 25,000 items, the site’s top sellers, are now recognizable by Layar.

So what does this mean? It means now when shopping in a store, or when a friend shows you the new book or movie he’s obsessed with, Layar can show you the bol.com price and availability directly on top of the item itself. And in just a few clicks, it can be on its way to your doorstep.

Just scan the cover of the item, and in seconds you can see its price and add it to your bol.com shopping cart. They’ve even made it super easy to order the item right from your phone with iDeal, Credit Card or even (if you’re a frequent bol.com customer) order instantly with pay-on-delivery.

If you’re wondering how bol.com was able to place 25,000 images on Layar, the answer is simple: the Layar Connect API.

Layar Connect is our enterprise solution and companion to the Layar Creator. Aimed at high-volume clients, the Connect API lets third parties tap directly into the Layar system for fast and easy bulk uploading and content creation. 

It’s so easy, in a few days bol.com will have over 50,000 images on Layar, and the covers will be continually updated to stay up-to-date with the newest top selling items.

Check out the video below to see how it all works, and grab a book, DVD, game or CD next to you and try it out!

Creating your own feature-rich layers just got a heck of a lot easier.

Today, we are very pleased to announce the launch of our publishing API, Layar Connect. This new tool allows third parties to build an end-to-end, one-stop-shop content management system for layers, enabling those without technical programming skills to launch their very own layers on our platform without writing a single line of code.

We are very excited about the possibilities this brings both to the Layar platform and to the augmented reality field as a whole. Layar Connect allows anyone to build what could become the WordPress or YouTube of augmented reality, helping them create and share content in truly immersive ways.

“We’re focused on the democratization of augmented reality and want to make it easier to create and publish AR content for all,” said Maarten Lens-FitzGerald, Layar co-founder and General Manager. “With Layar Connect, we are the first in the industry to move management and publication of AR content to third parties. This creates opportunities for Layar partners to add increased value to their business; a big step in the professionalization of the AR industry.”

For users, this new tool will allow you to get your very own content ideas realized in augmented reality. Perhaps you want to create your own personal layer with spots and objects of your choosing. Before, if you didn’t have technical expertise, creating and managing your own layer meant jumping between Layar and a third-party system. Now, those systems will be able to handle every aspect of registering and creating layers, making the process painless for you.

For developers, Layar Connect improves on the logistics of creating layers. It is now far easier to create and manage Layar content, and developers can also build their own tools to suit their individual needs as third-party publishers of augmented reality content.

Several third-party tools are already making use of Layar Connect, and have been certified by Layar as high-quality, reliable tools for easily creating Layar content. Only tools which meet these requirements will be named Certified Layar Creation Tools, the first of which include:

• buildAR - buildAR lets you quickly and easily add your own information overlays to create your own augmented reality content on Layar. “Layar Connect lets buildAR make creating layers easy for anyone,” said Rob Manson of buildAR. “You don’t have to be a developer to create augmented experiences - just have a great idea.” Learn more.
  
  



• Poistr - Poistr is a service where anyone can manage data layers in an easy way and without technical skills. Like BuildAR, Poistr is a web-based interface for adding POIs to a map which can then be viewed in augmented reality with Layar. “Layar Connect facilitates the automation for creating and managing layers and POIs, and allows total integration with Layar,” said Poistr’s Ignacio Vilalta. Learn more.
  
  



• Poiz - Poiz is a Layar Creation System (LCS) - an online content management system (CMS) for compiling layers. With Poiz you can easily create a layer with custom form and content, but without high development costs. Technical knowledge of layers is not necessary. “Layar Connect makes Poiz a one-stop shop with full control over layer and content, allowing us to offer Poiz accounts for a lower price,” said Willem Veenstra of Poiz. Learn more.
  
  



• VISAR - VISAR is a content management system and publication platform for Layar and other services. It puts you in full control of your content 24/7 and stores it safely. “With Layar Connect, the entire process is now customer oriented, making it fast and easy to create and maintain great AR experiences,” said VISAR’s Jeroen Meijer. Learn more.
  
  

Head on over to the Layar Tools page for more information about Layar Connect and developer requirements. To apply for an API key, please fill out this form.

Read the official press release here.