Wikitude
How can we help you today?
HTMLDrawable
7 CommentsSorted by Oldest First
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.
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)?
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>
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.
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.... :(
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.
Thank you sir, it is finally working.
© 2023 Wikitude, a Qualcomm company
Jonathan Ho