×
Namespaces

Variants
Actions

Splash screen while loading main qml

From Nokia Developer Wiki
Jump to: navigation, search
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
Symbian
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:

  1. We should load and show one component (init) that contains splash screen
  2. Once splash screen is displayed on the screen, we can load main QML
  3. 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.

Related Links

This page was last modified on 13 June 2012, at 13:54.
130 page views in the last 30 days.