Wikitude

JSon data WikitudeSDK + PhoneGap

hello,

I am trying to display markers from a remote JSON file.

using this as example 

 

 



    /**

*

* This function gets called it the Wikitude SDK is able to start an ARchitect World (the current device is supported by the Wikitude SDK)

*

*/

    onDeviceIsReadyCallback : function()

    {

        // The device is able to launch ARchitect World, so we load the 'Hello World' example

        WikitudePlugin.loadARchitectWorld("assets/world/HelloWorld.html");

        

        // To be able to respond on events inside the ARchitect World, we set a onURLInvoke callback

        WikitudePlugin.setOnUrlInvokeCallback(app.onClickInARchitectWorld);

 

var sURL = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

jQuery.getJSON(sURL,

  {

    tags: "jquery",

    tagmode: "any",

    format: "json"

  },

  function(data) {

    $.each(data.items, function(i,item){

      WikitudePlugin.callJavaScript("didReceivedNewTextForLabel('" + item.media.m + "')");

      return false;

    });

  });

                                                  

 },

the application is not able to let me connect to the JSON file, while the same code works from the browser, but for some reason I am not able to dowload the data

could you please help me to fix this issue?

 

Thanks a mil.

Hi there!

I guess you want to display a number of POIs in the camera.
The "Hello World" Sample in our PhoneGap github-sample should only point out how you can interact with one "AR.Label" in ARchitect.

In your case you want to inject a number of POIs and display them as so called "AR.GeoObjects". Interaction and setup is quite similar. Please have a look at the SimpleARBrowser sample in the wikitudesdk.zip you downloaded from wikitude.com

Keep in mind that all the HTML/ARchitect world samples work on phoneGap same way than in any WikitudeSDK. You develop the ARchitect experience once and can display it using the iOS/Android/BB SDK or PhoneGap

Hope that helps.

Cheers,
Andi

Hello,

I am starting using your SDK, I have downloaded the "HelloWorld" example I have renamed the newData(jsonData) method with jsonpdataPOI(jsonData)

I Need to be able to download data directly from the HelloWorld.hml

You will see in highlighted in yellow the extra code that I have added on "HelloWorld" page.

the AR.context.onLocationChanged = locationChanged; looks like not being called, then the data non downloaded

Could you please help me to sort this?

Thanks.

S

 ---->  myGeoLocation = null;

 

           

            //function called from the native app fia callJavascript method

            //receives json-data as string and processes the contained information

            function jsonpdataPOI(jsonData){

                jsonObject = jsonData;

                document.getElementById("statusElement").innerHTML='Loading JSON objects';

                

                

                for(var i = 0; i < jsonObject.length; i++)

                {

                    var poidrawables = new Array();

                    var label = new AR.Label(jsonObject.name,1.0, {offsetY : -1.5,

                                             triggers: { 

                                             onClick:

                                             createClickTrigger(jsonObject.id)},

                                             style : {textColor : '#FFC100',backgroundColor : '#FFFFFF80'}});

                    

                    jsonObject.arLabel = label;

                    

                    var poiImage;

 

                    if(jsonObject.cat == 1) 

                    {

                        poiImage = firstImage;

                    }

                    else if(jsonObject.cat == 2)

                    {

                        poiImage = secondImage;

                    }

else if(jsonObject.cat == 3)

                    {

                        poiImage = thirdImage;

                    }

                    else

                    {

                        poiImage = forthImage;

                    }

                    

                    

                    var img = new AR.ImageDrawable(poiImage, 2.0,

                                                   {triggers: { 

                                                   onClick:

                                                   createClickTrigger(jsonObject.id)}}

                                                   );

                    

                    jsonObject.animation = createOnClickAnimation(img);

                    jsonObject.img = img;

                    

                    poidrawables.push(label);

                    poidrawables.push(img);

                    //geoLoc = new AR.GeoLocation(jsonObject.Point.latitude,jsonObject.Point.longitude,jsonObject.Point.altitude);

                    geoLoc = new AR.GeoLocation(jsonObject.lat,jsonObject.lng,jsonObject.alt);

                    jsonObject.poiObj = new AR.GeoObject(geoLoc, {drawables: {cam: poidrawables}});

                }

                

                document.getElementById("statusElement").style.display = "none";

            }

....

....

 


function locationChanged(lat, lon, alt, acc) {

            document.getElementById("statusElement").innerHTML='GPS Locations';

            // We are only interested in the first location, let's set the onLocationChanged trigger to null which

            // will deactivate it.

            AR.context.onLocationChanged = null;

 

            // Add a random value to current location, placing it randomly in the user's vicinity

            var objLat = lat + ((Math.random() - 0.5) / 1000);

            var objLon = lon + ((Math.random() - 0.5) / 1000);

 

            // Create a new GeoLocation with the calculated latitude and longitude

            // A GeoLocation defines a geo refernece location using latitude and longitude.  

            myGeoLocation = new AR.GeoLocation(objLat,objLon);

 

            // loading step is done, check if we need to start the experience


            document.getElementById("statusElement").innerHTML='Downloading data...';

            if (myGeoLocation != null && image.isLoaded()) {

 

           var surl =  "http://www.appyourmap.com/quartz/appyourmap/xml/wikiservice.aspx"; 

           $.ajax({

               url: surl, 

               data: { 

                       id:"",

                       lat: "53.277096", //lat, //

                       lng: "-6.414857", //lon, //

                       rad: "100",

                      dataType: "jsonp"

                },

             dataType: "jsonp",

             jsonp : "callback",

             jsonpCallback: "jsonpdata",

             crossDomain: true });

             }


 

}

 

 

// Set the on location changed trigger to call 'locationChanged'

AR.context.onLocationChanged = locationChanged;

Hi there!

You're making good progress. Looks good so far.
Quite hard to see the mistake/error without having the full sample in place.

Anyway: I recommend you to reach the goal step-by-step.


Import ade.js in oyur World's html as described in the ADE.html in the ArchitectTools Folder of the SDK (<script type="text/javascript" src="ade.js"></script>)

Having ade.js imported you can open the world on your dektop PC's browser and use JS Debugging tools, browser plugins or simply use the Inspect Element/JS Console feature of your preferred browser

Assure your JSON requests work as expected by adding the equest-command to the "onDeviceIsReadyCallback"-function and to some logging output there

Check if SIM is in your device (some Android ROM's do not fire location updates without SIM inserted) or use LocationSpoofer app for Android


The ade.js is something really helpfull - You can develop way faster since errors and debug information is provided. (You may write "AR.logger.debug("yourMessage");" and see it in the logging console.

Hope that helps.

Cheers,
Andi