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 };
// 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 = ;
M
Martin Lechner
said
almost 9 years ago
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:
Pooja