Layar Developer Documentation

Back to layar.com

HTML widgets

Feature Introduction

This feature allows you to add dynamic AR content to your vision layers. Using HTML, javascript, and CSS you now have the opportunity to create varying types of content and offer new ways of interaction to your users.  

Key Steps to Implement

Change the minimum API version on the publishing site

HTML widgets were introduced in API version 7.1.  Create a Vision layer according to the latest API , and make sure to change the Minimum API version to 7.1 or higher.

Create an HTML page

In order to use HTML widgets you need to point to a valid HTML page. We currently support content created using HTML, CSS and Javascript. Please keep in mind that your Web page should display small widgets and not a lot of content. The screen size of mobile devices is small and any content you place in AR looks even smaller than when viewed full-screen.

GetPOIs Response

A new contentType text/html is now used in order to represent HTML widgets. The detailed description of the new content type can be found here

Example Response

Here we list a few examples of an object that represents HTML widgets

"object": {
                "url": "http://www.example.com/carousel/carousel.html",
                "contentType": "text/html",
                "viewport": {
                    "height": 500,
                    "width": 500,
                    "interactive": true,//users can swipe the carousel
                    "scrollable": false
                },   
                "size": 0.3604497354497354 }
"object": {
                "url": "http://www.example.com/mypage.html",
                "contentType": "text/html",
                "viewport": {
                    "height": 500,
                    "width": 500,
                    "interactive": true,
                    "scrollable": true
                },
                "size": 0.3604497354497354 }
"object": {
                "url": "http://www.example.com/twitter.html",
                "contentType": "text/html",
                "viewport": {
                    "height": 500,
                    "width": 300,
                    "interactive": false,// users cannot interact with the widget
                    "scrollable": true // this parameter is also considered false since "interactive" is set to false
                },
                "size": 0.30
            },

Tutorials and Sample Code

We have also created a tutorial which explains how to add simple HTML widgets to your Vision layer. We provide guidance on creating your own HTML pages that show an image carousel and a twitter timeline in your Vision layer. Please note that these two widgets are build-in features in Creator. You can find all the necessary material in attached file at the bottom of this page.

Notes

Frequently asked questions

Now, with the support of HTML widgets there are countless possibilities of what can be created. As already mentioned, these are only limited to coding language and client feasibility. In light of this it is not possible from our side to fully test and document everything that can be supported. There are also differences as to what iOS and Android support natively, therefore we urge you to test on both platforms.

Our tests so far indicate that the following are not supported:

- Flash content

- Embedded audio and video

- Forms with text input fields. Forms that use checkboxes, radio-buttons etc. should work.

- Web storage

- The canvas element

In general many of the new HTML 5 elements are not supported but it might be the case that few things may work. We are also curious as what works and does not. Please Let us know ! We will also update this topic  in Customer Support environment so that you can see what works and does not. You are very welcome to share with us what you have created and tips & tricks!

The width and height of the viewport define the portion of the webpage that will be shown in the viewport (first image). If your web page spans a content area of 512 * 320 pixels and you set your viewport to 280 * 200 pixels, only a portion of your web page's content will be displayed. 

The value of the size defines how big the HTML widget will appear with respect to the page (second image). What is shown inside the viewport won't be affected if you change the size, only how large it appears with respect to the page.

 image 1 - Setting viewport's width and height 

image 2 - Setting object size

The content of the pages does not refresh automatically within Layar. Please explicitly define that in your web page. 

  • HTML widgets tutorial 7.9 MB