Wikitude

Wikitude Samples

I'm a beginner in using wikitude AR samples ,the below is from assets- Load from local resource.In my project I'm using data from static database.I have commented the lines using helper function to display random POI as they are not relevant for my project. they have instructed to include the JavaScript in the ARchitect Worlds HTML by adding .I have also created JSON file .Now where do i need to include the src in my code. .I do not understand which is ARchitect Worlds HTML.Please excuse I'm a beginner in Wikitude.

 


// 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,

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

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

// 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;
}
},

// fired when user pressed maker in cam
onMarkerSelected: function onMarkerSelectedFn(marker) {

// deselect previous marker
if (World.currentMarker) {
if (World.currentMarker.poiData.id == marker.poiData.id) {
return;
}
World.currentMarker.setDeselected(World.currentMarker);
}

// highlight current one
marker.setSelected(marker);
World.currentMarker = marker;
},

// screen was clicked but no geo-object was hit
onScreenClick: function onScreenClickFn() {
if (World.currentMarker) {
World.currentMarker.setDeselected(World.currentMarker);
}
},

/*
In case the data of your ARchitect World is static the content should be stored within the application.
Create a JavaScript file (e.g. myJsonData.js) where a globally accessible variable is defined.
Include the JavaScript in the ARchitect Worlds HTML by adding <script src="js/myJsonData.js"/> to make POI information available anywhere in your JavaScript.
*/

// request POI data
requestDataFromLocal: function requestDataFromLocalFn(lat, lon) {

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

/*
For demo purpose they are relocated randomly around the user using a 'Helper'-function.
Comment out previous 2 lines and use the following line > instead < to use static values 1:1.
*/

World.loadPoisFromJsonData(myJsonData);

}

};

var Helper = {

/*
For demo purpose only, this method takes poi data and a center point (latitude, longitude) to relocate the given places randomly around the user
*/
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);
/*
Note: setting altitude to '0'
will cause places being shown below / above user,
depending on the user 's GPS signal altitude.
Using this contant will ignore any altitude information and always show the places on user-level altitude
*/
poiData.altitude = AR.CONST.UNKNOWN_ALTITUDE;
}
return poiData;
}
}


/* forward locationChanges to custom function */
AR.context.onLocationChanged = World.locationChanged;

/* forward clicks in empty area to World */
AR.context.onScreenClick = World.onScreenClick;

My Jsondata is



var myJsonData = ;

 

Hi Pooja,

There is an index.html file in your project, which is the main entry point for your AR experience, and which loads all JavaScript source files. Check the lines <script src="...">, that's where the files are being included.

In case you are using the Wikitude examples, the files are already included in the right way (do not rename them if you are in doubt about the inclusion). If you don't know how the JavaScript/HTML interaction, works, there are numerous blogposts and tutorials on the web which explain it in more detail, for example:

http://www.quackit.com/javascript/tutorial/external_javascript_file.cfm

The Wikitude SDK reuses the exact same concepts.

Best,

Martin