Start a new topic

Radar is not showing itself

Radar is not showing itself


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




Login or Signup to post a comment