From 6a25683375d16f266c8daab9ae15b58cff68f620 Mon Sep 17 00:00:00 2001 From: Max Date: Sat, 24 Nov 2018 13:50:06 +0100 Subject: [PATCH] added ColumnLayout for StartPage with tickInterval, numCount, min and max --- CalculateEndPage.qml | 5 -- CalculateStartPage.qml | 64 -------------- Calculator.qml | 54 +++++++++--- CalculatorEndPage.qml | 49 +++++++++++ CalculatePage.qml => CalculatorMainPage.qml | 35 ++++++-- CalculatorStartPage.qml | 93 +++++++++++++++++++++ StartPage.qml | 18 ++-- main.qml | 15 ++-- qml.qrc | 6 +- 9 files changed, 232 insertions(+), 107 deletions(-) delete mode 100644 CalculateEndPage.qml delete mode 100644 CalculateStartPage.qml create mode 100644 CalculatorEndPage.qml rename CalculatePage.qml => CalculatorMainPage.qml (63%) create mode 100644 CalculatorStartPage.qml diff --git a/CalculateEndPage.qml b/CalculateEndPage.qml deleted file mode 100644 index 9c36e13..0000000 --- a/CalculateEndPage.qml +++ /dev/null @@ -1,5 +0,0 @@ -import QtQuick 2.0 - -Item { - -} diff --git a/CalculateStartPage.qml b/CalculateStartPage.qml deleted file mode 100644 index 7bed469..0000000 --- a/CalculateStartPage.qml +++ /dev/null @@ -1,64 +0,0 @@ -import QtQuick 2.11 -import QtQuick.Controls 2.4 - -Page { - id: calculatorStartPage - - Label { - id: calculatorStartPageHeading - anchors { - top: parent.top - topMargin: parent.height * 0.05 - horizontalCenter: parent.horizontalCenter - } - font.pixelSize: parent.height * 0.15 - text: "Calculator" - } - - SpinBox { - id: calculatorTickInterval - from: 1 - to: 100000 - stepSize: 1 - value: 1000 - anchors.horizontalCenter: parent.horizontalCenter - editable: true - anchors { - left: parent.left - top: parent.top - leftMargin: parent.width * 0.5 - width * 0.5 - topMargin: parent.height * 0.3 - height * 0.5 - } - onValueChanged: { - calculator.tickInterval = calculatorTickInterval.value - } - - } - - SpinBox { - id: calculatorNumCount - from: 1 - to: 100000 - stepSize: 1 - value: 10 - anchors.horizontalCenter: parent.horizontalCenter - editable: true - anchors { - left: parent.left - top: parent.top - leftMargin: parent.width * 0.5 - width * 0.5 - topMargin: parent.height * 0.6 - height * 0.5 - } - onValueChanged: { - calculator.numCount = calculatorNumCount.value - } - } - - Button { - id: calculatorStartButton - text: "start" - onClicked: { - calculator.start() - } - } -} diff --git a/Calculator.qml b/Calculator.qml index ef8ccd0..819e631 100644 --- a/Calculator.qml +++ b/Calculator.qml @@ -1,13 +1,19 @@ import QtQuick 2.11 import QtQuick.Controls 2.4 +import "./" Item { id: calculator - property var nums: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] - property int currIndex: -1 + property int sum: 0 + property int nextNum: 0 + property int lastNum: 0 + property int actualNums: 0 + property int min: 0 + property int max: 9 property int tickInterval: 1000 property int numCount: 10 + property bool negate: false signal pageOpened() @@ -15,6 +21,10 @@ Item { calculator.state = "starting" } + onNumCountChanged: { + initNums() + } + states: [ State { name: "starting" @@ -28,7 +38,14 @@ Item { name: "running" PropertyChanges { target: calculatorStack - currPage: calculatorGamePageComp + currPage: calculatorMainPageComp + } + }, + State { + name: "ending" + PropertyChanges { + target: calculatorStack + currPage: calculatorEndPageComp } } ] @@ -49,15 +66,19 @@ Item { Component { id: calculatorStartPageComp - CalculateStartPage { - id: calculatorStartPage + CalculatorStartPage { } } Component { - id: calculatorGamePageComp - CalculatePage { + id: calculatorMainPageComp + CalculatorMainPage { + } + } + Component { + id: calculatorEndPageComp + CalculatorEndPage { } } @@ -90,15 +111,24 @@ Item { function nextNumber(){ var randNum = 0 - while(randNum === 0 || randNum === calculator.nums[currIndex]){ - randNum = Math.floor(Math.random() * 9) + var range = calculator.max - calculator.min + lastNum = nextNum + while(randNum===0 || randNum === lastNum){ + randNum = Math.floor((Math.random()*(range+1))+min) } - calculator.nums[calculator.currIndex+1] = randNum - calculator.currIndex += 1 + nextNum = randNum + actualNums += 1 } - function start(){ + function start(min, max){ calculator.nextNumber() calculator.state = "running" } + + function initNums() { + while (nums.length < numCount) { + nums.push(0) + console.log(nums.length) + } + } } diff --git a/CalculatorEndPage.qml b/CalculatorEndPage.qml new file mode 100644 index 0000000..1a204fd --- /dev/null +++ b/CalculatorEndPage.qml @@ -0,0 +1,49 @@ +import QtQuick 2.11 +import QtQuick.Controls 2.4 +import "./" + +Page { + id: root + + signal pageOpened() + + onPageOpened: { + rectAnim.start() + startRectAnim2.start() + } + + Rectangle { + id: rect + anchors.fill: parent + property string col: "darkgreen" + color: col + + Timer { + id: startRectAnim2 + interval: 5000 + running: false + repeat: false + + onTriggered: { + rectAnim2.start() + } + } + + ColorAnimation { + id: rectAnim + target: rect + property: "color" + from: "darkGreen" + to: "yellow" + duration: 5000 + } + ColorAnimation { + id: rectAnim2 + target: rect + property: "color" + from: "yellow" + to: "darkRed" + duration: 5000 + } + } +} diff --git a/CalculatePage.qml b/CalculatorMainPage.qml similarity index 63% rename from CalculatePage.qml rename to CalculatorMainPage.qml index 0627134..1adbaf5 100644 --- a/CalculatePage.qml +++ b/CalculatorMainPage.qml @@ -5,17 +5,21 @@ import "./" Page { id: root + signal pageOpened() + Label { id: num anchors.centerIn: parent font.pixelSize: calculator.height * 0.6 - text: calculator.nums[calculator.currIndex] + text: calculator.nextNum } ProgressBar { id: prog property int progress: 0 + //property string col: "green" + value: progress/100 anchors { bottom: parent.bottom bottomMargin: parent.height * 0.02 @@ -24,9 +28,16 @@ Page { right: parent.right rightMargin: parent.width * 0.01 } - value: progress/100 + + + /* + progress: Rectangle { + color: col + } + */ + NumberAnimation { - id: progAnim + id: progNumAnim target: prog property: "progress" from: 100 @@ -34,6 +45,17 @@ Page { duration: tick.interval easing.type: Easing.Linear } + /* + ColorAnimation { + id: progColAnim + target: prog + property: "color" + from: "green" + to: "red" + duration: tick.interval + easing.type: Easing.Linear + } + */ } Timer { @@ -43,18 +65,19 @@ Page { running: calculator.state === "running" onTriggered: { - if(calculator.currIndex+1 <= calculator.numCount-1){ + if(calculator.actualNums < calculator.numCount){ nextNumber() tick.start() } else { - + calculator.state = "ending" } } onRunningChanged: { if(running){ - progAnim.start() + progNumAnim.start() + //progColAnim.start() } } } diff --git a/CalculatorStartPage.qml b/CalculatorStartPage.qml new file mode 100644 index 0000000..69823d3 --- /dev/null +++ b/CalculatorStartPage.qml @@ -0,0 +1,93 @@ +import QtQuick 2.11 +import QtQuick.Controls 2.4 +import QtQuick.Layouts 1.3 +import "./" + +Page { + id: root + + signal pageOpened() + + ColumnLayout { + id: column + spacing: 5 + width: parent.width + anchors.fill: parent + anchors.topMargin: parent.height * 0.02 + anchors.bottomMargin: parent.height * 0.02 + + onSpacingChanged: console.log(parent.width) + + Label { + id: heading + font.pixelSize: parent.width * 0.075 + text: "Calculator" + Layout.fillWidth: true + Layout.leftMargin: parent.width * 0.5 - width * 0.5 + Layout.rightMargin: parent.width * 0.5 - width * 0.5 + } + + + TextField { + id: tickInterval + text: calculator.tickInterval + placeholderText: "interval" + horizontalAlignment: Qt.AlignHCenter + Layout.fillWidth: true + Layout.leftMargin: parent.width * 0.05 + Layout.rightMargin: parent.width * 0.05 + } + + TextField { + id: numCount + text: calculator.numCount + placeholderText: "numbercount" + horizontalAlignment: Qt.AlignHCenter + Layout.fillWidth: true + Layout.leftMargin: parent.width * 0.05 + Layout.rightMargin: parent.width * 0.05 + } + + TextField { + id: min + text: calculator.min + placeholderText: "min" + horizontalAlignment: Qt.AlignHCenter + Layout.fillWidth: true + Layout.leftMargin: parent.width * 0.05 + Layout.rightMargin: parent.width * 0.05 + } + + TextField { + id: max + text: calculator.max + placeholderText: "max" + horizontalAlignment: Qt.AlignHCenter + Layout.fillWidth: true + Layout.leftMargin: parent.width * 0.05 + Layout.rightMargin: parent.width * 0.05 + } + + RoundButton { + id: startButton + text: "start" + height: parent.width * 0.1 + width: height + //font.pixelSize: parent.width * 0.03 + Layout.fillWidth: true + Layout.leftMargin: parent.width * 0.05 + Layout.rightMargin: parent.width * 0.05 + onClicked: { + updateVars() + calculator.start() + } + } + } + function updateVars() { + calculator.tickInterval = tickInterval.text + calculator.numCount = numCount.text + calculator.min = min.text + calculator.max = max.text + + } +} diff --git a/StartPage.qml b/StartPage.qml index 803df47..6b6a249 100644 --- a/StartPage.qml +++ b/StartPage.qml @@ -6,11 +6,12 @@ Page { id: root signal pageOpened() - Button { + RoundButton { id: calenderButton text: "calender" - height: parent.height * 0.2 - width: parent.width * 0.5 + height: parent.width * 0.2 + width: height + font.pixelSize: parent.width * 0.03 anchors { left: parent.left top: parent.top @@ -23,11 +24,12 @@ Page { } } - Button { + RoundButton { id: calculatorButton - text: "calculate" - height: parent.height * 0.2 - width: parent.width * 0.5 + text: "calculator" + height: parent.width * 0.2 + width: height + font.pixelSize: parent.width * 0.03 anchors { left: parent.left top: parent.top @@ -36,7 +38,7 @@ Page { } onClicked: { - game.state = "calculate" + game.state = "calculator" } } } diff --git a/main.qml b/main.qml index 159afe5..4bd2d82 100644 --- a/main.qml +++ b/main.qml @@ -28,14 +28,14 @@ Window { name: "calender" PropertyChanges { target: mainStack - currPage: calPageComp + currPage: calenderPageComp } }, State { - name: "calculate" + name: "calculator" PropertyChanges { target: mainStack - currPage: calcuPageComp + currPage: calculatorPageComp } } @@ -58,21 +58,18 @@ Window { Component { id: startPageComp StartPage { - id: startPage } } Component { - id: calPageComp + id: calenderPageComp CalenderPage { - id: calPage } } Component { - id: calcuPageComp - CalculatePage { - id: calcuPage + id: calculatorPageComp + Calculator { } } diff --git a/qml.qrc b/qml.qrc index d1f5bc3..5194cc2 100644 --- a/qml.qrc +++ b/qml.qrc @@ -3,9 +3,9 @@ main.qml CalenderPage.qml StartPage.qml - CalculatePage.qml - CalculateStartPage.qml - CalculateEndPage.qml + CalculatorMainPage.qml + CalculatorStartPage.qml + CalculatorEndPage.qml Calculator.qml