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.
I had/have some similar problems.
First of all I liked to work with the desktop variation but switch to the CLI variation because only for CLI is an explanation available.
After different problems and with installing a lot of npm packages and Xcode for OS X I was able to create the project structure.
The robot sample never worked for me an error message like "index.html: Loading AR web view failed: Frame load interupted" appears every time.
I downloaded the Wikitude examples from Github and could initialize it with the "sh CreateSampleApp.sh ...." command. I entered a license key which I received as I downloaded the Cordova Wikitude Plugin (https://www.wikitude.com/products/extensions/cordova-plugin-augmented-reality/).
Wenn I choose one example/template option in the PhoneGap Developer Mobile App, a screen appears with a lot of "licence key missing" (as shown in the picture of Alex), but no error message.
I never was able to test the AR function. I never came that far, that at least the function is working with a trial watermark...
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.
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!
I do have iOS 11 and Xcode 9. At the end I would like to develop for iOS and Android. But for the beginning I am happy if it just works for iOS. Thanks a lot for the video explanation. I could create the sample project as you did. But there is an error message (see file attached).
The Url which is described as missing is there I can see it in my Finder.
Maybe it's because the world url is empty? What do I have to enter there?? The server address from the PhoneGap Dekstop App?
Thanks for your help.
I don't understand why you get this error plus the license error in the background. Did you just run the scripts as I did in the video or did you do some other steps?
Which version of Cordova and Cordova iOS are you using? Could you maybe post the Wikitude example app creation script output here?
Thanks for the additional information. I spent the past few days with a friend of mine who is very technical and we managed to get the samples app working on Android. After many hours of going through the instructions in your documentation, we couldn't get anything working when we tried and view our app through the Phonegap mobile app. From what my friend told me, there seems to be an issue between the Wikitude plugin and the Phonegap app, which is stopping the AR/Wikitude files and pages from working, but letting non AR pages work fine.
We took the sample files we had made, and then created a new project with the Android studio. From there, we created an APK file which we then sent to an Android device. When we opened it - everything was working fine and we could see all of the samples working.
I will be seeing my friend again later today, so I will try and find out more details about what he said about their seeming to be a compatibility issues between the plugin and phonegap. I'll update this post again later on when I know more information.
For now, the samples and the plugin are working, but not via the Phonegap mobile app.
Andreas, if you have a spare 5 minutes can you try the following ....
Download the Phonegap desktop app - https://phonegap.com/products/#desktop-app-section
Download the Phonegap developer app - https://phonegap.com/products/#mobile-app-section
Through the desktop create - create the Wikitude Augmented Reality sample which is one of the 5 available templates. Once its been created it, via it on the developer app on your phone. You should then see this error message that Peter and I kept on getting.
I did as you did in the video. No less or further steps...
I am using cordova 6.5.0 and in terminal I can see there is an update to 7.1.0 available.
Cordova ios is already 7.1.0 installed.
I can't add the whole files. The attachment is to big. Any certain files which will help?
-> I updated cordova to 7.1.0 and made a new project according to your video. But I receive the same error message again... (I attached the terminal commands I used).
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.