Splash Screen Use Case Examples Needed

  • 1
  • Idea
  • Updated 5 years ago
I'm reposting because for some reason the last one showed up with a Praise topic. Far from it.

USE CASE EXAMPLES needed!

"How to example for adding a splash screen to ios for 3 seconds, then fade (without a white flash) to the main app?" (example config.xml) in 'current PGB version #.

or...

"How to build 'without' a splash screen and without a white flash?" (example config.xml) in 'current PGB version #.

The documentations on these various issues are often years old, deprecated functionality and calls, etc.

The two examples above are essential. If I can ever find the right recipe for both the above, I'll publish it for everyone. Until then, just trying to illustrate those two common examples are full of conflicted forum posts.

Some issues that lead to this request above. RULES based on USE CASES, not years of deprecated functionality and posts. Need updated examples if here.

1. Even with no splash screen plugins within config.xml, and only the addition of a splash.png in the root directory - a very quick (1 sec.) splash screen still appears on iOS - even with auto-hide-splash-screen set to "true" before the main index.html loads.

a. How to disable any splash screen?
b. Should the splash.png be removed if no splash screen is required - meaning it will default to display it, even if not called out in plugins and preferences?

2. IF using a splash screen, how to get rid of the 1 second white flash before app loads? Lots of stuff written about this on the forum, but most are outdated version solutions, years old or simple incorrect and conflicting info.

Thank you
j.
Photo of Jon Farhat

Jon Farhat

  • 38 Posts
  • 1 Reply Like

Posted 5 years ago

  • 1
Photo of Jon Farhat

Jon Farhat

  • 38 Posts
  • 1 Reply Like
Example config.xml files would help here, based on use cases.

ie: Here's a config.xml file that does this for ios.

Here's a config.xml file that does this for android.

etc. (per original post above)
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Jon,
it is possible you have not found the documentation you need. As I read the splash screen plugin documentation, there are examples for both the config.xml and index.html. If there something further you see as needed?

Any other "preferences" you might need are also in the documentation.
Photo of Jon Farhat

Jon Farhat

  • 38 Posts
  • 1 Reply Like
Yes, believe me... I've seen all that. And frankly, there are no Examples, per platform, per use case, 'try this'. Just snippets of prefs and plugins, that can be assembled many different ways - sure... open-ended for various needs.

I'm saying, address the most common request here.

Let me throw it out to you folks.

"What would an config.xml look like, (all in) for ios, to show a splash screen for 3 seconds, fade out, no white flash, and load app?"

These snippets have hideous descriptions. Poorly written.

USE CASES... PGB is supposed to be targeting the 'ease of using your own HTML, CSS and javascript skills - so let's address the market.
Photo of Jon Farhat

Jon Farhat

  • 38 Posts
  • 1 Reply Like
Check this out as well...

Assumptions don't always pan out.

https://github.com/phonegap/build/iss...
Photo of Chris Griffith

Chris Griffith, Champion

  • 347 Posts
  • 92 Reply Likes
One note to add, if I recall correctly Apple requires you to have a splashscreen defined. You might want to check the App guidelines for them to be certain before you spend more time on this issue.

Chris
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@jon,
Thanks for pointing things out. Phonegap has changed so much in the last year, that we have lost track of things - including good demos.

On this, I have a dated demo/example/tutorial I'm willing to update with your fine suggestions. As such, here it is:

Phonegap Demo Apps

One note, "Downloadable Apps" are no longer available. I'm scheduled to update all those apps in the next 30 days, but they all work right now - as is.

Jesse
Photo of Jon Farhat

Jon Farhat

  • 38 Posts
  • 1 Reply Like
Chris I get that I was using it as an example of 'what to expect'

Assume widget tags not related to splash screen are excluded for this question:

Is this config 'supposed' to show a splash screen, on iOS, for four seconds, with a FADE-OUT, (over the last 2 seconds of the screen delay preference, AND eliminate the white flash usually seen from a splash screen to the main load??

Seriously, it will help if someone confirms or denies that the tags below are 'supposed' to accomplish the above use case. (I won't get into whether it is working that way or not.... just need to know if this is the proper logic)

plugin name="org.apache.cordova.splashscreen"

preference name="show-splash-screen-spinner" value="false"
preference name="auto-hide-splash-screen" value="true"
preference name="SplashScreenDelay" value="4000"
preference name="FadeSplashScreenDuration" value="2000"
preference name="FadeSplashScreen" value="true"

Assume all the res directories are set properly and assume a splash.png default file is in root

icon src="splash.png"

iPhone and iPod touch
splash src="res/screen/ios/Default.png" platform="ios" width="320" height="480"
splash src="res/screen/ios/Default@2x.png" platform="ios" width="640" height="960"

iPhone 5 / iPod Touch (5th Generation)
splash src="res/screen/ios/Default-568h.png" platform="ios" width="320" height="568"
splash src="res/screen/ios/Default-568h@2x.png" platform="ios" width="640" height="1136"

iPhone 6
splash src="res/screen/ios/Default-667h@2x.png" platform="ios" width="750" height="1334"
splash src="res/screen/ios/Default-Portrait-736h@3x.png" platform="ios" width="1242" height="2208"
splash src="res/screen/ios/Default-Landscape-736h@3x.png" platform="ios" width="2208" height="1242"

iPad
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Two "errors" here:
1. Don't us the old PCB splashscreen plugin. Instead, use cordova-plugin-splashscreen from npm

2. This can't be correct, I think:
icon src="splash.png"
Photo of Jon Farhat

Jon Farhat

  • 38 Posts
  • 1 Reply Like
Confused by this Petra. If the workflow involves changing config.xml and then sending a build to the PhoneGap Online build service, how then is the npm instruction of adding a splash screen implemented. again, show examples please. People just keep sending links to sites without addressing the workflow we've been mentioning..

"what does the xml tag look like in config.xml, to add the plugin, IF we shouldn't use the one I've used above"?

ie:

plugin name="cordova-plugin-splashscreen "

or

plugin name="cordova-plugin-splashscreen@3.0.0"
Photo of Jon Farhat

Jon Farhat

  • 38 Posts
  • 1 Reply Like
Keep in mind, these xml tags we're using come from the EXAMPLES that are generated from using phonegap templates from current downloads. The information is really a bucket of frogs considering it's an online service targeting a different market than lower level developers. We're used to Adobe doing a better job of this.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Jon,
Petra may be asleep right now, so I will try to assist.
The documentation for plugins has been recently updated.
It is here: http://docs.build.phonegap.com/en_US/configuring_plugins.md.html#Plugins. If there is not enough information, let us know.

Jesse
Photo of Jon Farhat

Jon Farhat

  • 38 Posts
  • 1 Reply Like
Jesse

I checked out the samples. Yes, you're right... lots of errors. On the positive side, you can use what we've learned here.... as we've dragged this through the minefield for a couple days.

First off, Auto Hide needs to be set to TRUE for iOS. (watch everyone say, "oh I knew that") Apple requires splash screens, but autohide set to false, only creates a splash screen that NEVER GOES AWAY.

Having said that, (i fixed the pref in above example) the above example produces a very well designed animated effect and with those times listed, you all should try on iOS.

First off, it loads the splash screen- then very nicely cross-dissolves into the main app. NO WHITE FLASH bullshit. No, jumps, just nice and clean.

IF that's a desired effect, (let this be one use case example) then this works well.

We need to create better examples of 'desired effects' like every other software tool out there.

Hope this helps.
j.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Jon,
Thanks for your feedback. Here are my comments - i will be adding most of these comments to my demos.

When using launch image (splashscreen) with iOS, "quirk" are not usually demo'ed because there are not of general interest. We, of course, are talking about the BRAND NEW FadeSplashScreen and FadeSplashScreenDuration - which did NOT exists until recently. BLOG POST.

I will add examples as you suggested to my demos.

On autohide, et al., we generally DO NOT advise using this preference. The reasons being

  • the UI may have not settled
  • deviceready has not fired

On the first, it is obvious why we want to wait and hide the splashscreen manually.
On the second, if the UI is expose before the deviceready event fires, then that also means that the Cordova API is NOT available (including plugins) -- this may include localstorage. If the deviceready and relate APIs are not available, this may affect the UI. At this point, it is a subjective decision the developer must make.

I will add these notes to my demos. I will add examples as appropriate.

FWIW: your comment registered here.

Lastly, if you have more comments or I have missed something, let me know, I will be happy add more documentation to my demos.

thanks again for your comments.
Jesse
Photo of Jon Farhat

Jon Farhat

  • 38 Posts
  • 1 Reply Like
Jesse - Are you saying don't use the don't use the (preference name="auto-hide-splash-screen" value="true") at all?

If that's what you're saying - then how to manually do this, AGAIN, in reference to using the PhoneGap build service which gets it's instructions from the config.xml file?

And you're saying that "not usually demo'ed because there are not of general interest" who are you referring to. It works. It looks good and eliminates the white flash crap.

Again, what is your suggestion for the USE CASE above. How hard is it to just scratch that out here, rather than saying a blog is upcoming etc. Why can't anyone in an official position just answer a question.

Not trying to be a bitch here, but this is like a 'who's on first' sketch.
Photo of Jon Farhat

Jon Farhat

  • 38 Posts
  • 1 Reply Like
Okay,I want to scream now Jesse! Now you're removed the post from Petra telling me to use the NEW NPM cordova-plugin-splashscreen. I responded to this. But you've now removed his post. Why?

Please answer as to who we're supposed to listen to. You are offering conflicting information here.

In the link you just sent, there is NO mention of a plugin to be listed in the xml any longer. Is this true? It's not needed?

Then why is Petra saying the opposite?

And, are you saying we can't use the fade functions? Why, they work!

No, the information you are offering, and retroactively deleting is very confusing.

No. your link is not good enough.

Please just answer the questions - the original ones. Please.
Photo of Jon Farhat

Jon Farhat

  • 38 Posts
  • 1 Reply Like
HOW TO DO THIS?

1. assuming we're using PhonGap Build site to build our apps, and assuming the config.xml is the ONLY control file. Remember this site? https://build.phonegap.com/

2. We want a splash screen that comes up for 3 or 4 seconds, (whatever) and fades to the main app. SIMPLE. IOS AND ANDROID.

Can't you just correct, or note this simply. Why are you overthinking this and saying you'll write a post? Just please correct my assumptions (that work) that I put forward. Instead, everyone gets on this site and says YOU CAN'T DO THAT, but no says what can be done. Or offers examples without saying they are upcoming and don't pay attention to our information because it's out of date.

That's what these forums are for. Answering questions and correcting assumptions so others can learn rather than sending people to poorly written outdated information with no examples.

I suppose you will delete this entire thread at the rate we're going because you can see how it's not the greatest marketing tool - is it?
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Jon,
Sorry for any confusion. As you can see from my signature, I am just a volunteer. I have NOT deleted any message on this thread, and I can ONLY delete my own messages - sometimes. I don't know what is happening with Petra's messages. However, I the message system is have failures as we type.

On your issues, I think you need to take some time off. If your app is working to your satisfaction, then ignore what I have said.

On the remainder, there are no simple answers for Phonegap, just engineering decisions - that each developer must make.

Again, I suggest you take some time off.

All the Best
Jesse
Photo of Jon Farhat

Jon Farhat

  • 38 Posts
  • 1 Reply Like
No, someone deleted his messages and my questions in reply to those messages. The bad performance of the site, is a structural one, it's not changing the database.

AS to time off, gee thanks! I'll tell our client that.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Jon,
seriously, in your state, I am urging you to take time off.
Petra will be back in a few hours.

All the Best
Jesse
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Just got up. I'll write just a bit, then be off for about 2 hours, then return.

Jon, perhaps I should first clear up this:

1. Jesse and I are forum denizens and developers, just like you. We are no PGB employees, we have no admin rights on the PGB system or this forum and we are human, too. We happen to be around a lot because this forum allows us to ask questions and help others, which in turn makes us better understand how this all works.
With that in mind, try and be nice to us. Bickering at us won't help anyone.

"But where are the real PGB support crew people, then?"
Can't tell. Last november, they suddenly disappeared from this forum and there has been no replacement. It looks as if PGB has abandoned this place.
This might answer your question:
Why can't anyone in an official position just answer a question.
There is no such person around, anymore. Or so it seems since November 2015.

2. Nobody except you removed posts in this thread. If you want to know exactly what has been removed and changed, simply hit the "See the change log (xx recent)" hyperlink on this forum's thread list (top right)

3. "PGB should offer solutions for use cases"
Yeah, right. I could come up with dozens of variations, just on that single splash screen theme. It would be an enormous task to derive answers to all questions about use cases denizens could possibly construct - in advance - ....and it would be nearly impossible to maintain and update all these use cases if something changes. Who is going to pay for that?

4. Why contradict each other?
Partly that's your perception, maybe because you don't yet fully understand what we are trying to say, or maybe just because we didn't explain clearly enough. (Please be aware that english isn't my native tongue)
For the other part, that's because Jesse and I are both developers.....we don't always agree with each other. Sometimes one of us knows something that the other one doesn't, or we have different experiences on several themes, or just different preferences. Most of the time, we do agree, though.
This is a public discussion forum....you, as developer, should pick from that whatever you like and ignore the rest. Or think the rest over seriously, if you prefer.

Now, back to your question above:

For PGB 3.7.0 and below, no splashscreen plugin is required
For PGB cli-5.x, use <plugin name="cordova-plugin-splashscreen"> or <gap:plugin name="cordova-plugin-splashscreen" source="npm">. For the latter syntax, make sure you have the gap: namespace referenced in the xml.

Assume widget tags not related to splash screen are excluded for this question
Since you need the gap: namespace whenever you use the <gap:plugin...> syntax, the widget 'tag' is related to the splashscreen issue. You can't just assume that the widget 'tag' can be omitted due to irrelevance.

You may add a version number to pin the plugin version. Jesse recommends that. I do not.
There are two ways to do so, either with the version attribute or with the spec attribute. See the latest Blog articles for that.

First off, Auto Hide needs to be set to TRUE for iOS. (watch everyone say, "oh I knew that") Apple requires splash screens, but autohide set to false, only creates a splash screen that NEVER GOES AWAY.
This is definitely not true...not generally, anyway. I have several dozen apps with autohide set to false. I use the splashscreen api to make the splash disappear when displaying the first page, but of course only after loading templates and data, and waiting for deviceready. This works in everything from iOS6 to iOS8. Haven't tried iOS9 yet, because that's not supported by PGB.

On the 'fading' theme of this thread: I have no idea, because I never tried that. So, I can't tell from experience.
I might try it once this week, if I find time and feel like that. But anyway, if you say that using a certain preference works nicely, then I'd say:
a) Thanks for mentioning that....I didn't know it.
b) Use it. Why not? Just be awarethat future PGB versions might cause it to break (which is the case for everything they change - with or without announcement)
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Just an addition:

Jon wrote:
I suppose you will delete this entire thread at the rate we're going because you can see how it's not the greatest marketing tool - is it?
I truly hope that you now see how incorrect and unfair this remark is. Neither Jesse nor you or I will delete this whole thread. Neither of us is involved in Adobe marketing.
And both of us have tried - to the best of our knowledge and experience - to be of some help.