This week is a special one here at Layar – it’s HTML Week! Over the next few days you’ll be introduced to the world of possibilities created by our recently released HTML widget for the Layar Creator.

The HTML widget lets you embed a frame of HTML on top of print content which anyone can then view by scanning the page with Layar. It opens up nearly endless possibilities for interactive print, and we’re going to show you just what you can do and even how to do it.

Each day for the rest of the week, we’ll be posting some great examples of how the HTML widget can help bring print to life in a whole new way. We’ll even share the plugins and tools we used to make it possible.

To kick things off, we’re introducing an entirely revamped LAYARED Magazine, which has been loaded with great HTML widget examples. It’s the same print magazine as before (with some updated stats) so if you have your own copy, just scan it again today to see all the new content. Don’t have your own copy? You can order one, download a PDF or view it online here!

Here’s a look at some of the examples from the new LAYARED that we’ll be going into more detail on this week.

• Full Mobile E-Commerce Experience
  Now you can provide a complete mobile shopping experience directly from the pages of a magazine! You can switch through various product options, add items to your cart and proceed to checkout.
• Fun Puzzles & Games
  Adding a bit of entertainment to your print is easier than ever, and it’s way better than a simple crossword or sudoku. We show a few quick examples of interactive games that can be easily built in the Creator.
• Interactive Lonely Planet Map
  This clickable interactive map shows you hotel and flight information for some of Lonely Planet’s hottest locations around the world. It’s an excellent example of how you can provide more info to readers in an engaging way.
• Layar Creator Step-by-Step Guide
  Our infographic spread showing the steps to using the Creator to launch a campaign comes alive with interactivity, taking you on a guided, click-by-click tour through each step.

Order your copy of LAYARED Magazine here, and stay tuned here on the blog this week to learn all about the power of HTML in interactive print!

Last week we introduced some brand new, powerful additions to the Layar Creator - the Twitter Feed, Image Carousel and HTML widgets. Twitter and image slideshows are pretty straightforward, but the HTML widget is full of possibilities.

In order to give you some inspiration for how to make the most of this powerful new tool, we’ve compiled some examples of how you might use dynamic HTML content with interactive print. 

Flip through the photos below to see some of most promising use cases for the HTML widget.

Of course these aren’t the only examples of how HTML can be used in the Creator - the possibilities are nearly endless. Including:

• Get info with forms - Let readers subscribe to your magazine right from its pages, or let them send feedback about specific content, like mailing the author of an article, with a simple contact form.
• Cultivate event info - Instead of just telling attendees at your event what’s happening and when, provide live information, like live Tweets or breaking news stories at a big conference!

There are lots of other great examples for how to use HTML, but we want to see you come up with them and place them on your print. It’s really easy to do - just build it in HTML, host the file somewhere, add the link in the Layar Creator and define the frame size.

Check out the end of this video to see how to use the HTML widget in the Creator. 

Some of you may have noticed some changes that went live in the Layar Creator yesterday. We’ve just launched three new dynamic widgets that bring even more interactivity to your print products.

Here’s a rundown of the new widgets that you can find today in the Layar Creator:

1. Twitter Feed
   Now you can feature a live, interactive Twitter feed of either one account’s tweets or a hashtag search right on top of your print. Just enter an account or hashtag and drop in on your page. It’s great for featuring your brand’s tweets or curating tweets at an event on the event’s printed program.


2. Image Carousel
   Want to place a nice slider of images to accompany products for sale in a catalog? Just choose your images and drop them onto your pages with this handy widget. You can upload up to 10 JPG or PNG files that users can swipe through right on your print. In our example, we show off different pictures and angles for a stylish briefcase, but there’s a lot of possibilities for slideshows out there!


3. HTML Widget
   This one is completely up to you - make it anything you like! Just enter the URL of any piece of HTML and you can display live, dynamic HTML content right on top of your print. The possibilities are nearly endless: live updating news feeds, sports scores, weather and traffic information, commenting, polls, forms, shopping carts, price comparison - even animated GIFs.

With the introduction of these new widgets, we’ve also rearranged how buttons are organized in the right-hand menu. Now buttons and widgets are grouped into handy expandable and collapsible menus labeled Basic, Media, Social and Developer. We think this is a better way to organize the growing list of buttons.

Have a look at the video above to see the new widgets and button organization in action.

We’ll have more to share soon about how to make the best use of these widgets, especially the HTML widget which has a lot of possibilities. To learn more about what’s possible with the new widgets, check out our tutorial over on the Support page.

These changes are the product of research and feedback from you, the users. Keep sending us your comments and suggestions to devsupport@layar.com!

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.