Start a new topic

Linking to a page/file inside the www folder from the ARView

I have a selection of image recognition codes created that work fine and display a variety of videos, content, buttons etc when you scan over a specific image.


Some of the buttons provide a link to a website, while I want others to link back to a file inside the www folder of the app.


After various testing different URLs for the linking of the file, I found that linking using the following URL is working for me - file:///android_asset/www/name-of-file.html


Below is the button code for the image recognition code that is using this "url" for the internal file. For linking to websites, I simply use the full URL to the website - https://www.thewebsite.com


var profileButton = this.createWwwButton42("file:///android_asset/www/name-of-file.html", 0.35, {

   translate: {

    x: -0.00,

    y: -0.90

   },

   zOrder: 1

  });



I am just wondering if this is the correct way to link to a file inside my www folder ??


I'm currently developing and testing on an Android device, but my app will be available for iOS as well, so can you also tell me what would be the correct way to link to a file in the www folder for an iOS app.


Thank you,


Can anyone help with this ??


Thanks

Good morning Alex,



since there's no way of knowing which platform you are on within JavaScript, you will have to pass that information, better yet, the URL to be loaded from the platform code (ObjectiveC/Java) to the JavaScript part. For that you will have to use the `callJavaScript` method provided by the `WTArchitectView` (ObjC) and the ArchitectView (Java).


The iOS URL you will have to query in ObjC. There's an API to get paths into the application bundle, I believe.



- Daniel

Hi Daniel

 

Thanks for the reply - it was great to hear back from you.

 

Regarding the issue of not knowing what platform the user is on, I actually have code in my app template which can display specific content based on whether the user is using an Android or an iOS device.

 

So my train of thought was to display the button to the AR window based on their device. So if they are using an Android, they will open the ARview for Android, which can then internally link to a page inside the app using the code in my original post.

 

var profileButton = this.createWwwButton42("file:///android_asset/www/name-of-file.html", 0.35, {

   translate: { 

    x: -0.00, 

    y: -0.90 

   }, 

   zOrder: 1 

  }); 

 

And if the user is using an iOS device, then the button they are shown for the ARView will take them to the AR view of iOS, which would do the exact same thing as the Android version, but obviously the link to the path of the file will be slightly different.

 

With regards to the path of the iOS URL for the file, I am guessing that the "android_asset" will need to be changed to something like "ios_asset" ??

 

Is this correct ??

 

Your solution makes sense, but it looks like it will take a lot of work to do it, and I don't have the confidence or experience to attempt something like that just yet.

 

I was just hoping for a simple solution to be able to link to an internal html file in the www folder from a button within the ARview.

 

Thank you,

Alex 

Hi Alex,



it's not especially complicated, the main hurdle will be having to change ObjectiveC and Java code. You should still be able to manage if you're not familiar with these languages.


To get the path on iOS you actually have to pass in the URL from native code, there's, to my understanding, no way around this since the path will be different for every app install. There might be some Cordova specific alternative, but that's not my area of expertise.


Here's what you will need to do:



1.) query the resource path in ObjC

NSString* theHtmlPath = [[NSBundle mainBundle] pathForResource:@"name-of-file" ofType:@"html"];

2.) add a field/function to be called to your JavaScript world

var World = {
    [...]
    
    receiveTheHtmlPath: function(theHtmlPath) {
        console.log(theHtmlPath);
    }
};

3.) pass the HTML path by calling `callJavaScript` in ObjC

[architectView callJavaScript:[NSString stringWithFormat:@"World.receiveTheHtmlPath(\"%@\");", theHtmlPath]];


This should invoke your JS function created in 2.) with the path from 1.) as a parameter, at which point you will have the proper path available.


- Daniel
Login or Signup to post a comment