Wikitude
How can we help you today?
Radar is not working
11 CommentsSorted by Oldest First
Are you executing inyectLocations() correctly from the native part? Without this the arRadar.show() function won't be called. I quickly tried tested the code in the desktop browser using ade.js and it does not show any errors.
Yes, actually everything works (POI and indicators) except the radar as I said in the beggining of the post. Also the radar images are not loading and I downloaded the lastest Wikitude SDK version.
Are you using the latest SDK? Version 3.2 enbaled the usage of html divs to define the radar position.
If you are using 3.2 please provide a complete sample including an example input for your inyectLocations function, so I can have a look at it.
Hi, I'm trying to implement the radar but something is missing. With the code below everything works excepts the radar. Also the Ar.ImageResource onError/onLoad is not triggering :(
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=540, user-scalable = 0" />
<title>Sutsix</title>
<!-- CSS Styles -->
<style type="text/css">
* { margin: 0; }
html, body { height: 100%; font-weight:bold; }
#radar { position:absolute; top:10px; left:10px; width:100px; height:100px; background-color:#FF5500; }
</style>
<!-- Libreria Wikitude -->
<script src="architect://architect.js"></script>
<script>
// Variables
var locations, counter, data, maxdistance = 50000;
var arRadar = {
hide: function hideFn() { AR.radar.enabled = false;},
setMaxDistance: function setMaxDistanceFn(maxDistanceMeters) { AR.radar.maxDistance = maxdistance; },
show: function initFn() {
AR.radar.container = document.getElementById("radar");
AR.radar.background = new AR.ImageResource("radar_bg.png");
AR.radar.northIndicator.image = new AR.ImageResource("radar_north.png");
AR.radar.centerX = 0.5;
AR.radar.centerY = 0.5;
AR.radar.radius = 0.3;
AR.radar.northIndicator.radius = 0.0;
AR.radar.enabled = true;
},
updatePosition: function updatePositionFn() {
if (AR.radar.enabled) { AR.radar.notifyUpdateRadarPosition(); }
},
};
// Invoke the POI callback
function clickCoupon(id) {
return function() {
document.location = "architectsdk://opendetailpage?id="+id;
}
}
// Function to inyect data and create POI
function inyectLocations(data, url){
locations = new Array();
try {
data = JSON.parse(data);
}catch(e){
data = new Array();
}
arRadar.show();
for(var i = 0; i < data.length; i++) {
data.latitude = parseFloat(data.latitude);
data.longitude = parseFloat(data.longitude);
var location = new AR.GeoLocation(data.latitude, data.longitude, null);
var params = new Array();
var distance = Math.floor(location.distanceToUser());
var from = isNaN(distance) ? "N/A" : (distance + "mts");
if (distance > maxdistance) continue;
counter++;
params = "image=" + url + data.id;
params = "title=" + escape(data.title);
params = "distance=" + escape(from);
params = "id=" + data.id;
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 radar = new AR.Circle(0.03, {
horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.CENTER,
opacity: 0.8,
style: { fillColor: "#ffffff" }
});
var indicator = new AR.Circle(0.03, {
horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.CENTER,
opacity: 0.8,
style: { fillColor: "#000000" }
});
locations = new AR.GeoObject(location, {drawables: {cam: node, radar:, indicator:}});
}
if (counter == 0) {
alert("Sorry, there are not coupons available.");
}
}
</script>
</head>
<body>
<div id="radar">My radar</div>
</body>
</html>
Yes, I have the lastest SDK (I downloaded it the last week). My Objective-C code (defined in the viewDIdLoad):
if ( ) {
_wtArView = ;
;
_wtArView.delegate = self;
;
NSString *architectWorldURL = ;
;
}
My inyect locations:
if () {
NSData *data = ;
NSString *jsonString = ;
NSString *javaScriptToCall = ;
;
}
The _coupons variable comes from http://sutsix.com/api/coupons_ar and the coupon.html is:
<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, width = 245, user-scalable = 0" />
<style>
* {margin:0;}
body, html { margin:0; width: 245px; font-family:Helvetica; }
table {border-collapse:collapse;border:none;}
div.coupon {border-radius:50%; overflow:hidden; width: 245px; height:245px;}
td {vertical-align:middle; text-shadow:0 1px 0 #000000; font-weight:bold; text-align: center; line-height:17px; width: 245px; padding: 0;}
td.title {font-size:17px; color:#FFFFFF; height:60px; overflow:hidden; padding:20px 35px 0 35px; border-bottom:4px solid #000000; }
td.title div {height:53px; text-overflow:ellipsis; overflow:hidden; width: 175px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
td.distance div {font-size:14px; color:#e2cf00; background-color:#000000; height:30px; margin-top:140px; line-height:30px;}
</style>
</head>
<body>
<script>
var colors = ;
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 color = (colors != null ? colors : "#888888");
var html = "<div class='coupon' style='background:url("+params.image+") no-repeat;'><table><tbody><tr><td class='title' style='background-color:"+color+"'><div>"+params.title+"</div></td></tr><tr><td class='distance'><div>A "+params.distance+"</div></td></tr></tbody></table></div>";
document.write(html)
</script>
</body>
</html>
Thanks.
I quickly scanned over the code and do not see anything wrong with it. Could you please provide a zipped archive of the complete world including resources. Additionally you can test to see if there are any errors when loading the radar images by adding an onError trigger:
AR.radar.background = new AR.ImageResource("radar_bg.png", {onError: function() {alert('error loading resource radar_bg.png');} });
Hi Wolfang,
Could you provide me a email? Thanks!
please send it to forum (at) wikitude (dot) com
thanks
Sending...thanks :D
It actually works for me, the only thing is that your div where the radar should be positioned is not transparent. As we are drawing the radar in the background and not on top of the HTML content it is hidden. To fix this simply use "background: none" for the #radar css style.
Agg, it wasn't working. Thanks for your support Wolfang!
© 2023 Wikitude, a Qualcomm company
Daniel Fernández