Start a new topic



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.



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 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" "">
<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;

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

<script src="ade.js"></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>"
          viewportWidth: 512,
          onLoaded : htmlLoaded,
          onError: errorHTML

// create tracker
trackerDataSetPath = "";
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";
<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>

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