Start a new topic

Multiple Overlay Using one WTC File

Multiple Overlay Using one WTC File


I'm developing a teardown where multiple instructions is used in the Android Javascript SDK.  


One the first overlay (Label 1), I'd like to press Next so that I could go into the next overlay (Label 2), while using the same WTC. I tried reloading the another HTML or JS file but it just said 'Loading...' and does nothing.

I couldn't figure out the command to clear the current overlay with another. Any ideas?


Hello Jase,

Could you describe in detail your use case and what it is exactly that you wish to do?


Okay as you can see from the image link, when I hover over the notebook, I want the overlay target the memory (RAM) with a simple PNG image highlighting them. On the bottom there's a navigation button next or back. When I click next, it would show overlay the battery. And i click next it would overlay another image on top of the target and so on.

I guess what I'm asking is using a navigation to link to a different set of overlays. I tried linking them to another set of html but it would just "Loading..." But nothing being loaded. Please note that I'm using the examples in github to link:

Hello Jase,

You could accomplish that by enabling and disabling the augmented objects. So basically when you target the first time you would enable the first augmented object and disable the battery. Then you would click the next button and you would then disable the first augmented object and enable the battery.

I hope this should help.

Hey thanks for the update.

Okay I'm using an example from interactivity.js from the master examples. Basically this javascript is loaded via index.html. I'm trying to load another index2.html, which loads another JS with a different sets of overlay. Here's the code that I'm using.

The only difference is that I tried adding the Destroy function to the AR:  AR.context.destroyAll(); but I still couldn't load index2.html (which it display blank screen). Any ideas?

var World = {
loaded: false,
init: function initFn() {

createOverlays: function createOverlaysFn() {
this.tracker = new AR.ClientTracker("assets/", {
onLoaded: this.worldLoaded

var imgOne = new AR.ImageResource("assets/selection1.png");
var overlayOne = new AR.ImageDrawable(imgOne, 1, {
offsetX: 0.43,
offsetY: -0.01,
scale: 0.10

var pageOneButton = this.createWwwButton("index2.html", 0.1, {
offsetX: 0.0,
offsetY: 0.0,
zOrder: 1

this.imgButton = new AR.ImageResource("assets/text-next.png");

var pageOne = new AR.Trackable2DObject(this.tracker, "*", {
drawables: {

createWwwButton: function createWwwButtonFn(url, size, options) {
options.onClick = function() {
return new AR.ImageDrawable(this.imgButton, size, options);

worldLoaded: function worldLoadedFn() {
var cssDivLeft = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";
var cssDivRight = " style='display: table-cell;vertical-align: middle; text-align: left;'";
document.getElementById('loadingMessage').innerHTML =
"<div" + cssDivLeft + ">Scan Target &#35;1 (System Back):</div>" +
"<div" + cssDivRight + "><img src='assets/systemback-preview.png'></img></div>";

// Remove Scan target message after 10 sec.
setTimeout(function() {
var e = document.getElementById('loadingMessage');
}, 0);



Note that AR.contet.openInBrowser launches a new browser window to display non-AR related content, like a product page.

AR.context.destroyAll is a quite powerful function - It kills all AR namespace objects. After this command your current AR experience is wiped away, although your JS environment stays unaffected (e.g. variable values are still set, so you may have a list of "dead pois" in your JS code).

From what I understood you want to update the UI and POI data on button click.
I highly recommend to not switch to another html in same window by using e.g. document.location = "index2.html".
Please instead use JSON files to exchange POI data. That way you can query a JSON from a remote origin asynchronously when user presses a button (using jQuery).
You can then destroy the current POI list one by one using the destroy() function and afterwards create the new POIs accordingly.

Hope this helps.

Best regards

Thanks! At least I have some ideas how these are structured because in the beginning, I thought by loading the HTML would clear the old overlays. I'll probably load them in arrays and see if that would work.

After trying to code for a couple of days, I'm kinda lost. I'm sorry for asking this: Are there any examples that I can look to try?

Please have a look at the Native POI Detail sample - It shows you how to interact between JS and native iOS/Android code.
That way you can use native UI Elements in conjunction with the AR-Experience to e.g. show a native components on top of the AR view.

A sample fitting your needs is not in place, unfortunately.

Best regards,

PS. Please feel free to contact premium partners if you need advanced assistance.
Login or Signup to post a comment