Wikitude

Image in Description for POI

Hello All

I'm using Wikitude for Titanium and I tested the Wikitude examples. I've search in all the documentation and the forum but d'id'nt find my answer.

In the POI Samples, There's a description and a title displayed.

In the  AR View, I saw the POI title and description (on a blue panel). I would like to know if it's possible to display an image instead of description :

Here's the code for the  POI examples by Wikitude 

var singlePoi = {

  "id": poiData.id,

  "latitude": parseFloat(poiData.latitude),

  "longitude": parseFloat(poiData.longitude),

  "altitude": parseFloat(poiData.altitude),

  "title": poiData.name,

  "description": poiData.description

};

 

In the Wikitude examples, that means that I want to display some image instead of text.

 

 

I hope You understand what I mean. In fact, if you see the image below, I want to replace the text "This is the de..." by an image 



 

Thanks

Hi Phil,

In order to do that, you need to replace the AR.Label that is being created (containing the text) with an AR.ImageDrawable.

On Github, you find a code sample how to use ImageDrawables (and how to use them together with Labels if required.

Best,

Martin

 

OK Thanks I will try

I didn't find any simple example and when testing, it doesn t work. Here's my code :

Here's the definition : 

 

var singlePoi = {

  "id": poiData.id,

  "latitude": parseFloat(poiData.latitude),

  "longitude": parseFloat(poiData.longitude),

  "altitude": parseFloat(poiData.altitude),

  "title": poiData.title,

  "description": poiData.description,

  "myImage": './images/testImage.png'    // link to a static imge for testing purpose

};

 

And here's the code in marker.jsl (Remember I use the Wikitude examples)

I added this in     function Marker(poiData)

 

    this.myPOIImage = new AR.ImageDrawable.(poiData.myImage, 12, {

        zOrder: 1,

        offsetX: 0.55

    });

 

 

But adding all this is not enough..

 

What did I miss ? 

 

 

In the example given by Martin Lechner, the example is not enough for me.

 

Can you give me another complete example ?  Thanks

Hi Phil,

Please refer to the specification and this example how to deal with Images. Please follow along with the example and study each line. It covers exactly what you have to do to display images.

When you check the specification of AR.ImageDrawable, you will see that specifying the URL to the Image is not enough. You need an AR.ImageResource that specifies the Image you want to load. Also, you should not specify the URL with a preceding . ('./images/testImage.png'), use just /images/testImage.png for that. However, make sure that this image is in the right location. For testing purposes, I suggest to use an image with an absolute path, so you can be certain that is actually accessible.

Best,

Martin

 

I m really sorry but I didn't succeed in using an image to put.

I don't know in which files I have to modify in the sample.

I checked the samples you give but I think it's too general and not showing exactly what to do.

So can anyone could give me what to do ?

 

Thanks

Hi Phil,

Unfortunately, the example that we have is already the most detailled we can give you. It covers - step by step - the steps you need to perform to get Images on the screen. If you use this example as a base, it already shows some Images on the screen, you just need to swap the URL to the image with the image you want to use.

If you have any specific questions about something that is not working, we are there to help. Otherwise, you probably want to study some tutorials on JavaScript to get a good sense of what you have to do to understand the code and produce some additional code and functionality yourself.

Best,

Martin

Thanks

In fact my problems were in the image path. I solved my case.