Wikitude

createWwwButton. Button height and width

Hello!

I have created the WwwButton but cannot figure out how to change its width and height. The button is loaded from web server and its image size is already large enough 512x256 but it loads very small in architectview.

Is there a way to resize it in JavaScript? Also, is there a document describing all parapeters createWwwButton can take? overview of other javascript functions architect view can support? 

Here is how I have created it: 

var tapButton = this.createWwwButton("< HERE IS URL TO VIDEO ON YOUTUBE >", 0.1, {

                                             offsetX: -0.45,

                                             offsetY: -0.45,

                                              zOrder: 1

                                                 });

 

Thank you! 

 

 

Hi Sergey!
You can find the implementation of the createWwwButton function a few line beneath there usage:

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

  options.onClick = function() {

    AR.context.openInBrowser(url);

  };

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

}

 

Here you can see the usage of the three parameter 'url, size & options'. URL is used to open the browser when a click event is registered on the AR.ImageDrawable. Size is used to determinate the AR.ImageDrawable size. This value is given in SDU's. You can read more about SDU's in our documentation and JS reference. The options parameter is used to transfer some additional paramters to the AR.ImageDrawable, e.g. there offset in x & y as well as there rendering order. To get more information on which options are available, please have a detailed look at our JS Reference which is included in the SDK package. The Reference explains in detail which parameters are available  for all AR. objects.

The size of the actual .png or .jpg does not affect the size of the image in AR. You can change the height of a drawable using the size parameter on AR.ImageDrawables. The width (in SDU's) will then be calculated accordingly. So simply change the size value from 0.1 to e.g. 0.3 and the drawable will appear bigger.

 

Best regards
Andreas

 

Andreas, thank you very much for your reply. Yes, it did work now. The button overlay did increase and because of that tapping on it and getting browser window to pop up became much easier... You have mentioned about JS reference. Is it a separate document available on Wikitude website? I do not see it under the documentation section. Is it called different? I do see HTML5 and Javascript but that section is just a list of same examples available for iOS for example and does not have detailed documentation on all Javascript functions available, description of parameters they accept and etc... I would really preffer to study documentation and not to bother you with little questions that I have.... for example I have noticed that after I take device aways from recognizable image, the video overlay dissapears and stops plays. I do not hear and do not see video playing... But it looks like it does not STOP but rather PAUSEs and continues to stream content. In the case of larger videos that generates lots of trafic!  Especially if user plays 5-10 videos... even if they do not play the video untill the end it still get their data consumed... 

Is there javascript stop() function or pause() is the only available? Is there a reference document I can check that?  I tried using stop() it does not report about a problem but even though when camera is taken aways and video stops playing the network indicator still shows that device is downloading content. Here is an example: 

 

   var video_var = new AR.Trackable2DObject(this.tracker, "video_target_image", {

                                          drawables: {

                                          cam:

                                          },

                                          onEnterFieldOfVision: function onEnterFieldOfViewFn () {

                                          earthlandia_video.play(1);

                                          earthlandia_video.playing = true;

                                          },

                                          onExitFieldOfVision: function onExitFieldOfView() {

                                           //if (earthlandia_video.playing) {

                                          earthlandia_video.stop();

                                          earthlandia_video.playing = false;

                                          // }

                                          }

                                          });

 

 

Thank you Andreas very much for your time and support! 

 

 

Hi Sergey,
Thanks for pointing out that the JS API Reference is not easy to find. Here is the direct link. We will update our website to make it more present. The documentation is also included in the SDK package which you've downloaded. I attached a screenshot which shows the relevant paths.

Yes, you can also stop a video drawable instead of just pausing it.

Best regards

Andreas

Andreas, thank you! 

I found the documentation and indeed there is a stop() function that I can use to stop the video. As I have mentioned in my previouse post the video stops and is not visible on the screen, sound also stops. However the network indicator on iphone device still shows that device is downloading something. Activity indicator on status bar keeps circling for another minute or so before it stops. This tells me that video is still being downloaded. I belive this should not be happening. Does network activity indicator stops on your devices once camera view is moved away from target image and javascript stop() function is called? 

Thank you! 

 

stop() will immediately stop all video playback but might be continuing preloading the video over the network. Have you considered putting the video inside the app bundle instead of streaming it over the network?

Best regards

Andreas

Yes Andreas, we know that video can be bundled into the app but for the particular feature we need to it be loading from the server because there are hundreds and hundreds of videos user can trigger to play. That is why we are concerned if video keeps on "silently" loading even after calling the stop() function, it will generate so much of extra traffic to users that they will uninstall our app immediately after learning which app generated so much of their data plan. So in this particular scenario stop() must stop preloading video because user does not want it anymore and wants to play another one. 

 

I will do more tests on stop() feature to learn how much more data the app consumes after stop() has been called but if you know for sure that stop() just like pause() continues to preload video content from internet then I think this needs to be fixed. Just like you said stop() should stop all video playback and not preload anymore data.

 

One more time thank you Andreas very much for your prompt responses to questions on this forum!

Sergey, you will need to call .destroy() on the VideoDrawable. The object will then be destroyed internally and all its resources will be freed. If you want to load this video again, you will need to create a new VideoDrawable object.