PDA

View Full Version : Delay between splash and rendered ui



tucolino
23 Dec 2010, 4:34 AM
Hi all,

I'm seeing a blue background between the iPhone's splash image (Default.png) displayed and the Sencha ui rendered. The color's irrelevant as it's part of the style, but would like to know how to get rid of the delay between the two. Am I right to say that this is when phoneStartupScreen is displayed from Ext.setup?

I'm using phonegap on an iPhone 3.2 SDK. Attached is a minimal example xcode project:

http://xenodium.com/tmp/senchagap.zip

cheers,

Alvaro

tucolino
23 Dec 2010, 12:39 PM
Here's a short video showing the delay between the splash screen and the sencha ui rendered.

http://xenodium.com/tmp/senchagap.mov

Any suggestions? Thanks.

nrevelle
3 Jan 2011, 12:00 PM
Did you ever find a solution? I am getting a white screen.

tucolino
3 Jan 2011, 3:11 PM
I modified phonegap's PhoneGapDelegate.m and delayed hiding the splash image by 2.5 seconds. This is far from ideal. I would much rather hide the splash when Sencha is truly done/ready. Would love to see an alternative solution. Here's the source if interested.



- (IBAction) delayedWebViewDidFinishLoad:(NSTimer*)timer
{
UIWebView* theWebView = [timer userInfo];
/*
* Hide the Top Activity THROBER in the Battery Bar
*/
NSDictionary *deviceProperties = [ self deviceProperties];
NSMutableString *result = [[NSMutableString alloc] initWithFormat:@"DeviceInfo = %@;", [deviceProperties JSONFragment]];

/* Settings.plist
* Read the optional Settings.plist file and push these user-defined settings down into the web application.
* This can be useful for supplying build-time configuration variables down to the app to change its behaviour,
* such as specifying Full / Lite version, or localization (English vs German, for instance).
*/

NSDictionary *temp = [[self class] getBundlePlist:@"Settings"];
if ([temp respondsToSelector:@selector(JSONFragment)]) {
[result appendFormat:@"\nwindow.Settings = %@;", [temp JSONFragment]];
}

NSLog(@"Device initialization: %@", result);
[theWebView stringByEvaluatingJavaScriptFromString:result];
[result release];

[[UIApplication sharedApplication] setNetworkActivityIndicatorVisible:NO];
activityView.hidden = YES;

imageView.hidden = YES;

[window bringSubviewToFront:viewController.view];
webView = theWebView;
}

/**
Called when the webview finishes loading. This stops the activity view and closes the imageview
*/
- (void)webViewDidFinishLoad:(UIWebView *)theWebView {
[NSTimer scheduledTimerWithTimeInterval:2.50 target:self selector:@selector(delayedWebViewDidFinishLoad:) userInfo:theWebView repeats:NO];
}

snapshotmedia
5 Jan 2011, 2:58 AM
This is happening in my app too. Really frustrating - would appreciate any help anyone can give here.

SunboX
7 Jan 2011, 12:12 PM
i´ve done a small PhoneGap iOS SplashScreen plugin the last two hours... hope this helps someone ;o)

https://github.com/SunboX/PhoneGap-Plugin-SplashScreen

Comments and pull requests are welcome. ;o)

asevers
6 Feb 2011, 8:11 AM
Nice job on this plugin. Any thoughts as to how we could eliminate the flicker between phonegap's imageView and this one? Could we instead modify phonegap to not take down the initial imageView and then just use SplashScreen to call a hide function?

SunboX
6 Feb 2011, 1:11 PM
Yes, we can. ;o) I´ve added a small delay so it didn´t flicker any more. Take a look at the changes i´ve made:

https://github.com/SunboX/phonegap-iphone/commit/ff213d30b827d445793f86a50a48bcc59acaa0cc

greetings André

asevers
11 Feb 2011, 5:31 PM
This should be a sticky! Nice job.

buz
21 Feb 2011, 6:18 AM
Since I had the same problem in Android, here you have the Android version.



/**
* SplashScreen
* Show a splashscreen while loading JavaScript.
*
* @author Daniel Kloosterman 2011 - <buz.i286@gmail.com>
* MIT Licensed ;)
*/
public class SplashScreen {

private boolean isVisible = false;
private ImageView image;
private DroidGap gap;

/**
* Create the splashscreen
* @param gap The PhonegapActivity
* @param view The webview (easy way to get the layout)
*/
public SplashScreen(DroidGap gap, WebView view)
{
this.gap = gap;
image = new ImageView(gap.getBaseContext());
image.setBackgroundResource(R.drawable.splash);
gap.addContentView(image, view.getLayoutParams());
}

/**
* Show the splashscreen
*/
public void show() {
setVisible(true);
}

/**
* Hide the splashscreen
*/
public void hide(){
setVisible(false);
}

/**
* Change the visibility of the splashscreen.
* @param boolean aVisible Visible
*/
public void setVisible(boolean aVisible) {

// Declare
final boolean visible = aVisible;

if (isVisible != visible){
// Run
gap.runOnUiThread(
new Runnable() {
public void run() {
isVisible = visible;
image.setVisibility(visible ? View.VISIBLE : View.INVISIBLE);
}
}
);
}
}
}

Add this to your App.java in the onCreate function (Before super.loadUrl)



// Add splashscreen functionality
appView.addJavascriptInterface(new SplashScreen(this,appView), "SplashScreen");

themightychris
7 Apr 2011, 8:53 AM
buz -

I'm trying to get your Android pluign code working with my PhoneGap 0.9.4 project but it seems the plugin architecture has changed and the plugin class will need to be refactored to extend com.phonegap.api.Plugin and invoked a bit differently

I've been trying to do this but I do not understand how to get references to the DroidGap object and appView in this context. From what I can tell, PhoneGap handles instantiating the plugin class and does not pass either of these.

Has anyone gotten this working with Phonegap 0.9.4 on Android yet?

buz
8 Apr 2011, 2:06 AM
Did you add a splashscreen image to the project?

headkit
5 May 2011, 1:28 AM
hm - doesn't really work here. still seeing the white flickering..

Preet
11 May 2011, 2:08 PM
Hi, have you got the solution for this. I want to add 2 splash screens by giving time duration. Do you have any idea about this.. I am using Phonegap 0.9.3 and xcode 3.2.5.. Thanks..

headkit
11 May 2011, 11:15 PM
seems like the white flickering only shows up in the simulator.

dcartman
27 May 2011, 10:39 AM
I have created a Web App that uses the splash screen when bookmarked to homepage of iOS device.

The App loads well, and the splash screen appears however it disappears before the app is fully rendered (just like in phoneGap) and there is 2-6 second gap depending on the device.

Any thoughts for how to fix/control the splash screen on a Web App?

Thanks,
Daniel

For those interested the app can be viewed here:

http://alumni.yale.edu/m/

ynchan
30 May 2011, 5:51 PM
No luck with this it seems. I updated to PhoneGap 0.9.5.1 and Sencha Touch. Tried various methods of working around the flicker between the splash screen and the first page of the app but it still persists.

chrisemersonnc
5 Jul 2011, 11:29 AM
Hey all,
I too am suffering with this white screen issue w/my phonegap apps - very frustrating!

I tried the couple phonegap plugins floating around but neither worked for me - mainly because phonegap's delegate.m file isn't accessible to hack anymore/atm.

I think I may have found a workaround for now though. It isn't super pretty but does the job for me. Basically, if you set your XCODE project to be Universal instead of iPad-only you can configure the various splash screens for iPhone and iPad so that eventually you don't see the white screen. I'm not sure what the magic setting(s) are just yet - but I believe one of them is that you have to set the iPhone portrait image to a 768x1024 image. I'll try to come back with some specifics if anyone is interested - but do try it out yourselves in case you find it works for you!

i'm just happy to not see that @#$! white screen flicker anymore!!

- Chris

chrigu
13 Jul 2011, 12:45 AM
I fixed the problem for the Iphone with the latest Phonegap version (0.9.6) and will soon update my plugin when I have time.

There is no need to hack the phonegap library or adding some random delay, the only thing you need to do is extend the PhonegapDelegate and overwrite the function webViewDidFinishLoad where Phonegap normaly removes the splashscreen. And then use a Plugin to hide the splash screen via Javascript. So no Hacks at all! If someone is interested, drop me a line but I will post a plugin for that for people who don't know objective c!

Cheers
Chris

chrigu
13 Jul 2011, 12:47 AM
Hey all,
I too am suffering with this white screen issue w/my phonegap apps - very frustrating!

I tried the couple phonegap plugins floating around but neither worked for me - mainly because phonegap's delegate.m file isn't accessible to hack anymore/atm.

I think I may have found a workaround for now though. It isn't super pretty but does the job for me. Basically, if you set your XCODE project to be Universal instead of iPad-only you can configure the various splash screens for iPhone and iPad so that eventually you don't see the white screen. I'm not sure what the magic setting(s) are just yet - but I believe one of them is that you have to set the iPhone portrait image to a 768x1024 image. I'll try to come back with some specifics if anyone is interested - but do try it out yourselves in case you find it works for you!

i'm just happy to not see that @#$! white screen flicker anymore!!

- Chris

No need to hack the phonegap delegate.. just create your own delegate file and extend from phonegap delegate.. and in AppDelegate.h you just use your custom delegate.. so easy!

headkit
13 Jul 2011, 2:46 AM
cool.
a "how-to" would be nice!

olouvignes
4 Nov 2011, 5:37 PM
Hey,

It's been a while, now with phonegap 1.1.0 (& ST 2.0).
I would love to find a working solution for this.

https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/SplashScreen does not work anymore.

Ready to get my hands dirty to make this work again (but i'm very noob on obj-c dev).

olouvignes
4 Nov 2011, 5:44 PM
Looks like it is native in phonegap since 1.0 :-)

"in PhoneGap.plist, change the value for “AutoHideSplashScreen” to false (by default it is true for legacy code). This will not hide the splash screen, and it will remain on screen indefinitely."


setTimeout(function() { navigator.splashscreen.hide();}, 2000);