Search code examples
ioscordovawikitude

Markers and Radar are not visible in ARView Due to AR.ImageResource not load local images

In my PhoneGap application, I was using the Wikitude Cordova Plugin (5.1.1) and all Wikitude features were working fine. Now I am updating my plugin to the latest on 5.3.0 version but we are facing some problem with the Wikitude plugin feature in IOS devices. The problem is :

When I load the Wikitude ARView in the app, All markers and radar are shown properly, but When I destroy all objects from the ARView using AR.context.destroyAll(); and after that when I again try to draw radar and makers on ARView, these objects are not visible on ARView. My app has the feature in which I need to clear all the marker from the ARView and redraw the markers with some filters.

Now I find the reason why the Marker and radar are not visible after destroying.

The reason is "AR.ImageResource" is not loaded properly for marker and radar after destroying. As I add the onLoaded and onError callback for the AR.ImageResource. First time when we load the AR World, I receive the call on "onLoadded" callback. But when I load the ImageResouce after destroying, I receive the call on "onError" callback and the error shows it find the image at wrong path.

I use the AR experience URL for loadARchitectWorld as: var arExperienceUrl = "www/main_home_ar_view_screen.html";

Image Path used for the radar image resource : www > img > wikitude_img > radar_bg.png

Code to load the AR.ImageResource :

AR.radar.background = new AR.ImageResource("img/wikitude_img/radar_bg.png", {
onLoaded : function successFn(loadedURL) {
           /* Respond to successful world loading if you need to */
            alert("onLoaded");                   
    },
onError : function errorFn(error) 
{
            alert("onError " + error + " & " +  error.message);
    }});

The above code is working fine for the first time when I load the AR World. But after destroying the object from ARView, AR.ImageResource find the image at this path "/www/main_home_ar_view_screen.html/img/wikitude_img/radar_bg.png", due to find the image at wrong path, image is not loaded (See the attached Image).

enter image description here

I also find these things :

  • The Same code is working fine on the Android Platform.
  • If I use Image URL(Remote Image) with the AR.ImageResource, then everything is fine on iOS also.That means all markers and radar show properly after destroying on the ARView but when I use the local image path with AR.ImageResource then markers and radar are not shown after destroying (Markers and Radar are shown properly when I load the AR World with local image path).

Please suggest me how to solve the AR.ImageResouce problem with local image Path.

Solution

  • To fix this problem, simply paste the following snippet at the top of your main Architect .js file 

    AR.__resourceUrl = function(url) 
{
   if (/^([a-z\d.-]+:)?\/\//i.test(url)) 
   {
      // URL contains protocol and can be considered absolute
      return url;
   }
   // get protocol
   var protocol = document.baseURI.substring(0,
   document.baseURI.indexOf('/') + 2);
   var uri = document.baseURI.substring(document.baseURI.indexOf('/') +    2);
    // remove fragment identifier
    if ( uri.indexOf('#') > 0 && uri.length > uri.indexOf('#') +1 ) {
        uri = uri.substring(0, uri.lastIndexOf('#'));
        // in case there was a '/' after the fragment identifier, we need to add it back again
        if ( uri[uri.length - 1] !== '/' ) {
            uri += '/';
        }
    }
    // remove trailing file (edge case, this is just a domain e.g.
    // www.google.com)
    uri = uri.substring(0, uri.lastIndexOf('/') + 1);
    var baseUrl = protocol + uri;
    if (baseUrl[baseUrl.length - 1] !== '/')
    baseUrl += '/';
    if (url[0] === '/') {
    // url references root
    baseUrl = baseUrl.substring(0, baseUrl.indexOf('/', baseUrl
 .indexOf('//') + 2));
    }
    var resourceURL = baseUrl + url;
    return resourceURL;
};

    As I get this solution from the Wikitude Developer Forum