My strange issue with Wikitude and Phonegap
After being approached by a client who wanted to make an AR App, I did some research online, and decided to work with PhoneGap, as I am comfortable with html, JS and CSS.
PhoneGap have two different systems that you can use - their CLI or the GUI ( Graphic User Interface / the Phonegap desktop app ). On the PhoneGap website, it says the following for their desktop app ....
PhoneGap Desktop is the simplest way to get started using PhoneGap. You use it to create apps, and serve those apps to connected mobile devices. It is the alternative to using the CLI, using the same libraries under the hood. So no need to memorize commands or install dependencies - those are all included when you download PhoneGap Desktop.
PhoneGap Desktop App - https://phonegap.com/products/#desktop-app-section
I decided to use this rather than the CLI. As well as the desktop app, I downloaded the Developer Mobile App, so that I could test the apps made with Phonegap on my mobile.
PhoneGap Developer Mobile App - https://phonegap.com/products/#mobile-app-section
When you open up the desktop app, you can quickly create an app using one of their available samples - one of which is a Wikitude AR sample. I created this, and then I could see the AR in action, with the Robot with the glowing eyes. (Info+Video - http://docs.phonegap.com/tutorials/develop/wikitude/ )
This worked perfectly, and then I was able to replace the existing Wikitude files for this demo, with ones from the samples that are available on Github. By simply replacing the files with those in the samples, I was able to make samples of the 3d models, image recognition, POIS, etc. Everything was working perfectly.
Then last Friday, when I opened up the Phonegap developer app on my mobile ( iPhone 6 ) - all of the wikitude AR pages no longer worked, and a popup appeared with the message "Loading AR web view failed: Frame load interrupted". This message appeared when I tried to open all of my sample pages whereas the day before, everything was working fine.
I had not made any changes to the code, had not updated or changed anything at all. I even opened the PhoneGap desktop app and created a 2nd version of the Wikitude AR Sample ( the robot one ) - but this time, it failed to work, and gave the same error message.
Today, I have got 3 people to download the PhoneGap desktop app and mobile app, and try to create the Wikitude sample. All three of them were able to do this, but when they opened the Wikitude sample, everyone saw the same error message. So I am pretty sure that I am not seeing this because of something I have done with the code.
Another thing that is different is that prior to Friday, the screen for the AR had the word "TRIAL" watermarked across it - and a small Wikitude logo in the bottom left. Now, the window is show the words "LICENSE KEY MISSING" rather than "TRIAL" and the Wikitude logo is larger, and also has the text "Powered by Wikitude" - which was not there previously.
In the PhoneGap desktop and mobile apps, all the other sample apps which are NOT AR/Wikitude related are all working perfectly as before. The only thing that is no longer working are the Wikitude/AR pages.
Has anyone else got this problem when using the PhoneGap desktop app and mobile app ?? I have not tried to use the PhoneGAP CLI, as I was initially having problems trying to install it all, so I do not know is the same problem exists with that. But ever since Friday, nothing related to the Wikitude AR samples/code has worked.
The other thing that makes it slightly difficult is that all of the Wikitude documentation for working with PhoneGap all relates to the CLI and not the GUI ( desktop app ) that I am using.
I am desperate to find a solution for this, as I was previously going through the samples and understanding how everything works, and now, I can't do anything.
Any help would be most welcome. Thanks for reading.
Hi Alex hi Peter,
I do see the error message when using the PhoneGap Desktop App in combination with the PhoneGap Developer Mobile App. I'm not exactly sure why it happens but the underlying UIWebView is unable to load the given Architect World URL. We will get in touch with the PhoneGap team to investigate this.
What I really don't understand is why it's failing for you @Peter. You created the Wikitude Cordova example app with our scripts which setup everything properly.
Can you please do me a favour and replace all `WTWikitudePlugin.m` files with the one attached to this post? It includes some additional logging that hopefully helps to understand the problem. I expect the following output when launching any of the examples:
Wikitude Debug Log
2017-10-17 12:25:05.114773+0200 Plugin Samples[289:12599] architectWorldURL: file:///var/containers/Bundle/Application/2F319807-744F-4DB2-B0EA-FDDC5A105316/Plugin%20Samples.app/www/world/01_ImageTracking_1_ImageOnTarget/index.html
2017-10-17 12:25:05.114837+0200 Plugin Samples[289:12599]
End Debug Log
sorry, here it is.
Thanks for replying. What's weird in my case was that last week - everything was working fine with the Phonegap desktop app, and I was able to view lots of the samples on my mobile via the Phonegap app. Then suddenly last Friday, everything related to the AR/Wikitude pages just stopped working, and all I get now is that same error message.
Today I was able to finally set up the Phonegap CLI, and I got this working. However, when I created the sample app based on the Wikitude Augemented Reality template, which is one of the Phonegap templates, I got the exact same error message popping up.
All the documentation I've been able to find on Wikitude all related to the Phonegap/Cordova CLI, and nothing for the Phonegap desktop app, which does the exact same thing.
At the moment, I am manually downloading the Wikitude plugin, and am trying to place that in the folders of my apps ( but there is no documentation at all from what I can find about exactly where we need to place the plugin files, if doing it manually. I'm still trying to install the plugin via the CLI but run into nothing but problems with it.
It is really frustrating as last week, it was all working fine, and then suddenly, without me actually changing anything, it all stopped working, and I've spent the past week trying to find a solution.
Any chance you post your config.xml code here?
I am trying it with the following file: https://www.wikitude.com/download/ (cordova plugin).
Unfortunately the config.xml file is missing. So I can't drag&drop it to the PhoneGap Desktop App and test it. I am not sure what have to be defined in the config.xml file because when I create a project with the Desktop App and one with the CLI, the config.xml contains different informations...
I starting running the CLI to download the Wikitude plugin to my folder from Github, and this time it actually worked. I did the install into a project folder that had no other plugins installed, so in theory, this is how the structure and config file should be. I'm attaching the config.xml file to this reply.
As for the structure of a project - this is how I believe it should be ( based on numerous sample sets and tests I've been running over the past few days ...
plugins <-- Wikitude plugin goes here and the foldername should be (com.wikitude.phonegap.WikitudePlugin)
www <-- the cdd,js and html files for the app ( and the sample Wikitude codes we can download from Github )
Also, I've seen that inside the plugins folder, in addition to the plugin folders there are two json files - browser.json and fetch.json. From looking inside each of these, it looks like you will also need to add the details of the wikitude plugin, if they are not already mentioned.
I'd be very interested to hear how you get on Peter, and if you need anything from me in order to try and get your projects running, I'd be very happy to help. Hopefully we will be able to work out what the problem is and find a solution so we can both properly use the Wikitude plugin with Phonegap CLI or Desktop app.
When I said above ....
I starting running the CLI to download the Wikitude plugin to my folder from Github, and this time it actually worked.
... I actually meant that the download of the plugin via Github worked - not that I got the AR/Wikitude pages working properly for me to test it on the app. Hopefully that will soon follow though.
I posted about this issue at github over a week ago, and a few hours earlier, I got a message back that said a fix for the developer app should be out in around 3 days time.
Hopefully once that update is released, then we will be able to continue using the PhoneGap desktop app/CLI and the mobile app to test it on.
I'm glad that you were also able to see the error message when using Phonegap. Just to let you know that the problem was also happening when using the PhoneGap CLI, as well as the desktop app.
Hopefully this issue caAn be resolved, as I am sure a lot of people would like to use the Wikitude plugin and work with Phonegap.
Can you please give me a hint where the log file should be stored.
I couldn't find it in app folder neither in the console.app...
Hi Alex, Hi Peter,
From your conversation, screen shot I assume that you are both developing for iOS? Which iOS version is running on the devices? I also assume that you both have Xcode 9 installed?! Which version of the Cordova CLI are you using and which version of the Cordova iOS plugin have you installed?
I recorded a short video how to install our example app. For your own apps, simply check the content of the `CreateSampleApp.sh` script as it also uses the Cordova CLI to add a plugin to an existing project.
Please let me know if this video was helpful!