continued working on new layout

android/src/de/itsblue/scstw/MainActivity.java

@@ -16,11 +16,12 @@
 */
 
 package de.itsblue.scstw;
+
 public class MainActivity extends org.qtproject.qt5.android.bindings.QtActivity {
         @Override
         public void onCreate(android.os.Bundle savedInstanceState){
                 super.onCreate(savedInstanceState);
                 this.getWindow().addFlags(android.view.WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
-                //this.setVolumeControlStream(android.view.AudioManager.STREAM_MUSIC);
+                this.setVolumeControlStream(android.media.AudioManager.STREAM_MUSIC);
         }
 }

resources/qml/MainPage/BottomToolBar.qml

@@ -1,112 +1,99 @@
 import QtQuick 2.0
 import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.0
 
 import "../components"
 import "../components/layout"
 
+import de.itsblue.ScStw 2.0
 import de.itsblue.ScStw.Styling 2.0
 import de.itsblue.ScStw.Styling.Components 1.0
 
 ToolBar {
     id: control
 
-    /*
+    property bool connectedToBase: speedBackend.scStwClient.state === ScStwClient.CONNECTED
-        Grid {
-            id: loweMenuGrd
 
-            property int spacingMultiplier: 200 * (getActiveChildren() - 1)
+    GridLayout {
-            property int activeChildren: getActiveChildren()
+        id: bottomContentLayout
 
-            function getActiveChildren() {
+        anchors {
-                var childrenCount = 0
+            left: parent.left
-                for (var i = 0; i < children.length; i++)
+            leftMargin: app.landscape() ? 0:parent.width * 0.1
-                {
+            right: parent.right
-                    if(children[i].enabled){
+            rightMargin: app.landscape() ? 0:parent.width * 0.1
-                        childrenCount ++
+            top: parent.top
+            topMargin: app.landscape() ? parent.height * 0.1:0
+            bottom: parent.bottom
+            bottomMargin: app.landscape() ? parent.height * 0.1:0
+        }
+
+        columns: app.landscape() ? 1:2
+        rows: app.landscape() ? 2:1
+
+        FancyButton {
+            id: settingsButt
+
+            Layout.alignment: Layout.Center
+            Layout.preferredHeight: app.landscape() ? width:control.height * 0.8
+            Layout.preferredWidth: app.landscape() ? control.width * 0.8:height
+
+            onClicked: {
+                settingsDialog.open()
+            }
+
+            image: appTheme.theme.images.settIcon
+
+            backgroundColor: parent.pressed ? appTheme.theme.colors.buttonPressed:appTheme.theme.colors.button
+
+        }
+
+        FancyButton {
+            id: profilesButt
+
+            property double size
+
+            state: control.connectedToBase ? "visible":"hidden"
+            visible: size > 0
+
+            Layout.alignment: Layout.Center
+            Layout.preferredWidth: app.landscape() ? control.width * size:control.height * size
+            Layout.preferredHeight: width
+
+            image: appTheme.theme.images.profilesIcon
+
+            backgroundColor: parent.pressed ? appTheme.theme.colors.buttonPressed:appTheme.theme.colors.button
+
+            onClicked: {
+                profilesDialog.open()
+            }
+
+            states: [
+                State {
+                    name: "hidden"
+                    PropertyChanges {
+                        target: profilesButt
+                        size: 0
+                    }
+                },
+                State {
+                    name: "visible"
+                    PropertyChanges {
+                        target: profilesButt
+                        size: 0.8
                     }
                 }
+            ]
 
-                return childrenCount
+            transitions: [
-            }
+                Transition {
-
+                    NumberAnimation {
-            anchors.centerIn: parent
+                        duration: 200
-
+                        properties: "size"
-            height: childrenRect.height
-            width: childrenRect.width
-
-            rows: app.landscape() ? activeChildren:1
-            columns: app.landscape() ? 1:activeChildren
-
-            spacing: 0// app.landscape() ? parent.height * spacingMultiplier * 0.001:parent.width * spacingMultiplier * 0.001
-
-            Behavior on spacingMultiplier {
-                NumberAnimation {
-                    duration: 200
-                }
-            }
-
-            FancyButton {
-                id: settingsButt
-
-                height: app.landscape() ? menu_container.width * 0.7:menu_container.height * 0.7
-                width: height
-
-                onClicked: {
-                    settingsDialog.open()
-                }
-
-                image: appTheme.theme.images.settIcon
-
-                backgroundColor: parent.pressed ? appTheme.theme.colors.buttonPressed:appTheme.theme.colors.button
-
-            }
-
-            Item {
-                height: profilesButt.height
-                width: profilesButt.height
-            }
-
-            FancyButton {
-                id: profilesButt
-
-                enabled: height > 0
-
-                state: speedBackend.scStwClient.state === ScStwClient.CONNECTED ? "visible":"hidden"
-                width:  height
-
-                onClicked: {
-                    profilesDialog.open()
-                }
-
-                image: appTheme.theme.images.profilesIcon
-
-                backgroundColor: parent.pressed ? appTheme.theme.colors.buttonPressed:appTheme.theme.colors.button
-
-                states: [
-                    State {
-                        name: "hidden"
-                        PropertyChanges {
-                            target: profilesButt
-                            height: 0
-                        }
-                    },
-                    State {
-                        name: "visible"
-                        PropertyChanges {
-                            target: profilesButt
-                            height: app.landscape() ? menu_container.width * 0.7:menu_container.height * 0.7
-                        }
                     }
-                ]
+                }
-
+            ]
-                transitions: [
+        }
-                    Transition {
+    }
-                        NumberAnimation {
-                            properties: "height"
-                        }
-                    }
-                ]
-            }
-        }*/
 }
 

resources/qml/MainPage/CenterContent.qml

@@ -20,7 +20,12 @@ Item {
     GridLayout {
         id: centerLayout
 
-        anchors.centerIn: parent
+        //anchors.centerIn: parent
+
+        anchors {
+            right: parent.right
+            bottom: parent.bottom
+        }
 
         width: parent.width
         height: parent.height
@@ -29,24 +34,39 @@ Item {
         rows: app.landscape() ? 1:2
 
         Item {
-
             Rectangle {
                 anchors.fill: parent
                 color: "green"
             }
         }
 
-        FancyButton {
+        MainActionButton {
             id: mainActionButton
 
+
+            property ScStwSetting setting: speedBackend.settings.getSetting(ScStwSettings.CompetitionModeSetting, ScStwSettings.KeyLevel)
             property double size
+            startProgress: speedBackend.race.nextStartActionDetails[ScStwRace.NextStartActionDelayProgress]
+
+            /*Connections {
+                target: mainActionButton.setting
+
+                onValueChanged: {
+                    console.log("comp mode is " + mainActionButton.setting.value)
+                }
+            }*/
+
 
             Layout.alignment: Layout.Center
 
-            Layout.preferredHeight: app.landscape() ? width:Math.min(control.width * size, control.height * size)
+            Layout.preferredHeight: app.landscape() ? width:Math.min(centerLayout.width * size, centerLayout.height * size)
-            Layout.preferredWidth: app.landscape() ? Math.min(control.width * size, control.height * size):height
+            Layout.preferredWidth: app.landscape() ? Math.min(centerLayout.width * size, centerLayout.height * size):height
+
 
             onClicked: {
+                if(progressControlActivated && progress < 1.0)
+                    return
+
                 var ret;
 
                 switch(speedBackend.race.state) {
@@ -62,29 +82,24 @@ Item {
                     ret = speedBackend.race.stop()
                     break;
                 case ScStwRace.STOPPED:
+                case ScStwRace.INCIDENT:
                     ret = speedBackend.race.reset()
                     break;
                 }
 
                 if(ret !== 200)
                     console.log("Error executing main button action: " + ret)
+
+                progress = 0
             }
 
-            /*Behavior on Layout.preferredWidth {
+            Behavior on size {
-                enabled: !app.landscape()
                 NumberAnimation {
-                    duration: 3000
+                    duration: 800
+                    easing.type: Easing.InOutQuart
                 }
             }
-
-            Behavior on Layout.preferredHeight {
-                enabled:  app.landscape()
-                NumberAnimation {
-                    duration: 3000
-                }
-            }*/
         }
-
     }
 
     states: [
@@ -92,17 +107,15 @@ Item {
             name: ScStwRace.IDLE
             PropertyChanges {
                 target: mainActionButton
-                size: 0.8
+                size: 0.9
-                Layout.preferredHeight: app.landscape() ? control.height * 0.8 : Math.min(control.width * 0.8, control.height * 0.8)
-                Layout.preferredWidth: app.landscape() ? Math.min(control.width * 0.8, control.height * 0.8) : control.width * 0.8
                 text: "start"
             }
 
             PropertyChanges {
                 target:  centerLayout
 
-                anchors.verticalCenterOffset: 0
+                height: app.landscape() ? control.height : Math.max(control.height, app.height * 0.4)
-                anchors.horizontalCenterOffset: 0
+                width: app.landscape() ? Math.max(control.width, app.width * 0.4) : control.width
             }
         },
 
@@ -110,7 +123,7 @@ Item {
             name: ScStwRace.PREPAIRING
             PropertyChanges {
                 target: mainActionButton
-                size: 0.8
+                size: 0.9
                 text: "cancel"
             }
         },
@@ -119,7 +132,7 @@ Item {
             name: ScStwRace.WAITING
             PropertyChanges {
                 target: mainActionButton
-                size: 0.8
+                size: 0.9
                 text: "cancel"
             }
         },
@@ -128,20 +141,28 @@ Item {
             name: ScStwRace.STARTING
             PropertyChanges {
                 target: mainActionButton
-                size: 0.8
+                size: 0.9
                 text: "cancel"
             }
         },
 
+        State {
+            name: ScStwRace.RUNNING
+            PropertyChanges {
+                target: mainActionButton
+                size: 0.9
+                text: "stop"
+                progressControlActivated: speedBackend.scStwClient.state === ScStwClient.CONNECTED // TODO && mainActionButton.setting.value === true
+            }
+        },
+
         State {
             name: ScStwRace.STOPPED
 
             PropertyChanges {
                 target: mainActionButton
 
-                size: 0.8
+                size: 0.5
-                Layout.preferredHeight: app.landscape() ? control.height * 0.8 : Math.min(control.width * 0.8, control.height * 0.8)
-                Layout.preferredWidth: app.landscape() ? Math.min(control.width * 0.8, control.height * 0.8) : control.width * 0.8
 
                 text: "reset"
             }
@@ -149,129 +170,34 @@ Item {
             PropertyChanges {
                 target:  centerLayout
 
-                //anchors.verticalCenterOffset: app.landscape() ? 0:-centerLayout.height * 0.5
+                height: app.landscape() ? control.height : Math.max(control.height, app.height * 0.4)
-                //anchors.horizontalCenterOffset: app.landscape() ? -centerLayout.width * 0.5:0
+                width: app.landscape() ? Math.max(control.width, app.width * 0.4) : control.width
+            }
+        },
+
+        State {
+            name: ScStwRace.INCIDENT
+
+            PropertyChanges {
+                target: mainActionButton
+
+                size: 0.5
+
+                text: "reset"
+            }
+
+            PropertyChanges {
+                target:  centerLayout
+
+                height: app.landscape() ? control.height : Math.max(control.height, app.height * 0.4)
+                width: app.landscape() ? Math.max(control.width, app.width * 0.4) : control.width
             }
         }
 
     ]
 
     /*
-    DelayButton {
-        id : startButt
 
-        text: "start"
-        property int size: app.landscape() ? parent.width * 0.5:parent.height * 0.5
-        property color backgroundColor: appTheme.theme.colors.button
-        property bool progressControlActivated: speedBackend.scStwClient.state === ScStwClient.CONNECTED && app.state === "RUNNING"
-        delay: progressControlActivated ? 2000:0
-
-        anchors {
-            bottom: parent.bottom
-            bottomMargin: app.height * 0.5 - height * 0.5
-            right: parent.right
-            rightMargin: app.width * 0.5 - width * 0.5
-        }
-
-        height: app.landscape() ? Math.min(size, parent.height * 0.9) : Math.min(size, parent.width * 0.9)
-        width: height
-
-        Text {
-            id: startButt_text
-            text: startButt.text
-            anchors.centerIn: parent
-            font.pixelSize: parent.height * 0.16
-            font.family: "Helvetica"
-            color: enabled ? appTheme.theme.colors.text:appTheme.theme.colors.disabledText
-        }
-
-        Behavior on text {
-            //animate a text change
-            enabled: true
-            FadeAnimation {
-                target: startButt_text
-            }
-        }
-
-        onClicked: {
-            if(startButt.progressControlActivated && progress < 1.0)
-                return
-            startButt.progress = 0
-            switch(app.state) {
-            case "IDLE":
-                app.start()
-                break
-            case "RUNNING":
-                app.stop()
-                break
-            case "STOPPED":
-            case "INCIDENT":
-                app.reset()
-                break
-            }
-        }
-
-        contentItem: Text {
-        }
-
-        background: Item {
-            RectangularGlow {
-                glowRadius: 0.001
-                spread: 0.2
-                color: "black"
-
-                visible: true
-
-                cornerRadius: startButtBackground.radius
-                anchors.fill: startButtBackground
-                scale: 0.75
-                opacity: Math.pow( startButt.opacity, 100 )
-            }
-
-            Rectangle {
-                id: startButtBackground
-                implicitWidth: 100
-                implicitHeight: 100
-                color: startButt.down ? Qt.darker(startButt.backgroundColor, 1.2) : startButt.backgroundColor
-                radius: size / 2
-
-                readonly property real size: Math.min(startButt.width, startButt.height)
-                width: size
-                height: size
-                anchors.fill: parent
-
-                Behavior on color {
-                    ColorAnimation {
-                        duration: 200
-                    }
-                }
-
-                Canvas {
-                    id: canvas
-                    anchors.fill: parent
-
-                    visible: startButt.progressControlActivated
-
-                    Connections {
-                        target: startButt
-                        onProgressChanged: canvas.requestPaint()
-                    }
-
-                    onPaint: {
-                        var ctx = getContext("2d")
-                        ctx.clearRect(0, 0, width, height)
-                        ctx.strokeStyle = "grey"
-                        ctx.lineWidth = parent.width * 0.02
-                        ctx.beginPath()
-                        var startAngle = Math.PI * 0.5
-                        var endAngle = startAngle + startButt.progress * Math.PI * 2
-                        ctx.arc(width / 2, height / 2, width / 2 - ctx.lineWidth / 2 - 2, startAngle, endAngle)
-                        ctx.stroke()
-                    }
-                }
-            }
-        }
-    }
 
     ProgressCircle {
         id: prog

resources/qml/MainPage/TopToolBar.qml

@@ -1,135 +1,86 @@
-import QtQuick 2.0
+import QtQuick 2.9
 import QtQuick.Controls 2.0
 
 import "../components"
 import "../components/layout"
 
+import de.itsblue.ScStw 2.0
 import de.itsblue.ScStw.Styling 2.0
 import de.itsblue.ScStw.Styling.Components 1.0
 
 ToolBar {
     id: control
 
+    property string statusText
 
+    Loader {
+        id: topContentLoader
 
-    /*states: [
+        anchors.fill: parent
-        State {
-            name: ScStwRace.IDLE
-            PropertyChanges {
-                target: mainActionButton
-                size: 0.8
-                text: "start"
-            }
 
-            PropertyChanges {
+        Behavior on state {
-                target:  centerLayout
+            FadeAnimation {
-
+                target: topContentLoader
-                anchors.verticalCenterOffset: 0
+                fadeDuration: 300
-                anchors.horizontalCenterOffset: 0
-            }
-        },
-
-        State {
-            name: ScStwRace.PREPAIRING
-            PropertyChanges {
-                target: mainActionButton
-                size: 0.8
-                text: "cancel"
-            }
-        },
-
-        State {
-            name: ScStwRace.WAITING
-            PropertyChanges {
-                target: mainActionButton
-                size: 0.8
-                text: "cancel"
-            }
-        },
-
-        State {
-            name: ScStwRace.STARTING
-            PropertyChanges {
-                target: mainActionButton
-                size: 0.8
-                text: "cancel"
-            }
-        },
-
-        State {
-            name: ScStwRace.STOPPED
-
-            PropertyChanges {
-                target: mainActionButton
-                size: 0.75
-                text: "reset"
-            }
-
-            PropertyChanges {
-                target:  centerLayout
-
-                anchors.verticalCenterOffset: app.landscape() ? 0:-centerLayout.height * 0.5
-                anchors.horizontalCenterOffset: app.landscape() ? -centerLayout.width * 0.5:0
             }
         }
 
-    ]
+        Component {
-/*
+            id: raceStatusLabelComponent
-        Text {
+            Text {
-            id: raceStateLabel
+                id: raceStatusLabel
 
-            anchors.centerIn: parent
+                padding: width * 0.06
 
-            opacity: ( speedBackend.race.state < ScStwRace.RUNNING ) ? 1:0
+                text: control.statusText
 
-            width: parent.width * 0.7
+                color: appTheme.theme.colors.text
-            height: parent.height * 0.7
 
-            text: ""
+                fontSizeMode: Text.Fit
 
-            color: appTheme.theme.colors.text
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignHCenter
 
-            fontSizeMode: Text.Fit
+                font.pixelSize: height
 
-            verticalAlignment: Text.AlignVCenter
+                minimumPixelSize: 1
-            horizontalAlignment: Text.AlignHCenter
 
-            font.pixelSize: app.landscape() ? app.width * 0.15 : app.height * 0.4
+                Behavior on text {
-
+                    FadeAnimation {
-            minimumPixelSize: 1
+                        target: raceStatusLabel
-
+                        fadeDuration: 100
-            Behavior on text {
+                    }
-                FadeAnimation{
-                    target: topLa
-                    fadeDuration: 100
                 }
             }
         }
 
-     TimerColumn {
+        Component {
-         id: timerColumn
+            id: timerColumnComponent
+            TimerColumn {
+                id: timerColumn
 
-            anchors.fill: parent
+                anchors.fill: parent
-            anchors.topMargin: app.landscape() ? 0:parent.height * 0.1
+                anchors.topMargin: app.landscape() ? 0:parent.height * 0.1
-            anchors.bottomMargin: app.landscape() ? 0:parent.height * 0.1
+                anchors.bottomMargin: app.landscape() ? 0:parent.height * 0.1
 
-            timers: speedBackend.race.timers
+                timers: speedBackend.race.timers
-            colors: appTheme.theme.colors
+                colors: appTheme.theme.colors
-            fontName: appTheme.theme.fonts.timers
+                fontName: appTheme.theme.fonts.timers
-            showTimerLetter: speedBackend.race.state === ScStwRace.STOPPED
+                showTimerLetter: true
 
 
-            // make text smaller for much better performance
+                // make text smaller for much better performance
-            textScale: app.landscape() ? 0.7 : 0.5
+                textScale: app.landscape() ? 0.7 : 0.5
 
-            opacity: ( speedBackend.race.state < ScStwRace.RUNNING ) ? 0:1
+                Behavior on opacity {
-
+                    NumberAnimation {
-            Behavior on opacity {
+                        duration: 200
-                NumberAnimation {
+                    }
-                    duration: 200
                 }
             }
         }
+    }
+
 
     Item {
         id: connectionIconContainer
@@ -139,8 +90,8 @@ ToolBar {
             left: parent.left
             right: parent.right
             bottom: parent.bottom
-            bottomMargin: app.landscape() ? 0:parent.height * 0.8
+            bottomMargin: app.landscape() ? parent.height * 0.8:0
-            rightMargin: app.landscape() ? parent.width * 0.8:0
+            rightMargin: app.landscape() ? 0:parent.width * 0.8
         }
 
         opacity: speedBackend.race.state === ScStwRace.IDLE ? 1:0
@@ -164,14 +115,15 @@ ToolBar {
             status: clientStateToString(speedBackend.scStwClient.state)
 
             source: appTheme.theme.images.baseStationIcon
+
             anchors {
                 top: parent.top
                 topMargin: 10
                 left: parent.left
                 leftMargin: 10
             }
-            scale: 1.3
+
-            height: !app.landscape()? parent.height*0.3:parent.width*0.3
+            height: !app.landscape()? parent.height*0.4:parent.width*0.4
         }
 
         Row {
@@ -199,18 +151,24 @@ ToolBar {
 
                     radius: width * 0.1
 
-                    color: appTheme.theme.colors.success // TODO
+                    color: getStatusColor(speedBackend.scStwClient.extensions[modelData]) // TODO
 
-                    Component.onCompleted: {
-                        refreshConnectionState()
-                    }
 
-                    function refreshConnectionState() {
+                    function getStatusColor(extensions) {
-                        var extensions = speedBackend.scStwClient.extensions[modelData]
 
                         for(var i = 0; i < extensions.length; i++) {
                             console.log(JSON.stringify(extensions[i]))
-                            // TODO!!
+                            if(extensions[i]["state"] !== ScStw.ExtensionConnected || extensions[i]["batteryState"] !== ScStw.BatteryFine)
+                                return appTheme.theme.colors.error
+                        }
+
+                        return appTheme.theme.colors.success
+                    }
+
+                    Behavior on color {
+
+                        ColorAnimation {
+                            duration: 200
                         }
                     }
 
@@ -238,18 +196,97 @@ ToolBar {
                 duration: 200
             }
         }
-
     }
 
-    Rectangle {
+    states: [
-        id: upper_line
+        State {
-        width: app.landscape() ? 1:parent.width
+            name: ScStwRace.IDLE
-        height: app.landscape() ? parent.height:1
+
-        color: appTheme.theme.colors.line
+            PropertyChanges {
-        anchors.left: app.landscape() ? topContainerItm.right:parent.left
+                target: control
-        anchors.top: app.landscape() ? parent.top:topContainerItm.bottom
+                statusText: "Press start"
-        anchors.bottom: app.landscape() ? parent.bottom:undefined
+            }
-        visible: false
+
-    }
+            PropertyChanges {
-*/
+                target: topContentLoader
+                sourceComponent: raceStatusLabelComponent
+            }
+        },
+
+        State {
+            name: ScStwRace.PREPAIRING
+
+            PropertyChanges {
+                target: control
+                statusText: "At your\nmarks"
+            }
+
+            PropertyChanges {
+                target: topContentLoader
+                sourceComponent: raceStatusLabelComponent
+            }
+        },
+
+        State {
+            name: ScStwRace.WAITING
+
+            PropertyChanges {
+                target: control
+                statusText: "Ready"
+            }
+
+            PropertyChanges {
+                target: topContentLoader
+                sourceComponent: raceStatusLabelComponent
+            }
+        },
+
+        State {
+            name: ScStwRace.STARTING
+
+            PropertyChanges {
+                target: control
+                statusText: "Starting"
+            }
+
+            PropertyChanges {
+                target: topContentLoader
+                sourceComponent: raceStatusLabelComponent
+            }
+        },
+
+        State {
+            name: ScStwRace.RUNNING
+
+            PropertyChanges {
+                target: topContentLoader
+                sourceComponent: timerColumnComponent
+            }
+        },
+
+        State {
+            name: ScStwRace.STOPPED
+
+            PropertyChanges {
+                target: topContentLoader
+                sourceComponent: timerColumnComponent
+            }
+        },
+
+        State {
+            name: ScStwRace.INCIDENT
+
+            PropertyChanges {
+                target: control
+                statusText: "Technical incident!"
+            }
+
+            PropertyChanges {
+                target: topContentLoader
+                sourceComponent: raceStatusLabelComponent
+            }
+        }
+
+    ]
+
 }

resources/qml/components/MainActionButton.qml

@@ -0,0 +1,106 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.9
+import QtGraphicalEffects 1.0
+
+import de.itsblue.ScStw 2.0
+import de.itsblue.ScStw.Styling 2.0
+import de.itsblue.ScStw.Styling.Components 1.0
+
+DelayButton {
+    id : control
+
+    text: "start"
+    property color backgroundColor: appTheme.theme.colors.button
+    property bool progressControlActivated: false
+    property double startProgress
+    delay: progressControlActivated ? 2000:0
+
+    onStartProgressChanged: {
+        console.log("start progress: " + startProgress)
+    }
+
+    Text {
+        id: labelText
+        text: control.text
+        anchors.centerIn: parent
+        font.pixelSize: parent.height * 0.16
+        font.family: "Helvetica"
+        color: enabled ? appTheme.theme.colors.text:appTheme.theme.colors.disabledText
+    }
+
+    Behavior on text {
+        //animate a text change
+        enabled: true
+        FadeAnimation {
+            target: labelText
+        }
+    }
+
+    contentItem: Text {
+    }
+
+    background: Item {
+        RectangularGlow {
+            glowRadius: 0.001
+            spread: 0.2
+            color: "black"
+
+            visible: true
+
+            cornerRadius: background.radius
+            anchors.fill: background
+            scale: 0.75
+            opacity: Math.pow( control.opacity, 100 )
+        }
+
+        Rectangle {
+            id: background
+            implicitWidth: 100
+            implicitHeight: 100
+            color: control.down ? Qt.darker(control.backgroundColor, 1.2) : control.backgroundColor
+            radius: size / 2
+
+            readonly property real size: Math.min(control.width, control.height)
+            width: size
+            height: size
+            anchors.fill: parent
+
+            Behavior on color {
+                ColorAnimation {
+                    duration: 200
+                }
+            }
+
+            Canvas {
+                id: canvas
+                anchors.fill: parent
+
+                Connections {
+                    target: control
+                    onProgressChanged: canvas.requestPaint()
+                    onStartProgressChanged: canvas.requestPaint()
+                }
+
+                onPaint: {
+                    var progress
+                    var showHoldProgress = (control.down && control.progressControlActivated)
+                    if(showHoldProgress)
+                        progress = control.progress
+                    else
+                        progress = control.startProgress <= 0 ? 0:1-control.startProgress
+
+
+                    var ctx = getContext("2d")
+                    ctx.clearRect(0, 0, width, height)
+                    ctx.strokeStyle = showHoldProgress ? appTheme.theme.colors.error:"grey"
+                    ctx.lineWidth = parent.width * 0.02
+                    ctx.beginPath()
+                    var startAngle = Math.PI * 1.5
+                    var endAngle = startAngle + progress * Math.PI * 2
+                    ctx.arc(width / 2, height / 2, width / 2 - ctx.lineWidth / 2 - 2, startAngle, endAngle)
+                    ctx.stroke()
+                }
+            }
+        }
+    }
+}

resources/qml/main.qml

@@ -17,7 +17,6 @@
 
 import QtQuick 2.9
 import QtMultimedia 5.8
-import QtQuick.Window 2.0
 import QtQuick.Controls 2.12
 import QtGraphicalEffects 1.0
 import QtQuick.Layouts 1.0
@@ -35,13 +34,11 @@ import de.itsblue.ScStw.Styling 2.0
 import de.itsblue.ScStw.Styling.Components 1.0
 import de.itsblue.ScStwApp 2.0
 
-Window {
+ApplicationWindow {
     visible: true
-    //width: 540
+    width: 540
-    //height: 960
+    height: 960
 
-    width: XscreenWidth
-    height: XscreenHeight
     title: "ScStwApp"
 
     Page {
@@ -180,6 +177,48 @@ Window {
                     sizeMode: "medium"
                 }
 
+                PropertyChanges {
+                    target: bottomToolBar
+                    sizeMode: "tiny"
+                }
+            },
+
+            State {
+                name: ScStwRace.RUNNING
+
+                PropertyChanges {
+                    target: topToolBar
+                    sizeMode: "medium"
+                }
+
+                PropertyChanges {
+                    target: bottomToolBar
+                    sizeMode: "tiny"
+                }
+            },
+
+            State {
+                name: ScStwRace.STOPPED
+
+                PropertyChanges {
+                    target: topToolBar
+                    sizeMode: "large"
+                }
+
+                PropertyChanges {
+                    target: bottomToolBar
+                    sizeMode: "tiny"
+                }
+            },
+
+            State {
+                name: ScStwRace.INCIDENT
+
+                PropertyChanges {
+                    target: topToolBar
+                    sizeMode: "small"
+                }
+
                 PropertyChanges {
                     target: bottomToolBar
                     sizeMode: "tiny"
@@ -190,17 +229,18 @@ Window {
 
         /*------
           Popups
-        ------
+        ------*/
         SettingsDialog{
             id: settingsDialog
 
-            x: startButt.x
+            x: centerContent.x + (centerContent.width - width) * 0.5
-            y: startButt.y
+            y: centerContent.y + (centerContent.height - height) *  0.5
-            width: startButt.width
+
-            height: startButt.height
+            width: Math.min(centerContent.width * 0.9, centerContent.height * 0.9)
+            height: width
         }
 
-        ProfilesDialog {
+        /*ProfilesDialog {
             id: profilesDialog
 
             property int margin: app.landscape() ? app.height * 0.05:app.width * 0.05
@@ -209,8 +249,9 @@ Window {
             y: !app.landscape() ? topContainerItm.height + margin:topContainerItm.x + margin
             width: app.landscape() ? app.width - topContainerItm.width - menu_container.width - margin * 2 : app.width - margin * 2
             height: !app.landscape() ? app.height - topContainerItm.height - menu_container.height - margin * 2 : app.height - margin * 2
-        }
+        }*/
 
+        /*
         states: [
             State {
                 name: "IDLE"

resources/qml/qml.qrc

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

sources/main.cpp

@@ -47,10 +47,6 @@
 #include <QScreen>
 #include <QQmlApplicationEngine>
 #include <QtQml/QQmlContext>
-//#include <QtWebView/QtWebView>
-#ifdef Q_OS_ANDROID
-#include <QtAndroidExtras>
-#endif
 
 #include "headers/scstwappsettings.h"
 //#include "headers/speedtimer.h"
@@ -61,28 +57,10 @@
 
 int main(int argc, char *argv[])
 {
-    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
 
     QGuiApplication app(argc, argv);
 
-#ifdef Q_OS_ANDROID
-    //set the standard volume to media
-    QAndroidJniObject jactivity=QtAndroid::androidActivity();
-    if(jactivity.isValid())
-        jactivity.callMethod<void>("setVolumeControlStream","(I)V",3);
-
-    //set statusbar color
-    QtAndroid::runOnAndroidThread([=]()
-    {
-        QAndroidJniObject window = QtAndroid::androidActivity().callObjectMethod("getWindow", "()Landroid/view/Window;");
-        window.callMethod<void>("addFlags", "(I)V", 0x80000000);
-        window.callMethod<void>("clearFlags", "(I)V", 0x04000000);
-        //window.callMethod<void>("setStatusBarColor", "(I)V", 0x202227); // Desired statusbar color
-        //QAndroidJniObject decorView = window.callObjectMethod("getDecorView", "()Landroid/view/View;");
-        //decorView.callMethod<void>("setSystemUiVisibility", "(I)V", 0x00002000);
-    });
-#endif
-
     // setup speed backend
     qmlRegisterType<ScStwAppBackend>("de.itsblue.ScStwApp", 2, 0, "SpeedBackend");
     qmlRegisterUncreatableType<ScStwAppSettings>("de.itsblue.ScStwApp", 2, 0, "ScStwAppSettings", "The ScStwAppSettings type is not creatable!");
@@ -90,18 +68,17 @@ int main(int argc, char *argv[])
     qRegisterMetaType<ScStwAppSettings::AppInternalSetting>("ScStwAppSettings::BaseStationSetting");
 
     QQmlApplicationEngine engine;
+
     ScStwLibraries::init();
     ScStwLibraries::initStyling(&engine);
 
-    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+    const QUrl url(QStringLiteral("qrc:/main.qml"));
-
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
-
+                     &app, [url](QObject *obj, const QUrl &objUrl) {
-    QSize size = app.screens().first()->size();
+        if (!obj && url == objUrl)
-    engine.rootContext()->setContextProperty("XscreenHeight", size.height());
+            QCoreApplication::exit(-1);
-    engine.rootContext()->setContextProperty("XscreenWidth", size.width());
+    }, Qt::QueuedConnection);
-
+    engine.load(url);
-    if (engine.rootObjects().isEmpty())
-        return -1;
 
     return app.exec();
 }

sources/scstwappbackend.cpp

@@ -73,7 +73,7 @@ void ScStwAppBackend::refreshTimerText() {
     }
 
     // --- refresh next start action delay progress ---
-    if(this->getRace()->getState() == ScStwRace::STARTING) {
+    if(this->getRace()->getState() == ScStwRace::WAITING || this->getRace()->getState() == ScStwRace::PREPAIRING) {
         emit this->getRace()->nextStartActionDetailsChanged();
     }