added a very fancy indicator for timer rady state during waiting state of race
This commit is contained in:
parent
cd255b5848
commit
3467e77679
5 changed files with 378 additions and 13 deletions
|
@ -30,9 +30,105 @@ Item {
|
||||||
rows: app.landscape() ? 1:2
|
rows: app.landscape() ? 1:2
|
||||||
|
|
||||||
Item {
|
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
|
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.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
|
Layout.preferredWidth: app.landscape() ? Math.min(centerLayout.width * size, centerLayout.height * size):height
|
||||||
|
|
||||||
|
|
||||||
onClicked: {
|
onClicked: {
|
||||||
if(progressControlActivated && progress < 1.0)
|
if(progressControlActivated && progress < 1.0)
|
||||||
return
|
return
|
||||||
|
@ -59,7 +154,7 @@ Item {
|
||||||
ret = speedBackend.race.start()
|
ret = speedBackend.race.start()
|
||||||
break;
|
break;
|
||||||
case ScStwRace.WAITING:
|
case ScStwRace.WAITING:
|
||||||
if(!speedBackend.race.readySoundEnabled)
|
if(!speedBackend.race.readySoundEnabled && speedBackend.race.isReadyForNextState)
|
||||||
ret = speedBackend.race.start()
|
ret = speedBackend.race.start()
|
||||||
else
|
else
|
||||||
ret = speedBackend.race.cancel()
|
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: [
|
states: [
|
||||||
|
@ -120,11 +232,30 @@ Item {
|
||||||
|
|
||||||
State {
|
State {
|
||||||
name: ScStwRace.WAITING
|
name: ScStwRace.WAITING
|
||||||
|
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: mainActionButton
|
target: mainActionButton
|
||||||
size: 0.9
|
size: speedBackend.race.competitionMode ? 0.3:0.9
|
||||||
text: speedBackend.race.readySoundEnabled ? "cancel":"ready"
|
text: speedBackend.race.readySoundEnabled ? "cancel": speedBackend.race.isReadyForNextState ? "ready":"cancel"
|
||||||
enabled: speedBackend.race.readySoundEnabled ? true:speedBackend.race.isReadyForNextState
|
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
|
target: mainActionButton
|
||||||
size: 0.9
|
size: 0.9
|
||||||
text: speedBackend.race.competitionMode ? "cancel":"stop"
|
text: speedBackend.race.competitionMode ? "cancel":"stop"
|
||||||
progressControlActivated: speedBackend.scStwClient.state === ScStwClient.CONNECTED && speedBackend.race.competitionMode
|
progressControlActivated: speedBackend.race.competitionMode
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -204,7 +204,7 @@ ToolBar {
|
||||||
|
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: control
|
target: control
|
||||||
statusText: "Press start"
|
statusText: app.landscape() ? "Press\nstart":"Press start"
|
||||||
}
|
}
|
||||||
|
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
|
@ -278,7 +278,7 @@ ToolBar {
|
||||||
|
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
target: control
|
target: control
|
||||||
statusText: "Technical incident!"
|
statusText: app.landscape() ? "Technical\nincident!":"Technical incident!"
|
||||||
}
|
}
|
||||||
|
|
||||||
PropertyChanges {
|
PropertyChanges {
|
||||||
|
|
|
@ -13,8 +13,20 @@ DelayButton {
|
||||||
property color backgroundColor: appTheme.theme.colors.button
|
property color backgroundColor: appTheme.theme.colors.button
|
||||||
property bool progressControlActivated: false
|
property bool progressControlActivated: false
|
||||||
property double startProgress
|
property double startProgress
|
||||||
|
property double oldStartProgress: -1
|
||||||
|
|
||||||
delay: progressControlActivated ? 2000:0
|
delay: progressControlActivated ? 2000:0
|
||||||
|
|
||||||
|
onStartProgressChanged: {
|
||||||
|
if(startProgress > oldStartProgress)
|
||||||
|
oldStartProgress = startProgress
|
||||||
|
else {
|
||||||
|
startProgressAnimation.from = oldStartProgress
|
||||||
|
startProgressAnimation.to = startProgress
|
||||||
|
startProgressAnimation.start()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Text {
|
Text {
|
||||||
id: labelText
|
id: labelText
|
||||||
text: control.text
|
text: control.text
|
||||||
|
@ -24,6 +36,15 @@ DelayButton {
|
||||||
color: enabled ? appTheme.theme.colors.text:appTheme.theme.colors.disabledText
|
color: enabled ? appTheme.theme.colors.text:appTheme.theme.colors.disabledText
|
||||||
}
|
}
|
||||||
|
|
||||||
|
NumberAnimation {
|
||||||
|
id: startProgressAnimation
|
||||||
|
|
||||||
|
to: 0
|
||||||
|
target: control
|
||||||
|
properties: "oldStartProgress"
|
||||||
|
duration: 200
|
||||||
|
}
|
||||||
|
|
||||||
Behavior on text {
|
Behavior on text {
|
||||||
//animate a text change
|
//animate a text change
|
||||||
enabled: true
|
enabled: true
|
||||||
|
@ -74,17 +95,17 @@ DelayButton {
|
||||||
Connections {
|
Connections {
|
||||||
target: control
|
target: control
|
||||||
onProgressChanged: canvas.requestPaint()
|
onProgressChanged: canvas.requestPaint()
|
||||||
onStartProgressChanged: canvas.requestPaint()
|
onOldStartProgressChanged: canvas.requestPaint()
|
||||||
}
|
}
|
||||||
|
|
||||||
onPaint: {
|
onPaint: {
|
||||||
var progress
|
var progress
|
||||||
var showHoldProgress = ((control.startProgress <= 0 || control.startProgress === 1) && control.progressControlActivated)
|
var showHoldProgress = ((control.oldSartProgress <= 0 || control.oldStartProgress === 1) && control.progressControlActivated)
|
||||||
|
|
||||||
if(showHoldProgress)
|
if(showHoldProgress)
|
||||||
progress = control.progress
|
progress = control.progress
|
||||||
else
|
else
|
||||||
progress = control.startProgress < 0 ? 0:1-control.startProgress
|
progress = control.oldStartProgress < 0 ? 0:1-control.oldStartProgress
|
||||||
|
|
||||||
|
|
||||||
var ctx = getContext("2d")
|
var ctx = getContext("2d")
|
||||||
|
|
212
resources/qml/components/StateIndicator.qml
Normal file
212
resources/qml/components/StateIndicator.qml
Normal 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
|
@ -28,5 +28,6 @@
|
||||||
<file>MainPage/CenterContent.qml</file>
|
<file>MainPage/CenterContent.qml</file>
|
||||||
<file>MainPage/BottomToolBar.qml</file>
|
<file>MainPage/BottomToolBar.qml</file>
|
||||||
<file>components/MainActionButton.qml</file>
|
<file>components/MainActionButton.qml</file>
|
||||||
|
<file>components/StateIndicator.qml</file>
|
||||||
</qresource>
|
</qresource>
|
||||||
</RCC>
|
</RCC>
|
||||||
|
|
Reference in a new issue