diff --git a/resources/qml/MainPage/CenterContent.qml b/resources/qml/MainPage/CenterContent.qml index cd55662..fcf0e96 100644 --- a/resources/qml/MainPage/CenterContent.qml +++ b/resources/qml/MainPage/CenterContent.qml @@ -34,8 +34,9 @@ Item { 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 + Layout.preferredHeight: app.landscape() ? centerLayout.height * 0.8:Math.min(centerLayout.width * size, centerLayout.height * size) + Layout.preferredWidth: app.landscape() ? Math.min(centerLayout.width * size, centerLayout.height * size):centerLayout.width * 0.8 + Layout.alignment: Layout.Center Behavior on size { @@ -49,7 +50,7 @@ Item { id: centerExtraContentTopStack anchors.fill: parent - anchors.margins: parent.width * 0.1 + anchors.margins: 1 property QtObject newItem: emptyComp @@ -87,40 +88,93 @@ Item { Component { id: waitingDetailsComp - Item { + Column { opacity: 0 - scale: 0.9 Row { - anchors.fill: parent + id: stateIndicatorRow - spacing: centerExtraContentTopStack.anchors.margins + property int delegateWidth: width / stateIndicatorRepeater.model - (spacing * (stateIndicatorRepeater.model - 1) / stateIndicatorRepeater.model) + property int delegateHeight: height - StateIndicator { - width: parent.width * 0.5 - parent.spacing * 0.5 - height: parent.height + width: parent.width + height: parent.height * 0.9 - backgroundColor: appTheme.theme.colors.background - successColor: appTheme.theme.colors.success + spacing: width * 0.1 - state: speedBackend.race.timers[0]["readyState"] === ScStwTimer.IsReady ? "success":"warn" + Repeater { + id: stateIndicatorRepeater - onStateChanged: { - console.log("STATE CHANGED: " + JSON.stringify( speedBackend.race.timers[0])) + model: speedBackend.race.timers.length + + delegate: ColumnLayout { + id: timerStatusColumn + + property var thisTimer: speedBackend.race.timers[index] + + width: parent.delegateWidth + height: parent.delegateHeight + + Label { + Layout.preferredWidth: parent.width + Layout.preferredHeight: parent.height * 0.1 + + font.pixelSize: height * 0.8 + fontSizeMode: Text.Fit + minimumPointSize: 1 + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + + color: appTheme.theme.colors.text + + text: "Lane " + timerStatusColumn.thisTimer["letter"] + } + + StateIndicator { + + Layout.fillWidth: true + Layout.fillHeight: true + + backgroundColor: appTheme.theme.colors.background + successColor: appTheme.theme.colors.success + warningColor: appTheme.theme.colors.warning + + state: timerStatusColumn.thisTimer["readyState"] === ScStwTimer.IsReady ? + "success":timerStatusColumn.thisTimer["readyState"] === ScStwTimer.IsDisabled ? + "unknown":"warn" + + indicatorSize: 0.8 + + MouseArea { + anchors.fill: parent + + onClicked: { + var disabled = timerStatusColumn.thisTimer["state"] !== ScStwTimer.DISABLED + console.log("setting timer to disabled: " + disabled) + speedBackend.race.setTimerDisabled(timerStatusColumn.thisTimer["id"], disabled) + } + } + } } } - - 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" - } } + + Label { + width: parent.width + height: parent.height * 0.1 + + font.pixelSize: height * 0.6 + fontSizeMode: Text.Fit + minimumPointSize: 1 + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + + color: appTheme.theme.colors.text + + text: "Tap on a lane to disable it" + } + } } diff --git a/resources/qml/MainPage/TopToolBar.qml b/resources/qml/MainPage/TopToolBar.qml index d70d4c0..9f86d18 100644 --- a/resources/qml/MainPage/TopToolBar.qml +++ b/resources/qml/MainPage/TopToolBar.qml @@ -1,5 +1,5 @@ import QtQuick 2.9 -import QtQuick.Controls 2.0 +import QtQuick.Controls 2.9 import "../components" import "../components/layout" @@ -144,29 +144,42 @@ ToolBar { model: Object.keys(speedBackend.scStwClient.extensions) delegate: Rectangle { + id: statusRect + property string thisLetter: modelData + property var thisExtensions: speedBackend.scStwClient.extensions[modelData] + property bool allExtensionConnected: areAllExtensionConnected(thisExtensions) width: height height: parent.height radius: width * 0.1 - color: getStatusColor(speedBackend.scStwClient.extensions[modelData]) // TODO + color: appTheme.theme.colors.background + border.color: allExtensionConnected ? appTheme.theme.colors.success:appTheme.theme.colors.error + border.width: width * 0.08 + onThisExtensionsChanged: { + allExtensionConnected = areAllExtensionConnected(thisExtensions) + } - function getStatusColor(extensions) { - + function areAllExtensionConnected(extensions) { for(var i = 0; i < extensions.length; i++) { console.log(JSON.stringify(extensions[i])) if(extensions[i]["state"] !== ScStw.ExtensionConnected || extensions[i]["batteryState"] !== ScStw.BatteryFine) - return appTheme.theme.colors.error + return false } - return appTheme.theme.colors.success + return true + } + + Behavior on border.color { + ColorAnimation { + duration: 200 + } } Behavior on color { - ColorAnimation { duration: 200 } @@ -178,10 +191,10 @@ ToolBar { text: parent.thisLetter fontSizeMode: Text.Fit - font.pixelSize: height + font.pixelSize: height * 0.7 font.bold: true - color: appTheme.theme.colors.background + color: statusRect.border.color verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter diff --git a/resources/qml/SettingsDialog/SettingsExtensionsPage.qml b/resources/qml/SettingsDialog/SettingsExtensionsPage.qml index 47940c9..4fac7ca 100644 --- a/resources/qml/SettingsDialog/SettingsExtensionsPage.qml +++ b/resources/qml/SettingsDialog/SettingsExtensionsPage.qml @@ -35,7 +35,7 @@ ListView { anchors.horizontalCenter: parent.horizontalCenter width: parent.width * 0.98 - height: parentObj.delegateHeight * extensionsList.model.length + height: parentObj.delegateHeight * extensionsList.model radius: width * 0.05 @@ -88,13 +88,13 @@ ListView { interactive: false - model: speedBackend.scStwClient.extensions[parent.thisLane] + model: speedBackend.scStwClient.extensions[parent.thisLane].length delegate: ConnectionDelegate { - property var thisExtension: modelData + property var thisExtension: speedBackend.scStwClient.extensions[laneContainerRect.thisLane][index] property var stateTranslations: ["disconnected", "connecting", "connecting", "connected"] - height: extensionsList.height / extensionsList.model.length + height: extensionsList.height / extensionsList.model enabled: true diff --git a/resources/qml/components/ConnectionDelegate.qml b/resources/qml/components/ConnectionDelegate.qml index 9285c81..49e4a56 100644 --- a/resources/qml/components/ConnectionDelegate.qml +++ b/resources/qml/components/ConnectionDelegate.qml @@ -29,7 +29,7 @@ SmoothItemDelegate { onStatusChanged: { if(oldState !== status.status) { if(status.status === "disconnected" && oldState === "connecting") { - statusIndicator.color_override = appTheme.theme.colors.error + statusIndicator.color_override = "error" shortDelay.start() } oldState = status.status @@ -56,47 +56,19 @@ SmoothItemDelegate { height: control.height * 0.4 width: height - Rectangle { + StateIndicator { id: statusIndicator property string color_override: "" anchors.fill: parent - color: color_override === "" ? status.status === "connected" ? appTheme.theme.colors.success:"transparent":color_override - opacity: status.status === "connecting" ? 0:1 - radius: height * 0.5 - border.color: appTheme.theme.colors.line - border.width: 1 + state: color_override === "" ? status.status === "connected" ? "success": status.status === "connecting" ? "working":"unknown":color_override - Behavior on color { - ColorAnimation { - duration: 200 - } - } + indicatorSize: 0.8 - Behavior on opacity { - NumberAnimation { - duration: 800 + radius: border.width * 2 - } - } - } - - ProgressCircle { - id: prog - anchors.fill: parent - opacity: status.status === "connecting" ? 1:0 - lineWidth: 1 - - arcBegin: 0 - arcEnd: 360 * ( status.progress / 100 ) - colorCircle: appTheme.theme.colors.line - onColorCircleChanged: prog.repaint() - onArcEndChanged: prog.repaint() - - Behavior on opacity { - NumberAnimation { - duration: 200 - } - } + backgroundColor: appTheme.theme.colors.background + successColor: appTheme.theme.colors.success + errorColor: appTheme.theme.colors.error } } } diff --git a/resources/qml/components/MainActionButton.qml b/resources/qml/components/MainActionButton.qml index 6d0184f..7ed13f0 100644 --- a/resources/qml/components/MainActionButton.qml +++ b/resources/qml/components/MainActionButton.qml @@ -100,7 +100,7 @@ DelayButton { onPaint: { var progress - var showHoldProgress = ((control.oldSartProgress <= 0 || control.oldStartProgress === 1) && control.progressControlActivated) + var showHoldProgress = ((control.oldStartProgress <= 0 || control.oldStartProgress === 1) && control.progressControlActivated) if(showHoldProgress) progress = control.progress diff --git a/resources/qml/components/StateIndicator.qml b/resources/qml/components/StateIndicator.qml index 0df8dcb..a648d5d 100644 --- a/resources/qml/components/StateIndicator.qml +++ b/resources/qml/components/StateIndicator.qml @@ -8,18 +8,21 @@ Rectangle { property color errorColor: "red" property color unknownColor: "grey" property color backgroundColor: "white" + property color workingColor: "grey" + property double indicatorSize: 1 height: app.height * 0.9 width: height * 0.8 color: backgroundColor - border.width: Math.min(width * 0.1, height * 0.1) + border.width: Math.min(width * 0.1, height * 0.1) * control.indicatorSize border.color: "green" radius: border.width * 0.5 state: "success" + clip: true Rectangle { id: higherRect @@ -28,6 +31,8 @@ Rectangle { property int totalHeight: Math.abs(Math.cos(rotation * Math.PI / 180) * (height)) radius: width * 0.5 + border.width: 0 + border.color: control.workingColor color: "green" @@ -40,11 +45,105 @@ Rectangle { property int totalHeight: Math.abs(Math.cos(rotation * Math.PI / 180) * (height)) radius: width * 0.5 + border.width: 0 + border.color: control.workingColor color: "green" } + ParallelAnimation { + id: workingAnimation + + property int from: Math.min(parent.width * 0.1, parent.height * 0.1) * control.indicatorSize + property int to: Math.max(parent.width * 0.98, parent.height * 0.98) + + property bool shouldBeRunning: false + + running: false + + loops: Animation.Infinite + + onShouldBeRunningChanged: { + pauseAnimation.start() + } + + NumberAnimation { + target: higherRect + + properties: "height" + + from: workingAnimation.from + to: workingAnimation.to + + duration: 1000 + + easing.type: Easing.InQuad + } + + NumberAnimation { + target: higherRect + + properties: "opacity" + + from: 1 + to: 0.5 + + duration: 1000 + + easing.type: Easing.InQuad + } + } + + PauseAnimation { + id: pauseAnimation + duration: 400 + onStopped: { + workingAnimation.running = workingAnimation.shouldBeRunning + } + } + states: [ + State { + name: "working" + PropertyChanges { + target: control + border.color: control.workingColor + } + + PropertyChanges { + target: higherRect + + x: (parent.width - width) / 2 + y: (parent.height - height) / 2 + + width: height + height: Math.min(parent.width * 0.1, parent.height * 0.1) * control.indicatorSize + + color: "transparent" + + border.color: control.workingColor + border.width: control.border.width + } + + PropertyChanges { + target: lowerRect + + x: (parent.width - width) / 2 + y: (parent.height - height) / 2 + + width: height + height: Math.min(parent.width * 0.2, parent.height * 0.2) * control.indicatorSize + + color: control.workingColor + } + + PropertyChanges { + target: workingAnimation + + shouldBeRunning: true + } + }, + State { name: "unknown" PropertyChanges { @@ -59,7 +158,7 @@ Rectangle { y: (parent.height - height) / 2 width: control.border.width - height: Math.min(parent.width * 0.7, parent.height * 0.7) + height: Math.min(parent.width * 0.7, parent.height * 0.7) * control.indicatorSize color: control.unknownColor @@ -73,7 +172,7 @@ Rectangle { y: (parent.height - height) / 2 width: control.border.width - height: Math.min(parent.width * 0.7, parent.height * 0.7) + height: Math.min(parent.width * 0.7, parent.height * 0.7) * control.indicatorSize color: control.unknownColor @@ -82,7 +181,11 @@ Rectangle { }, State { + id: errorState name: "error" + + property int distance: control.height * 0.1 + PropertyChanges { target: control border.color: control.errorColor @@ -92,10 +195,10 @@ Rectangle { target: higherRect x: (parent.width - width) / 2 - y: parent.height * 0.15 + y: control.border.width + parent.height * 0.15 width: control.border.width - height: parent.height * 0.5 + height: parent.height * 0.4 * control.indicatorSize color: control.errorColor } @@ -104,7 +207,7 @@ Rectangle { target: lowerRect x: (parent.width - width) / 2 - y: parent.height - (parent.height * 0.15 + height) + y: higherRect.y + higherRect.height + errorState.distance width: control.border.width * 1.3 height: width @@ -127,7 +230,7 @@ Rectangle { y: (parent.height - height) / 2 width: control.border.width - height: Math.min(parent.width * 0.7, parent.height * 0.7) + height: Math.min(parent.width * 0.7, parent.height * 0.7) * control.indicatorSize color: control.warningColor @@ -141,7 +244,7 @@ Rectangle { y: (parent.height - height) / 2 width: control.border.width - height: Math.min(parent.width * 0.7, parent.height * 0.7) + height: Math.min(parent.width * 0.7, parent.height * 0.7) * control.indicatorSize color: control.warningColor @@ -158,9 +261,9 @@ Rectangle { name: "success" PropertyChanges { - target: control - border.color: control.successColor - } + target: control + border.color: control.successColor + } PropertyChanges { target: higherRect @@ -169,7 +272,7 @@ Rectangle { 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) + height: Math.min(parent.width * 0.6, parent.height * 0.6) * control.indicatorSize rotation: 40 @@ -183,7 +286,7 @@ Rectangle { 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) + height: Math.min(parent.width * 0.3, parent.height * 0.3) * control.indicatorSize rotation: -40 diff --git a/shared-libraries b/shared-libraries index c9bf812..bc7baa3 160000 --- a/shared-libraries +++ b/shared-libraries @@ -1 +1 @@ -Subproject commit c9bf8126157252d6bf84a5216e0bf3f42214157f +Subproject commit bc7baa32bed3b7733b1dbbeb235bcc06fba73b82