This repository has been archived on 2024-06-03. You can view files and clone it, but cannot push or open issues or pull requests.
app/resources/qml/MainPage/CenterContent.qml
Dorian Zedler 9656cdbfdc
- began to redo layout
- fixed some issues in ScStwRace
2020-10-01 01:54:38 +02:00

341 lines
9.3 KiB
QML

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.0
import "../components"
import "../components/layout"
import de.itsblue.ScStw 2.0
import de.itsblue.ScStw.Styling 2.0
import de.itsblue.ScStw.Styling.Components 1.0
Item {
id: control
// ----------------------------------
// -- Start / Stop / Reset button ---
// ----------------------------------
GridLayout {
id: centerLayout
anchors.centerIn: parent
width: parent.width
height: parent.height
columns: app.landscape() ? 2:1
rows: app.landscape() ? 1:2
Item {
Rectangle {
anchors.fill: parent
color: "green"
}
}
FancyButton {
id: mainActionButton
property double size
Layout.alignment: Layout.Center
Layout.preferredHeight: app.landscape() ? width:Math.min(control.width * size, control.height * size)
Layout.preferredWidth: app.landscape() ? Math.min(control.width * size, control.height * size):height
onClicked: {
var ret;
switch(speedBackend.race.state) {
case ScStwRace.IDLE:
ret = speedBackend.race.start()
break;
case ScStwRace.PREPAIRING:
case ScStwRace.WAITING:
case ScStwRace.STARTING:
ret = speedBackend.race.cancel()
break;
case ScStwRace.RUNNING:
ret = speedBackend.race.stop()
break;
case ScStwRace.STOPPED:
ret = speedBackend.race.reset()
break;
}
if(ret !== 200)
console.log("Error executing main button action: " + ret)
}
/*Behavior on Layout.preferredWidth {
enabled: !app.landscape()
NumberAnimation {
duration: 3000
}
}
Behavior on Layout.preferredHeight {
enabled: app.landscape()
NumberAnimation {
duration: 3000
}
}*/
}
}
states: [
State {
name: ScStwRace.IDLE
PropertyChanges {
target: mainActionButton
size: 0.8
Layout.preferredHeight: app.landscape() ? control.height * 0.8 : Math.min(control.width * 0.8, control.height * 0.8)
Layout.preferredWidth: app.landscape() ? Math.min(control.width * 0.8, control.height * 0.8) : control.width * 0.8
text: "start"
}
PropertyChanges {
target: centerLayout
anchors.verticalCenterOffset: 0
anchors.horizontalCenterOffset: 0
}
},
State {
name: ScStwRace.PREPAIRING
PropertyChanges {
target: mainActionButton
size: 0.8
text: "cancel"
}
},
State {
name: ScStwRace.WAITING
PropertyChanges {
target: mainActionButton
size: 0.8
text: "cancel"
}
},
State {
name: ScStwRace.STARTING
PropertyChanges {
target: mainActionButton
size: 0.8
text: "cancel"
}
},
State {
name: ScStwRace.STOPPED
PropertyChanges {
target: mainActionButton
size: 0.8
Layout.preferredHeight: app.landscape() ? control.height * 0.8 : Math.min(control.width * 0.8, control.height * 0.8)
Layout.preferredWidth: app.landscape() ? Math.min(control.width * 0.8, control.height * 0.8) : control.width * 0.8
text: "reset"
}
PropertyChanges {
target: centerLayout
//anchors.verticalCenterOffset: app.landscape() ? 0:-centerLayout.height * 0.5
//anchors.horizontalCenterOffset: app.landscape() ? -centerLayout.width * 0.5:0
}
}
]
/*
DelayButton {
id : startButt
text: "start"
property int size: app.landscape() ? parent.width * 0.5:parent.height * 0.5
property color backgroundColor: appTheme.theme.colors.button
property bool progressControlActivated: speedBackend.scStwClient.state === ScStwClient.CONNECTED && app.state === "RUNNING"
delay: progressControlActivated ? 2000:0
anchors {
bottom: parent.bottom
bottomMargin: app.height * 0.5 - height * 0.5
right: parent.right
rightMargin: app.width * 0.5 - width * 0.5
}
height: app.landscape() ? Math.min(size, parent.height * 0.9) : Math.min(size, parent.width * 0.9)
width: height
Text {
id: startButt_text
text: startButt.text
anchors.centerIn: parent
font.pixelSize: parent.height * 0.16
font.family: "Helvetica"
color: enabled ? appTheme.theme.colors.text:appTheme.theme.colors.disabledText
}
Behavior on text {
//animate a text change
enabled: true
FadeAnimation {
target: startButt_text
}
}
onClicked: {
if(startButt.progressControlActivated && progress < 1.0)
return
startButt.progress = 0
switch(app.state) {
case "IDLE":
app.start()
break
case "RUNNING":
app.stop()
break
case "STOPPED":
case "INCIDENT":
app.reset()
break
}
}
contentItem: Text {
}
background: Item {
RectangularGlow {
glowRadius: 0.001
spread: 0.2
color: "black"
visible: true
cornerRadius: startButtBackground.radius
anchors.fill: startButtBackground
scale: 0.75
opacity: Math.pow( startButt.opacity, 100 )
}
Rectangle {
id: startButtBackground
implicitWidth: 100
implicitHeight: 100
color: startButt.down ? Qt.darker(startButt.backgroundColor, 1.2) : startButt.backgroundColor
radius: size / 2
readonly property real size: Math.min(startButt.width, startButt.height)
width: size
height: size
anchors.fill: parent
Behavior on color {
ColorAnimation {
duration: 200
}
}
Canvas {
id: canvas
anchors.fill: parent
visible: startButt.progressControlActivated
Connections {
target: startButt
onProgressChanged: canvas.requestPaint()
}
onPaint: {
var ctx = getContext("2d")
ctx.clearRect(0, 0, width, height)
ctx.strokeStyle = "grey"
ctx.lineWidth = parent.width * 0.02
ctx.beginPath()
var startAngle = Math.PI * 0.5
var endAngle = startAngle + startButt.progress * Math.PI * 2
ctx.arc(width / 2, height / 2, width / 2 - ctx.lineWidth / 2 - 2, startAngle, endAngle)
ctx.stroke()
}
}
}
}
}
ProgressCircle {
id: prog
property double progress: speedBackend.race.nextStartActionDetails[ScStwRace.NextStartActionDelayProgress]
anchors.fill: startButt
opacity: app.state === "STARTING" ? 1:0
scale: startButt.scale
lineWidth: prog.width * 0.02
arcBegin: 0
arcEnd: 360 * (1 - (progress > 0 ? progress:1))
colorCircle: "grey"
Behavior on opacity {
NumberAnimation {
duration: 200
}
}
animationDuration: 0
}
FancyButton {
id: cancelButt
text: "cancel"
anchors {
right: startButt.right
bottom: startButt.bottom
}
contentItem: Text {
//make text disappear
}
height: startButt.height * 0.3
scale: 0
width: height
enabled: app.state === "STARTING"
onClicked: {
app.cancel()
}
Behavior on scale {
PropertyAnimation {
duration: 200
}
}
Text {
id: cancelButt_text
text: cancelButt.text
anchors.centerIn: parent
font.pixelSize: parent.height * 0.16
font.family: "Helvetica"
color: appTheme.theme.colors.text
}
backgroundColor: appTheme.theme.colors.button
}*/
}