added battery indicators

resources/qml/MainPage/CenterContent.qml

@@ -26,15 +26,15 @@ Item {
         width: parent.width
         height: parent.height
 
-        columns: app.landscape() ? 2:1
+        columns: app.landscape() ? 3:1
-        rows: app.landscape() ? 1:2
+        rows: app.landscape() ? 1:3
 
         Item {
             id: centerExtraContentTop
 
             property double size
 
-            Layout.preferredHeight: app.landscape() ? centerLayout.height * 0.8:Math.min(centerLayout.width * size, centerLayout.height * size)
+            Layout.preferredHeight: app.landscape() ? centerLayout.height * 0.6: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
 
@@ -371,73 +371,4 @@ Item {
         }
 
     ]
-
-    /*
-
-
-    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
-    }*/
-
 }

resources/qml/MainPage/TopToolBar.qml

@@ -148,7 +148,7 @@ ToolBar {
 
                     property string thisLetter: modelData
                     property var thisExtensions: speedBackend.scStwClient.extensions[modelData]
-                    property bool allExtensionConnected: areAllExtensionConnected(thisExtensions)
+                    property int thisLaneState: getLaneState(thisExtensions)
 
                     width: height
                     height: parent.height
@@ -156,21 +156,23 @@ ToolBar {
                     radius: width * 0.1
 
                     color: appTheme.theme.colors.background
-                    border.color: allExtensionConnected ? appTheme.theme.colors.success:appTheme.theme.colors.error
+                    border.color: [appTheme.theme.colors.success, appTheme.theme.colors.warning, appTheme.theme.colors.error][thisLaneState]
                     border.width: width * 0.08
 
                     onThisExtensionsChanged: {
-                        allExtensionConnected = areAllExtensionConnected(thisExtensions)
+                        thisLaneState = getLaneState(thisExtensions)
                     }
 
-                    function areAllExtensionConnected(extensions) {
+                    function getLaneState(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)
+                            if(extensions[i]["state"] !== ScStw.ExtensionConnected || extensions[i]["batteryState"] === ScStw.BatteryCritical)
-                                return false
+                                return 2
+                            if(extensions[i]["batteryState"] === ScStw.BatteryWarning)
+                                return 1
                         }
 
-                        return true
+                        return 0
                     }
 
                     Behavior on border.color {

resources/qml/SettingsDialog/SettingsExtensionsPage.qml

@@ -93,6 +93,9 @@ ListView {
             delegate: ConnectionDelegate {
                 property var thisExtension: speedBackend.scStwClient.extensions[laneContainerRect.thisLane][index]
                 property var stateTranslations: ["disconnected", "connecting", "connecting", "connected"]
+                property var batteryStateStrings: ["critical", "warning", "fine", "charging"]
+
+                batteryState: thisExtension["batteryState"] === -1 ? "unknown":batteryStateStrings[thisExtension["batteryState"]]
 
                 height: extensionsList.height / extensionsList.model
 

resources/qml/components/BatteryIndicator.qml

@@ -0,0 +1,194 @@
+import QtQuick 2.0
+
+Rectangle {
+    id: control
+
+    property color chargingColor: "green"
+    property color fineColor: "green"
+    property color warningColor: "orange"
+    property color criticalColor: "red"
+    property color unknownColor: "grey"
+    property color backgroundColor: "white"
+    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) * control.indicatorSize
+    border.color: "green"
+    radius: border.width
+
+    state: "charging"
+
+    Rectangle {
+        id: outerRect
+
+        anchors {
+            right: parent.left
+            rightMargin: parent.border.width * 0.25
+            verticalCenter: parent.verticalCenter
+        }
+
+        width: parent.border.width
+        height: parent.height * 0.5
+        radius: width * 0.5
+
+        color: parent.border.color
+    }
+
+    Rectangle {
+        id: innerRect
+
+        property double amountFilled: 1
+
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            right: parent.right
+
+            margins: parent.border.width * 1.5
+        }
+
+        width: (parent.width - parent.border.width * 3) * amountFilled
+
+        radius: control.radius * 0.5
+
+        border.width: 0
+
+        color: control.border.color
+
+        Rectangle {
+            id: chargingRect
+
+            property double amountFilled: 0
+
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+                right: parent.right
+            }
+
+            width: parent.width * amountFilled
+
+            radius: innerRect.radius
+
+            color: Qt.darker(innerRect.color, 1.5)
+        }
+    }
+
+
+    ParallelAnimation {
+        id: chargingAnimation
+
+        running: false
+
+        loops: Animation.Infinite
+        alwaysRunToEnd: true
+
+        NumberAnimation {
+            target: chargingRect
+
+            properties: "amountFilled"
+
+            from: 0
+            to: 1
+
+            duration: 3000
+
+            easing.type: Easing.OutQuad
+        }
+
+        NumberAnimation {
+            target: chargingRect
+
+            properties: "opacity"
+
+            from: 1
+            to: 0
+
+            duration: 3000
+
+            easing.type: Easing.Linear
+        }
+    }
+
+    states: [
+        State {
+            name: "charging"
+            PropertyChanges {
+                target: control
+                border.color: control.chargingColor
+            }
+
+            PropertyChanges {
+                target: innerRect
+                amountFilled: 1
+            }
+
+            PropertyChanges {
+                target: chargingAnimation
+                running: true
+            }
+        },
+
+        State {
+            name: "fine"
+            PropertyChanges {
+                target: control
+                border.color: control.fineColor
+            }
+
+            PropertyChanges {
+                target: innerRect
+                amountFilled: 1
+            }
+        },
+
+        State {
+            name: "warning"
+            PropertyChanges {
+                target: control
+                border.color: control.warningColor
+            }
+
+            PropertyChanges {
+                target: innerRect
+                amountFilled: 0.3
+            }
+        },
+
+        State {
+            name: "critical"
+            PropertyChanges {
+                target: control
+                border.color: control.criticalColor
+            }
+
+            PropertyChanges {
+                target: innerRect
+                amountFilled: 0.1
+            }
+        }
+
+    ]
+
+    transitions: [
+        Transition {
+            NumberAnimation {
+                properties: "amountFilled"
+                duration: 400
+                easing.type: Easing.InOutQuad
+            }
+
+
+            ColorAnimation {
+                properties: "color,border.color"
+                duration: 400
+                easing.type: Easing.InOutQuad
+            }
+        }
+    ]
+
+}

resources/qml/components/ConnectionDelegate.qml

@@ -8,6 +8,7 @@ SmoothItemDelegate {
     property string oldState: ""
     property var connect: null
     property var disconnect
+    property string batteryState: "unknown"
 
     property string type
 
@@ -46,20 +47,47 @@ SmoothItemDelegate {
         }
     }
 
-    Item {
+    Row {
-        id: statusItem
         anchors {
             right: parent.right
             rightMargin: ( height / control.height / 2 ) * height
             verticalCenter: parent.verticalCenter
         }
+
+        spacing: height * 0.4
+
+        BatteryIndicator {
+            id: batteryIndicator
+
             height: control.height * 0.4
             width: height
 
+            opacity: control.batteryState === "unknown" ? 0:1
+
+            backgroundColor: "transparent"
+            chargingColor: fineColor
+            fineColor: appTheme.theme.colors.success
+            warningColor: appTheme.theme.colors.warning
+            criticalColor: appTheme.theme.colors.error
+
+            state: control.batteryState
+
+            indicatorSize: 0.8
+
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: 200
+                }
+            }
+        }
+
         StateIndicator {
             id: statusIndicator
             property string color_override: ""
-            anchors.fill: parent
+
+            height: control.height * 0.4
+            width: height
+
             state: color_override === "" ? status.status === "connected" ? "success": status.status === "connecting" ? "working":"unknown":color_override
 
             indicatorSize: 0.8
@@ -71,4 +99,6 @@ SmoothItemDelegate {
             errorColor: appTheme.theme.colors.error
         }
     }
+
+
 }

resources/qml/components/StateIndicator.qml

@@ -54,8 +54,8 @@ Rectangle {
     ParallelAnimation {
         id: workingAnimation
 
-        property int from: Math.min(parent.width * 0.1, parent.height * 0.1) * control.indicatorSize
+        property int from: lowerRect.height
-        property int to: Math.max(parent.width * 0.98, parent.height * 0.98)
+        property int to: Math.max(control.width * 1.1, control.height * 1.1)
 
         property bool shouldBeRunning: false
 
@@ -86,7 +86,7 @@ Rectangle {
             properties: "opacity"
 
             from: 1
-            to: 0.5
+            to: 0.3
 
             duration: 1000
 
@@ -99,6 +99,7 @@ Rectangle {
         duration: 400
         onStopped: {
             workingAnimation.running = workingAnimation.shouldBeRunning
+            higherRect.opacity = 1
         }
     }
 
@@ -255,8 +256,8 @@ Rectangle {
         State {
             id: tickState
 
-            property int bottomX: (control.width) / 2 - (higherRect.totalWidth - (lowerRect.totalWidth + higherRect.totalWidth) / 2 )
+            property int bottomX: ((control.width) / 2 - (higherRect.totalWidth - (lowerRect.totalWidth + higherRect.totalWidth) / 2 )) * 1.055
-            property int bottomY: (control.height + higherRect.totalHeight) / 2 - lowerRect.radius
+            property int bottomY: ((control.height + higherRect.totalHeight) / 2 - lowerRect.radius) * 1.05
 
             name: "success"
 

resources/qml/qml.qrc

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

shared-libraries

@@ -1 +1 @@
-Subproject commit bc7baa32bed3b7733b1dbbeb235bcc06fba73b82
+Subproject commit 10645e9eb80f64c259d4c007dbb13319fec05887