Wikitude

Image in Presenting Details

Hi wikitude,

Can i show image in description panel,like below the distance?



i'm trying with my code, JSON



 


// 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,
"image": poiData.imgDrawable
};

World.markerList.push(new Marker(singlePoi));
}
....


// update panel values
$("#poi-detail-imagen").html(marker.poiData.image);


 

did i miss something? 

Thanks.

Hi Adi,

You need to insert the code below as well in order to update the panel values

$("#poi-detail-image").html("<img src='" + marker.poiData.image + "'/>");

Thanks

i was doing your instruction but seems nothing happen, furthermore is JSON and picture can take online?

but here's my coding 

JSON


  "id" : 0,

  "longitude" : 107.636151,

  "latitude" : -6.898036,

  "description" : "Gedung 15 ? Rektorat",

  "name" : "Gedung 15",

  "imgDrawable": "http://gdurl.com/dZls"

}, {

  "id" : 1,

  "longitude" : 107.628862,

  "latitude" : -6.896633,

  "description" : "Ini Kalo Ga Salah Tempat Makan",

  "name" : "POI 2",

  "imgDrawable": "http://gdurl.com/OQlv"

} >

 

....


// information about server communication. This sample webservice is provided by Wikitude and returns random dummy places near given location
var ServerInformation = {
POIDATA_SERVER: "http://gdurl.com/qou6",
POIDATA_SERVER_ARG_LAT: "lat",
POIDATA_SERVER_ARG_LON: "lon",
POIDATA_SERVER_ARG_NR_POIS: "nrPois"
};

// implementation of AR-Experience (aka "World")
var World = {

// user's latest known location, accessible via userLocation.latitude, userLocation.longitude, userLocation.altitude
userLocation: null,

// 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) {

// show radar & set click-listener
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");
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,
"image": poiData.imgDrawable
};

World.markerList.push(new Marker(singlePoi));
}

// updates distance information of all placemarks
World.updateDistanceToUserValues();

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

// set distance slider to 100%
$("#panel-distance-range").val(100);
$("#panel-distance-range").slider("refresh");
},

// 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) {

// store user's current location in World.userLocation, so you always know where user is
World.userLocation = {
'latitude': lat,
'longitude': lon,
'altitude': alt,
'accuracy': 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-image").html("<img src='" + marker.poiData.image + "'/>");
$("#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 = 500;

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

// udpates values show in "range panel"
updateRangeValues: function updateRangeValuesFn() {

// get current slider value (0..100);
var slider_value = $("#panel-distance-range").val();

// max range relative to the maximum distance of all visible places
var maxRangeMeters = Math.round(World.getMaxDistance() * (slider_value / 100));

// range in meters including metric m/km
var maxRangeValue = (maxRangeMeters > 999) ? ((maxRangeMeters / 1000).toFixed(2) + " km") : (Math.round(maxRangeMeters) + " m");

// number of places within max-range
var placesInRange = World.getNumberOfVisiblePlacesInRange(maxRangeMeters);

// update UI labels accordingly
$("#panel-distance-value").html(maxRangeValue);
$("#panel-distance-places").html((placesInRange != 1) ? (placesInRange + " Places") : (placesInRange + " Place"));

// update culling distance, so only palces within given range are rendered
AR.context.scene.cullingDistance = Math.max(maxRangeMeters, 1);

// update radar's maxDistance so radius of radar is updated too
PoiRadar.setMaxDistance(Math.max(maxRangeMeters, 1));
},

// returns number of places with same or lower distance than given range
getNumberOfVisiblePlacesInRange: function getNumberOfVisiblePlacesInRangeFn(maxRangeMeters) {

// sort markers by distance
World.markerList.sort(World.sortByDistanceSorting);

// loop through list and stop once a placemark is out of range ( -> very basic implementation )
for (var i = 0; i < World.markerList.length; i++) {
if (World.markerList.distanceToUser > maxRangeMeters) {
return i;
}
};

// in case no placemark is out of range -> all are visible
return World.markerList.length;
},

handlePanelMovements: function handlePanelMovementsFn() {

$("#panel-distance").on("panelclose", function(event, ui) {
$("#radarContainer").addClass("radarContainer_left");
$("#radarContainer").removeClass("radarContainer_right");
PoiRadar.updatePosition();
});

$("#panel-distance").on("panelopen", function(event, ui) {
$("#radarContainer").removeClass("radarContainer_left");
$("#radarContainer").addClass("radarContainer_right");
PoiRadar.updatePosition();
});
},

// display range slider
showRange: function showRangeFn() {
if (World.markerList.length > 0) {

// update labels on every range movement
$('#panel-distance-range').change(function() {
World.updateRangeValues();
});

World.updateRangeValues();
World.handlePanelMovements();

// open panel
$("#panel-distance").trigger("updatelayout");
$("#panel-distance").panel("open", 1234);
} else {

// no places are visible, because the are not loaded yet
World.updateStatusMessage('No places available yet', true);
}
},

// request POI data
requestDataFromServer: function requestDataFromServerFn(lat, lon) {

// set helper var to avoid requesting places while loading
World.isRequestingData = true;
World.updateStatusMessage('Requesting places from web-service');

// server-url to JSON content provider
var serverUrl = ServerInformation.POIDATA_SERVER + "?" + ServerInformation.POIDATA_SERVER_ARG_LAT + "=" + lat + "&" + ServerInformation.POIDATA_SERVER_ARG_LON + "=" + lon + "&" + ServerInformation.POIDATA_SERVER_ARG_NR_POIS + "=20";

var jqxhr = $.getJSON(serverUrl, function(data) {
World.loadPoisFromJsonData(data);
})
.error(function(err) {
World.updateStatusMessage("Invalid web-service response.", true);
World.isRequestingData = false;
})
.complete(function() {
World.isRequestingData = false;
});
},

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


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Note that the html code in the samples is based on JQueryMobile and independent from Wikitude's AR-features.

I hope you understand that this forum is focusing on AR namespace specific questions.
Please have a look at JQuery Mobile Panel samples and forums instead.

In theory you can place any content in the panel and set picture origin using jquery and data from the JSON.

Best regards,
Andreas