Wikitude

Multiple POi link to image / video

Wikitude Dear friends, 

 

I be working on my new AR project and need your help. 

I work with Phonegap plugin SDK, example "5_BrowsingPois_4_ReloadingContent". 


In my application my POI are loaded from a local file (myJsonData.js) and my challenge is to connect each POI with different information. I want this information to be file video, pictures and text. All these elements are embedded in the sliding panel of the example. 

 

I have tried the following, but not yet achieved the desired result. 

For clarity fails the code I've worked with:

 

code myJsondata.js:

var myJsonData =

Hi romina,

You are actually setting a string object as imgDrawable:

"imgDrawable": "new AR.ImageDrawable(imgPOI_01);"

That means that imgDrawable is a text, not an image. To create an image, you need to remove the quotes and just say: "imgDrawable": new AR.ImageDrawable(imgPOI_01)

 

However, remember that the ImageDrawable can only be used in the AR view itself, not in the HTML panel. In the HTML panel, you need to use plain HTML to display images with <img src="..." />

 

So, I suggest that in the imgDrawable, you set the path to your image you want to display:

"imgDrawable": "http://www.myserver.com/myPath/file.jpg"

and in the DOM, you do something like:

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



Best,

Martin

Hello Martin, 

I worked following your instructions and I have had success with audio. 

 

But I have problems playing video file. The videos play back smoothly on the sliding panel, but when I open the view of the camera, a black box appears (see image) 

 

Here's the code I have used in myJsonData.js and reloadingPois.js:

 


var myJsonData = ;

var World = {

?

 

// 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,
                                   "video":poiData.video,
                                   "audio":poiData.audio,
                                   "url":poiData.url

};


                             

 

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

                       }

 

?.

 

// fired when user pressed maker in cam
         onMarkerSelected: function onMarkerSelectedFn(marker) {
             World.currentMarker = marker;

                  

                // update panel values

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

/ / rom vídeo
                 $("#poi-detail-title").html(marker.poiData.title);
                  $("#poi-detail-description").html(marker.poiData.description);
                     
               //prueba romimg
               
                $("#poi-detail-imagen").html("<img src='" + marker.poiData.imgDrawable + "'/>");
   
              //video rom

                $("#poi-detail-video").html("<source type='video/mp4' src='" + marker.poiData.video  + "  '></source>");

              
               $("#poi-detail-audio").html("<source type='audio/mpeg' src='" + marker.poiData.audio  + "  '></source>");

                       
               $("#poi-detail-url").html("<a  href='#' onclick='" + marker.poiData.url  + "  '> LINK </a>");
                   

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

 

?

};

call the video from the index with the following code: 

<video  autoplay id="poi-detail-video" width="320" height="240" controls> </video>

appreciate your help with this problem. 

best regards

 

 

Hi,

what platform are you trying this on? Have you tried it on different devices?

In generally we have a fullscreen video player AR.context.startVideoPlayer(<url>) or the VideoDrawables which is the preferred way of displaying videos in our SDK. Have you tried these?

Hi Wolfgang 

 

First answer your questions: 

 

Working on IOS platform, Phonegap Plugin and my main team is Iphone 4S. My test equipment are Iphone 5, Iphone 5C, Ipad Mini. 

 

Now explain what I try to do: 

 

With the SDK GEO I want to place multiple POI and each bind with different files; video files, image and link URL. The means to access this information is possible from the sliding panel example 5_browsingPois_4_ReloadingContent. 









 

I could link image with instructions Martin Lechner. Then with video Drawable try to open a video and it was not, then use the following path recommended by Martin: 

 



Here's the code I have used in myJsonData.js and reloadingPois.js:

 



var myJsonData = ;

var World = {

?

 

// 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,
                                   "video":poiData.video,
                                   "audio":poiData.audio,
                                   "url":poiData.url

};


                             

 

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

                       }

 

?.

 

// fired when user pressed maker in cam
         onMarkerSelected: function onMarkerSelectedFn(marker) {
             World.currentMarker = marker;

                  

                // update panel values

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


 

/ / rom vídeo
                 $("#poi-detail-title").html(marker.poiData.title);
                  $("#poi-detail-description").html(marker.poiData.description);
                     
               //prueba romimg
               

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






 



                $("#poi-detail-video").html("<source type='video/mp4' src='" + marker.poiData.video  + "  '></source>");

              
               $("#poi-detail-audio").html("<source type='audio/mpeg' src='" + marker.poiData.audio  + "  '></source>");

                       
               $("#poi-detail-url").html("<a  href='#' onclick='" + marker.poiData.url  + "  '> LINK </a>");
                   

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

 

?

};

call the video from the index with the following code: 

<video  autoplay id="poi-detail-video" width="320" height="240" controls> </video>

 





 

 

I could open a video but a black box is superimposed on the camera view that I can not remove (see example image). The problem is the same in the different teams I mentioned 

Thanks for your help with this problem 




Best regards.

 

 

Hi Romina,

This is actually not rendered by the Wikitude SDK itself, but by the HTML Webview:

$("#poi-detail-video").html("<source type='video/mp4' src='" + marker.poiData.video  + "  '></source>");



Have you ever tried to play the video in an ordinary webview in the mobile browser using the same dynamic video loading approach? Does that work?

Can you also check whether the URL to the video is correct, otherwise, the video can obviously not be displayed.

Best,

Martin

Hi Romina

 

How are u? I am Cynthia. I am developing an aplication with POI connected to differente information for university. Could you please give me your email?

 

Cynthia

Buenos Aires

Argentina