Start a new topic

Confused with "Scaled Distance Units (SDUs)"

Confused with "Scaled Distance Units (SDUs)"


Can anybody explain indetail abouth SDU? I've went through several times on the documentation. But i'm still confused with it. I have image drawables with different pixel sizes and I I'm with a trouble aligning them with the trackable image. Sometimes they are bigger than the target image and sometimes they are too small. Please help me with this and explain me how to 2D(pixel measured) images convert in to a image drawables.

Hi Namil,

Think of 1 SDU as the height of your target image. 1 SDU is totally independent from the actual pixel size.

When you set the height (second parameter in the constructor) of your ImageDrawable to 1 SDU, that size is equal to the height of your target image, i.e. the Image's height will span the entire height of the target.

In case you set the height of the ImageDrawable to 0.5 SDU, it will span half the size of the Target.

Again, just to stress that point, a SDU is independent from any pixels (that in fact is one of the main reasons why we introduced SDUs).

Best,

Martin

Thanks Martin, Your solution worked. Is it the same for the html drawables as well? I did a sample code for Html drawable. Even the SDU value of drawable is 1, the drawable is larger than the target image. The code is like following. The width of the image is also same to 500px.

Javascript

var html = new AR.HtmlDrawable({

uri: "assets/index.html"

}, 1, {

viewportWidth: 500,

viewportHeight: 680,

offsetX: 0,

offsetY: 0,

horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.CENTER,

verticalAnchor: AR.CONST.VERTICAL_ANCHOR.MIDDLE,

clickThroughEnabled: true,

allowDocumentLocationChanges: false,

onDocumentLocationChanged: function onDocumentLocationChangedFn(uri) {

AR.context.openInBrowser(uri);

}

});

 

Html File

<!DOCTYPE html> 

<html lang="en">

<head>

<meta name="viewport" content="target-densitydpi=device-dpi, width = 500, user-scalable = 0">


</head>

<body>

 

<div id="doc">

  <div id="content">

    <div class="imageContent">

      <ul class="slides">

        <li><img src="images/background.jpg" /></li>

      </ul>

    </div>

  </div>

</div>

</body>

</html>
Login or Signup to post a comment