More good Layar SDK news! We’ve recently released another update to the SDK as we continue to make it as easy as possible to embed your own Augmented Reality (AR) experiences into your own iOS and Android apps.

We’ve always put an emphasis on allowing you to customize your AR experience as much as possible to fit your brand and meet the needs of your users. With the latest update you can now take more control of your AR scenes than ever before. How? Event handlers!

The introduction of event handlers means you can have actions or POI updates triggered by certain events within your scene. This enables you to add more complex functionality to your experiences, including sequencing of videos and dynamic content without the need for an external server.

Here are the new event types you can use to custom-script your AR scene…

onLoad – Triggered when the object has been loaded successfully.
onClick – Triggered when the object has been clicked (similar behaviour as the POI action).
onPlaybackStart – Triggered when the video or audio object playback has started.
onPlaybackFinish – Triggered when the video or audio object playback has finished.

All of these events can trigger new actions, content updates (including adding or removing objects from the scene) or even a custom handler that can be reused for multiple objects and on different events.

This powerful new feature allows AR scenes to be even more engaging and interactive for the user in various ways. If you’re an existing SDK user, check your inbox for links to the latest version and check out the developer documentation page for more details.

If you’re interested in using the SDK, you can try it now for free! Have questions before you start? Let us know, or join our upcoming webinar at the end of the month.

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. 

The following is a blog post from Layar’s Dirk Groten.

Layar has had an exciting year since the introduction of Layar Vision last summer. Since then, we’ve made quite a few changes to our app and to the publishing platform. We changed the user interface to focus more on Layar Vision in 6.1 and added AR video in 6.2. We also introduced the Layar Creator, an easy tool to create content for Layar Vision, and we introduced a new app for user-generated AR, Stiktu. 

We haven’t always announced these changes much in advance, leaving our content creators in the dark about our future plans and commitments to them. Let me change this and give you a heads-up about what you can expect from us in the coming months.

Layar 7.0

The next version of the Layar app, Layar 7.0, will solve a number of issues our users are currently having:

• By separating Vision from Geo (location-based with POIs) layers we can switch off a few sensors when using vision AR. That way you won’t be bothered anymore by requests to switch on your GPS or to wave your phone in a figure-eight pattern due to compass interference when just viewing augmented content on top of printed materials.
• We’ll make it clearer to users that there are two sides to our app: Vision and Geo. We’ll open up in Vision (scan) mode like in Layar 6.2 but it will be clearer how to find the Geo layers. And we’re adding instructions to explain these two modes.
• We’re changing the UI drastically on Android to comply better to the Ice Cream Sandwich UI guidelines (Android 4.x), allowing the app to behave more like a native Android app.
• There are two API changes in Layar 7.0: In the getPOI request you’ll receive all images that were recognized instead of just one, and you can specify actions to share content specifically on Facebook or Twitter.

Let me emphasize that we are committed to continue supporting Geo layers in Layar. We strongly believe that geo-location and location-based content have an important role to play in AR now and in the future.

We will continue adding features for layer developers, both for Geo and Vision AR. When we introduced AR video in Layar 6.2, it was supported for both Vision as well as for Geo layers.

We decided to stop supporting a mix of Vision and Geo in one layer due to the confusing message to end users who didn’t understand what to do. It is still possible to link from vision to geo and vice versa by using the layar:// URL scheme (intent) if you still need to mix the two experiences.

Layar 7.0 is scheduled for release in early August.

Support for HTML Augments in Layar 7.1

So after Layar 7.0, what’s next? HTML content! Our next release after Layar 7.0 will introduce support for HTML augments. You’ll be able to create dynamic AR content by using content-type text/html for your AR objects.

This enables a whole bunch of new experiences, where the content viewed in AR is dynamic because it’s directly being fetched from the web. Let me list a couple of features we’ll support in HTML objects:

• WebKit support of HTML, CSS and Javascript. Since we’re using WebKit to render the content, a large part of what you can do in the mobile browser (Safari and Chrome) can also be done in AR. 
• You’ll be able to set the CSS pixel width and height of the HTML augment. The actual size of the augment in AR will be based on the existing ‘size’ parameter, like for images. 
• You’ll have the choice to enable or disable direct user interaction with the HTML content. When enabled, the content will behave like in a normal browser. For example, if you make a poll the user can click ‘yes’ or ‘no’ in AR and directly see the result in AR. When disabled, user clicks are passed to the Layar app and the usual POI actions can be triggered. For example, you can display an up-to-date live score for a tennis match that shows a mobile page in full screen with more information when the user clicks on it.

And again this applies to both Vision and Geo layers. Layar 7.1 is scheduled for release in October. 

Layar Creator

Of course we are committed to continuously improve the Layar Creator and add features that make it even easier to publish AR on print.

• We will make it easier to add video augments to your print. Due to some technical limitations there are currently a couple of different ways to add video. We’ll simplify the flow so you don’t have to worry about the technology anymore.
• We’ll add more standard buttons. The email button, for example, was meant to let users share something via email, but didn’t allow you to use it for contacting you (pre-filling the recipient email address).
• Support for HTML in Layar means we can also start adding more dynamic types of buttons in the Layar Creator. 
• And we’re working on a way for publishers to claim exclusivity on their pages, so that you can be assured no one else can ‘hijack’ your page. This assumes you’re the exclusive copyright owner of all artwork on the page of course.

Features in the Layar Creator will be rolled out regularly in small updates, watch our Layar Creator newsletter to be informed about the dates.

So that’s what we’ve got planned for the rest of the summer. We’re excited to keep making progress and hope you’ll join us. If you’d like to provide feedback, please visit our contact form!

Today in the App Store and Android Play Store you’ll find our latest update: Layar 6.2!

You may not notice any changes right away, but there is one significant addition. In this version of Layar, we’re introducing what we’re calling AR Video.

Essentially, now items around you that are normally augmented with Layar Vision content (magazines, newspapers, pamphlets, brochures and other print media) can now come alive with video right on top of them!

Imagine reading the newspaper on your way to work and watching as the box scores on the sports page turn into video highlights to catch you up on the game! With Layar 6.2 and AR Video, this is now possible.

Developers making Layar Vision content can now easily add videos to these experiences quickly and easily. Check out the video below to see a quick demo of the power of AR Video!

Layar recently released Layar Vision, an extension of the Layar platform enabling visual search on the mobile phone, recognizing real world objects and showing digital content on top of them.

We organized the Layar Creation Challenge as a way to kickstart the Layar Vision launch by encouraging developers to create immersive Augmented Reality experiences with the beta client.

More than 200 developers registered for the Challenge, and we reviewed many great submissions, but we narrowed the list down to these 15 concepts that we believe best meet the Challenge criteria.

Read more »