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.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
+            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 {
+                            id: stateIndicatorRow
+
+                            property int delegateWidth: width / stateIndicatorRepeater.model - (spacing * (stateIndicatorRepeater.model - 1) / stateIndicatorRepeater.model)
+                            property int delegateHeight: height
+
+                            width: parent.width
+                            height: parent.height * 0.9
+
+                            spacing: width * 0.1
+
+                            Repeater {
+                                id: stateIndicatorRepeater
+
+                                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
 
-                            spacing: centerExtraContentTopStack.anchors.margins
+                                            onClicked: {
-
+                                                var disabled = timerStatusColumn.thisTimer["state"] !== ScStwTimer.DISABLED
-                            StateIndicator {
+                                                console.log("setting timer to disabled: " + disabled)
-                                width: parent.width * 0.5 - parent.spacing * 0.5
+                                                speedBackend.race.setTimerDisabled(timerStatusColumn.thisTimer["id"], disabled)
-                                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 {
+                        Label {
-                                width: parent.width * 0.5 - parent.spacing * 0.5
+                            width: parent.width
-                                height: parent.height
+                            height: parent.height * 0.1
 
-                                backgroundColor: appTheme.theme.colors.background
+                            font.pixelSize: height * 0.6
-                                successColor: appTheme.theme.colors.success
+                            fontSizeMode: Text.Fit
+                            minimumPointSize: 1
+                            horizontalAlignment: Text.AlignHCenter
+                            verticalAlignment: Text.AlignVCenter
 
-                                state: speedBackend.race.timers[1]["readyState"] === ScStwTimer.IsReady ? "success":"warn"
+                            color: appTheme.theme.colors.text
-                            }
+
+                            text: "Tap on a lane to disable it"
                         }
+
                     }
                 }
 

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

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
 

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
+            state: color_override === "" ? status.status === "connected" ? "success": status.status === "connecting" ? "working":"unknown":color_override
-            opacity: status.status === "connecting" ? 0:1
-            radius: height * 0.5
-            border.color: appTheme.theme.colors.line
-            border.width: 1
 
-            Behavior on color {
+            indicatorSize: 0.8
-                ColorAnimation {
-                    duration: 200
-                }
-            }
 
-            Behavior on opacity {
+            radius: border.width * 2
-                NumberAnimation {
-                    duration: 800
 
-                }
+            backgroundColor: appTheme.theme.colors.background
-            }
+            successColor: appTheme.theme.colors.success
-        }
+            errorColor: appTheme.theme.colors.error
-
-        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
-                }
-            }
         }
     }
 }

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

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
 
@@ -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
 

shared-libraries

@@ -1 +1 @@
-Subproject commit c9bf8126157252d6bf84a5216e0bf3f42214157f
+Subproject commit bc7baa32bed3b7733b1dbbeb235bcc06fba73b82