Start a new topic

Change the width of the drawable

Change the width of the drawable


Hi Joee,

You can try to leverage the enableClickThrough and allowDocumentLocationChanges flags of the HtmlDrawable. However, for videos, you'll get the best performance when you use VideoDrawables, so I encourage you to look into them rather than using generic HtmlDrawables.

Best,

Martin

Hi,

Thanks very much Martin

So it is not possible to interact with embedded videos right now (like normal youtube videos)?

Thanks

Hi Joee,

Yes, we are aware of this and have a fix of this behavior in our backlog.

For videos, however, you might be better off using VideoDrawables instead of HTMLDrawables. They allow you to use H.264 encoded videos and you have full control over starting, pausing, resuming and stopping them.

Best,

Martin

Thanks very much Martin.

From what we understood HTMLDrawables can be one of the most useful features of wikitude sdk.

What we are trying now and it can be a great feature is to use url of video sites embed link like youtube and vimeo in HTMLDrawable. though the video appears in the drawable , you can't click and interact with them.

I wanted to ask how can we do such thing

Thanks very much

Hi Joee,

 

When you use HTMLDrawables that need to fit to a specific dimension, you need to take care of the viewport settings.Otherwise, the system will not know how big it should render 800 pixels (remember that in an AR system, "pixels" don't really make sense, as everything is defined with respect to the size and distance to the target). Your code needs to look similar like this

 

var htmlSample = new AR.HtmlDrawable(

{html:"<html><head>

<meta name='viewport' content='initial-scale=1.0,user-scalable=no,target-densitydpi=device-dpi,width=800'/></head>

<body><div style='background-color:blue;width:800px;height:600px;'></div></body></html>"},

800./600.,{

offsetX: 0,

offsetY: 0,

viewportWidth : 800,

viewportHeight : 600,

zOrder : -1

});

 


width:800 tells the webview that the initial number of pixels that should be visible is 800 (the entire width of your drawable)

800./600. sets the dimension of the HTMLDrawable with respect to the target. Remember that 1 SDU is defined as the height of the target, but HTMLDrawables must define its width, so you need to divide the width by the height.

viewportWidth:800 and viewportHeight:600 tells the Wikitude SDK how many pixels it should render. This is similar to the first setting, but is oriented towards the Wikitude SDK itself.


You might need to adjust these values slightly according to your exact scenario.

Best,

Martin

Hi Joee,

Thanks for reaching out. I will need to check this internally with our engineers, there seems to be a bit of unconsistency in the calculation of the position of HtmlDrawables.

I will alert them about this and will get back to you as soon as we have an answer to this.

What device and OS version are you running specifically, and what Wikitude SDK version are you using?

Thanks,

Martin

Thanks Martin , as you suggested we changed the width parameter and we are very near the result we wanted , but as you can see in the link of the image, it still doesn't cover the left and top of the target. Sure we can adjust values to see how to fit it but our application is creating objects dynamically and we have to get to a formula for doing this.

http://i.imgur.com/wW3l8wL.jpg

Thanks very much

Hi Joee,

I just discovered that since you are using an 800x600 image (and not 600x800), you need to divide the other way around (800/600). The HTMLDrawable is just too small right now. As I said, you might also need to adjust the values slightly to fit your exact scenario. Adjust the width parameter of the HTMLDrawable so that it exactly fits your target.

Best,

Martin

Thanks very much

But I still can't fill the target, the target image is exactly 800*600 and with the code you suggested I get this result : 

http://i.imgur.com/PPTPTn2.jpg

I'm now experimenting with HTMLDrawables to change with and height as I want

I created the HTMLDrawable like this : 

var htmlSample = new AR.HtmlDrawable({html:"<div style='background-color:blue;width:800px;height:600px'></div>"},1,{

offsetX: 0,

offsetY: 0,

});

 

I have a 800*600 target image and I supposed this drawable will fill my target but it just fills the height of the image and doesn't cover the width of my target.

We wanted help to find a way to make an HTMLDrawable which covers a 800*600 cover image.

Thanks very much

Hi Joee,

I assume that you talk about ImageDrawables. In this case, you have 2 options to achieve this:

1.) Manually adapt the underlying binary image so that it is available in the desired aspect ratio.

2.) Instead of using an ImageDrawable, use a HtmlDrawable and place the image into it. That way, you have full HTML-control over how the image is rendered (as you would have on an ordinary webpage).

Best,

Martin

If I can't change the aspect ratio it will affect my project very badly, is there any way to manipulate it via HTML and CSS indirectly?

thanks

Hi Joee,

Unfortunately, it is not possible to change the aspect ratio manually. Also the width is auto-calculated and cannot be set. However, we will discuss your feature request internally, maybe we will include it in future releases.

Best,

Martin

Hi , I wanted to change the width of my drawable , but I can only change the height and the width will be changed base on the aspect ration. I wanted to know if there is a way to change the width directly or change it by changing the aspect ratio of the drawable.

thanks very much
Login or Signup to post a comment