Choose splash screen programatically

24 views
Skip to first unread message

Rob Willett

unread,
Aug 25, 2017, 12:37:24 AM8/25/17
to phon...@googlegroups.com
Hi,

We're trying to work out how to have different splash screens depending on a JavaScript variable. We don't think this is is possible but we thought we'd throw this out to see if the wisdom of the group can identify a solution.

Background

Our core software is actually a two apps in one. Jambuster and Jambuster Blackwall Tunnel. Both apps are free, both share around 90% of the same functionality but the Jambuster Blackwall Tunnel app is dedicated for traffic issues around a certain location in London. The main Jambuster app isn't a Pro version and the Jambuster Blackwall Tunnel version isn't a Lite version, it's just a change in specialism. They have slightly different target markets and the Jambuster Blackwall Tunnel app has some predefined sections that simplify life for people who drive through the Blackwall Tunnel in London regularly. 

This model allows us to expand out horizontally so we can put out apps based on different areas of London as the traffic patterns vary over London.

The software for both apps is the same, we configure the apps based on:

1. A rather complex build system that ensures that both apps have a common codebase. We have two app directories and we basically use symbolic links to ensure that the code files are up to date and are perfectly (we almost never use that word, but here we will) in line.

2. A single variable change in a JavaScript configuration file changes the functional characteristics of the two apps. This works very well.

3. We have individual config.xml files as the app id needs to be different,  along with the splashscreens configuration and some low level license keys for commercial plugins. 

Based on this setup, which has evolved as we find issues, we can build and test two apps for Android and IOS, so four separate apps, in a few minutes. It may not work for everybody and has rather a lot of shell scripts underpinning it, but for us its been pretty good for the last 12 months. We haven't changed it in 12 months so we know it works pretty seamlessly.

What we want to do

We're about to change a key element of our app, our map displays. We used to use Open Streetmap (OSM). We have our own OSM server and we know it pretty well. However OSM doesn't do real time traffic information which is a problem. We have a commercial provider, HERE, who does, so we will test using that. The code to switch between OSM and HERE maps is, you guessed it, a single JavaScript variable change. We wanted to ensure that we can change map providers easily and quickly as we may use the traffic volumes as a discriminator in future products. We may end up with a Pro version which has traffic displayed and a cheaper version that doesn't. 

All the map display code is changed (took about 8 hours) but we have one niggling problem left.

Our splash screens use images from OpenStreetMap which has a different colour set and style to HERE maps. It's not a problem to create new splash screens using the HERE maps, that's already done, but what we really want to do is have both sets of splashscreens in the app, and depending on the app configuration we choose at boot time, which one to display. 

We know we can write a shell script that pulls one set of splash screen images out of the build directory and replaces them with a different set. Thats pretty simple, but we would much prefer to have a system such that the program itself does this at run time rather than the decision made at build time. That's a key difference. 

We are strong believers in very adaptable, self configuration code. We like having a simple one variable change and slightly different functionality kicks in. Whilst the up front costs of time are more, the long term maintenance is less.

What have we done

We've looked through the main Splash Screen plugin 


and can see that it doesn't appear to support what we need to do. Our thinking about the way Cordova works is that there is some behind the scenes work that is done BEFORE the isDeviceReady event is kicked off to our main app, which is why the splash screen code is in the config.xml file, rather than the JavaScript files. 

We don't think it's possible to change the splash screens in this way and we think we have to write a script to do it at build time rather than run time, but if there is any way to do it, this is the group that can prove us wrong.

Thanks

Rob

Steve Husting

unread,
Aug 25, 2017, 12:45:23 PM8/25/17
to phonegap
Can you simply skip the splash screen and show the specific image for a second when the app is launched?

Rob Willett

unread,
Aug 26, 2017, 4:30:19 AM8/26/17
to phon...@googlegroups.com
Steve

We could do but we lose the purpose of the splash screen being displayed while we set up Internet connections, download information etc. 

We'll give it a go and see if it's smooth. 

Thanks 

Rob 

Kerri Shotts

unread,
Aug 26, 2017, 9:09:43 AM8/26/17
to phonegap
Some background regarding launch images on iOS:

 - launch images are a required OS feature; you can't get rid of them.
 - launch images are delivered within the app's immutable bundle
 - the OS controls the initial display of the launch image, not the app
 - once PG gets initialized, it takes over control of the launch image and either hides it or, if you've got the splashscreen plugin installed, you can hide it
 - There is a watchdog timer for the OS portion of the launch image -- 10s max. Once PG takes over, you can take as long as you want, BUT users aren't going to appreciate long load times, of course.

So... AFAIK, you can't do quite what you're asking. The simplest way would be to use a very basic splash screen (a single color works), and then pop up a custom image when your JS kicks off. As long as you have the splashscreen plugin installed, you can control when the system-provided splash goes away. You won't get much faster than 1s or so, but you should still be able to transition to your own image reasonably quickly, and then you can hold that until everything else has loaded.

I think that's what Steve is suggesting. You can still cover downloads & network setup with your image instead of the system-provided launch image.

Personally, I keep my launch images extremely simple. One of my apps uses a solid color as the launch image and Apple has no problems with it. For other apps I may use a dual color scheme with a logo in the middle, but that's approaching the limits of what I'll do.

Rob Willett

unread,
Aug 26, 2017, 9:41:07 AM8/26/17
to phon...@googlegroups.com
Kerry, 

You've described quite thoroughly what we suspected, but far more eloquently :)

I like the idea of a simple colour splashscreen which mutes into our splashscreen that is under our control. From tests with our users, they like the splash screen and it's part of our branding efforts.  The design of the screen has taken some time to do and we'd hate to simply throw it away. 

We'll play to see if we can 'blend' the screens and the transition to see if that works. The other option is that we simply write a script that sits on top of the directory that moves files in and out depending on a variable we grep out of the source code. Its not that difficult to do.

We have two options, we'll play with these over the weekend. Thanks to Kerri and Steve for the input.

Have a good weekend,

Rob

--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+unsubscribe@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
---
You received this message because you are subscribed to the Google Groups "phonegap" group.
To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

jcesarmobile

unread,
Aug 26, 2017, 11:18:13 AM8/26/17
to phonegap
I would continue changing the images on build time and not on run time, as having multiple splash images will make your app bigger.


El sábado, 26 de agosto de 2017, 15:41:07 (UTC+2), Rob Willett escribió:
Kerry, 

You've described quite thoroughly what we suspected, but far more eloquently :)

I like the idea of a simple colour splashscreen which mutes into our splashscreen that is under our control. From tests with our users, they like the splash screen and it's part of our branding efforts.  The design of the screen has taken some time to do and we'd hate to simply throw it away. 

We'll play to see if we can 'blend' the screens and the transition to see if that works. The other option is that we simply write a script that sits on top of the directory that moves files in and out depending on a variable we grep out of the source code. Its not that difficult to do.

We have two options, we'll play with these over the weekend. Thanks to Kerri and Steve for the input.

Have a good weekend,

Rob
On Sat, Aug 26, 2017 at 2:09 PM, Kerri Shotts <kerri...@gmail.com> wrote:
Some background regarding launch images on iOS:

 - launch images are a required OS feature; you can't get rid of them.
 - launch images are delivered within the app's immutable bundle
 - the OS controls the initial display of the launch image, not the app
 - once PG gets initialized, it takes over control of the launch image and either hides it or, if you've got the splashscreen plugin installed, you can hide it
 - There is a watchdog timer for the OS portion of the launch image -- 10s max. Once PG takes over, you can take as long as you want, BUT users aren't going to appreciate long load times, of course.

So... AFAIK, you can't do quite what you're asking. The simplest way would be to use a very basic splash screen (a single color works), and then pop up a custom image when your JS kicks off. As long as you have the splashscreen plugin installed, you can control when the system-provided splash goes away. You won't get much faster than 1s or so, but you should still be able to transition to your own image reasonably quickly, and then you can hold that until everything else has loaded.

I think that's what Steve is suggesting. You can still cover downloads & network setup with your image instead of the system-provided launch image.

Personally, I keep my launch images extremely simple. One of my apps uses a solid color as the launch image and Apple has no problems with it. For other apps I may use a dual color scheme with a logo in the middle, but that's approaching the limits of what I'll do.

--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to

For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
---
You received this message because you are subscribed to the Google Groups "phonegap" group.
To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+u...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages