Start a new topic

HTMLdrawables not working

HTMLdrawables not working


Can someone tell me whats wrong with this? it's not working.

I've pretty much copied the examples given and used the ADE. There doesn't seem to be any problems but nothing shows up when i export it to my android device. thanks



function locationChanged() {


var poiHTMLdrawable = new AR.HtmlDrawable({uri:"windowting.html"},1, 

{ viewportWidth: 512,


  opacity : 0.9, 



var myGeoLocation = new AR.RelativeLocation(null, -100, 20, 0);



var geoObject = new AR.GeoObject(myGeoLocation, {drawables: {cam: poiHTMLdrawable }});








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

<link rel="stylesheet" href="hotel.css" type="text/css" media="screen">




<body class="w256">


<div style="width: 500px;">


<!-- name -->

<h1>Hotel North Three</h1>


<!-- address --> 

<span class="addr">121 Spring Garden Dr</span>


<!-- rating stars -->

<img class="rating" src="rating_hotel1.png"/> <br/><br/>


<!-- thumbnail -->

<img src="thumbnail_hotel1.png" class="thumbnail" height="70px" width="70px" align="RIGHT"/>


<!-- description -->

<span class="descr">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>









div {

background: #ffffff; /* Old browsers */

background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */

background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

border-radius: 1em;

display: inline-block; 


padding:6px 6px 6px;

width: 440px



h1 {

text-align: center; 

font-weight: bold; 

padding:5px 0px 0px; 

font-family:Verdana, arial, helvetica; 


text-align: left



SPAN.descr {

padding:0px 0px 0px; 

font-family:Verdana, arial, helvetica; 




SPAN.addr {

padding:0px 0px 0px; 

font-family:Verdana, arial, helvetica; 





BODY.w256 {

margin: 0; 

background-color: #ff0000; 

width: 512px;



IMG.thumbnail {

padding:5px 2px 1em 5px; 



IMG.rating { 

padding:5px 5px 0px 5px;



There's a few things you can check:

- Is the POI showing up at the expected location? For this you can use a AR.Circle and attach it to the AR.GeoObject instead of the HTMLDrawable.

- Is the HTML rendered correctly? Set a background color on the body so you know if any positioning of the actual content is off.

If this does not help, you can attach the full architect world (.html, .css, .js files) to the post and I can have a look at it.

 Hey Wolfgang, 

I'm pretty sure i've done the things you said, so heres my files.



Just checked your sample and it is working for me. I can see the HTML Drawable in the AR view.

Which version of the SDK do you use? There was a problem with 1.2 and Android which was fixed in 1.2.1

ahh i see. Well i'm using 1.2...

so i'll update and see if it works.

Thanks again,

Hey hey heyyy, 

Works now i updated the sdk

Thanks Wolfgang
Login or Signup to post a comment