Wikitude

[CORDOVA] this.createWwwButton for opening a html page in the project

Hello everyone!

The method decribed appears in the documentation for html drawables. However, this method opens a webview by default and I would like the user to click the button in the ARchitect World and go to another html page in the project files.

Any Idea how I can make this happen?

 

Thank you everyone for your help!!

Hi Joao,
Are you looking for something like "document.location = 'http://www.google.com'" or "window.location.href = 'http://www.google.com'"?
I don't know how you can navigate back to the original page though...

Best regards,

Andreas

Hi Andreas,

I was looking for something to refer to the onUrlInvoke and process the information through it.

Is this possible from a WWWButton?

Regards,

Joao

Hi Joao,
I guess what you refer to by `WWWButton` is the variable name we used for a image drawable. On AR.ImageDrawables you can enable a onClick event. Withing the function that is then called after you tapped on the image drawable, you can code what ever you want. To trigger a onUrlInvoked function call, you need to do something like this: document.location = architectsdk://*myCustomURLThatIParseInOnURLInvoked*.

Does this message helps you?

Best regards,

Andreas

Hi Andreas.

Yes the message was quite helpful, however the code is still not working.

This is the code I have so far:

this.imgButton = new AR.ImageResource("assets/btn.png");


var pageOneButton = this.createWwwButton("architectsdk://action=closeWikitudePlugin", 0.15, {
offsetX: 0,
offsetY: -0.25
zOrder: 1
});



createWwwButton: function createWwwButtonFn(url, size, options) {
/*
As the button should be clickable the onClick trigger is defined in the options passed to the AR.ImageDrawable. In general each drawable can be made clickable by defining its onClick trigger. The function assigned to the click trigger calls AR.context.openInBrowser with the specified URL, which opens the URL in the browser.
*/
options.onClick = function() {
window.location.replace(url);
};
return new AR.ImageDrawable(this.imgButton, size, options);
},

 

Could you please help me find what is wrong in here?

Thank you for your help.

Kind Regards,

Joao

Hi Joao,
I would try to replace `window.location.replace(url);` with `document.location = url;`. If url then starts with architectsdk:// the onURLInvoked callback should get called.

Best regards,

Andreas

Hi Andreas.

These changes are still not working.
I even added an alert to the button options to see if it actually clicks, but no such luck.

However, originally the examples did not present a documet.location or anything of the sort. Instead, they presented AR.context.openInBrowser(url);
which leads me to think that either the sdk is not allowing document changes through the WwwButton or something else here is wrong.

Any ideas of where I should go from this point?

Best Regards,

Joao

Hi Joao,
Just to avoid any misunderstandings: You want to make a call into the hosting application in case a user clicks on a AR.Drawable inside the Architect World? Once you got the callback in the hosting application, you want to open a website?

Best regards,

Andreas

Hi Andreas,

What I want is to click an ARDrawable in the Architect World to navigate to another page in another HTML page I have inside my app, however so far this seems to me like it's not possible.

Thank you for the clarification, however for regular websites the AR.openInbrowser() example you have works like a charm, but for another page in my app it doesn't seem to be working.

Regards,

Joao

Hi Joao,
So once you have the callback in your (I guess Cordova application) you want to switch to another page inside your (again, Cordova) application? Or do you want to switch to another web page within the context of the Architect World?

Best regards,

Andreas

Hi Andreas.

Yes, that is in fact exactly what I want.

You see, my app behaves in a purely linear narrative approach when it comes to Information Architecture (like a game), and as that, when the user presses the wwwButton, then the user has passed the level and moves on to the next one.

Regards,

Joao

Hi Joao,
I don't have an iOS device available right now, but what you describe sounds definitely possible. I try to build a short demo tomorrow and share it here with you.

Best regards,

Andreas

Hi Andreas,

Thank you so much.

P.S: If it makes any difference, I am making this app for Android only.

Best Regards,

Joao

 

Hi Joao,
Here is the example I promised you. It's our standard example app with a modified example 1.4 Interactivity.
If you click on the product detail button, our plugin closes and the cordova application navigates to google.com. For this I modified line 83 in interactivity.js to be `document.location = 'architectsdk://openURL?url=' + url;` and then in the cordova index.js, I modified the onUrlInvoke function with a snippet like this:

 else if ( url.indexOf('openURL') > -1 ) {

            var urlToOpen = url.substring(27, url.length);

            app.wikitudePlugin.close();

            document.location = urlToOpen;

        }

 

I hope this helps

Best regards,

Andreas