Fixed font-scaling. Fixed placement of islands. Some refactoring.

Change-Id: I32e9cd06f017e0b24711a743c35601d68aa7841c
Reviewed-by: Kimmo Ollila <kimmo.ollila@digia.com>

20 files changed, 65 insertions, 122 deletions

diff --git a/QtDemo/qml/QtDemo/Button.qml b/QtDemo/qml/QtDemo/Button.qml
index 1d0216e..bb8a503 100644
--- a/QtDemo/qml/QtDemo/Button.qml
+++ b/QtDemo/qml/QtDemo/Button.qml
@@ -23,6 +23,7 @@ Rectangle {
         id: buttonMouseArea
         anchors.fill: root
         anchors.margins: -20
+        hoverEnabled: true
         onClicked: root.clicked()
         onEntered: buttonImage.anchors.margins = -(root.width * 0.1)
         onExited: buttonImage.anchors.margins = 0
diff --git a/QtDemo/qml/QtDemo/Slide.qml b/QtDemo/qml/QtDemo/Slide.qml
index a21cb74..98d8273 100644
--- a/QtDemo/qml/QtDemo/Slide.qml
+++ b/QtDemo/qml/QtDemo/Slide.qml
@@ -7,6 +7,8 @@ Item {
     y: startY + deltaY
     rotation: deltaRot
 
+    property bool rotAnimationEnabled: false
+    property bool yAnimationEnabled: false
     property int uid: 0
     property string url: ""
     property int device: 0
@@ -15,26 +17,28 @@ Item {
     property bool loading: false
     property real targetScale: 1
     property real targetAngle: 0
-    property real startX: 0
-    property real startY: 0
+    property int startX: 0
+    property int startY: 0
     property bool animationRunning: navigationAnimation.running || zoomAnimation.running
     property int demoWidth: 603
     property int demoHeight: 378
     property int maskVerticalOffset: 51
     property int maskHorizontalOffset: 1
     property string name: ""
-    property double deltaRot: 0
-    property double deltaY: 0
-    property double swing: 5
+    property real deltaRot: 0
+    property int deltaY: 0
+    property int swing: 5
 
     function targetWidth()
     {
-        return device <= 1 ? demoHeight*scale: demoWidth*scale;
+        return demoWidth*scale;
+        //return device <= 1 ? demoHeight*scale: demoWidth*scale;
     }
 
     function targetHeight()
     {
-        return device <= 1 ? demoWidth*scale : demoHeight*scale;
+        return demoHeight*scale;
+        //return device <= 1 ? demoWidth*scale : demoHeight*scale;
     }
 
     Rectangle {
@@ -50,7 +54,7 @@ Item {
             anchors.centerIn: parent
             width: demoWidth
             height: demoHeight
-            color: "#111111"
+            color: "#262626"
             clip: true
 
             Text {
@@ -72,8 +76,8 @@ Item {
         height: demoHeight
         sourceItem: demoContainer
         live: (slide.loading || slide.loaded)
-        visible: true
-        hideSource: true
+        visible: !slide.loaded
+        hideSource: visible
         clip: true
         z: (slide.loading || slide.loaded) ? 1:-1
     }
@@ -101,6 +105,8 @@ Item {
         anchors.topMargin: -height * 0.3
         anchors.horizontalCenter: deviceMaskImage.horizontalCenter
         source: "images/island.svg"
+        smooth: !animationRunning
+        antialiasing: !animationRunning
         width: Math.max(deviceMaskImage.width, deviceMaskImage.height) * 1.6
         height: width/2
         z: -3
@@ -137,14 +143,12 @@ Item {
     Timer {
         id: yStarter
         interval: Math.random()*5000
-        running: true
         onTriggered: yAnimation.start()
     }
     // Starter timer
     Timer {
         id: rotStarter
         interval: Math.random()*2000
-        running: true
         onTriggered: rotationAnimation.start()
     }
 
@@ -180,14 +184,12 @@ Item {
             incubator.onStatusChanged = function(status) {
                 if (status === Component.Ready) {
                     print ("Object", incubator.object, "is now ready!");
-                    //disabledImage.scheduleUpdate()
                     slide.loaded = true
                     releaseSplashScreen()
                 }
             }
         } else {
             print ("Object", incubator.object, "is ready immediately!");
-            //disabledImage.scheduleUpdate()
             slide.loaded = true
             releaseSplashScreen()
         }
@@ -214,8 +216,10 @@ Item {
 
     function releaseDemo(){
 
-        yAnimation.restart()
-        rotationAnimation.restart()
+        if (yAnimationEnabled)
+            yAnimation.restart()
+        if (rotAnimationEnabled)
+            rotationAnimation.restart()
 
         if (slide.name === "Internet Radio") return; //Always alive
 
@@ -242,5 +246,9 @@ Item {
 
     Component.onCompleted: {
         print ("new slide created!")
+        if (yAnimationEnabled)
+            yStarter.start()
+        if (rotAnimationEnabled)
+            rotStarter.start()
     }
 }
diff --git a/QtDemo/qml/QtDemo/demos/description/ContentVideo.qml b/QtDemo/qml/QtDemo/demos/description/ContentVideo.qml
index 792a678..83c9ab7 100644
--- a/QtDemo/qml/QtDemo/demos/description/ContentVideo.qml
+++ b/QtDemo/qml/QtDemo/demos/description/ContentVideo.qml
@@ -61,6 +61,10 @@ VideoOutput {
             else
                 videoOutput.isPlaying = false;
         }
+
+        Component.onDestruction: {
+            mediaPlayer.stop()
+        }
     }
     function play() { mediaPlayer.play() }
     function stop() { mediaPlayer.stop() }
diff --git a/QtDemo/qml/QtDemo/demos/description/VideoDelegate.qml b/QtDemo/qml/QtDemo/demos/description/VideoDelegate.qml
index d904cb7..f9cefc3 100644
--- a/QtDemo/qml/QtDemo/demos/description/VideoDelegate.qml
+++ b/QtDemo/qml/QtDemo/demos/description/VideoDelegate.qml
@@ -65,6 +65,7 @@ Rectangle {
             text: title
             width: parent.width;
             wrapMode: Text.WordWrap;
+            smooth: true
             font { family: videoSelector.uiFont; pointSize: videoSelector.tileFontSize }
         }
     }
diff --git a/QtDemo/qml/QtDemo/demos/description/VideoSelector.qml b/QtDemo/qml/QtDemo/demos/description/VideoSelector.qml
index 5bb4e90..933e160 100644
--- a/QtDemo/qml/QtDemo/demos/description/VideoSelector.qml
+++ b/QtDemo/qml/QtDemo/demos/description/VideoSelector.qml
@@ -45,7 +45,7 @@ Rectangle {
         clip: false
         focus: true
         model: videoModel
-        delegate: VideoDelegate { onVideoSelected: videoSelector.selectVideo("http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4") }
+        delegate: VideoDelegate { onVideoSelected: videoSelector.selectVideo("http://download.qt-project.org/learning/videos/Qt5-Jens-Bache-Wiig-Qt-Quick.mp4"); }
 
         // Only show the scrollbars when the view is moving.
         states: State {
diff --git a/QtDemo/qml/QtDemo/demos/gridrssnews/Qt_logo.png b/QtDemo/qml/QtDemo/demos/gridrssnews/Qt_logo.png
deleted file mode 100644
index 6ad8096..0000000
--- a/QtDemo/qml/QtDemo/demos/gridrssnews/Qt_logo.png
+++ /dev/null
diff --git a/QtDemo/qml/QtDemo/demos/gridrssnews/RssDelegate.qml b/QtDemo/qml/QtDemo/demos/gridrssnews/RssDelegate.qml
index 41d2c37..037c502 100644
--- a/QtDemo/qml/QtDemo/demos/gridrssnews/RssDelegate.qml
+++ b/QtDemo/qml/QtDemo/demos/gridrssnews/RssDelegate.qml
@@ -63,7 +63,8 @@ Rectangle {
             text: title

             width: parent.width;

             wrapMode: Text.WordWrap;

-            font { family: mainWindow.uiFont; pointSize: mainWindow.tileDateFontSize }

+            smooth: true

+            font { family: mainWindow.uiFont; pointSize: mainWindow.tileFontSize }

         }

     }

 }

diff --git a/QtDemo/qml/QtDemo/demos/gridrssnews/SplashScreen.qml b/QtDemo/qml/QtDemo/demos/gridrssnews/SplashScreen.qml
deleted file mode 100644
index 694fd74..0000000
--- a/QtDemo/qml/QtDemo/demos/gridrssnews/SplashScreen.qml
+++ /dev/null
@@ -1,44 +0,0 @@
-import QtQuick 2.0

-

-Rectangle {

-    width: parent.width

-    height: parent.height

-    color: mainWindow.appBackground

-

-    Item {

-        id: it

-        width: logo.width + 24 + text.paintedWidth

-        anchors.centerIn: parent

-

-        Image {

-            id: logo

-            anchors.verticalCenter: it.verticalCenter

-            anchors.left: it.left

-            source: "Qt_logo.png"

-        }

-        Text {

-            id: text

-            anchors.left: logo.right

-            anchors.leftMargin: 24

-            anchors.verticalCenter: it.verticalCenter

-            text: qsTr("Blog")

-            font.family: mainWindow.uiFont;

-            font.pointSize: mainWindow.appHeaderFontSize;

-            color: mainWindow.textColor

-        }

-    }

-

-    Component.onCompleted: splashScreen.state = "show"

-

-    states:

-        State {

-            name: "hide"

-            PropertyChanges { target: splashScreen; x: parent.width; y: 0 }

-        }

-

-

-    transitions:

-        Transition {

-            PropertyAnimation { properties: "x,y"; duration: 200; easing.type: Easing.OutCirc; }

-        }

-}

diff --git a/QtDemo/qml/QtDemo/demos/gridrssnews/main.qml b/QtDemo/qml/QtDemo/demos/gridrssnews/main.qml
index f0284b0..7d928d0 100644
--- a/QtDemo/qml/QtDemo/demos/gridrssnews/main.qml
+++ b/QtDemo/qml/QtDemo/demos/gridrssnews/main.qml
@@ -6,22 +6,18 @@ Rectangle {
     anchors.fill: parent

     color: appBackground

 

+    property int tileHeight: parseInt(grid.height / 3)

+    property int tileFontSize: tileHeight * 0.05

     property int horizontalMargin: height * 0.08

     property int topBarsize: height * 0.2

     property int bottomBarSize: height * 0.08

     property int tileMargin: height * 0.01

-    property int tileHeaderFontSize: height * 0.012

-    property int tileDateFontSize: height * 0.012

-    property int appHeaderFontSize: height * 0.05

-    property string appBackground: "#262626"

+    property int appHeaderFontSize: topBarsize * 0.4

+    property string appBackground: "transparent"

     property string tileBackground: "#86bc24"

     property string textColor: "white"

     property string uiFont: "Segoe UI"

 

-    SplashScreen {

-        id: splashScreen

-    }

-

     XmlListModel {

         id: feedModel

         //source: "http://blog.qt.digia.com/feed/"

@@ -37,7 +33,6 @@ Rectangle {
 

         onStatusChanged: {

             if (status == XmlListModel.Ready) {

-                splashScreen.state = "hide";

                 playbanner.start();

             }

         }

@@ -59,8 +54,9 @@ Rectangle {
             anchors.left: parent.left

             text: qsTr("Yahoo Technology")

             font.family: uiFont;

-            font.pointSize: appHeaderFontSize;

+            font.pixelSize: appHeaderFontSize;

             color: textColor

+            smooth: true

         }

     }

 

@@ -74,8 +70,8 @@ Rectangle {
         anchors.rightMargin: horizontalMargin

         opacity: 0

         flow: GridView.TopToBottom

-        cellHeight: parseInt(grid.height / 3)

-        cellWidth: parseInt(cellHeight * 1.5)

+        cellHeight: tileHeight

+        cellWidth: parseInt(tileHeight * 1.5)

         cacheBuffer: cellWidth

         clip: false

         focus: true

diff --git a/QtDemo/qml/QtDemo/demos/heartmonitor/main.qml b/QtDemo/qml/QtDemo/demos/heartmonitor/main.qml
index 8365610..af1e7e3 100644
--- a/QtDemo/qml/QtDemo/demos/heartmonitor/main.qml
+++ b/QtDemo/qml/QtDemo/demos/heartmonitor/main.qml
@@ -134,19 +134,6 @@ Rectangle {
     }

 

     Rectangle {

-        id: scanner

-        width: canvasBackground.height * 0.7

-        height: canvasBackground.width * 0.2

-        anchors.verticalCenter: canvasBackground.verticalCenter

-        gradient: Gradient {

-            GradientStop {position: .0; color :"transparent"}

-            GradientStop {position: 1.0; color :"#00ff00"}

-        }

-        opacity: 0.5

-        rotation: 90

-    }

-

-    Rectangle {

         id: canvasContainer

         anchors.fill: canvasBackground

         color: "transparent"

@@ -223,7 +210,7 @@ Rectangle {
     // Update timer

     Timer {

         id: updateTimer

-        interval: 50

+        interval: 30

         running: true

         repeat: true

         onTriggered: updateData()

@@ -235,13 +222,6 @@ Rectangle {
         NumberAnimation { target: heart; property: "scale"; duration: 100; from: 1.2; to:1.0; easing.type: Easing.Linear }

     }

 

-    SequentialAnimation{

-        id: scannerAnimation

-        running: true

-        loops: Animation.Infinite

-        NumberAnimation { target: scanner; property: "x"; duration: 2000; from: app.width*1.2; to:-0.2*app.width; easing.type: Easing.Linear }

-    }

-

     Component.onCompleted: {

         Data.fillHeartData(Math.max(100,Math.floor(app.width*0.5)))

     }

diff --git a/QtDemo/qml/QtDemo/engine.js b/QtDemo/qml/QtDemo/engine.js
index 5948d01..1934d98 100644
--- a/QtDemo/qml/QtDemo/engine.js
+++ b/QtDemo/qml/QtDemo/engine.js
@@ -1,36 +1,35 @@
 var positions = [
-            {x:-100, y:-1050, url: "demos/calqlatr/Calqlatr.qml", device: 0, name: "Calqlatr"},
-            {x:700, y:-1400, url: "demos/samegame/samegame.qml", device: 1, name: "SameGame"},
+            {x:-500, y:-1180, url: "demos/rssnews/rssnews.qml", device: 3, name: "Rss Reader"},
+            {x:-1550, y:-1040, url: "demos/gridrssnews/main.qml", device: 5, name: "Rss Reader"},
+            {x:-1050, y:-800, url: "demos/tweetsearch/tweetsearch.qml", device: 2, name: "TweetSearch"},
 
-            {x:-1300, y:-1180, url: "demos/rssnews/rssnews.qml", device: 3, name: "Rss Reader"},
-            {x:-2350, y:-1040, url: "demos/gridrssnews/main.qml", device: 5, name: "Rss Reader"},
-            {x:-1850, y:-800, url: "demos/tweetsearch/tweetsearch.qml", device: 2, name: "TweetSearch"},
-
-            {x:1100, y:-700, url: "demos/canvasclock/canvasClock.qml", device: 4, name: "Canvas clock"},
-            {x:1900, y:-500, url: "demos/heartmonitor/main.qml", device: 4, name: "Heart monitor"},
+            {x:1500, y:-1100, url: "demos/heartmonitor/main.qml", device: 4, name: "Heart Monitor"},
+            {x:800, y:-1000, url: "demos/canvasclock/canvasClock.qml", device: 4, name: "Canvas Clock"},
 
             {x:0, y:0, url: "demos/description/main.qml", device: 7, name: "Qt Description"},
 
-            {x:-1500, y:-100, url: "demos/radio/radio.qml", device: 4, name: "Internet Radio"},
-            {x:-2400, y:100, url: "demos/slidepuzzle/slidepuzzle.qml", device: 5, name: "Slide puzzle"},
+            {x:1300, y:-200, url: "demos/photosurface/photosurface.qml", device: 7, name: "Photo Surface"},
+            {x:2000, y:600, url: "demos/particledemo/particledemo.qml", device: 6, name: "Particle Paint"},
+            {x:900, y:1000, url: "demos/shaders/main.qml", device: 7, name: "Shaders"},
 
-            {x:2000, y:700, url: "demos/particledemo/particledemo.qml", device: 6, name: "Multitouch"},
-            {x:1000, y:1100, url: "demos/photosurface/photosurface.qml", device: 7, name: "Photo surface"},
+            {x:-1300, y:0, url: "demos/slidepuzzle/slidepuzzle.qml", device: 5, name: "Slide Puzzle"},
+            {x:-1900, y:200, url: "demos/radio/radio.qml", device: 4, name: "Internet Radio"},
 
-            {x:-1100, y:1150, url: "demos/shaders/main.qml", device: 7, name: "Shaders"}
+            {x:-800, y:900, url: "demos/samegame/samegame.qml", device: 1, name: "SameGame"},
+            {x:-1500, y:1100, url: "demos/calqlatr/Calqlatr.qml", device: 0, name: "Calqlatr"}
         ]
 
-var imageSources = ["phone1.svg","phone2.svg", "phone3.svg","tablet1.svg", "medical_device.svg", "laptop1.svg", "laptop2.svg", "tv.svg"]
-var widths = [358, 361, 366, 758, 600, 888, 888, 708]
-var heights = [723, 707, 721, 565, 489, 513, 513, 565]
-var scales = [0.6, 0.6, 0.6, 1.0, 1.2, 1.0, 1.2, 1.5]
-var demoWidths = [322, 322, 322, 642, 482, 642, 642, 642]
-var demoHeights = [482, 482, 482, 402, 322, 402, 402, 402]
+var imageSources = ["phone1.png","phone2.png", "phone3.png","tablet1.png", "medical_device.png", "laptop1.png", "laptop2.png", "tv.png"]
+var widths = [358, 360, 366, 758, 600, 888, 888, 800]
+var heights = [722, 706, 720, 564, 488, 512, 512, 638]
+var scales = [0.8, 0.8, 0.6, 0.9, 1.0, 0.9, 0.9, 1.0]
+var demoWidths = [322, 322, 322, 642, 482, 642, 642, 726]
+var demoHeights = [482, 482, 482, 402, 322, 402, 402, 456]
 var maskHorizontalOffsets = [1, 1, 1, 1, 1, 1, 1, 1]
-var maskVerticalOffsets = [26, 32, 15, 24, 45, 33, 33, 49]
-var targetAngles = [-90, -90, 0, 0, 0, 0, 0, 0]
+var maskVerticalOffsets = [26, 32, 15, 24, 45, 33, 33, 56]
+var targetAngles = [0, 0, 0, 0, 0, 0, 0, 0]
 
-var navigationList = [7,3,4,2,0,1,5,6,10,11,12,9,8,13]
+var navigationList = [5,1,2,0,4,3,6,7,8,11,12,10,9]
 var currentDemoIndex = -1
 var objects = []
 
diff --git a/QtDemo/qml/QtDemo/images/laptop1.png b/QtDemo/qml/QtDemo/images/laptop1.png
new file mode 100644
index 0000000..8ce9b13
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/laptop1.png
diff --git a/QtDemo/qml/QtDemo/images/laptop2.png b/QtDemo/qml/QtDemo/images/laptop2.png
new file mode 100644
index 0000000..ebe2221
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/laptop2.png
diff --git a/QtDemo/qml/QtDemo/images/medical_device.png b/QtDemo/qml/QtDemo/images/medical_device.png
new file mode 100644
index 0000000..41b6965
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/medical_device.png
diff --git a/QtDemo/qml/QtDemo/images/phone1.png b/QtDemo/qml/QtDemo/images/phone1.png
new file mode 100644
index 0000000..187ba5c
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/phone1.png
diff --git a/QtDemo/qml/QtDemo/images/phone2.png b/QtDemo/qml/QtDemo/images/phone2.png
new file mode 100644
index 0000000..310d7b0
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/phone2.png
diff --git a/QtDemo/qml/QtDemo/images/phone3.png b/QtDemo/qml/QtDemo/images/phone3.png
new file mode 100644
index 0000000..db5bfb6
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/phone3.png
diff --git a/QtDemo/qml/QtDemo/images/tablet1.png b/QtDemo/qml/QtDemo/images/tablet1.png
new file mode 100644
index 0000000..2e4406b
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/tablet1.png
diff --git a/QtDemo/qml/QtDemo/images/tv.png b/QtDemo/qml/QtDemo/images/tv.png
new file mode 100644
index 0000000..2c100b1
--- /dev/null
+++ b/QtDemo/qml/QtDemo/images/tv.png
diff --git a/QtDemo/qml/QtDemo/main.qml b/QtDemo/qml/QtDemo/main.qml
index 7c231e9..6e8aff0 100644
--- a/QtDemo/qml/QtDemo/main.qml
+++ b/QtDemo/qml/QtDemo/main.qml
@@ -18,16 +18,13 @@ Rectangle{
 
     function calculateScales(){
         if (app.width > 0 && app.height > 0){
-            var appWidth = app.width*0.9;
-            var appHeight = app.height*0.9;
-
             var bbox = Engine.boundingBox();
-            app.homeScaleFactor = Engine.scaleToBox(appWidth, appHeight, bbox.width, bbox.height);
+            app.homeScaleFactor = Engine.scaleToBox(app.width*0.8, app.height*0.8, bbox.width, bbox.height);
             app.homeCenterX = bbox.centerX;
             app.homeCenterY = bbox.centerY;
             app.minScaleFactor = app.homeScaleFactor / 10;
             app.maxScaleFactor = app.homeScaleFactor * 20;
-            Engine.updateObjectScales(app.width*0.9, app.height*0.9); //app.width, app.height);
+            Engine.updateObjectScales(app.width*0.9, app.height*0.9);
             tapLimitX = Math.max(1,app.width * 0.02);
             tapLimitY = Math.max(1,app.height * 0.02);