Added grids to hearmonitor. Removed controlbar from shaders.

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

13 files changed, 137 insertions, 155 deletions

diff --git a/QtDemo/qml/QtDemo/demos/heartmonitor/HeartData.js b/QtDemo/qml/QtDemo/demos/heartmonitor/HeartData.js
index 3e34c97..494c2eb 100644
--- a/QtDemo/qml/QtDemo/demos/heartmonitor/HeartData.js
+++ b/QtDemo/qml/QtDemo/demos/heartmonitor/HeartData.js
@@ -3,7 +3,8 @@ var heartData = [0,0,0,0,0]
 function fillHeartData(length) {

     if (length !== heartData.length) {

         heartData = new Array(length);

-        for (var i=0; i<length; i++)

+        for (var i=0; i<length; i++) {

             heartData[i] = 0;

+        }

     }

 }

diff --git a/QtDemo/qml/QtDemo/demos/heartmonitor/heart.png b/QtDemo/qml/QtDemo/demos/heartmonitor/heart.png
deleted file mode 100644
index ca04353..0000000
--- a/QtDemo/qml/QtDemo/demos/heartmonitor/heart.png
+++ /dev/null
diff --git a/QtDemo/qml/QtDemo/demos/heartmonitor/heart.svg b/QtDemo/qml/QtDemo/demos/heartmonitor/heart.svg
new file mode 100644
index 0000000..35aa372
--- /dev/null
+++ b/QtDemo/qml/QtDemo/demos/heartmonitor/heart.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="150px" height="128px" viewBox="0 0 150 128" enable-background="new 0 0 150 128" xml:space="preserve">

+<g>

+	<radialGradient id="SVGID_1_" cx="75" cy="63.9399" r="69.6893" gradientUnits="userSpaceOnUse">

+		<stop  offset="0" style="stop-color:#C30000"/>

+		<stop  offset="1" style="stop-color:#AA0000"/>

+	</radialGradient>

+	<path fill="url(#SVGID_1_)" d="M150,38.904c0.003-0.119-0.02-0.226-0.02-0.342c0.001-0.135,0.02-0.263,0.02-0.397

+		c0-21.077-17.085-38.164-38.163-38.164C94.165,0.001,79.342,12.032,75,28.337C70.658,12.032,55.835,0.001,38.163,0.001

+		C17.085,0.001,0,17.088,0,38.165c0,0.135,0.019,0.263,0.02,0.397c0,0.116-0.023,0.223-0.02,0.342

+		c0.014,0.506,0.083,1.005,0.113,1.51c0.043,0.731,0.082,1.462,0.164,2.182c4.809,45.215,72.75,84.146,74.654,85.231l0.047,0.052

+		c0,0,0.021-0.012,0.022-0.015c0.002,0.003,0.023,0.015,0.023,0.015l0.047-0.052c1.903-1.085,69.845-40.017,74.653-85.231

+		c0.082-0.72,0.121-1.45,0.164-2.182C149.917,39.909,149.985,39.41,150,38.904z"/>

+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="81.165" y1="63.4434" x2="62.085" y2="-7.7644">

+		<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1"/>

+		<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>

+	</linearGradient>

+	<path fill="url(#SVGID_2_)" d="M79.646,63.85c31.312-8.392,55.896-25.49,65.873-43.616c-6.42-12.034-19.088-20.232-33.682-20.232

+		C94.165,0.001,79.342,12.032,75,28.337C70.658,12.032,55.835,0.001,38.163,0.001C17.085,0.001,0,17.088,0,38.165

+		c0,0.135,0.019,0.263,0.02,0.397c0,0.116-0.023,0.223-0.02,0.342c0.014,0.506,0.083,1.005,0.113,1.51

+		c0.043,0.731,0.082,1.462,0.164,2.182c0.698,6.557,2.753,12.977,5.712,19.173C24.012,70.096,51.222,71.466,79.646,63.85z"/>

+</g>

+<rect fill="none" width="150" height="128"/>

+</svg>

diff --git a/QtDemo/qml/QtDemo/demos/heartmonitor/main.qml b/QtDemo/qml/QtDemo/demos/heartmonitor/main.qml
index 3f27689..8365610 100644
--- a/QtDemo/qml/QtDemo/demos/heartmonitor/main.qml
+++ b/QtDemo/qml/QtDemo/demos/heartmonitor/main.qml
@@ -12,7 +12,9 @@ Rectangle {
     property int beatDifference: 1200

     property var previousTime: 0

     property string curveColor: "#22ff22"

+    property string alarmColor: "#ff2222"

     property string textColor: "#22ff22"

+    property string gridColor: "#333333"

 

     function pulse() {

         if (!heartAnimation.running) {

@@ -70,12 +72,58 @@ Rectangle {
         Data.heartData[app.heartDataIndex] = Math.random()*0.05-0.025

     }

 

-    onWidthChanged: Data.fillHeartData(Math.floor(app.width*0.5))

+    onWidthChanged: {

+        Data.fillHeartData(Math.floor(app.width*0.5))

+        gridCanvas.requestPaint();

+    }

+    onHeightChanged: gridCanvas.requestPaint()

+

+    Rectangle {

+        id: grid

+        anchors.fill: parent

+        color: "transparent"

+

+        Canvas {

+            id: gridCanvas

+            anchors.fill: parent

+            antialiasing: true

+            renderTarget: Canvas.Image

+            onPaint: {

+                var ctx = gridCanvas.getContext('2d')

+

+                ctx.clearRect(0,0,grid.width,grid.height)

+                var step = 1000 / updateTimer.interval * (app.width / Data.heartData.length)

+                var xCount = app.width / step

+                var yCount = app.height / step

+                ctx.strokeStyle = app.gridColor;

+

+                var x=0;

+                ctx.beginPath()

+                for (var i=0; i<xCount; i++) {

+                    x = i*step

+                    ctx.moveTo(x,0)

+                    ctx.lineTo(x,app.height)

+                }

+                ctx.stroke()

+                ctx.closePath()

+

+                var y=0;

+                ctx.beginPath()

+                for (var j=0; j<yCount; j++) {

+                    y = j*step

+                    ctx.moveTo(0, y)

+                    ctx.lineTo(app.width,y)

+                }

+                ctx.stroke()

+                ctx.closePath()

+            }

+        }

+    }

 

     Rectangle {

         id: canvasBackground

         anchors { bottom: parent.bottom; left: parent.left; right: parent.right }

-        height: 0.7 * parent.height

+        height: 0.75 * parent.height

 

         gradient: Gradient {

             GradientStop {position: .0; color :"black"}

@@ -86,6 +134,19 @@ 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"

@@ -105,8 +166,8 @@ Rectangle {
                 var step = (heartCanvas.width-5) / length;

                 var yFactor = heartCanvas.height * 0.35;

                 var heartIndex = (heartDataIndex+1) % length;

+                ctx.strokeStyle = app.curveColor;

 

-                ctx.strokeStyle = app.curveColor

                 ctx.beginPath()

                 ctx.moveTo(0,baseY)

                 var i=0, x=0, y=0;

@@ -131,7 +192,9 @@ Rectangle {
         id: heart

         anchors { left: parent.left; top: parent.top }

         anchors.margins: app.width * 0.05

-        source: "heart.png"

+        height: parent.height * 0.2

+        width: height*1.2

+        source: "heart.svg"

         MouseArea {

             anchors.fill: parent

             onPressed: pulse()

@@ -144,7 +207,7 @@ Rectangle {
         anchors.margins: app.width * 0.05

         antialiasing: true

         text: app.frequency

-        color: app.textColor

+        color: app.frequency > 100 ? app.alarmColor : app.textColor

         font { pixelSize: app.width * .1; bold: true }

     }

 

@@ -169,17 +232,15 @@ Rectangle {
     SequentialAnimation{

         id: heartAnimation

         NumberAnimation { target: heart; property: "scale"; duration: 100; from: 1.0; to:1.2; easing.type: Easing.Linear }

-        NumberAnimation { target: heart; property: "scale"; duration: 100; from: 1.2; to:0.8; easing.type: Easing.Linear }

-        NumberAnimation { target: heart; property: "scale"; duration: 100; from: 0.8; to:1.0; easing.type: Easing.Linear }

+        NumberAnimation { target: heart; property: "scale"; duration: 100; from: 1.2; to:1.0; easing.type: Easing.Linear }

     }

 

-    /*SequentialAnimation{

-        id: textAnimation

+    SequentialAnimation{

+        id: scannerAnimation

         running: true

         loops: Animation.Infinite

-        NumberAnimation { target: pulseText; property: "scale"; duration: 100; from: 1.0; to:1.1; easing.type: Easing.Linear }

-        NumberAnimation { target: pulseText; property: "scale"; duration: 100; from: 1.1; to:1.0; easing.type: Easing.Linear }

-    }*/

+        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/demos/shaders/Content.qml b/QtDemo/qml/QtDemo/demos/shaders/Content.qml
index c623906..aae2337 100755
--- a/QtDemo/qml/QtDemo/demos/shaders/Content.qml
+++ b/QtDemo/qml/QtDemo/demos/shaders/Content.qml
@@ -96,12 +96,4 @@ Rectangle {
         effectLoader.source = root.effectSource
         updateSource()
     }
-
-    function play() {
-        logoContainer.play()
-    }
-
-    function pause() {
-        logoContainer.pause()
-    }
 }
diff --git a/QtDemo/qml/QtDemo/demos/shaders/ControlBar.qml b/QtDemo/qml/QtDemo/demos/shaders/ControlBar.qml
deleted file mode 100755
index f31ce0a..0000000
--- a/QtDemo/qml/QtDemo/demos/shaders/ControlBar.qml
+++ /dev/null
@@ -1,54 +0,0 @@
-import QtQuick 2.0
-
-Rectangle {
-    id: root
-    height: applicationWindow.height * 0.2
-    color: "#BB333333"
-    border.color: "#777777"
-    anchors.margins: -1
-    property int margin: applicationWindow.height * 0.02
-
-    signal toggleFX()
-    signal play()
-    signal pause()
-
-    ImageButton {
-        id: playButton
-        buttonSize: root.height * 0.5
-        anchors.centerIn: root
-
-        onClicked: {
-            if (playButton.checked)
-                root.play()
-            else
-                root.pause()
-        }
-    }
-
-    Rectangle {
-        id: fx
-        anchors.right: root.right
-        anchors.verticalCenter: root.verticalCenter
-        anchors.margins: root.margin
-        width: effectSelectionPanel.width
-        height: root.height * 0.5
-        radius: 2
-        color: "#333333"
-        border.color: "#777777"
-        opacity: 0.5
-
-        Text {
-            anchors.centerIn: fx
-            color: "#ffffff"
-            text: effectSelectionPanel.effectName
-            font.pixelSize: fx.height * 0.5
-        }
-
-        MouseArea {
-            anchors.fill: parent
-            onPressed: fx.color = "#555555"
-            onReleased: fx.color = "#333333"
-            onClicked: root.toggleFX();
-        }
-    }
-}
diff --git a/QtDemo/qml/QtDemo/demos/shaders/EffectSelectionPanel.qml b/QtDemo/qml/QtDemo/demos/shaders/EffectSelectionPanel.qml
index 6caa0c2..93cdb5f 100755
--- a/QtDemo/qml/QtDemo/demos/shaders/EffectSelectionPanel.qml
+++ b/QtDemo/qml/QtDemo/demos/shaders/EffectSelectionPanel.qml
@@ -127,7 +127,6 @@ Rectangle {
         clip: true
         anchors.margins: root.width * 0.05
         model: sources
-        //focus: root.visible && root.opacity
 
         currentIndex: 0
 
@@ -146,7 +145,7 @@ Rectangle {
                 border.color: index == list.currentIndex ? "#44ffffff" : "transparent"
                 color: index == list.currentIndex ? "#22ffffff" : "transparent"
                 radius: 3
-                Text { color: "white" ; text: name ; anchors.centerIn: parent; font.pixelSize: item.height * 0.7  }
+                Text { color: "white" ; text: name ; anchors.centerIn: parent; font.pixelSize: item.height * 0.5  }
                 MouseArea {
                     anchors.fill: parent
                     onClicked:  list.currentIndex = index
diff --git a/QtDemo/qml/QtDemo/demos/shaders/ImageButton.qml b/QtDemo/qml/QtDemo/demos/shaders/ImageButton.qml
deleted file mode 100755
index feeb51d..0000000
--- a/QtDemo/qml/QtDemo/demos/shaders/ImageButton.qml
+++ /dev/null
@@ -1,30 +0,0 @@
-import QtQuick 2.0
-
-Item {
-    id: root
-
-    property int buttonSize: 50
-    property bool checked:  false
-
-    width: buttonSize
-    height: buttonSize
-
-    signal clicked
-
-    Image {
-        id: image
-        source: root.checked ? "images/PauseButton.png" : "images/PlayButton.png"
-        anchors.fill: parent
-        opacity: mouseArea.pressed ? 0.6 : 1
-        smooth: true
-    }
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: root
-        onClicked: {
-            root.checked = !root.checked
-            root.clicked();
-        }
-    }
-}
diff --git a/QtDemo/qml/QtDemo/demos/shaders/Logo.qml b/QtDemo/qml/QtDemo/demos/shaders/Logo.qml
index f98195d..709aea0 100644
--- a/QtDemo/qml/QtDemo/demos/shaders/Logo.qml
+++ b/QtDemo/qml/QtDemo/demos/shaders/Logo.qml
@@ -7,7 +7,6 @@ Rectangle {
     property int logoSize: Math.min(parent.height, parent.width) / 2
     property int logoSizeDivider: 1
     property int logoState: 1
-    property bool running: parent.running
     property double posX: parent.width / 2
     property double posY: parent.height / 2
     property double rot: 0
@@ -21,10 +20,6 @@ Rectangle {
         animationTimer.restart()
     }
 
-    function pause() {
-        animationTimer.stop();
-    }
-
     function logoClicked() {
         switch(root.logoState) {
         case 1: {
@@ -135,15 +130,10 @@ Rectangle {
         y: root.posY
         rotation: root.rot
         source: "images/qt-logo.png"
-        opacity: 1.0
 
         MouseArea {
             anchors.fill: parent
-            onClicked: {
-                if (root.running) {
-                    logoClicked();
-                }
-            }
+            onClicked: logoClicked();
         }
     }
 
diff --git a/QtDemo/qml/QtDemo/demos/shaders/LogoContainer.qml b/QtDemo/qml/QtDemo/demos/shaders/LogoContainer.qml
index eda512d..9a4cb94 100644
--- a/QtDemo/qml/QtDemo/demos/shaders/LogoContainer.qml
+++ b/QtDemo/qml/QtDemo/demos/shaders/LogoContainer.qml
@@ -6,7 +6,6 @@ Rectangle {
     anchors.fill: parent
 
     property int logoCount: 0
-    property bool running: false
 
     Image {
         id: background
@@ -14,31 +13,12 @@ Rectangle {
         anchors.fill: root
     }
 
-    function play() {
-        running = true
-        for (var i =0; i<root.children.length; i++){
-            if (root.children[i].objectName === "logo"){
-                root.children[i].play();
-            }
-        }
-    }
-
-    function pause() {
-        running = false
-        for (var i =0; i<root.children.length; i++){
-            if (root.children[i].objectName === "logo"){
-                root.children[i].pause();
-            }
-        }
-    }
-
     function createNewLogo(x,y,logoState) {
         logoCount++;
         var component = Qt.createComponent("Logo.qml")
         if (component.status === Component.Ready) {
             var logo = component.createObject(root, {"posX": x, "posY": y, "logoState": logoState, "logoSizeDivider" : logoState, "objectName": "logo"});
-            if (running)
-                logo.play();
+            logo.play();
         }
     }
 
@@ -62,7 +42,7 @@ Rectangle {
     }
 
     Component.onCompleted: {
-        var logoSize = Math.min(parent.height, parent.width) / 2;
+        var logoSize = Math.min(root.height, root.width) / 2;
         createNewLogo(root.width/2 - logoSize/2, root.height/2 - logoSize/2, 1)
     }
 }
diff --git a/QtDemo/qml/QtDemo/demos/shaders/images/PauseButton.png b/QtDemo/qml/QtDemo/demos/shaders/images/PauseButton.png
deleted file mode 100644
index 0d3e2d1..0000000
--- a/QtDemo/qml/QtDemo/demos/shaders/images/PauseButton.png
+++ /dev/null
diff --git a/QtDemo/qml/QtDemo/demos/shaders/images/PlayButton.png b/QtDemo/qml/QtDemo/demos/shaders/images/PlayButton.png
deleted file mode 100644
index 9a85633..0000000
--- a/QtDemo/qml/QtDemo/demos/shaders/images/PlayButton.png
+++ /dev/null
diff --git a/QtDemo/qml/QtDemo/demos/shaders/main.qml b/QtDemo/qml/QtDemo/demos/shaders/main.qml
index 2beba2f..c5f5d4c 100755
--- a/QtDemo/qml/QtDemo/demos/shaders/main.qml
+++ b/QtDemo/qml/QtDemo/demos/shaders/main.qml
@@ -45,29 +45,44 @@ Rectangle {
     id: applicationWindow
     anchors.fill:parent
     color: "black"
+    property int margin: applicationWindow.height * 0.02
 
     Content {
         id: content
         anchors.fill: parent
-        anchors.bottomMargin: controlBar.height
     }
 
-    ControlBar {
-        id: controlBar
-        anchors.left: applicationWindow.left
+    Rectangle {
+        id: fx
         anchors.right: applicationWindow.right
         anchors.bottom: applicationWindow.bottom
+        anchors.margins: applicationWindow.margin
+        width: applicationWindow.width * 0.25
+        height: applicationWindow.height * 0.08
+        color: "#333333"
+        border.color: "#777777"
+        opacity: 0.5
 
-        onToggleFX: effectSelectionPanel.visible = !effectSelectionPanel.visible;
-        onPlay: content.play();
-        onPause: content.pause();
+        Text {
+            anchors.centerIn: fx
+            color: "#ffffff"
+            text: effectSelectionPanel.effectName
+            font.pixelSize: fx.height * 0.5
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            onPressed: fx.color = "#555555"
+            onReleased: fx.color = "#333333"
+            onClicked: effectSelectionPanel.visible = !effectSelectionPanel.visible;
+        }
     }
 
     ParameterPanel {
         id: parameterPanel
-        opacity: controlBar.opacity
+        opacity: 0.7
         visible: effectSelectionPanel.visible && model.count !== 0
-        width: applicationWindow.width * 0.5
+        width: applicationWindow.width * 0.4
         sliderHeight: applicationWindow.height * 0.15
         anchors {
             bottom: effectSelectionPanel.bottom
@@ -78,15 +93,16 @@ Rectangle {
     EffectSelectionPanel {
         id: effectSelectionPanel
         visible: false
-        opacity: controlBar.opacity
+        opacity: 0.7
         anchors {
-            bottom: controlBar.top
+            top: applicationWindow.top
             right: applicationWindow.right
+            margins: applicationWindow.margin
         }
-        width: applicationWindow.width * 0.3
-        height: applicationWindow.height - controlBar.height
-        itemHeight: applicationWindow.height*0.08
-        color: controlBar.color
+        width: fx.width
+        height: applicationWindow.height - fx.height - 2*applicationWindow.margin
+        itemHeight: fx.height
+        color: fx.color
 
         onClicked: {
             content.effectSource = effectSource