Not all Images display in Phonegap

  • 1
  • Problem
  • Updated 4 years ago
I am developing an App in Phonegap that has reason to display 80 small (
I have tried pre-loading the images, using setTimeout to wait between each but nothing works.
Anybody got any clues as to what I'm doing wrong or is it a Phonegap bug?
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
  • frustrated

Posted 4 years ago

  • 1
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
As you can see I have requested the Build consider Winphone ... in my research I found somewhere that described downloaded Windows SDK, etc - do I need to do all that if I use the Cloud Service, or is it already `up there`?
Do I need to register with Microsoft's version (whatever that is) of iTunes AppStore?
What / where do I register for Android's version?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
For the deviceready, I would recommend something like:

document.addEventListener("DOMContentLoaded",
function () {document.addEventListener( "deviceready",
onDeviceReady,
false)},
false);

function onDeviceReady() {
...
pageLoaded();
...
}

You can remove the 'remarkable' loop and the onload attribute of the body element.

=====================
- I'm using Google Maps so I assume I do NOT need Cordova's geolocation?
Depends on what you want to do with that map. For instance, if you need to plot the current position or even a track, you'd need the device GPS and thus the Geolocation plugin.

- I'm using the Camera (plugin included) - do I also need media-capture?
Depends. Do you want to capture media (as described in https://github.com/apache/cordova-plu... )?

- most are coded as `org.apache.cordova......` others just `cordova....` which is correct?
Don't use the old, deprecated plugins. Take the latest versions from npm.
See the PGB Blog for more information, for instance the article from September 4, 2015
Plugins at npm are generally called 'cordova-plugin-....' (but not all).

===================
therefore any consideration to preloading can be completely ignored
"Preloading" has a bit different meaning in hybrid app development.
You want smooth poage transitions, which you won't get if you simply load different html documents and hope for the browser to load the images quickly. As in a normal browser, it takes a bit (albeit less than a web page with remote images). So, what you want to do is preload the whole next page including images in the background, then perform the page transition.
Javascript UI frameworks like jQuery Mobile assist with that task.
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
Google maps works fine (getting lat/long, plotting on maps, getting distances) on the Desktop/App version - is it going to work with Build (as I assume there is no browser as such)?

I do need images (not audio or video) so I'll leave both Camera and Media,capture in the Build (if it ain't broke, don't fix it!)

Yeah, I `get` that mobile is different thinking to Desktop - I'm still trying to get my head around this concept of preparing the next page before the user has finished with the current ;)

I've avoided jQuery (even though all forums are full of it!) to date as I'm having a steep-enough learning curve with javascript, Phonegap and mobile methodologies as it is ......old dogs and new tricks :)
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Google maps works fine (getting lat/long
Are you saying "getting lat/lon of the current position of the device"? In that case, you are using HTML5 Geolocation API in the desktop browser, not the geolocation plugin. You will want to use the latter on the mobile device, though.

If you just need to make pictures with the camera and send them to a server, you'd need the Camera plugin and the File-Transfer plugin, not Media-Capture.

I've avoided jQuery...
I understand that, but I would still recommend it. Be aware that jQuery Mobile is a separate package which builds upon jQuery. For mobile devices, I recommend both.
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
Hi Petra,

Given the myriad of posts here I won't be surprised if you missed this one ...

As you can see I have requested the Build consider Winphone ... in my research I found somewhere that described downloaded Windows SDK, etc - do I need to do all that if I use the Cloud Service, or is it already `up there`?
Do I need to register with Microsoft's version (whatever that is) of iTunes AppStore?
What / where do I register for Android's version?

So do you reckon I'm ready for my 1st Build (once Apple give me the Developer Membership)?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Start with that last question:
So do you reckon I'm ready for my 1st Build
Everyone is. You can always build for Android on a free account. No membership, developer account or signing key necessary. Of course, you can only create a debug-apk...not something that can be published in a store.

====

For Android, you create a one-time developer account:
http://developer.android.com/distribu...

For iOS, you must pay an annual fee to Apple.

And for Windows, I don't know. But I'm sure you'll easily find something like
https://developer.microsoft.com/en-us...

And finally: Phonegap Build is intended to be used by developers who don't want the hassle of installing Cordova, Phonegap, SDK's, Plugins, Java, Node and whatnot. We, the PGB users, happily code away and upload our assets and a config. We use our favorite code editor and shake our heads when we see yet another 'real developer with his heavy development environment'.
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
I'll take the first bit as a `yes`.... shame I don't have access to an Android device yet - but I now have a Macbook, just no Apple Developer Membership SignIn :(

I'll take the second bit as a `no` and join you sensible people using the Cloud :)

Unfortunately for you, you'll be the 1st to know how it goes!
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
Hi Petra,

See I told you you'd be the 1st to know!
It sorta worked :[

Phonegap Build went fine (after navigating Apple's Registration/Provisioning minefield)
Went to iTunes to install onto my iPhone and all seemed to go well - said installing, showed the icon on the iPhone's HomeScreen with the progress 'radar' progressing until it got to 100% then the icon disappeared and iTunes just sits there saying 'installing'
Any clues?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
This is typical for a wrong combination of p12 and mobileprovision.
- Did you create a development cert or a distribution cert
- Did you register your devices? If so, how did you find the proper UUID's?
- Did you create a wildcard bundle id, so you can use it for multiple apps?
- Did you create a development mobileprovision, linked to that wildcard bundle?
- Did you upload p12 and mobileprovision in PGB, so you had a Signing Key?
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
- Did you create a development cert or a distribution cert
- Did you register your devices? If so, how did you find the proper UUID's?
In iTunes, click on SerialNo. of iPhone
- Did you create a wildcard bundle id, so you can use it for multiple apps?
No, took other option
- Did you create a development mobileprovision, linked to that wildcard bundle?
Dev: yes, but used the 'other' bundle option
- Did you upload p12 and mobileprovision in PGB, so you had a Signing Key?
Yep
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
OK. I must assume that something went wrong during that process, somehow.
However, I don't know iTunes for Mac, so I can't tell from experience.

- Are you sure the UUID does not start with 'FFF...'?
- Are the bundle ID that you registered and the widget ID in config identical?

Another possibility would be that you perhaps restrict the app's deployment platforms, using preferences like deployment-target or target-device
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
Hi again Petra,

The major problem is that I mis-typed 1 character in the UDID of my iPhone!!! And of course there's no way to edit in the correct one (according to Apple Support)!

Luckily I also have an iPad so I tried that after deleting everything and starting again (with a Wildcard) - same result.
Just now I noticed the UDID that I entered for the iPad has lower case letters whereas iTunes shows it all UPPER case - I've asked Apple Support if that makes any difference and I'm still waiting for their response.

This is bigger than Hilter's gas bill!!!!
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Well, if you manage to get this through, you've mastered the main hurdle.
Otherwise, you could always consider getting a couple of Android test devices and start there. No signing key required for the debug-apk
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
hehe - IF I get thru it :)

I must say the Apple process (and Microsoft from what I've seen to date) is unnecessarily complicated - all this signing, certificates, provisioning, etc is just crazy and I'm at a total loss as to what it actually achieves - surely not just security .. there's better ways than this carry-on!

Maybe the guy that thought of this used to work for Adobe and just loves making processes unnecessarily obtuse and the thought of people jumping through hoops to get seemingly simple tasks done :)
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You must be a Dilbert fan, too.
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
I'm not, but only because I'm not familiar with it - but the inference is that I probably would be :)

Where in the world are you?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Most of the time traveling in Nortwestern Europe, currently in France and Luxembourg for the good part of 3 days.
.
And yes, you should have a look here
http://dilbert.com/
and for beginners here
https://en.wikipedia.org/wiki/List_of....
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
haha - very dry and yes, there are similarities :)
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
IT WORKS!!!! :)

Don't really know what I did this time (after created a 'new' device with the correct UDID) - deleted everything and re-did everything and the bloody thing works just like a bought one!!!!!

One happy little (well, not quite so little) Aussie!!!

Enjoy Europe - I'm over there in a month, seeya then (he says with total ignorance to the fact that he won't be able to stop himself asking for more assistance)!

Thanks a bloody heap, Petra !!!! :)
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Glad to hear that you've got it working, Ian.
You can sell the bloody thing, now.
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
I wish it was at that stage - LOTS of enhancement / debugging / speed-up / etc to go yet ......but hey, I'm a hell of a lot closer than I was a week ago THANKS MAINLY TO YOU! :)
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
Remember when our adoring relationship (for 1 of us) started it was because not all of those bloody 80 icons weren't displaying? They do now :)

Strange ..... given there's no 'browser', Google Maps still runs and works
...go figure! buggered if I can!

If I make a change to the source, I understand I re-zip the Project, send zip up to Build and rebuild it for ios - what do I do then to get the new version running on my iPhone?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
In fact, I'm an automated Internet Bot, so you should go look elsewhere for the adoring relationship.

And there is some kind of a browser, otherwise html/css/js wouldn't be parsed and executed. Such browser is called a Webview Component (google it).

And indeed, after applying changes, you re-zip, upload, download the ipa and install it on your device. You may use the QR code for that, or download the ipa (apk for Android) and install through iTunes.
Phonegap Build also offers the Hydration feature. Some love it, I happily and successfully ignore it.
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
I'm an automated Internet Bot ...... Bugger!

And there is some kind of a browser,..... if I'd taken 5secs to think about it rather than being surprised, I would have guessed that (eventually!)

install it on your device ....how the hell do you do that!
I get the bit about downloading it from the Cloud to local, but what then?
Hydration sounded like a good option, I have it turned on, but it doesn't `rehydrate` until I remove the app and re-install it which sounds a bit drastic to be the correct way of doing it - should I change the `exit-on-suspend` preference to `true`?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
No. Exit-on-suspend is something completely different.

Installation of an ipa in iTunes for Windows is simple as:
- upload the ipa file into iTunes Media Library
- connect the device to the PC (device is displayed in iTunes)
- install ipa from Library into app using Sync

I suppose it's the same in iTunes for Mac. And I'm pretty sure iTunes has a Help Document explaining how it works.
If not, the first Google result page for 'itunes mac install ipa ios' returns:
http://stackoverflow.com/questions/26...
https://www.youtube.com/watch?v=Dib1H...
http://techapple.net/2015/01/4-waysme...

Perhaps it would not be a very bad idea to pause 2 minutes before starting to post/ask here and see if it would be faster to find the answer at the source. Such source for installation of an iOS app would be Apple or an iOS specific forum.
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
I'm on Win10
Point taken!
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
Hi Petra,

Hopefully I've left you alone long enough to earn a few more minutes of your invaluable expertise :)

https://www.dropbox.com/s/p6anmfz9zg4...
contains my config.xml and I'm hoping you can tell me what I've done wrong to cause the following ...
* on iphone5 splashscreen is using the default icon.png (although I also have a default splash.png on the same level as my index.html) and apparently all splashscreen specifications are being ignored.
* even though the config.xml says no fade and no hide of the splashscreen, both still happen
* using the Desktop/App environment, the accelerometer is playing nice - but nothing in the Build version (exactly the same config.xml albeit 1 level higher in directory structure which is the only way the Desktop/App environment runs)
* still getting scroll bounce even though I've tried all combinations of the preferences to disallow it.

Cheers,
Ian.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Hi Ian,

Here is some feedback:

1. You have
<preference value="10000" name="SplashScreenDelay"/>
<preference value="false" name="AutoHideSplashScreen"/>

This is a strange combination. How can you have a delay of 10 seconds if you DON'T want it to hide automatically?

2. For iPad, you need to include the statusbar-plugin, otherwise it won't scale well.

3. on iphone5 splashscreen is using the default icon.png (although I also have a default splash.png on the same level as my index.html) and apparently all splashscreen specifications are being ignored. a) Are you saying it uses an icon instead of a splash screen, and none of your splashscreens are being shown?
I have carefully reviewed the specs (icon/splash) as well as the image files for iPhone5, and everything appears to be OK. From your config and image files, I can't see a reason why the splashes on iPhone5 shouldn't play nice (especially the portrait splashes).
BTW: in all these years, I have never found out what the "default splash.png" in the root is intended for. I would remove that file and its reference from the config.

4. Accellerometer:
are you sure that if (isPhoneGap()) always evaluates to TRUE if you expect that?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
One more suggestion: would you please try phonegap-version 'cli-6.1.0' for test purposes and see if that performs better?
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
Hi again Petra,

Latest ZIP- https://www.dropbox.com/s/myh0z95pyc1...

This is getting weirder - after being slapped by you so many times, thought I'd better be 110% sure of my facts before bothering you, so I used Photoshop to put a number on ALL the icon images in the SplashIcon folder and the one in the 'root' folder (and all the Splash images have the word ELF at the bottom) so I could identify what it was doing.
I zipped it, uploaded the new zip, the build happened with no errors, I hydrated that version and the splash screen has NO number - I can't figure out where it's getting the image from!

1/2. I agree re inconsistency in the preferences so I deleted the Delay.
Added the Statusbar plugin (after downloading/installing).
Same result, it IS fading and auto hiding :(

3. I only added the default splash.png after investigating this problem, ie. it was happening before it existed in the 'root' directory.

4. As you can see at the end of Common.js, I proved it thinks it's running Phonegap by the alerts (ie. PhoneGap IS displayed when running).

5. I thought by using Cloud Build, I'd automatically be using whatever the latest version of PhoneGap and plugins is - how do I get to use 6.1.0 as you suggest?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I hydrated that version
AAARGHH!
With Hydration switched on, config changes are ignored.
For your own sanity (and mine) don't use Hydration....at least not as long as you're making config changes.

<preference name="phonegap-version" value="cli-6.1.0"/>
Otherwise, you get the version that is set to default, currently cli-5.2.0
Not necessarily the latest version.
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
Well, I'll be f*&^#% !!!!!!!!!!!!!!!
I've told you my thoughts on the Adobe documentation haven't I ?!?!?!?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Don't hold back. Won't you please express what you REALLY think? :-)
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
Well that didn't take long!.................

Accelerometer is now working :)
SplashScreen is now working :)
Icon is now working :)
DisallowOverscroll is NOT working :( ....I'll take out the defecated versions

also I hoped to use the Splashscreen as a `background` while User Signed-In and then use navigator.splashscreen.hide() to hide it before entering the App proper - but it seems the SplashScreen actually hides whatever is written to the screen (except notifications.confirms) ... sound right to you?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Yes, it does.
Sounds pretty good so far.
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
Bugger!
So I can mimic this, do you know if there is a way I can interrogate Phonegap for which SplashScreen image it used so I can re-display it?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Let's see if I understand correctly what you want:
You need a first screen, that looks like a splashscreen, but in fact is an input form (one or two fields and some submit button). The user enters data, hits the button and somehow, somewhere the data are checked and either an error message or the 'real first page' of the app is displayed. Is that correct?

If so, your login page (with a background image similar to the splash, or different) is in fact the first page of your app. It includes application logic - check for required fields, for instance - and contains code for the communication with the back end.
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
Correct - sounds silly the way you put it, but that's the functionality I'd imagine - maybe I'm thinking like a User in that the App proper doesn't really include the Signing-In process (in fact, User may have previously opted to not formally SignIn everytime, but instead have the App pick up the UserId from localStorage, in which case this 'frontend' simply becomes a `Welcome back` banner).
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Well, you can do this, yes.
You would still have a real splashscreen first, which you can dismiss as soon as the login page (which would in fact be index.html) displays.

Since this action would be visible to the user, I would NOT make the background of the login (index) page identical to the splashscreen. If you did, it would look like a strange short break in the page flow.

Should the user opt to 'remember' his login data, you would detect that in index.html, check the data and load the next page, then dismiss the splash screen. That would make the app display the 'real first page' (say: index2.html) immediately, in the eyes of that user.
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
Yeah, maybe a rethink is required - I was hoping after interrogating Phonegap to get the Splash it used, use javascript/DOM to set the body background image with CSS animation to fade it in, then dismiss the Splash followed by a setTimeout of 0 to get it to actually occur without the User being (too) aware.
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
By the way, I removed the old `WebViewBounce` preferences leaving just the DisallowOverscroll=true, but the bounce is still happening :(
Any clues?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
No sorry, no clues. Perhaps someone else chimes in.
Or you could consider keeping the bounce, since iOS users are very much used to that, anyway.
Photo of Ian Howse

Ian Howse

  • 45 Posts
  • 0 Reply Likes
Cheers :)
Again thanks for your tremendous help. Hope the travels are going well.