Wikitude

Improving AREngine - HTMLDrawables

Unfortunately not and work on HTML Drawables is currently an ongoing process. please stay tuned for updates.

I'm just wondering if the Wikitude 2.0 SDK fixed this issue.

Thanks!

Displaying some kind of loading indicator would help I guess. This is easily achieved by using an AR.ImageDrawable or AR.AnimatedImageDrawable. If you design it smaller than the HTML drawables they will be hidden once the HTML is rendered. Make sure to set the zOrder property accordingly (0 for indicator and 1 for htmldrawables).

I guess preloading the images don't going to solve the problem, but I will make a quick test.

The main issue it's when I have a AR view with like 20 HTML Drawables, so it gonna take a lot of time to render everything. Then some users probably going to think that the AR View is not working or its broken. I guess this is a critical issue.

 

Thanks!

currently there is no way of knowing when the HTML Drawable is fully initialized.

It appears that the platform waits for all images to be retrieved before it can update the currently rendered HTML Drawables. This is something we will investigate further and might be able to solve in an upcoming version.

You might be able to pre load needed images in the main html page. After all images are loaded you can create the HTML Drawables. This might give you quicker loading times as the images should already be cached. I haven't tried it myself though, but it is definately worth trying. 

?Is there any way to know when the HTMLDrawable is rendered? Maybe in this way I can load one by one the items and show a alert to let know to the user when everything is loaded.

I tried with onLoad but didn't work.

Hi!

After a couple of tests I noticed something interesting about your engine. Right now I'm loading a JSON and then inyecting the data to some HTMLDrawables in this way:

function inyectLocations(data, path, url){

locations = new Array();
try { data = JSON.parse(data);}
catch(e){ data = new Array();}

for(var i = 0; i < data.length; i++) {

var lat = Math.floor(Math.random()*distance)-(distance/2)
var lon = Math.floor(Math.random()*distance)-(distance/2)
var alt = Math.floor(Math.random()*30)-(15)
var location = new AR.RelativeLocation(null, lat, lon, alt);

var params = new Array();
params = "path=" + path;
params = "image=" + url + "promo" + data.id + ".jpg";
params = "title=" + escape(data.title);
params = "owner=" + escape(data.owner);
params = "distance=" + Math.round(location.distanceToUser()) + "mts";

var uri = "coupon.html?" + params.join("&");
var node = new AR.HtmlDrawable({uri:uri}, 5, {scale:1, updateRate:AR.HtmlDrawable.UPDATE_RATE.STATIC, onClick:clickCoupon(i)})
var myCircle = new AR.Circle(5, {style: {fillColor: '#FFC100'}});
locations = new AR.GeoObject(location, {drawables: {cam: node}});

}
}

 

As you can see, I passing the variables using a simple URL GET query. Then in my coupon.html I have this code:

var params = {};
if (location.search) {
var parts = location.search.substring(1).split('&');
for (var i = 0; i < parts.length; i++) {
var nv = parts.split('=');
if (!nv) continue;
params = unescape(nv) || true;
}
}

var html = "<div class='coupon' style='background:url("+params.image+") no-repeat;'></div><div class='background' style='background:url("+params.path+"/bg-ar-promo.png) no-repeat;'><table><tbody><tr><td class='title'>"+params.title+"</td></tr><tr><td class='owner'>"+params.owner+"</td></tr><tr><td class='distance'>ESTAS A<br/>"+params.distance+"</td></tr></tbody></table></div>";
document.write(html)


 

So, after some test I found a small annoyning issue. My HTMLDrawables are rendered until all the external images are loaded... ?what I mean? if I have 10 HTMLDrawables all of them are rendered at the same time until they are full loaded. I think they should be rendered one by one. Maybe if I'm connected to a Wifi is OK, but when I'm using the 3G network is a pain :-/

I hope I've explained myself. ?Any solution?

Thanks!

UPDATE: The "pre" tag is cutting my code. Maybe you should copy & paste it in a external editor.