Start a new topic

HTMLDrawable

HTMLDrawable


Thank you sir, it is finally working.

please try a colored body.

e.g. <body style='background-color: #ff0000'>

this way you will most definately see the html drawable. The next step to get the viewport right, will then be easier.

Hello,

 

I have changed the size to 1, and then viewport is all same at 512. I have even tried 320 but still it does not appear. I'm really stumped....   :(

It's there ;), you'll just have to look at it from far away.

What's happenign is that you defined the size to 4 which is 4 times the height of the image target. Your text is just drawn to the left of this and therefore won't be visible when normally viewed.

Additionally have a look at the viewport meta tag which you should use to match the viewport in html. See http://forum.wikitude.com/documentation?p_p_id=2_WAR_knowledgebaseportlet&p_p_lifecycle=0&p_p_state=normal&p_p_mode=view&p_p_col_id=column-2&p_p_col_count=1&_2_WAR_knowledgebaseportlet_mvcPath=%2Fdisplay%2Fview_article.jsp&_2_WAR_knowledgebaseportlet_resourcePrimKey=35564 under important.

Yes, I tried running in the ADE and it runs properly. But after compile it new and run the apk in the Android phone it cannot show the html. I put here the modified Simple IR code with the HTMLDrawable inside.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, width = 540, user-scalable = 0" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SGI Demo</title>

<style type="text/css">
.info {
  color: #9F6000;
  background-color: #FEEFB3;
  margin: -8px 1%;
  padding: 10px;
  font-size: 14pt;
  border-radius: 0 0 10px 10px;
  text-align: center;
}
</style>

<!-- Include the ARchitect library -->
<script src="architect://architect.js"></script>

<script src="ade.js"></script>

<script>

/* Global variables */
var logoTracker = null;
var htmlLarge = null;
var trackable2DObject = null;
var errorOccured = false;

function errorHTML() {
errorOccured = true;
document.getElementById("messageElement").innerHTML = "HTML Drawable";
}

function errorTracker() {
errorOccured = true;
document.getElementById("messageElement").innerHTML = "Unable to load image or tracker!";
}

function createTracker(){
//create a new html drawable and pass some setup parameters to it
htmlLarge = new AR.HtmlDrawable({
          html:"<h1 style='color:red'>red orb</h1>"
         },
         4,
         {
          viewportWidth: 512,
          scale:1,
          updateRate:AR.HtmlDrawable.UPDATE_RATE.HIGH,
          onLoaded : htmlLoaded,
          onError: errorHTML
         });

// create tracker
trackerDataSetPath = "texpo.zip";
logoTracker = new AR.Tracker(trackerDataSetPath, { onLoaded : trackerLoaded,
              onError: errorTracker});

//marker identification
trackable2DObject = new AR.Trackable2DObject(logoTracker, "marker1bw",
             {
             onEnterFieldOfVision : callIt,
               enabled : true,
               renderingOrder : 1,
                drawables: { cam: htmlLarge }
             }
            );
}

function callIt()
{
document.getElementById("foo").style.display = "";
}

function htmlLoaded()
{
document.getElementById("foo2").style.display = "";
}

function trackerLoaded()
{
if (errorOccured) return;

document.getElementById("messageElement").style.display = "none";
}
</script>
</head>
<body>
<div class="info" id="messageElement">Loading ...</div>
<div id="foo" style="color:red; display:none">foo bar</div>
<div id="foo2" style="color:red; display:none"><p>foo bar 2</p></div>
<script>
createTracker();
</script>
</body>
</html>

HTMLDrawables do not depend on IR or Geo, they should work with both. Did you check that your Javascript runs correctly using the ADE (Archtiect desktop engine)?

Hi guys,

 

I tried to put in the HTMLDrawable into Simple IR Example project. But it not work!! Why? I put in the others drawable and it is ok. Please help! I don't need the point of interest, only Image Recognition. Thanks.
Login or Signup to post a comment