Wikitude
How can we help you today?
Click on HTMLDrawable
5 CommentsSorted by Oldest First
Hi,
I cannot get any action by clicking on HtmlDrawable OR GeoObject on a device, but If I debug it with ADE, i can see the log-text in the console of Chrome / Firefox that it is clicked.
May be you can give me an answer, where i am wrong.
i have a dynamic htmldrawable like:
var htmlTop = "<!DOCTYPE html>n<html>\n<head>\n" +
"<title>Test</title>" +
"<meta charset='utf-8' />" + "\n" +
"<meta http-equiv='Content-Type:application/json; charset=UTF-8' />" + "\n" +
"<meta name='viewport' content='target-densitydpi=device-dpi, width = 263, user-scalable = 0' />" + "\n" +
"<link rel='stylesheet' href='/css/wikitude.css' />" + "\n" +
"<link rel='stylesheet' href='/css/pois.css' />" +
"<script type='text/javascript' src='/jquery/jquery-1.9.1.min.js'></script>" +
"</head>" + "<body>";
var htmlBottom = "</body>\n</html>";
var poiHTMLDrawable = new AR.HtmlDrawable({
html: htmlTop +
"<div class='pois' id='poi_" + poiData.id + "'>" + "\n" +
"<img alt='" + poiData.title + "' src='" + poiData.imageUrl + "' />" + "\n" +
"<div class='detail'>" + "\n" +
"<div class='title top0'>" + poiData.title+ "</div>" + "\n" +
"<div class='dist'>" +
parseInt(locationUser.distanceTo(htmlMarkerLocation), 10) + " m (Tafel-Pfad)" +
"</div>" + "\n" +
"</div>" + "\n" +
"</div>" +
htmlBottom
},
3, {
scale: 2,
opacity: 1,
horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.LEFT,
viewportWidth: 263,
viewportHeight: 98,
updateRate: AR.HtmlDrawable.UPDATE_RATE.HIGH,
onClick: HTMLMarker.prototype.getOnClickTrigger(this)
}
);
this.htmlMarkerObject = new AR.GeoObject(
htmlMarkerLocation, {
drawables: {
cam: ,
indicator: this.directionIndicator
},
onClick: function () {
var height = $(window).height();
World.eventLogger('Event Clicked');
}
}
);
Thank you
Hello,
Thanks for your request. What platform and device are you testing your code on? Are you using our Phonegap or Appcelerator plugins, or are you using the native SDKs directly?
Can you please also provide access to the HTMLMarker code, so we can debug internally and understand the issue better.
Thanks,
Martin
Hi,
thank you for your answer.
I am testing it on Samsung Tablet 10.1" (Android 4.1.1) .
Info: "World.onMarkerSelected(marker)": is same as in your examples.
The All HTMLMarker code is below:
function HTMLMarker(poiData)
{
this.poiData = poiData;
this.isSelected = false;
var htmlMarkerLocation = new AR.GeoLocation(poiData.latitude, poiData.longitude, poiData.altitude);
var locationUser = new AR.GeoLocation(poiData.actualLocLat, poiData.actualLocLon,0);
var htmlTop = "<!DOCTYPE html>n<html>\n<head>\n" +
"<title>Test</title>" +
"<meta charset='utf-8' />" + "\n" +
"<meta http-equiv='Content-Type:application/json; charset=UTF-8' />" + "\n" +
"<meta name='viewport' content='target-densitydpi=device-dpi, width = 263, user-scalable = 0' />" + "\n" +
"<link rel='stylesheet' href='/css/wikitude.css' />" + "\n" +
"<link rel='stylesheet' href='/css/pois.css' />" +
"<script type='text/javascript' src='/jquery/jquery-1.9.1.min.js'></script>" +
"</head>" + "<body>";
var htmlBottom = "</body>\n</html>";
var poiHTMLDrawable = new AR.HtmlDrawable({
html: htmlTop +
"<div class='pois' id='poi_" + poiData.id + "'>" + "\n" +
"<img alt='" + poiData.title + "' src='" + poiData.imageUrl + "' />" + "\n" +
"<div class='detail'>" + "\n" +
"<div class='title top0'>" + poiData.title+ "</div>" + "\n" +
"<div class='dist'>" +
parseInt(locationUser.distanceTo(htmlMarkerLocation), 10) + " m (Tafel-Pfad)" +
"</div>" + "\n" +
"</div>" + "\n" +
"</div>" +
htmlBottom
},
3, {
scale: 2,
opacity: 1,
horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.LEFT,
viewportWidth: 263,
viewportHeight: 98,
updateRate: AR.HtmlDrawable.UPDATE_RATE.HIGH,
onClick: HTMLMarker.prototype.getOnClickTrigger(this)
}
);
this.htmlMarkerObject = new AR.GeoObject(
htmlMarkerLocation, {
drawables: {
cam:
},
onClick: function () {
//var height = $(window).height();
World.eventLogger('Event Clicked');
$('#camera_listing').css({ 'display': 'block', 'height': '525px' }); //this DIV is is index.html. It is working on ADE, but not on device.
}
}
);
return this;
}
HTMLMarker.prototype.getOnClickTrigger = function (marker) {
return function () {
if(marker.isSelected)
{
HTMLMarker.prototype.setDeselected(marker);
}
else
{
HTMLMarker.prototype.setSelected(marker);
try {
World.onMarkerSelected(marker);
} catch(Err) { }
}
}
return true;
};
HTMLMarker.prototype.setSelected = function (marker) {
marker.isSelected = true;
World.eventLogger('HTMLMarker.isSelected = true; ');
// $('#detail').css('display', 'block');
}
HTMLMarker.prototype.setDeselected = function (marker) {
marker.isSelected = false;
World.eventLogger('HTMLMarker.isSelected = false; ');
//$('#detail').css('display', 'none');
}
Hello,
Can you please send us your entire source code in a zip file, so we are able to run and debug?
If you do not want to post your zip file to the forum directly, you can send the file to forum@wikitude.com with the subject line "Click on HTMLDrawable". We will follow up with you shortly!
Thanks a lot,
Martin
Hi Martin,
thank you very much for your help. The error was by including the "jquery.mobile-1.3.2.min.js" in html and after removing it, it is working fine.
Best Regards,
Engin
© 2023 Wikitude, a Qualcomm company
Engin Kaya