Splash screen while loading main qml
Article Metadata
Tested with
SDK: Nokia Qt SDK 1.2
Devices(s): all devices based on Symbian Anna, Nokia Belle
Compatibility
Platform(s): Symbian Anna, Nokia Belle
Device(s): All
Dependencies: Symbian Qt Quick Components 1.1
Platform Security
Capabilities: None
Article
Keywords: Qml, splash screen deffered loading
Created: Den123
(16 Mar 2012)
Last edited: hamishwillee
(13 Jun 2012)
To mask lengthy main qml loading process, it might be a good idea to display a splash screen. The following steps demonstrates, how to achieve this aim:
- We should load and show one component (init) that contains splash screen
- Once splash screen is displayed on the screen, we can load main QML
- When the main QML is loaded, we can hide splash screen
Project should contain one more qml-file (init.qml). This file contains splash screen and performs main QML deferred loading.
Source code
init.qml
import QtQuick 1.1
import com.nokia.symbian 1.1
Item {
id: init
SplashScreen {
id: splash
show: true // show splash
minTimeout: 3000 // show splash at least for 3 sec
image: "gfx/splash.png" // path to splash image
canFinish: false // change to true when main QML will be loaded
z: 100 // highest page.
}
Loader { // this component performs deferred loading.
id: mainLoader
onStatusChanged: {
if( mainLoader.status == Loader.Ready )
{
// main page is loaded
// time to hide splash
splash.canFinish = true
}
}
}
Component.onCompleted: {
// splash is already rendered on the screen
// user is looking on splash
// now we can start loader to load main page
mainLoader.source = "main.qml"
}
}
The SplashScreen component can be implemented as follows:
SplashScreen.qml
import QtQuick 1.1
import com.nokia.symbian 1.1
Rectangle {
id: splash
anchors.fill: parent
color: "black"
property int minTimeout: 3000 // 3s by default.
property string image; // path to splash image
property bool show: false // if show is true then image opacity is 1.0, else 0.0
property bool canFinish: false // if true then we can hide spash after timeout
state: show ? "showingSplash" : ""
onStateChanged: {
if( state == "showingSplash" )
splashTimer.start();
}
opacity: 0.0
Image {
source: image
fillMode: Image.PreserveAspectFit
anchors.fill: parent
smooth: true
}
Timer {
id: splashTimer
interval: minTimeout
running: false
repeat: true
onTriggered: {
if( splash.canFinish )
{
// finally we can stop timer and hide splash
splash.show = false
splashTimer.repeat = false
}
else
{
// canFinish is false, but main.qml is not loaded yet
// we should run timer again and again
splashTimer.interval = 1000 // 1 sec
splashTimer.repeat = true
}
}
}
states: [
State {
name: "showingSplash"
PropertyChanges { target: splash; opacity: 1.0 }
}
]
// hide splash using animation
transitions: [
Transition {
from: ""; to: "showingSplash"
reversible: true
PropertyAnimation { property: "opacity"; duration: 500; }
}
]
}
Do not forget to correct main cpp-file. QmlApplicationViewer should start init.qml, not main.qml.
Hamishwillee - Thanks
I have a few concerns with this.
- The Splash screen is a static component, so it can't be deleted. Might not matter much in this case, but if you did have images etc then it might. Having the splash screen loaded as well as deleted is a better design.
- There is no way to cancel the splash screen
- The main file is loaded when the splash screen completes. I think this is when all the components have been loaded, not necessarily when animations complete. This means that the main component could potentially be loaded during animations, which would possibly cause them to stutter.
Implementing a Splash Screen with Qt Quick also covers this material - I think this is quite complementary. Thanks!hamishwillee 07:45, 19 March 2012 (EET)