Wikitude
How can we help you today?
Indicators are not visible
5 CommentsSorted by Oldest First
Hi Community,
i have a problem with the indicators. They are not visible in the window. I searched the internet for htutorials and i found one from here but i cant find my mistake.
Maybe some can help me. It would be nice.
It follows the code from my ARworld.
<!DOCTYPE html>
<html>
<head>
<title>My ARchitect World</title>
<!-- CSS Styles -->
<style type="text/css">
*
{
margin: 0;
}
html, body
{
height: 100%;
}
h3 span#poiName
{
margin-bottom:1em;
}
span#poiDesc
{
}
#footer
{
height: 4em;
background-color: rgba(255,255,255,0.5);
padding: 5px 10px;
display:none;
position:absolute;
bottom: 0px;
left: 0px;
right:0px;
moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
/* CSS Style for status message at the top of the HUD */
.status
{
border: solid 2px #6d6d6d;
background-color: #ff7900;
color: black;
text-align: center;
font-weight: bold;
position:absolute;
width: 90%;
height: 5%;
left: 5%;
top: 1%;
}
</style>
<!-- Include the ARchitect library -->
<script src="architect://architect.js"></script>
</head>
<body>
<script>
// Tutorial code using the ARchitect Javascript library
// Create new images, which will be loaded right away
firstImage = new AR.ImageResource("marker1.png", {onError: errorLoadingImage});
secondImage = new AR.ImageResource("marker2.png", {onError: errorLoadingImage});
thirdImage = new AR.ImageResource("marker3.png", {onError: errorLoadingImage});
// current selected object
var selectedObject = null;
//variable that keeps the jsonData received from the native app
var jsonObject;
//function that gets called when the displayed poi bubble is clicked
//sends the id of the selected poi to the native app
function generateOnPoiBubbleClickFunc(id)
{
return function()
{
document.location = "architectsdk://opendetailpage?id="+id;
}
}
// creates a property animation
function createOnClickAnimation(imageDrawable)
{
var anim = new AR.PropertyAnimation(imageDrawable, 'scaling', 1.0, 1.2, 750, new AR.EasingCurve(AR.CONST.EASING_CURVE_TYPE.EASE_OUT_ELASTIC, {amplitude : 2.0}) );
return anim;
}
// creates a function for assigning to label's and imageDrawable's onClickTrigger
function createClickTrigger(id)
{
return function()
{
// hide the bubble
document.getElementById("footer").style.display = 'block';
document.getElementById("poiName").innerHTML=jsonObject.name;
document.getElementById("poiDesc").innerHTML=jsonObject.description.substring(0,25);
document.getElementById("footer").onclick= generateOnPoiBubbleClickFunc(id);
// reset the previous selected poi
if(selectedObject != null)
{
// reset the property animation
selectedObject.animation.stop();
selectedObject.arLabel.style.backgroundColor = '#FFFFFF80';
selectedObject.img.scaling = 1.0;
selectedObject.poiObj.renderingOrder = 0;
}
// set a new select status for the current selected poi
selectedObject = jsonObject;
selectedObject.arLabel.style.backgroundColor = '#FFFFFFFF';
selectedObject.poiObj.renderingOrder = 1;
// start the assigned animation
selectedObject.animation.start();
return true;
}
}
//function called from the native app fia callJavascript method
//receives json-data as string and processes the contained information
function newData(jsonData){
jsonObject = jsonData;
document.getElementById("statusElement").innerHTML='Loading JSON objects';
for(var i = 0; i < jsonObject.length; i++)
{
var poidrawables = new Array();
geoLoc = new AR.GeoLocation(jsonObject.Point.latitude,jsonObject.Point.longitude,jsonObject.Point.altitude);
var label = new AR.Label(jsonObject.name,1.0, {offsetY : -1.5,
triggers: {
onClick:
createClickTrigger(jsonObject.id)},
style : {textColor : '#ff7900',backgroundColor : '#FFFFFF80'}});
var labelDistance = new AR.Label(""+geoLoc.distanceToUser(),1.0, {offsetY : -2.5,
triggers: {
onClick:
createClickTrigger(jsonObject.id)},
style : {textColor : '#ff7900',backgroundColor : '#FFFFFF80'}});
//jsonObject.arLabel = label;
var poiImage;
if(jsonObject.type == 1)
{
poiImage = firstImage;
}
else if(jsonObject.type == 2)
{
poiImage = secondImage;
}
else
{
poiImage = thirdImage;
}
var img = new AR.ImageDrawable(poiImage, 2.0,
{triggers: {
onClick:
createClickTrigger(jsonObject.id)}}
);
poidrawables.push(label);
poidrawables.push(labelDistance);
poidrawables.push(img);
var indicators = new Array();
var indiImg = new AR.ImageResource("http://www.fh-trier.de/~gerharc/ba/wikitude/arrow.png");
var indiDrawable = new AR.ImageDrawable(indiImg, 0.1, {verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP});
indicators.push(indiDrawable);
jsonObject.poiObj = new AR.GeoObject(geoLoc, {drawables: {cam: poidrawables}});
jsonObject.poiObj.drawables.indicator = indicators;
}
document.getElementById("statusElement").style.display='none';
}
// Called if loading of the image fails.
function errorLoadingImage() {
// set error message on HUD
document.getElementById("statusElement").innerHTML = "Unable to load image!";
}
// hide bubble and reset the selected poi if nothing was hit by a display click
AR.context.onScreenClick = function()
{
// hide the bubble
document.getElementById("footer").style.display = 'none';
// and reset the current selected poi
if(selectedObject != null)
{
// reset the property animation
selectedObject.animation.stop();
selectedObject.arLabel.style.backgroundColor = '#FFFFFF80';
selectedObject.img.scaling = 1.0;
selectedObject.poiObj.renderingOrder = 0;
selectedObject = null;
}
}
AR.context.onLocationChanged = function(lat, lon, alt, acc) {
// the current location's latitude, longitude, altitude and accuracy
// are passed in by the ARchitect
document.getElementById("lat").innerHTML="lat: "+lat;
document.getElementById("lon").innerHTML="lon: "+lon;
document.getElementById("alt").innerHTML="alt: "+alt;
for(var i = 0; i < jsonObject.length; i++)
{
jsonObject.poiObj.drawables.cam.text = "" + Math.round(jsonObject.poiObj.locations.distanceToUser())+" m";
}
}
</script>
<!-- Status element at the top of the HUD -->
<div id="statusElement" class="status">JSON objects loading...</div>
<br/>
<br/>
<br/>
<span id="lat"></span>
<span id="lon"></span>
<span id="alt"></span>
<div id="footer">
<h3><span id="poiName"></span></h3>
Description: <span id="poiDesc"></span><br/>
<p style="text-align:center;">Details...</p>
</div>
</body>
</html>
It would be nice if someone could help me.
Thanks
Is the indicator images copied to your html file folder ?
Can you see the markers ?
Hello Pradyumna,
yes they are in the same folder as the other sources.
My question is a little bit old so i figured out that this bug with the not visible indicators is only sometimes when i start the app the first time. After pressing the homebutton and returning to the app the indicators are visible and stay visible.
It seems to be a device specified bug or one from the framework. My device is a nexus 4.
Thanks for your response.
Hello Christian,
Yeah may be device specific. Couldn't say more. Lets hope wikitude team will reply to this.
Hi there,
This seems to be related to the asset-loading of the direction indicator. Please define the ImageResource and ImageDrawable of the direction-indicator separatly and implement an onError function, which will be called when asset is not loadable due to e.g. network issues. Also ensure the direction-indicator asset has small filesize for fast loading.
Hope that helps
Kind regards,
Andreas
© 2023 Wikitude, a Qualcomm company
Christian G