Step by Step wizard with transparent videos : Wikitude

N

NN

started a topic almost 9 years ago

Step by Step wizard with transparent videos

A

Andreas Schacherbauer

said almost 9 years ago

Hi NN,
Are you using PhoneGap/Titanium or the iOS/Android SDK directly?

To communicate between JS => Java/ObjC, you can the architectsdk:// protocol used in conjunction with document.location. If you e.g. have document.location = architectsdk://myCustomAction?withOptionalParameter=5&anotherParameter=9 somewhere in you code, you can react on this call by setting a URLInvokedHandler in ObjC/Java. On iOS, you can specify this handler using the WTARchitectViewDelegate and in Java by overriding the URLInvoked method of ArchitectView. Once you have the information in ObjC/Java, you can load another Architect World.

To communicate from Java/ObjC => JS, you can use the (WT)ArchitectView method callJavaScript.

You can also refer to the example application, example 'Browsing Pois - Native Detail Screen' or the following knowledge base article.

Best regards

Andreas

N

NN

said almost 9 years ago

Hi Andreas.

I am using the phonegap plugin and I develop using Netbeans

I don't need to communicate between JS => Java/ObjC. I think that my problems is much more newbie (I am VERY new on your product) .

I just need to load a second world from one other world just by pressing a button (wwwbutton, htmldrawable, I dont know what). The target image will be the same in both the two worlds (like the one in the 1:17 minute of this video https://www.youtube.com/watch?v=z1aeWUVsuKE )

Imagine that I need to build a step by step "wizard" on my company's banner to guide the users to make the right choice of a product.

I will try your suggestion though and I will be back!!

Thank you very much

N

NN

said almost 9 years ago

Hi,

The idea is simple; I want an AR world that plays a transparent video (like the one with the boards on the youtube) and I will have 4 buttons on the left part. Each of these button (at click) opens a new world (html) and a different transparent video plays.

Is that possible? I am stuck at how to load a different world from inside the js. Can anyone help on that or provide a different approach?

I use cordova plugin

Thanks

N

NN

said almost 9 years ago

Hi again

As I say it was a much more newbie question (after all I work with your SDK less than 10 days and JS is not my good skill either). Anyway

I managed to do the step by step wizard I mentioned earlier.

I have a problem though. I managed to create a video and a button at the first tracking. That button correctly swap video with the next step, I can hear the second video, but I cannot see it. The funny thing is that if refresh the screen (by moving out of the tracking image and reenter) the correct video "magicaly" appears. Now I have both audio and video. I have tried everything my js skills can think but failed. So I am asking once more your help

The code is below. Be gentle

Thanks

var trackObj1;

var World = {

loaded: false,

init: function initFn() {

this.createOverlays();

},



createOverlays: function createOverlaysFn() {

// Initialize ClientTracker

this.tracker = new AR.ClientTracker("assets/banner.wtc", {

onLoaded: this.worldLoaded

});



var nikiVideo = new AR.VideoDrawable("assets/niki.mp4", 0.95, {

offsetX: 0.08,

offsetY: 0.05,

isTransparent: true

});



var venusVideo = new AR.VideoDrawable("assets/venus.mp4", 0.97, {

offsetX: 0.05,

offsetY: 0.02,

isTransparent: true

});

this.imgButton = new AR.ImageResource("assets/wwwButton.jpg");

var pageOneButton = this.createButton("venus",venusVideo,nikiVideo, 0.1, {

offsetX: -0.25,

offsetY: -0.25,

zOrder: 1

});

trackObj1 = this.createTrackableObject(this.tracker, "*",nikiVideo, {

drawables: {

cam:

}

});





},



createTrackableObject: function createTrackableObjectFn (target,targetName,startVideo, options) {





options.onEnterFieldOfVision = function () {

startVideo.resume();

},

options.onExitFieldOfVision = function () {

startVideo.stop();

}

return new AR.Trackable2DObject(target, targetName, options);





} ,

createWwwButton: function createWwwButtonFn(url, size, options) {

options.onClick = function() {

// this call opens a url in a browser window

AR.context.openInBrowser(url);

};

return new AR.ImageDrawable(this.imgButton, size, options);

},



createButton: function createButtonFn(id, startVideo,endVideo, size, options) {



options.onClick = function() {

if (id === "venus") {

trackObj1.destroy();

endVideo.stop();

trackObj1 = World.createTrackableObject(World.tracker, "*",startVideo, {

drawables: {

cam:

}

});



startVideo.play(1);

}

};



return new AR.ImageDrawable(this.imgButton, size, options);

},







worldLoaded: function worldLoadedFn() {

var cssDivInstructions = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";

var cssDivBanner = " style='display: table-cell;vertical-align: middle; text-align: left; padding-right: 15px;'";

document.getElementById('loadingMessage').innerHTML =

"<div" + cssDivInstructions + ">Scan Target #1 (banner) :</div>" +

"<div" + cssDivBanner + "><img src='assets/banner_th.png'></img></div>";

// Remove Scan target message after 10 sec.

setTimeout(function() {

var e = document.getElementById('loadingMessage');

e.parentElement.removeChild(e);

}, 10000);

}

};

World.init();

A

Andreas Schacherbauer

said almost 9 years ago

Hi NN,
Are you using the Wikitude Cordova Plugin for iOS, Android or both? Please send us all your development details like IDE, OS version, Wikitude SDK version, platform, ...

Best regards

Andreas

N

NN

said almost 9 years ago

Hi Andreas

Wikitude Cordova Plugin for Android

NetBeans 8, Win 7 64bit i7 32GB, SDK 4.1 ,just android for now (development phone 4.4.2)

I use your transparent video example to start.

Please let me know if you need something more

Thanks

N

NN

said almost 9 years ago

I also use this link to start

http://www.wikitude.com/developer/documentation/phonegap

A

Andreas Schacherbauer

said almost 9 years ago

Can you try to run the same app on an iOS device? I would like to find out if it's only a Android issue or also affects iOS.

Best regards

Andreas

N

NN

said almost 9 years ago

Unfortunately I don't have access now to an IOS device, just emulator

I will try to find one today or maybe tomorrow

Is my code correct?

A

Andreas Schacherbauer

said almost 9 years ago

The iOS Simulator does only show a black image because there is no access to a camera given, so it's useless to run your app on the iOS Simulator.

Your code isn't explicitly wrong, but maybe could be more clear at some points. For example you're using '*' as target image identifier for all trackables. Maybe you want to replace * with the actual target name you want to refer to when showing a certain video drawable. I also find your code not that easy to understand, maybe you want to start from scratch and setup creation of objects somehow differently.

I know that we had issues with video drawables on Android, almost a year ago, that could maybe explain your experienced behaviour, but they should be fixed in the 4.x SDK.

Best regards

Andreas

N

NN

said almost 9 years ago

I will try to find a real device and I will tell you.

The * sign is because I have only one image to track. I guessed that is ok, but I can change it

It is very surprising though that I can hear the video, but cannot see it. Maybe something isn't drawn well?

N

NN

said almost 9 years ago

Hi

I can't find a real device for testing, I need a developer license from apple that I don't own at this time, also

I think that this is a bug but I can't test it more

Can you please test the code on your enviroment to confirm that it is ok.

Can you tell me that this is working on IOS or/and Android?

Mine is (+ the above) cordova 5.0.0/plugin 4.1.0/3.1.0

How can we help you today?