Tweak aesthetics of QML viewer inside QtDemo

Make the UX more controlled from QML, and tweak the frame to be better.
Blur mechanism has been reworked, but still disabled by default.

8 files changed, 118 insertions, 175 deletions

diff --git a/demos/qtdemo/MagicAnim.qml b/demos/qtdemo/MagicAnim.qml
deleted file mode 100644
index 7ac3e1c..0000000
--- a/demos/qtdemo/MagicAnim.qml
+++ /dev/null
@@ -1,60 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
-** All rights reserved.
-** Contact: Nokia Corporation (qt-info@nokia.com)
-**
-** This file is part of the demonstration applications of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:LGPL$
-** No Commercial Usage
-** This file contains pre-release code and may not be distributed.
-** You may use this file in accordance with the terms and conditions
-** contained in the Technology Preview License Agreement accompanying
-** this package.
-**
-** GNU Lesser General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU Lesser
-** General Public License version 2.1 as published by the Free Software
-** Foundation and appearing in the file LICENSE.LGPL included in the
-** packaging of this file.  Please review the following information to
-** ensure the GNU Lesser General Public License version 2.1 requirements
-** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
-**
-** In addition, as a special exception, Nokia gives you certain additional
-** rights.  These rights are described in the Nokia Qt LGPL Exception
-** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
-**
-** If you have questions regarding the use of this file, please contact
-** Nokia at qt-info@nokia.com.
-**
-**
-**
-**
-**
-**
-**
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import Qt 4.7
-
-//Emulates the in animation of the menu elements
-SequentialAnimation{
-    id: main;
-    property Item target
-    property int from: 0
-    property int to: 100
-    property int duration: 1000
-    property string properties: "y"
-    PauseAnimation { duration: main.duration*0.20 }
-    NumberAnimation { target: main.target; properties: main.properties; from: main.from; to: main.to + 40; duration: main.duration*0.30 }
-    NumberAnimation { target: main.target; properties: main.properties; from: main.to + 40; to: main.to; duration: main.duration*0.10 }
-    NumberAnimation { target: main.target; properties: main.properties; from: main.to; to: main.to + 20; duration: main.duration*0.10 }
-    NumberAnimation { target: main.target; properties: main.properties; from: main.to + 20; to: main.to; duration: main.duration*0.10 }
-    NumberAnimation { target: main.target; properties: main.properties; from: main.to; to: main.to + 8; duration: main.duration*0.10 }
-    NumberAnimation { target: main.target; properties: main.properties; from: main.to + 8; to: main.to; duration: main.duration*0.10 }
-}
-
diff --git a/demos/qtdemo/colors.cpp b/demos/qtdemo/colors.cpp
index 07cf162..b352e3d 100644
--- a/demos/qtdemo/colors.cpp
+++ b/demos/qtdemo/colors.cpp
@@ -270,7 +270,7 @@ void Colors::parseArgs(int argc, char *argv[])
         else if (s.startsWith("-h") || s.startsWith("-help")){
             QMessageBox::warning(0, "Arguments",
                                  QString("Usage: qtdemo [-verbose] [-no-adapt] [-opengl] [-software] [-fullscreen] [-ticker[0|1]] ")
-                                 + "[-animations[0|1]] [-no-blending] [-no-sync] [-use-timer-update[0|1]] [-pause[0|1]]  "
+                                 + "[-animations[0|1]] [-no-blending] [-use-blur] [-no-sync] [-use-timer-update[0|1]] [-pause[0|1]]  "
                                  + "[-use-window-mask] [-no-rescale] "
                                  + "[-use-pixmaps] [-show-fps] [-show-br] [-8bit[0|1]] [-menu<int>] [-use-loop] [-use-balls] "
                                  + "[-animation-speed<float>] [-fps<int>] "
diff --git a/demos/qtdemo/mainwindow.cpp b/demos/qtdemo/mainwindow.cpp
index 45ec9a6..753014a 100644
--- a/demos/qtdemo/mainwindow.cpp
+++ b/demos/qtdemo/mainwindow.cpp
@@ -266,7 +266,7 @@ void MainWindow::setupSceneItems()
 {
     if (Colors::showFps){
         this->fpsLabel = new DemoTextItem(QString("FPS: --"), Colors::buttonFont(), Qt::white, -1, this->scene, 0, DemoTextItem::DYNAMIC_TEXT);
-        this->fpsLabel->setZValue(100);
+        this->fpsLabel->setZValue(1000);
         this->fpsLabel->setPos(Colors::stageStartX, 600 - QFontMetricsF(Colors::buttonFont()).height() - 5);
     }
 
@@ -311,15 +311,9 @@ void MainWindow::checkAdapt()
         }
 
         //Note: Because we don't adapt later in the program, if blur makes FPS plummet then we won't catch it
-        if (!Colors::noBlur && MenuManager::instance()->mainSceneBlur && this->mainSceneRoot){
+        if (!Colors::noBlur && MenuManager::instance()->declarativeEngine && this->mainSceneRoot){
             Colors::noBlur = true;
-            this->mainSceneRoot->setGraphicsEffect(0);
-            MenuManager::instance()->mainSceneBlur = 0;
-            if(MenuManager::instance()->qmlRoot){
-                MenuManager::instance()->qmlRoot->setGraphicsEffect(0);
-                MenuManager::instance()->declarativeEngine->rootContext()->setContextProperty("realBlur", 0);
-            }
-            MenuManager::instance()->qmlShadow = 0;
+            MenuManager::instance()->declarativeEngine->rootContext()->setContextProperty("useBlur", false);
             if (Colors::verbose)
                qDebug() << "- benchmark adaption: removed blur (fps < 30)";
         }
diff --git a/demos/qtdemo/menumanager.cpp b/demos/qtdemo/menumanager.cpp
index 9eb5664..9e2ba6b 100644
--- a/demos/qtdemo/menumanager.cpp
+++ b/demos/qtdemo/menumanager.cpp
@@ -59,8 +59,6 @@ MenuManager::MenuManager()
     this->tickerInAnim = 0;
     this->upButton = 0;
     this->downButton = 0;
-    this->mainSceneBlur = 0;
-    this->qmlShadow = 0;
     this->helpEngine = 0;
     this->score = new Score();
     this->currentMenu = QLatin1String("[no menu visible]");
@@ -381,8 +379,14 @@ void MenuManager::launchQmlExample(const QString &name)
         }
     }
 
+    QPainter painter(qmlBgImage);
+    this->window->fpsLabel->setOpacity(0);
+    this->window->render(&painter);
+    this->window->fpsLabel->setOpacity(1.0);
+    Qt::ImageConversionFlags convFlags = Qt::AvoidDither | Qt::NoOpaqueDetection;
+    this->declarativeEngine->rootContext()->setContextProperty("bgAppPixmap", QVariant(QPixmap::fromImage(*qmlBgImage, convFlags)));
     qmlRoot->setProperty("show", QVariant(true));
-    qmlRoot->setProperty("source", file.fileName());
+    qmlRoot->setProperty("qmlFile", QUrl::fromLocalFile(file.fileName()));
 }
 
 void MenuManager::exampleFinished()
@@ -401,15 +405,6 @@ void MenuManager::init(MainWindow *window)
 {
     this->window = window;
 
-    //Create blur for later use
-    // Note that blur is DISABLED by default because it's too slow, even on Desktop machines
-    if(!Colors::noBlur){
-        this->mainSceneBlur = new QGraphicsBlurEffect(this);
-        this->mainSceneBlur->setEnabled(false);
-        this->mainSceneBlur->setBlurRadius(0);
-        this->window->mainSceneRoot->setGraphicsEffect(mainSceneBlur);
-    }
-
     // Create div:
     this->createTicker();
     this->createUpnDownButtons();
@@ -439,8 +434,15 @@ void MenuManager::init(MainWindow *window)
 
     // Create QML Loader
     qmlRegisterType<QGraphicsBlurEffect>("Effects", 1, 0, "Blur");
+    qmlRegisterType<QGraphicsDropShadowEffect>("Effects", 1, 0, "DropShadow");
     declarativeEngine = new QDeclarativeEngine(this);
-    MenuManager::instance()->declarativeEngine->rootContext()->setContextProperty("realBlur", this->mainSceneBlur);
+
+    // Note that we paint the background into a static image for a theorized performance improvement when blurring
+    // It has not yet been determined what, if any, speed up this gives (but is left in 'cause the QML expects it now)
+    this->qmlBgImage = new QImage(window->sceneRect().size().toSize(), QImage::Format_ARGB32);
+    this->qmlBgImage->fill(0);
+    declarativeEngine->rootContext()->setContextProperty("useBlur", !Colors::noBlur);
+    declarativeEngine->rootContext()->setContextProperty("bgAppPixmap", QVariant(QPixmap::fromImage(*qmlBgImage)));
     QDeclarativeComponent component(declarativeEngine, QUrl("qrc:qml/qmlShell.qml"), this);
     qmlRoot = 0;
     if(component.isReady())
@@ -450,14 +452,9 @@ void MenuManager::init(MainWindow *window)
     if(qmlRoot){
         qmlRoot->setHeight(this->window->scene->sceneRect().height());
         qmlRoot->setWidth(this->window->scene->sceneRect().width());
-        qmlRoot->setZValue(1000);//Above other items
+        qmlRoot->setZValue(101);//Above other items
         qmlRoot->setCursor(Qt::ArrowCursor);
         window->scene->addItem(qmlRoot);
-        if(!Colors::noBlur){
-            qmlShadow = new QGraphicsDropShadowEffect(this);
-            qmlShadow->setOffset(4);
-            qmlRoot->setGraphicsEffect(qmlShadow);
-        }
 
         //Note that QML adds key handling to the app.
         window->viewport()->setFocusPolicy(Qt::NoFocus);//Correct keyboard focus handling
diff --git a/demos/qtdemo/menumanager.h b/demos/qtdemo/menumanager.h
index 3524081..e90e02c 100644
--- a/demos/qtdemo/menumanager.h
+++ b/demos/qtdemo/menumanager.h
@@ -85,8 +85,7 @@ public:
 
     QDeclarativeEngine* declarativeEngine;
     QDeclarativeItem *qmlRoot;
-    QGraphicsBlurEffect *mainSceneBlur;
-    QGraphicsDropShadowEffect *qmlShadow;
+    QImage *qmlBgImage;
 
 private slots:
     void exampleFinished();
diff --git a/demos/qtdemo/qmlShell.qml b/demos/qtdemo/qmlShell.qml
index eb155c4..b9021e8 100644
--- a/demos/qtdemo/qmlShell.qml
+++ b/demos/qtdemo/qmlShell.qml
@@ -42,117 +42,132 @@
 import Qt 4.7
 import Effects 1.0
 
+/* Vars exposed from C++
+   pixmap bgAppPixmap
+   bool useBlur (to turn on, pass -use-blur on the cmd line. Off by default 'cause it's too slow)
+*/
 Item {
     id: main
-    property alias source: loader.source
+    //height and width set by program to fill window
+    //below properties are sometimes set from C++
+    property url qmlFile: ''
     property bool show: false
-    x: 0
-    y: -500 //height and width set by program
-    opacity: 0
-    property QtObject blurEffect: realBlur == null ? dummyBlur : realBlur //Is there a better way to lose those error messages?
-    Loader{//Automatic FocusScope
-        focus: true
-        clip: true
-        id: loader //source set by program
-        anchors.centerIn: parent
-        onStatusChanged: if(status == Loader.Ready) {
+    Image{
+        id: bg
+        opacity: 0
+        anchors.fill: parent
+        z: -1
+        pixmap: bgAppPixmap
+        effect: Blur { id: blurEffect; enabled: useBlur; blurRadius: 8;}
+    }
+
+    Item{ id:embeddedViewer
+        width: parent.width
+        height: parent.height
+        opacity: 0;
+        z: 10
+        Loader{
+            id: loader
+            z: 10
+            focus: true //Automatic FocusScope
+            clip: true
+            source: qmlFile
+            anchors.centerIn: parent
+            onStatusChanged: if(status == Loader.Ready) {
                 if(loader.item.width > 640)
                     loader.item.width = 640;
                 if(loader.item.height > 480)
                     loader.item.height = 480;
-       }
+            }
 
-    }
-    Rectangle{
-        z: -1
-        anchors.fill: loader.status == Loader.Ready ? loader : errorTxt
-        anchors.margins: -10
-        radius: 12
-        smooth: true
-        gradient: Gradient{
-            GradientStop{ position: 0.0; color: "#14FFFFFF" }
-            GradientStop{ position: 1.0; color: "#5AFFFFFF" }
         }
-        MouseArea{
-            anchors.fill: parent
-            onClicked: loader.focus=true;/* and don't propogate to the 'exit' area*/
+        Rectangle{ id: frame
+            z: 9
+            anchors.fill: loader.status == Loader.Ready ? loader : errorTxt
+            anchors.margins: -8
+            radius: 4
+            smooth: true
+            border.color: "#88aaaaaa"
+            gradient: Gradient{
+                GradientStop{ position: 0.0; color: "#14FFFFFF" }
+                GradientStop{ position: 1.0; color: "#5AFFFFFF" }
+            }
+            MouseArea{
+                anchors.fill: parent
+                onClicked: loader.focus=true;/* and don't propogate to the 'exit' area*/
+            }
+
+            Rectangle{ id: innerFrame
+                anchors.margins: 7
+                anchors.bottomMargin: 8
+                anchors.rightMargin: 8
+                color: "black"
+                border.color: "#44000000"
+                anchors.fill:parent
+            }
+
+            effect: DropShadow  {
+                enabled: useBlur;
+                blurRadius: 9;
+                color: "#88000000";
+                xOffset:0
+                yOffset:0
+            }
         }
 
+        Text{
+            id: errorTxt
+            z: 10
+            anchors.centerIn: parent
+            color: 'white'
+            smooth: true
+            visible: loader.status == Loader.Error
+            textFormat: Text.RichText
+            //Note that if loader is Error, it is because the file was found but there was an error creating the component
+            //This means either we have a bug in our demos, or the required modules (which ship with Qt) did not deploy correctly
+            text: "The example has failed to load.<br />If you installed Qt's QML modules this is a bug!<br />"
+                + 'Report it at <a href="http://bugreports.qt.nokia.com">http://bugreports.qt.nokia.com</a>';
+            onLinkActivated: Qt.openUrlExternally(link);
+        }
+    }
+    Rectangle{ id: blackout //Maybe use a colorize effect instead?
+        z: 8
+        anchors.fill: parent
+        color: "#000000"
+        opacity: 0
     }
-
     MouseArea{
-        z: -2
-        hoverEnabled: true //To steal from the buttons
+        z: 8
+        enabled: main.show
+        hoverEnabled: true //To steal focus from the buttons
         anchors.fill: parent
         onClicked: main.show=false;
     }
 
-    Text{
-        id: errorTxt
-        anchors.centerIn: parent
-        color: 'white'
-        smooth: true
-        visible: loader.status == Loader.Error
-        textFormat: Text.RichText //includes link for bugreport
-        //Note that if loader is Error, it is because the file was found but there was an error creating the component
-        //This means either we have a bug in our demos, or the required modules (which ship with Qt) did not deploy correctly
-        text: 'The example has failed to load. This is a bug!<br />'
-            +'Report it at <a href="http://bugreports.qt.nokia.com">http://bugreports.qt.nokia.com</a>';
-        onLinkActivated: Qt.openUrlExternally(link);
-    }
-
-
     states: [
         State {
             name: "show"
             when: show == true
             PropertyChanges {
-                target: main
+                target: embeddedViewer
+                opacity: 1
+            }
+            PropertyChanges {
+                target: bg
                 opacity: 1
-                y: 0                
             }
             PropertyChanges {
-                target: blurEffect
-                enabled: true
-                blurRadius: 8
-                blurHints: Blur.AnimationHint | Blur.PerformanceHint
+                target: blackout
+                opacity: 0.5
             }
         }
     ]
-    MagicAnim{ id: magicAnim; target: main; from: -500; to: 0 }
-    transitions: [
-        Transition { from: ""; to: "show"
-            SequentialAnimation{
-                ScriptAction{ script: magicAnim.start() }
-                NumberAnimation{ properties: "opacity,blurRadius";  easing.type: Easing.OutCubic; duration: 1000}
-                PropertyAnimation{ target: main; property: "y"}
-            }
-
-        },
-        Transition { from: "show"; to: "" //Addtionally, unload the item
+    transitions: [//Should not be too long, because the component has already started running
+        Transition { from: ''; to: "show"; reversible: true
             SequentialAnimation{
-                NumberAnimation{ properties: "y,opacity,blurRadius";duration: 500 }
-                ScriptAction{ script: loader.source = ''; }
+                PropertyAction { target: bg; property: useBlur?"y":"opacity";}//fade in blurred background only if blurred
+                NumberAnimation{ properties: "opacity"; easing.type: Easing.InQuad; duration: 500}
             }
-            /*Attempt to copy the exeunt animation. Looks bad
-            SequentialAnimation{
-                ParallelAnimation{
-                    NumberAnimation{ properties: "opacity,blurRadius"; easing.type: Easing.InCubic; duration: 1000 }
-                    SequentialAnimation{
-                        NumberAnimation{ target: main; property: 'y'; to: 3.2*height/5; duration: 500}
-                        ParallelAnimation{
-                            NumberAnimation{ target: main; property: 'y'; to: 3.0*height/5; duration: 100}
-                            NumberAnimation{ target: main; property: 'x'; to: 3.0*width/5; duration: 100}
-                        }
-                        NumberAnimation{ target: main; property: 'x'; to: 700; duration: 400}
-                    }
-                }
-                ScriptAction{ script: loader.source = ''; }
-                PropertyAction{ properties: "x,y";}
-            }
-            */
         }
     ]
-    Item{ Blur{id: dummyBlur } }
-
 }
diff --git a/demos/qtdemo/qtdemo.pro b/demos/qtdemo/qtdemo.pro
index 5e64e1c..4d4177e 100644
--- a/demos/qtdemo/qtdemo.pro
+++ b/demos/qtdemo/qtdemo.pro
@@ -75,5 +75,4 @@ sources.files = $$SOURCES $$HEADERS $$FORMS $$RESOURCES qtdemo.pro images xml *.
 sources.path = $$[QT_INSTALL_DEMOS]/qtdemo
 
 OTHER_FILES += \
-    qmlShell.qml \
-    MagicAnim.qml
+    qmlShell.qml
diff --git a/demos/qtdemo/qtdemo.qrc b/demos/qtdemo/qtdemo.qrc
index 7682ab5..c18420f 100644
--- a/demos/qtdemo/qtdemo.qrc
+++ b/demos/qtdemo/qtdemo.qrc
@@ -7,6 +7,5 @@
     </qresource>
     <qresource prefix="/qml" lang="qml">
         <file>qmlShell.qml</file>
-        <file>MagicAnim.qml</file>
     </qresource>
 </RCC>