Wikitude

How can I test my ARchitect file in a browser?

Hi,

I have read the documentation. For instance, I cite from ADE.html: "The ARchitect Desktop Engine (ADE) allows you to simulate the behavior of your ARchitect file on an ordinary webrowser, observe the properties of your AR objects and simulate user interaction and events." That's what I did: use my ordinary browser. I also heard the term "ARchitect simulator". What is that in particular? Where can I find it? And what documentation in particular do you refer to? Could you please tell me the name of the file?

Thx

QUESTION STATED BY LUIS VIA SUPPORT MAIL

Hi Nicola Radacher!

I already did it.
But how to create an ARchitect object to run by browser?

Thank you for your attention.

Hi,

it is not entirely clear what you mean, but I'm trying to give you a bit more information.

The ADE is only used as a development tool that makes the JS API available in a desktop browser. Once included you will see an orange triangle in the bottom right corner of the page. If you click on it you can see all created architect objects (e.g. GeoObject, GeoLocation, Tracker, ...) and investigate their properties. It also allows you to simulate user interaction e.g. clicking on a GeoObject.

The objects are created normally through calling our javascript api. Please have a look at the included SDK Examples and the API reference that come with the SDK package.

Let me know if you have more questions.

Hi Damm!
First I wanna thank to you and Nicola for help me.

I'm following the instructions.
After I added the add.js file on my html and ran the page, the orange triangle appears as you said.
I clicked in the orange triangle and the properties appears, ok!

To use the SDK examples I have to add the JavaScript codes in the html code, right? eg.:

// Initialize Tracker this.tracker = new AR.Tracker("assets/magazine.wtc", {
onLoaded: this.worldLoaded });

// Create overlay for page one var imgOne = new AR.ImageResource("assets/imageOne.png");

var overlayOne = new AR.ImageDrawable(imgOne, 1, {
offsetX: -0.15, offsetY: 0 });

var pageOne = new AR.Trackable2DObject(this.tracker, "pageOne", {
drawables: { cam: overlayOne } });

Showen on this link: http://www.wikitude.com/external/doc/documentation/3.0/web/imagerecognition.html#image-recognition
titled, "Image on Target (1/3)"

Please, confirm if I'm correct and correct me if I'm wrong

Thank you so much for your attention.

That's correct! You can add the javascript code within a <script> tag or load it via an external script by specificing the src property of the <script> tag. If you are not that familiar with JavaScript, I would suggest to read up on it (there are plenty of tutorials if you google for it).

There is also the possibility to look at Wikitude Studio which allows you to create augmentation by simple drag'n'drop.

 

Hi Damm

So I'm in the right way hehehe
Yes, I'm familiar with JavaScript, not so deeply, but I know.

In this JavaScrit line...
var pageOne = new AR.Trackable2DObject(this.tracker, "pageOne", {

How will be or how can be "pageOne"?
 

Thank you again.

This depends on the image target name. When uploading images to our target management tool to create the tracker file (.wtc), you can see the image target name. It is the filename of the uploaded image. Have a look at our SDK documentation on creating image recognition targets and our examples on image recognition.

Hi again Damm

I get it.
Now, I have to put all my codes (HTML and JavaScript) in the index.html created by PhoneGap and execute in Xcode to see if everything is working, right?
After I install the application in my iPhone, correct?

That seems about right. I would suggest looking at our sample project for PhoneGap for guidance on how PhoneGap projects can make use of the WikitudeSDK.

Please find the sample project at: https://github.com/Wikitude/wikitude-phonegap/tree/master/iOS

Hi Damm

Why there are two target managers different?

http://studio.wikitude.com/studio
and
http://developer.wikitude.com/tools/target-manager/?level=0

I don't know exactly where to work hehehehe

Thanks

the second link (http://developer.wikitude.com/tools/target-manager/?level=0) is actually the target management tool.

Wikitude Studio allows to create augmentation by means of dragging and dropping elements.

PS.: Please call me Wolfgang, Mister Damm is my father ;).

Hi Wolfgang

First, sorry for I call you Damm.

Wolfgang, this link http://developer.wikitude.com/tools/target-manager/?level=0 just to convert the jpg in wtc! Nothing more!

This link http://studio.wikitude.com/studio I can choose the image target and the the image that will be the augmentations, but, when click on "export Project" this page generates another link, like this: http://goo.gl/mwNPm, so I go to this link and goes to another, link this http://s3-eu-west-1.amazonaws.com/studio-live/302926/worlds/14719755-a362-4f82-861e-17c8a47a47a9/wikitudeStudio.html and nothing happens. And if I put the link http://goo.gl/mwNPm in the wikitude app in my iPad or iPhone nothing happens too. And honestly hehehehe I think complicated your tutorial hehehehe, sorry to say that.