Start a new topic

Indicators are not visible

Indicators are not visible


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

 
Login or Signup to post a comment