Wikitude
How can we help you today?
Radar is not showing itself
16 CommentsSorted by Oldest First
Hi,
I'm triyng to add a radar in my world. On the ade it seems is enabled, images are loaded, but on the page nothing is printed...
I wrote this code to initialize radar class and I call 'show' method in the loadPoisFromData in my world:
var poiRadar = {
hide: function hideFn() {
AR.radar.enabled = false;
},
show: function initFn() {
AR.radar.enabled = true;
AR.radar.container = document.getElementById("radarContainer");
AR.radar.background = new AR.ImageResource("assets/radar_bg.png");
AR.radar.northIndicator.image = new AR.ImageResource("assets/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.maxDistance = 200;
},
updatePosition: function updatePositionFn() {
if (AR.radar.enabled) {
AR.radar.notifyUpdateRadarPosition();
}
}
};
Hi Luca,
The configuration seems to be OK. Do you have a div with the ID "radarContainer" in your DOM that can host the radar?
If yes, can you send us your entire project data (either post it here, or send an email with the subject "Radar is not showing itself" to forum@wikitude.com), so we can check the reason for the issue, thanks!
Best,
Martin
Thanks Martin. Here the files are.
INDEX.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- basic meta information -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="application/json; charset=utf-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">
<title>My ARchitect World</title>
<script src="architect://architect.js"></script>
<!-- jquery mobile CSS -->
<link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="css/radar.css" />
<!-- required to set background transparent & enable "click through" -->
<link rel="stylesheet" href="jquery/jquery-mobile-transparent-ui-overlay.css" />
<!-- jquery JS files -->
<script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="ade.js"></script>
<!-- World logic-->
<script type="text/javascript" src="js/marker.js"></script>
<script type="text/javascript" src="js/multiplepois2.js"></script>
<script type="text/javascript" src="js/radar.js"></script>
</head>
<body >
<div data-role="page" id="page1" style="background: none;" >
<!-- MAIN PAGE CONTENT -->
<div class="radarContainer_left" id="radarContainer"></div>
<div data-role="button" data-icon="info" id="info" style="display: none; margin-top: 50px; width: 10%;">Info</div>
<div data-role="button" data-icon="info" id="3D" style="display: none; margin-top: 130px; width: 10%;">3D</div>
<!-- transparent footer-->
</div>
</body>
</html>
MULTIPLEPOIS2.js
// implementation of AR-Experience (aka "World")
var World = {
// true once data was fetched
initiallyLoadedData: false,
yetLoad: ,
// different POI-Marker assets
markerDrawable_idle: null,
markerDrawable_selected: null,
// list of AR.GeoObjects that are currently shown in the scene / World
markerList: ,
// The last selected marker
currentMarker: null,
// called to inject new POI data
loadPoisFromJsonData: function loadPoisFromJsonDataFn(poiData) {
poiRadar.show();
//$('#radarContainer').unbind('click');
//$("#radarContainer").click(PoiRadar.clickedRadar);
// empty list of visible markers
World.markerList = ;
// start loading marker assets
World.markerDrawable_idle = new AR.ImageResource("assets/marker_idle.png");
World.markerDrawable_selected = new AR.ImageResource("assets/marker_selected.png");
// loop through POI-information and create an AR.GeoObject (=Marker) per POI
for (var currentPlaceNr = 0; currentPlaceNr < poiData.length; currentPlaceNr++) {
var singlePoi = {
"id": poiData.id,
"latitude": parseFloat(poiData.latitude),
"longitude": parseFloat(poiData.longitude),
"altitude": parseFloat(poiData.altitude),
"title": poiData.name,
"description": poiData.description
};
World.markerList.push(new Marker(singlePoi));
}
World.updateStatusMessage(currentPlaceNr + ' places loaded');
},
populatingYetLoad: function populatingYetLoadFn()
{
for (i=0; i<World.markerList.lenght; i++)
World.yetLoad = false;
},
// updates status message shon in small "i"-button aligned bottom center
updateStatusMessage: function updateStatusMessageFn(message, isWarning) {
var themeToUse = isWarning ? "e" : "c";
var iconToUse = isWarning ? "alert" : "info";
$("#status-message").html(message);
$("#popupInfoButton").buttonMarkup({
theme: themeToUse
});
$("#popupInfoButton").buttonMarkup({
icon: iconToUse
});
},
// location updates, fired every time you call architectView.setLocation() in native environment
locationChanged: function locationChangedFn(lat, lon, alt, acc) {
// request data if not already present
if (!World.initiallyLoadedData)
{
World.requestDataFromLocal(lat, lon);
World.initiallyLoadedData = true;
}
else
{
var newLocation = new AR.GeoLocation(lat, lon, alt);
for(i=0;i< World.markerList.length;i++)
{
World.markerList.distanceToUser = World.markerList.markerObject.locations.distanceToUser();
// Updating POI distance
var newLocation2 = World.markerList.markerLocation;
var distanceUpdate2 = (newLocation2.distanceToUser() > 999) ? ((newLocation2.distanceToUser() / 1000).toFixed(2) + " km") : (Math.round(newLocation2.distanceToUser()) + " m");
World.markerList.distanceLabel.text = distanceUpdate2;
// Loading Camera if distance is <= 5m
if (Math.round(newLocation2.distanceToUser()) <= 100)
{
if (! World.yetLoad)
{
World.yetLoad = true;
var markerNear = World.markerList;
markerNear.markerObject.drawables.removeCamDrawable();
jQuery("#info").show();
jQuery("#3D").show();
jQuery("#info").click(function()
{
document.location = "architectsdk://clickOnObject?param="+markerNear.id;
});
jQuery("#3D").click(function()
{
jQuery("#3D").hide();
jQuery("#info").hide();
jQuery("#return").show();
var model = new AR.Model("3d/"+markerNear.id+".wt3",
{
onLoaded: function()
{
markerNear.markerObject.drawables.addCamDrawable(model);
this.scale.x = 0.03;
this.scale.y = 0.03;
this.scale.z = 0.03;
this.rotate.heading = 270.0;
this.translate.z = 0.0;
this.translate.x = -50.0;
}
});
jQuery("#return").click(function()
{
markerNear.markerObject.drawables.removeCamDrawable(model);
markerNear.markerObject.drawables.addCamDrawable();
jQuery("#info").show();
jQuery("#3D").show();
jQuery("#return").hide();
});
});
}
}
else
{
World.yetLoad = false;
}
}
}
},
// tell native (urlListener) that user pressed 'Snapshot' button
captureScreen: function captureScreenFn()
{
document.location = "architectsdk://screenshot";
},
// request POI data
requestDataFromLocal: function requestDataFromLocalFn(centerPointLatitude, centerPointLongitude) {
var poiData = ;
poiData.push(
{
"id": 1,
"longitude": 12.239398,
"latitude": 41.768800,
"description": "Il parco pubblico di Fiumicino",
"altitude": "3.0",
"name": ("Villa Guglielmi")
},
{
"id": 2,
"longitude": 12.237306,
"latitude": 41.773254,
"description": "Sotto casa",
"altitude": "-5.0",
"name": ("Qui")
},
{
"id": 3,
"longitude": 12.278118,
"latitude": 41.729759,
"description": "Il centro nevralgico di Ostia",
"altitude": "1.0",
"name": ("Piazza Anco Marzio")
},
{
"id": 5,
"longitude": 12.485492,
"latitude": 41.892000,
"description": "",
"altitude": "14.0",
"name": ("Basilica Julia")
},
{
"id": 4,
"longitude": 12.488709,
"latitude": 41.890777,
"description": "",
"altitude": "-10.0",
"name": ("Arco di Tito")
},
{
"id": 6,
"longitude": 12.487815,
"latitude": 41.891780,
"description": "",
"altitude": "33.0",
"name": ("Basilica di Massenzio")
}
);
World.loadPoisFromJsonData(poiData);
}
};
/* forward locationChanges to custom function */
setInterval(function()
{
AR.context.onLocationChanged = World.locationChanged;
}, 500);
function destroyAll()
{
AR.context.destroyAll();
}
MARKER.JS
function Marker(poiData) {
this.poiData = poiData;
this.id = poiData.id;
this.name = poiData.title;
this.markerLocation = new AR.GeoLocation(poiData.latitude, poiData.longitude, poiData.altitude);
this.distance = (this.markerLocation.distanceToUser() > 999) ? ((this.markerLocation.distanceToUser() / 1000).toFixed(2) + " km") : (Math.round(this.markerLocation.distanceToUser()) + " m");
this.markerDrawable_idle = new AR.ImageDrawable(World.markerDrawable_idle, 2.5, {
zOrder: 0,
opacity: 1.0
//onClick: Marker.prototype.getOnClickTrigger(this)
});
this.markerDrawable_selected = new AR.ImageDrawable(World.markerDrawable_selected, 2.5, {
zOrder: 0,
opacity: 0.0,
onClick: null
});
this.titleLabel = new AR.Label(poiData.title.trunc(25), 1, {
zOrder: 1,
offsetY: 0.55,
style: {
textColor: '#FFFFFF',
fontStyle: AR.CONST.FONT_STYLE.BOLD
},
scale: 0.5
});
this.descriptionLabel = new AR.Label(poiData.description.trunc(30), 0.8, {
zOrder: 1,
offsetY: -0.55,
style: {
textColor: '#FFFFFF'
},
scale: 0.4
});
this.distanceLabel = new AR.Label(this.distance, 0.8, {
zOrder: 1,
offsetY: -0.110,
style: {
textColor: '#FFFFFF'
}
});
this.radarCircle = new AR.Circle(0.03, {
horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.CENTER,
opacity: 0.8,
style: {
fillColor: "#ff0000"
}
});
this.radarCircleSelected = new AR.Circle(0.05, {
horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.CENTER,
opacity: 0.8,
style: {
fillColor: "#0066ff"
}
});
this.radardrawables = ;
this.radardrawables.push(this.radarCircle);
this.radardrawablesSelected = ;
this.radardrawablesSelected.push(this.radarCircleSelected);
// Changed:
this.markerObject = new AR.GeoObject(this.markerLocation, {
drawables: {
cam: ,
radar: this.radardrawables
}
});
return this;
}
RADAR.JS as in the first post.
Hi Luca,
Please send us a zip file of your project, containing all files and assets you are using, otherwise, we cannot check if the assets are correctly loaded, thanks!
Best,
Martin
Sorry, it is in attachment
Hi Luca,
Are you missing the jquery libraries? They are not included in the project.
Best,
Martin
Sorry, files are in the project. I did not included because I thought it was useless
Hi Luca,
In order to run your project, we need all the files that you are using (even though it is possible that we download them from the internet, we wouldn't know if you are actually using exactly that version of the file, and might not get the issue as you see it).
So, to fully run your project and help you out with your issues, we need all the files you are using, including all assets and anything that is required by your project. Then we can run it through our simulator and check where we see hickups, and can get back to you with a full answer on where your content might run into issues. If we don't have all assets you are using, we will see many more errors that you do due to missing files, includes, dependencies and relationships.
So please add the full project with all the files, libraries, assets etc. to this post, and we'll be glad to help, thanks!
Best,
Martin
Ok. Only iOS Project is missing now. Sorry for misunderstanding.
Hi Luca,
Thanks for the files, I tried your example now, and I can see the radar.
Can you please make sure that you ever actually get a location update (by putting a log or an alert into the locationChanged function), since your radar will only be shown when you get the first location update?
If you get updates, please tell me your exact device model and the SDK version you're using, thanks!
Best,
Martin
Running the file alert was showed...
iOS SDK 3.3.0
The problem is that also using the ade with Safari, radar doesn't show...
Hi Luca,
Ah, I think I understand now - did you ever try to run the code on a mobile device?
It is expected behavior that the radar does not show in the ADE. The ADE is there to debug vaues, not to actually show the real visual result. If you want to get the visual result, you need to try it on a mobile device with your own app, not through Safari. The ADE only helps you with debugging.
Best,
Martin
Yes Martin, thank you and sorry for the time you lose
I have confirmed that when debugging in the ADE all javascript stops after this line:
AR.radar.container = document.getElementById("radarContainer");
Works on a mobile device
© 2023 Wikitude, a Qualcomm company
Luca