Start a new topic
Solved

Cannot read property 'createImageTracable' of undefined

Hi,


I was trying https://www.wikitude.com/external/doc/documentation/latest/phonegap/imagerecognition.html#image-recognition in Outsystems. Outsystems behind the scene uses Cordova and I copied the code from example and home page Directly leads to 'Image on target' page but when its comes to the page its giving me "Cannot read property 'createImageTracable' of undefined"


Thanks,

Prasad


Hi,


With Outsystems: I created my own app and copied code from "01_ImageTracking_1_ImageOnTarget" inside "wikitude-cordova-plugin-samples-master". Below are the details of Outsystems build

image


Direct Cordova: I was able to get the sample application working but when I replaced the magazine.wtc with magazine.zip with just the jpg image from https://www.wikitude.com/external/doc/documentation/latest/phonegap/targetimages.html it stops working


Thanks,

Prasad

Hi,


Could you please share the AR experience (js files, html files, css files, content,..) so we can test the experience directly in our SDK sample app. 


Did you make sure to follow the instructions on how to work with .zip files?


Thx and greetings

Nicola

Hi,


I code in Outsystems so I won't be able to share how outsystems finally renders it into html, I have not modified the js file. Since Outsystems works different I had to make some changes to my app and finally got the camera to show but still facing issue of path to html and once I solve this then I will have the zip file issue with targetCollectionResource. I suspect that wtc file is not getting uploaded to server because of not allowed file extension in Outsystems IIS server, hence was trying to make the app work with zip file instead of wtc.


From the documentation I found below

  • Plain: A regular ZIP file containing images in plain JPG or PNG format
I have attached the zip file of experience from the example cordova app where I tried the zip. Once I an solve the zip in cordova app then I can translate that to Outsystems.


Thanks,

Prasad

zip

Hi,


Got it working in Outsystems. Had to do lot of changes below are all of them

1. I had to fork the plugin so that I can edit the sdk key

2. Since Outsystems is a single page application, I cannot create arview html pages; instead I had upload them as files in resource

3. Tried to download and create the arview files but example js file only look for the files in application directory and I am unable to write files on splash screen.


Any suggestion on how to make the arview dynamically get from server?


Thanks,

Prasad

Hi,


Sorry from your last message it's not clear if in the end you made it work. Also, the experience you sent is it working or not working when you test it in the Cordova sample app - did you make sure that the naming (e.g. the target in the zip file is called magazine.jpg and the reference in the js file is still to 'pageOne'.


Again, if there is any open point related to Outsystems like how to load different files dynamically, we can't provide the support needed, as we don't have any knowledge and skills with Outsystems.


Thx and greetings

Nicola

Hi,


I made it work. I just added steps so that in future someone can refer it.


My question was how can I make an AR app by adding a path to arview a URL in sampleIndices.js; instead of adding the path in storage?


Thanks,

Prasad

Hi,

if you need further help here is one solution to integrate with Wikitude plugin done with the Github samples and the original Github repository, only the plugin will add +-10MB to you apk.

Disclaimer
- All of the content (wtc files produced from Wikitude studio, index.html for the overlay, ade.js and the js for the experience [not the initialization in the plugin] need to be in resources, the other way is to change the ios and android code of the plugin to accept url for example
- The demo has multiple resources see the target directory for them, that is important for the demo work

the action Wikitude_InitWorld in the core initiates the world (camera and so on) for the Wikitude plugin the input URLOverlayPage is the absolute path for the index file that will be used in your experience for the overlay see the input in the demo, that is important as said in the disclaimer

this is just an example of implementation, you can change the core as you like but for best practices please leave the plugin in a module itself. You may need to change some code in the init world JS to improve your experience, this plugin is difficult to make as a standard for everyone because the code will change for every different experience.
You just install that demo and generate the apk (only tested in android), and test it with this examples

https://www.wikitude.com/external/doc/documentation/latest/phonegap/images/magazine_page_one.jpeg - for the image on target

https://www.wikitude.com/external/doc/documentation/latest/phonegap/images/solar_system.jpg - for the solar system with animation


I hope this can help you

oap

Hi,


You can reference the index.html file when you load the AR view. Again - not sure if Outsystems handles something different than Cordova there.


Thx and greetings

Nicola

Adding full call stack

ypeError: Cannot read property 'createImageTrackable' of undefined
    at Object.__executeFunctionByName (https://wikitude.outsystemscloud.com/WikitudeSample/scripts/WikitudeSample.ade.js?jlUJLeAVrn3RG4RpyUxvpA:1:348045)
    at Object.callAsync (https://wikitude.outsystemscloud.com/WikitudeSample/scripts/WikitudeSample.ade.js?jlUJLeAVrn3RG4RpyUxvpA:1:347847)
    at c.init (https://wikitude.outsystemscloud.com/WikitudeSample/scripts/WikitudeSample.ade.js?jlUJLeAVrn3RG4RpyUxvpA:1:222970)
    at c.<computed> [as init] (https://wikitude.outsystemscloud.com/WikitudeSample/scripts/WikitudeSample.ade.js?jlUJLeAVrn3RG4RpyUxvpA:1:4861)
    at new c (https://wikitude.outsystemscloud.com/WikitudeSample/scripts/WikitudeSample.ade.js?jlUJLeAVrn3RG4RpyUxvpA:1:4724)
    at Object.createOverlaysFn [as createOverlays] (https://wikitude.outsystemscloud.com/WikitudeSample/scripts/WikitudeSample.MainFlow.imageontarget.mvc.js?u6vWCL+pmA6J+30HKV8l5Q:267:24)
    at Object.initFn [as init] (https://wikitude.outsystemscloud.com/WikitudeSample/scripts/WikitudeSample.MainFlow.imageontarget.mvc.js?u6vWCL+pmA6J+30HKV8l5Q:215:14)
    at https://wikitude.outsystemscloud.com/WikitudeSample/scripts/WikitudeSample.MainFlow.imageontarget.mvc.js?u6vWCL+pmA6J+30HKV8l5Q:290:7
    at Controller.e.safeExecuteJSNode (https://wikitude.outsystemscloud.com/WikitudeSample/scripts/OutSystems.js?ZoWmek2bBqjHrFcOfLg6Og:10:6977)
    at Controller._onReady$Action (https://wikitude.outsystemscloud.com/WikitudeSample/scripts/WikitudeSample.MainFlow.imageontarget.mvc.js?u6vWCL+pmA6J+30HKV8l5Q:148:12)

Hi,


Could you please provide the following details:

  • Which version of the SDK are you using?
  • What Cordova version are you using?
  • Is this happening with the sample app or in your own app? If it happens with your own app, Does the unchanged sample app work.


We had reports previously that something was not loaded correctly and the rquesters also worked with Outsystems --> did you ever try our Cordova SDK sample without Outsystems?


Thx and greetings

Nicola

Login or Signup to post a comment