Question

OK, this one is rather complicated to explain, which explains the verbose title:
In my Objective C application I generate a JSON string to hold all of my properties for the objects I need to draw in the ARchitect browser of the wikitude SDK (as far as I know the Wikitude SDK only handles JSON) via:

NSString *javaScript = [self convertPoiModelToJson:self.poiData.pois];
NSString *javaScriptToCall = [NSString stringWithFormat:@"newData('%@')", javaScript];

One particular object I am interested in is stored as a string in that JSON string, it’s the URL to an image. However, this image is behind a password protected area on our webserver and the app handles the authentication.

The problems start when I am in the ARchitect Browser, which is basically a .html file with calls to specific wikitude javascript functions to build the augmented reality world and show it in a UIWebView in the app. I want to show that image when a POI in the augmented view is clicked in the footer popup which is a basic html div container. So now I have a URL to an image resource on the webserver, which I cannot directly access with

document.getElementById("thumb").src = jsonObject.thumbUrl;

because of the authentication needed and the only way I was successful to load that image was via the var poiImage = new AR.ImageResource(jsonObject[i].iconURL, {onError: errorLoadingImage}); method but then I can only display it in the augmented view but not in the footer.

I tried it with providing a static string from some other image in the web or to local resources to the img element in the footer section in the view without problems like that: document.getElementById("thumb").src="marker.png"; and it works fine, also the image is correctly loaded in the augmented view.

I have read about encoding the image (which I can access and download in the objective c part of the app) in base64 and storing that string in an additional JSON property to load it into the src property of the html img element with a <img src="data:image/png;base64,BASE&$_ENCODED_DATA"></img> but this seems like a really dirty and overly impractical workaround/hack for what I try to accomplish. Also I don’t know if it’s a better idea to start reading about how to implement the authentication to access that image in the protected area of the webserver or rather begin implementing the ugly base64 encoding or continue searching for alternatives.

I’m not asking for a solution but rather for suggestions what possibilities I have left to access that image. Since I ran out of ideas, any help is appreciated.

Thank you!

Short summary:

• image accessible and downloaded in objective c part
• image is accessible with the AR.ImageResource method of the wikitude SDK (but not needed)
• image cannot be accessed directly via the url from javascript because authentication is needed

(I hope my question is comprehensible, feel free to ask If something is unclear, especially since English is not my first language and it would be even complicated to explain that in German..)

Answer 1

Have you tried downloading the image in Objective-C / Cocoa, store it locally on your iOS device and pass the local path of the image via JSON into your Architect World?

You can then load the local image with your AR.ImageResouce and your div container.