Wikitude

Presenting Details from Local source.

I am using the WikitudeSDKSamples app in Eclipse and am trying to figure out how to get the panel to slide out when pulling from my JSON data?

Any advice on this?

 

// implementation of AR-Experience (aka "World")

var World = {

// you may request new data from server periodically, however: in this sample data is only requested once

isRequestingData: false,

 

// true once data was fetched

initiallyLoadedData: false,

 

// different POI-Marker assets

markerDrawable_idle: null,

markerDrawable_selected: null,

markerDrawable_directionIndicator: null,

 

// list of AR.GeoObjects that are currently shown in the scene / World

markerList: ,

 

// The last selected marker

currentMarker: null,

 

locationUpdateCounter: 0,

updatePlacemarkDistancesEveryXLocationUpdates: 10,

 

// called to inject new POI data

loadPoisFromJsonData: function loadPoisFromJsonDataFn(poiData) {

 

// 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");

World.markerDrawable_directionIndicator = new AR.ImageResource("assets/indi.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));

}

 

// updates distance information of all placemarks

World.updateDistanceToUserValues();

 

World.updateStatusMessage(currentPlaceNr + ' places loaded');

},

 

// sets/updates distances of all makers so they are available way faster than calling (time-consuming) distanceToUser() method all the time

updateDistanceToUserValues: function updateDistanceToUserValuesFn() {

for (var i = 0; i < World.markerList.length; i++) {

World.markerList.distanceToUser = World.markerList.markerObject.locations.distanceToUser();

}

},

 

// 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.requestDataFromServer(lat, lon);

World.initiallyLoadedData = true;

} else if (World.locationUpdateCounter === 0) {

// update placemark distance information frequently, you max also update distances only every 10m with some more effort

World.updateDistanceToUserValues();

}

 

// helper used to update placemark information every now and then (e.g. every 10 location upadtes fired)

World.locationUpdateCounter = (++World.locationUpdateCounter % World.updatePlacemarkDistancesEveryXLocationUpdates);

},

 

// fired when user pressed maker in cam

onMarkerSelected: function onMarkerSelectedFn(marker) {

World.currentMarker = marker;

 

// update panel values

$("#poi-detail-title").html(marker.poiData.title);

$("#poi-detail-description").html(marker.poiData.description);

 

var distanceToUserValue = (marker.distanceToUser > 999) ? ((marker.distanceToUser / 1000).toFixed(2) + " km") : (Math.round(marker.distanceToUser) + " m");

 

$("#poi-detail-distance").html(distanceToUserValue);

 

// show panel

$("#panel-poidetail").panel("open", 123);

 

$( ".ui-panel-dismiss" ).unbind("mousedown");

 

$("#panel-poidetail").on("panelbeforeclose", function(event, ui) {

World.currentMarker.setDeselected(World.currentMarker);

});

},

 

// screen was clicked but no geo-object was hit

onScreenClick: function onScreenClickFn() {

// you may handle clicks on empty AR space too

},

 

// returns distance in meters of placemark with maxdistance * 1.1

getMaxDistance: function getMaxDistanceFn() {

 

// sort palces by distance so the first entry is the one with the maximum distance

World.markerList.sort(World.sortByDistanceSortingDescending);

 

// use distanceToUser to get max-distance

var maxDistanceMeters = World.markerList.distanceToUser;

 

// return maximum distance times some factor >1.0 so ther is some room left and small movements of user don't cause places far away to disappear

return maxDistanceMeters * 1.1;

},

 


// request POI data

requestDataFromLocal: function requestDataFromLocalFn(lat, lon) {

// comment out these 2 lines and use 'World.loadPoisFromJsonData(myJsonData);' instead to use static values 1:1. For demo purpose they are relocated around the user

// var poisNearby = Helper.bringPlacesToUser(myJsonData, lat, lon);

World.loadPoisFromJsonData(myJsonData);

}

 

};

 

var Helper = {

bringPlacesToUser: function bringPlacesToUserFn(poiData, latitude, longitude) {

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

poiData.latitude = latitude + (Math.random() / 5 - 0.1);

poiData.longitude = longitude + (Math.random() / 5 - 0.1);

poiData.altitude = AR.CONST.UNKNOWN_ALTITUDE;

}

return poiData;

},


 

// helper to sort places by distance

sortByDistanceSorting: function(a, b) {

return a.distanceToUser - b.distanceToUser;

},

 

// helper to sort places by distance, descending

sortByDistanceSortingDescending: function(a, b) {

return b.distanceToUser - a.distanceToUser;

}

 

};

 

 

/* forward locationChanges to custom function */

AR.context.onLocationChanged = World.locationChanged;

 

/* forward clicks in empty area to World */

AR.context.onScreenClick = World.onScreenClick;

Hi Stefen,

Your request is HTML/JS related and nothing covered by our SDK support.
Please have a look at the slide panel and its samples in the jquery documentation.

Kind regards,
Andreas

Sorry I realize where I made a mistake.. I forgot to go in and edit the index.html file. Thank you though! 

please help me

i've follow your javascript code and add some lines in index.html too

here the lines 

<!-- local POI data -->

<script type="text/javascript" src="js/myJsonData.js"></script>

 

but when i debug, there's no marker POI come up, just camera live preview and the message tell me "trying to find out where you are"

of course i've turn on my GPS.

please advice

Hi Lilis,

In case you see that message over and over again, can you make sure you actually get a position (through GPS or network assisted)?

It is also possible that the script you've added (myJsonData.js) contains errors that causes the JavaScript execution to stop. Please try running your example in the ADE (see the documentation for details) and debug your code to understand if the objects are being generated successfully.

Best,

Martin

Hi Martin, thanks for your quick respone

When i run other samples, everything is going fine. Like 'from local source' I add new poi on myJsonData.js, and it can work perfectly

and when I add the myJsonData.js on 'presenting details' it's not work

i've try run ADE from my desktop browser, but actually i don't understand it, just show me trees of context and radar

So what I miss ?

Note: sorry I only understand a little English

Hi,

The ADE allows you to debug your code and check if you have JavaScript errors in it. In the right panel of the ADE, you can simulate locations (just enter the latitude and longitude and click "Apply").  You should see objects being created in the tree (the tree shows you what objects are in the scene). If not, you have an error in the JavaScript code.

You can open the developer console of the browser to check whether the JavaScript executes correctly. That depends of course on the browser you are using.

Best,

Martin

Hi Martin,

I got it

I've forgot to change requestDataFromServer to requestDataFromLocal

and now everything is perfectly right 

Thank you so much