ScStw/app
ScStw/app
Archived
2
0
Fork 0
Code Issues 6 Pull requests Projects Releases 2 Packages 1 Wiki Activity

added a very fancy indicator for timer rady state during waiting state of race

Browse source
This commit is contained in:
Dorian Zedler 2020-10-05 20:41:42 +02:00
parent cd255b5848
commit 3467e77679
Signed by: dorian
GPG key ID: D3B255CB8BC7CD37
5 changed files with 378 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
resources/qml/MainPage/CenterContent.qml
View file

@ -30,9 +30,105 @@ Item {
rows: app.landscape() ? 1:2
Item {
Rectangle {
id: centerExtraContentTop
property double size
Layout.preferredHeight: app.landscape() ? centerLayout.height:Math.min(centerLayout.width * size, centerLayout.height * size)
Layout.preferredWidth: app.landscape() ? Math.min(centerLayout.width * size, centerLayout.height * size):centerLayout.width
Behavior on size {
NumberAnimation {
duration: 800
easing.type: Easing.InOutQuart
}
}
StackView {
id: centerExtraContentTopStack
anchors.fill: parent
color: "green"
anchors.margins: parent.width * 0.1
property QtObject newItem: emptyComp
onNewItemChanged: {
centerExtraContentTopStack.replace(newItem)
}
replaceEnter: Transition {
SequentialAnimation {
PauseAnimation {
duration: 400
}
NumberAnimation {
property: "opacity"
from: 0
to: 1
duration: 400
easing.type: Easing.InOutQuart
}
}
}
replaceExit: Transition {
NumberAnimation {
property: "opacity"
from: 1
to: 0
duration: 400
easing.type: Easing.InOutQuart
}
}
Component {
id: waitingDetailsComp
Item {
opacity: 0
scale: 0.9
Row {
anchors.fill: parent
spacing: centerExtraContentTopStack.anchors.margins
StateIndicator {
width: parent.width * 0.5 - parent.spacing * 0.5
height: parent.height
backgroundColor: appTheme.theme.colors.background
successColor: appTheme.theme.colors.success
state: speedBackend.race.timers[0]["readyState"] === ScStwTimer.IsReady ? "success":"warn"
onStateChanged: {
console.log("STATE CHANGED: " + JSON.stringify( speedBackend.race.timers[0]))
}
}
StateIndicator {
width: parent.width * 0.5 - parent.spacing * 0.5
height: parent.height
backgroundColor: appTheme.theme.colors.background
successColor: appTheme.theme.colors.success
state: speedBackend.race.timers[1]["readyState"] === ScStwTimer.IsReady ? "success":"warn"
}
}
}
}
Component {
id: emptyComp
Item {}
}
}
}
@ -47,7 +143,6 @@ Item {
Layout.preferredHeight: app.landscape() ? width:Math.min(centerLayout.width * size, centerLayout.height * size)
Layout.preferredWidth: app.landscape() ? Math.min(centerLayout.width * size, centerLayout.height * size):height
onClicked: {
if(progressControlActivated && progress < 1.0)
return
@ -59,7 +154,7 @@ Item {
ret = speedBackend.race.start()
break;
case ScStwRace.WAITING:
if(!speedBackend.race.readySoundEnabled)
if(!speedBackend.race.readySoundEnabled && speedBackend.race.isReadyForNextState)
ret = speedBackend.race.start()
else
ret = speedBackend.race.cancel()
@ -90,6 +185,23 @@ Item {
}
}
}
Item {
id: centerExtraContentBottom
property double size
Layout.preferredHeight: app.landscape() ? centerLayout.height:Math.min(centerLayout.width * size, centerLayout.height * size)
Layout.preferredWidth: app.landscape() ? Math.min(centerLayout.width * size, centerLayout.height * size):centerLayout.width
Behavior on size {
NumberAnimation {
duration: 400
easing.type: Easing.InOutQuart
}
}
}
}
states: [
@ -120,11 +232,30 @@ Item {
State {
name: ScStwRace.WAITING
PropertyChanges {
target: mainActionButton
size: 0.9
text: speedBackend.race.readySoundEnabled ? "cancel":"ready"
enabled: speedBackend.race.readySoundEnabled ? true:speedBackend.race.isReadyForNextState
size: speedBackend.race.competitionMode ? 0.3:0.9
text: speedBackend.race.readySoundEnabled ? "cancel": speedBackend.race.isReadyForNextState ? "ready":"cancel"
progressControlActivated: speedBackend.race.competitionMode && !speedBackend.race.readySoundEnabled && !speedBackend.race.isReadyForNextState
}
PropertyChanges {
target: centerExtraContentTop
size: speedBackend.race.competitionMode ? 0.7:0
}
PropertyChanges {
target: centerExtraContentBottom
size: speedBackend.race.competitionMode ? 0.05:0
}
PropertyChanges {
target: centerExtraContentTopStack
newItem: speedBackend.race.competitionMode ? waitingDetailsComp:emptyComp
}
},
@ -143,7 +274,7 @@ Item {
target: mainActionButton
size: 0.9
text: speedBackend.race.competitionMode ? "cancel":"stop"
progressControlActivated: speedBackend.scStwClient.state === ScStwClient.CONNECTED && speedBackend.race.competitionMode
progressControlActivated: speedBackend.race.competitionMode
}
},

4
resources/qml/MainPage/TopToolBar.qml
View file

@ -204,7 +204,7 @@ ToolBar {
PropertyChanges {
target: control
statusText: "Press start"
statusText: app.landscape() ? "Press\nstart":"Press start"
}
PropertyChanges {
@ -278,7 +278,7 @@ ToolBar {
PropertyChanges {
target: control
statusText: "Technical incident!"
statusText: app.landscape() ? "Technical\nincident!":"Technical incident!"
}
PropertyChanges {

27
resources/qml/components/MainActionButton.qml
View file

@ -13,8 +13,20 @@ DelayButton {
property color backgroundColor: appTheme.theme.colors.button
property bool progressControlActivated: false
property double startProgress
property double oldStartProgress: -1
delay: progressControlActivated ? 2000:0
onStartProgressChanged: {
if(startProgress > oldStartProgress)
oldStartProgress = startProgress
else {
startProgressAnimation.from = oldStartProgress
startProgressAnimation.to = startProgress
startProgressAnimation.start()
}
}
Text {
id: labelText
text: control.text
@ -24,6 +36,15 @@ DelayButton {
color: enabled ? appTheme.theme.colors.text:appTheme.theme.colors.disabledText
}
NumberAnimation {
id: startProgressAnimation
to: 0
target: control
properties: "oldStartProgress"
duration: 200
}
Behavior on text {
//animate a text change
enabled: true
@ -74,17 +95,17 @@ DelayButton {
Connections {
target: control
onProgressChanged: canvas.requestPaint()
onStartProgressChanged: canvas.requestPaint()
onOldStartProgressChanged: canvas.requestPaint()
}
onPaint: {
var progress
var showHoldProgress = ((control.startProgress <= 0 || control.startProgress === 1) && control.progressControlActivated)
var showHoldProgress = ((control.oldSartProgress <= 0 || control.oldStartProgress === 1) && control.progressControlActivated)
if(showHoldProgress)
progress = control.progress
else
progress = control.startProgress < 0 ? 0:1-control.startProgress
progress = control.oldStartProgress < 0 ? 0:1-control.oldStartProgress
var ctx = getContext("2d")

212
resources/qml/components/StateIndicator.qml Normal file
View file

@ -0,0 +1,212 @@
import QtQuick 2.0
Rectangle {
id: control
property color successColor: "green"
property color warningColor: "orange"
property color errorColor: "red"
property color unknownColor: "grey"
property color backgroundColor: "white"
height: app.height * 0.9
width: height * 0.8
color: backgroundColor
border.width: Math.min(width * 0.1, height * 0.1)
border.color: "green"
radius: border.width * 0.5
state: "success"
Rectangle {
id: higherRect
property int totalWidth: Math.abs(Math.sin(rotation * Math.PI / 180) * (height))
property int totalHeight: Math.abs(Math.cos(rotation * Math.PI / 180) * (height))
radius: width * 0.5
color: "green"
}
Rectangle {
id: lowerRect
property int totalWidth: Math.abs(Math.sin(rotation * Math.PI / 180) * (height))
property int totalHeight: Math.abs(Math.cos(rotation * Math.PI / 180) * (height))
radius: width * 0.5
color: "green"
}
states: [
State {
name: "unknown"
PropertyChanges {
target: control
border.color: control.unknownColor
}
PropertyChanges {
target: higherRect
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: control.border.width
height: Math.min(parent.width * 0.7, parent.height * 0.7)
color: control.unknownColor
rotation: 90
}
PropertyChanges {
target: lowerRect
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: control.border.width
height: Math.min(parent.width * 0.7, parent.height * 0.7)
color: control.unknownColor
rotation: -90
}
},
State {
name: "error"
PropertyChanges {
target: control
border.color: control.errorColor
}
PropertyChanges {
target: higherRect
x: (parent.width - width) / 2
y: parent.height * 0.15
width: control.border.width
height: parent.height * 0.5
color: control.errorColor
}
PropertyChanges {
target: lowerRect
x: (parent.width - width) / 2
y: parent.height - (parent.height * 0.15 + height)
width: control.border.width * 1.3
height: width
color: control.errorColor
}
},
State {
name: "warn"
PropertyChanges {
target: control
border.color: control.warningColor
}
PropertyChanges {
target: higherRect
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: control.border.width
height: Math.min(parent.width * 0.7, parent.height * 0.7)
color: control.warningColor
rotation: 45
}
PropertyChanges {
target: lowerRect
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: control.border.width
height: Math.min(parent.width * 0.7, parent.height * 0.7)
color: control.warningColor
rotation: -45
}
},
State {
id: tickState
property int bottomX: (control.width) / 2 - (higherRect.totalWidth - (lowerRect.totalWidth + higherRect.totalWidth) / 2 )
property int bottomY: (control.height + higherRect.totalHeight) / 2 - lowerRect.radius
name: "success"
PropertyChanges {
target: control
border.color: control.successColor
}
PropertyChanges {
target: higherRect
x: tickState.bottomX - width / 2 + (Math.sin(rotation * Math.PI / 180) * (height / 2 - radius))
y: tickState.bottomY - height / 2 - (Math.cos(rotation * Math.PI / 180) * (height / 2 - radius))
width: control.border.width
height: Math.min(parent.width * 0.6, parent.height * 0.6)
rotation: 40
color: control.successColor
}
PropertyChanges {
target: lowerRect
x: tickState.bottomX - width / 2 + (Math.sin(rotation * Math.PI / 180) * (height / 2 - radius))
y: tickState.bottomY - height / 2 - (Math.cos(rotation * Math.PI / 180) *(height / 2 - radius))
width: control.border.width
height: Math.min(parent.width * 0.3, parent.height * 0.3)
rotation: -40
color: control.successColor
}
}
]
transitions: [
Transition {
NumberAnimation {
properties: "height,width,rotation,x,y"
duration: 400
easing.type: Easing.InOutQuad
}
ColorAnimation {
properties: "color,border.color"
duration: 400
easing.type: Easing.InOutQuad
}
}
]
}

1
resources/qml/qml.qrc
View file

@ -28,5 +28,6 @@
<file>MainPage/CenterContent.qml</file>
<file>MainPage/BottomToolBar.qml</file>
<file>components/MainActionButton.qml</file>
<file>components/StateIndicator.qml</file>
</qresource>
</RCC>