Software Archive
Read-only legacy content
17061 Discussions

Keep splash screen open until I close it

Sam_K_1
Beginner
1,692 Views

So it seems like I can close the splash screen with

navigator.splashscreen.hide();

But AutoHideSplashScreen needs to be set to false.

I am not really sure where to put this line, but I put this code in intelxdk.config.additions.xml and intelxdk.config/android.xml:

<platform name="android">
    <!-- below requires the splash screen plugin -->
    <!-- docs: https://github.com/apache/cordova-plugin-splashscreen -->
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="AutoHideSplashScreen" value="false" />
</platform>

Is there something I'm missing? It still disappears after a couple seconds.

Also for some reason the splash screen started showing a spinning loading animation on top, is there a way to get rid of that?

0 Kudos
1 Solution
Rakshith_K_Intel
Employee
1,692 Views

Make sure you have added the splash screen plugin to your project and using plugin version 3.2.0.

I tried with CLI version 5.4.1 and splashscreen plugin version 3.2.0, it worked. The plugin had an issue with older version of plugin, here is release notes for splashscreen plugin, it was fixed in 3.2.0: https://github.com/apache/cordova-plugin-splashscreen/blob/master/RELEASENOTES.md

To remove the spinner, add this:

<preference name="ShowSplashScreenSpinner" value="false"/>

 

You only need to add this to intelxdk.config.additions.xml file:

<platform name="android">
    <!-- below requires the splash screen plugin -->
    <!-- docs: https://github.com/apache/cordova-plugin-splashscreen -->
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="ShowSplashScreenSpinner" value="false"/>
</platform>

View solution in original post

0 Kudos
7 Replies
Rakshith_K_Intel
Employee
1,693 Views

Make sure you have added the splash screen plugin to your project and using plugin version 3.2.0.

I tried with CLI version 5.4.1 and splashscreen plugin version 3.2.0, it worked. The plugin had an issue with older version of plugin, here is release notes for splashscreen plugin, it was fixed in 3.2.0: https://github.com/apache/cordova-plugin-splashscreen/blob/master/RELEASENOTES.md

To remove the spinner, add this:

<preference name="ShowSplashScreenSpinner" value="false"/>

 

You only need to add this to intelxdk.config.additions.xml file:

<platform name="android">
    <!-- below requires the splash screen plugin -->
    <!-- docs: https://github.com/apache/cordova-plugin-splashscreen -->
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="ShowSplashScreenSpinner" value="false"/>
</platform>
0 Kudos
Sam_K_1
Beginner
1,692 Views

I was using the correct version of the plugin. I tested it out with a new project and it worked. I finally realized it was because I had left this:

    if( navigator.splashscreen && navigator.splashscreen.hide ) {   // Cordova API detected
        navigator.splashscreen.hide() ;
    }

In the onAppReady() function. It's working fine now. The spinner is gone now too.

Thanks for all your help.

0 Kudos
Sam_K_1
Beginner
1,692 Views

So my splash screen is staying longer now, but I think it introduced a new issue.

While the splash screen is up, the status bar is shown. I initialize my game by resizing it to the window height, but this happens before I close the splash screen. So my game is starting at a size of the fullscreenheight - statusbarheight (which happens to be 30 pixels on my phone).

Is there a way to display the status bar in full screen mode? Or some other way to overcome this issue?

0 Kudos
Rakshith_K_Intel
Employee
1,692 Views

You can add statusbar Cordova plugin and play with these preferences:

 

    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarBackgroundColor" value="#000000" />
    <preference name="StatusBarStyle" value="lightcontent" />

this should be added in intelxdk.config.additions.xml file.

 

0 Kudos
Sam_K_1
Beginner
1,692 Views

Still not having any luck. Also I looked up the status bar page and it looks like those three lines are only for ios, I'm testing on android at the moment.

There is also a hiding at startup section, but it says you need to edit the Info.plist file, and it sounds like you can't do that within XDK.

Here a more detailed write up of my issue:

When the game loads while the splash screen is up, it calculates the height without including the area the statusbar is covering. This makes the end result shorter than it should be. I made a demo which resizes the canvas to the screen size and draws a red border around it. It also alerts the window.innerHeight.

When launching from Intel App Viewer (which doesn't include a splash screen):

alert message, loaded game window

When launching the app which was built and installed (has the splash screen):

alert message, loaded game window

You can see in the second one it's 30 pixels shorter.

App.js

function onAppReady() {
    if( navigator.splashscreen && navigator.splashscreen.hide ) {   // Cordova API detected
        alert(window.innerHeight)
        //get resolution
        dpi = window.devicePixelRatio || 1;
        windowWidth = window.innerWidth * dpi;
        windowHeight = window.innerHeight * dpi;
        
        //identify canvas
        canvas = document.getElementById('main');
        context = canvas.getContext('2d');
        
        //resize canvas to fit zoom
        canvas.width = windowWidth;
        canvas.height = windowHeight;
        
        //shrink down to correct width with css styles
        canvas.style.width = (windowWidth / dpi) + 'px';
        canvas.style.height = (windowHeight / dpi) + 'px';
        
        //draw border
        context.beginPath();
        context.moveTo(0,0);
        context.lineTo(0,windowHeight);
        context.lineTo(windowWidth,windowHeight);
        context.lineTo(windowWidth,0);
        context.lineTo(0,0);
        context.strokeStyle="red";
        context.stroke(); 
        
        setTimeout(function(){ 
            navigator.splashscreen.hide();
            
            
            
        }, 5000);
        
    }
}
document.addEventListener("app.Ready", onAppReady, false) ;

intelxdk.config.additions.xml

<preference name="debuggable" value="false" />

<platform name="ios">
    <preference name="AutoHideSplashScreen" value="true" />
    <preference name="FadeSplashScreen" value="false"/>
    <preference name="FadeSplashScreenDuration" value="2"/>
    <preference name="ShowSplashScreenSpinner" value="false"/>
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarBackgroundColor" value="#000000" />
    <preference name="StatusBarStyle" value="lightcontent" />
</platform>

<platform name="android">
   <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="ShowSplashScreenSpinner" value="false"/>
    <preference name="SplashScreenDelay" value="100" />
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarBackgroundColor" value="#000000" />
    <preference name="StatusBarStyle" value="lightcontent" />
</platform>

<intelxdk:crosswalk xwalk-command-line="--disable-pull-to-refresh-effect" />
<intelxdk:crosswalk xwalk-command-line="--ignore-gpu-blacklist" />

 

0 Kudos
Rakshith_K_Intel
Employee
1,692 Views

try: <preference name="StatusBarOverlaysWebView" value="true" />

0 Kudos
Sam_K_1
Beginner
1,692 Views

Rakshith Krishnappa (Intel) wrote:

try: <preference name="StatusBarOverlaysWebView" value="true" />

Doesn't seem to help, I still get 615 as the window height

0 Kudos
Reply