added dark theme and started to implement connection to startpad

headers/buzzerconn.h

@@ -19,14 +19,14 @@ class BuzzerConn : public QObject
 {
     Q_OBJECT
 public:
-    explicit BuzzerConn(QObject *parent = nullptr);
+    explicit BuzzerConn(QObject *parent = nullptr, QUrl ip = QUrl("http://192.168.4.1"));
     double offset;
     QList<double> latest_offsets;
     double latest_button_pressed;
     double starttime;
     bool connected;
     int connection_progress;
-    QString buzz_url;
+    QUrl buzz_url;
 
 private:
     QNetworkAccessManager *networkManager;

qml/BuzzerConn.qml

@@ -1,44 +0,0 @@
-import QtQuick 2.0
-
-Item {
-    id: buzzerConn
-    height: 0
-    width: 0
-    opacity: 0
-    visible: false
-
-    signal pushed()
-
-    Timer {
-        //timer that refreshes the connection state to the buzzer
-        id: connectionRefreshTimer
-        running: root.state !== "RUNNING" && root.state !== "STARTING"
-        repeat: false
-        interval: 1000
-        onTriggered: {
-            _cppBuzzerConn.refresh()
-            connectionRefreshTimer.start()
-        }
-    }
-
-    Timer {
-        id: running_refresh_timer
-        running: root.state === "RUNNING"
-        repeat: false
-        interval: 1
-
-        onTriggered: {
-            if(_cppBuzzerConn.buzzer_triggered()){
-                buzzerConn.pushed()
-
-            }
-            if(root.state === "RUNNING"){
-                running_refresh_timer.start()
-            }
-        }
-    }
-
-    function connect(){
-        return(_cppBuzzerConn.connect())
-    }
-}

qml/ProfilesDialog.qml

@@ -203,8 +203,6 @@ Popup {
         initialItem: profileListComp
         width: headlineUnderline.width
 
-
-
         anchors  {
             top: parent.top
             left: parent.left

qml/SettingsDialog.qml

@@ -20,6 +20,8 @@ import QtMultimedia 5.8
 import QtQuick.Window 2.2
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
+import "./components"
+import "./styles"
 
 Popup {
     id: root
@@ -29,75 +31,49 @@ Popup {
     height: startButt.height
     modal: true
     dim: false
+    scale: 0
 
-    property var connecting: {
+    property var connections
-        'active': false, 'ret': false
-      };
 
     signal  connectRequested(var type)
 
+    onConnectionsChanged: {
+        //loop trough all connections
+        for (var key in connections) {
+            if(!connections[key])continue; //skip if empty to avoid errors
+            //check if any connection is in the state "connecting"
+            if(connections[key]["status"] === "connecting"){
+                root.closePolicy = Popup.NoAutoClose //make the dalog non-closable
+                return
+            }
+        }
+        //if no connection is in "conecting" state make popup closable
+        root.closePolicy = Popup.CloseOnPressOutside
+    }
+
     function connect(type) {
-        connecting.active = true
+        connectRequested(type)
-        root.closePolicy = Popup.NoAutoClose
-        options_stack.opacity = 0
-
-        prog.arcEnd = 0
-        prog.colorCircle = "grey"
-        prog.opacity = 1
-        prog.text = qsTr("connecting...")
-        prog_refresh.running = true
-        switch(type){
-        case "buzzer":
-            connectRequested("buzzer")
-            break
-        }
-        if(connecting.ret){
-            prog_refresh.running = false
-            prog.colorCircle = "green"
-            prog.text = qsTr("success")
-            prog.arcEnd = 360
-        }
-        else {
-            prog_refresh.running = false
-            prog.colorCircle = "red"
-            prog.text = qsTr("error")
-            prog.arcEnd = 360
-        }
-        //make a short delay and go back to normal options
-        shortDelay.start()
-    }
-
-    Timer {
-        id: shortDelay
-        running: false
-        repeat: false
-        interval: 1000
-        onTriggered: {
-            prog.opacity = 0;
-            options_stack.opacity = 1
-            root.closePolicy = Popup.CloseOnPressOutside;
-            connecting.active = false
-        }
     }
 
     enter: Transition {
-        NumberAnimation { properties: "scale"; from: 0; to: 1; duration: 300; easing.type: Easing.Linear }
+        NumberAnimation { properties: "scale"; to: 1; duration: 300; easing.type: Easing.Linear }
     }
 
     exit: Transition {
-        NumberAnimation { properties: "scale"; from: 1; to: 0; duration: 300; easing.type: Easing.Linear }
+        NumberAnimation { properties: "scale"; to: 0; duration: 300; easing.type: Easing.Linear }
     }
 
     background: Rectangle {
         radius: width * 0.5
-        color: "white"
+        color: StyleSettings.viewColor
-        border.color: "grey"
+        border.color: StyleSettings.lineColor
         border.width: 1
 
         Label {
             id: head_text
             text: options_stack.currentItem.title
             font.pixelSize: headlineUnderline.width * 0.1
+            color: enabled ? StyleSettings.textColor:StyleSettings.disabledTextColor
             anchors {
                 horizontalCenter: parent.horizontalCenter
                 top: parent.top
@@ -109,7 +85,7 @@ Popup {
             id: headlineUnderline
             height: 1
             width: parent.width
-            color: "grey"
+            color: StyleSettings.lineColor
             anchors {
                 top: parent.top
                 left: parent.left
@@ -120,60 +96,29 @@ Popup {
             }
         }
 
-        ProgressCircle {
-            id: prog
-            property string text: "connecting.."
-            anchors.fill: parent
-            opacity: 0
-            lineWidth: 5
-
-            arcBegin: 0
-            arcEnd: 0
-
-            onColorCircleChanged: prog.repaint()
-
-            Timer {
-                id: prog_refresh
-                running: false
-                interval: 1
-                repeat: true
-                onTriggered: {
-                    prog.arcEnd = 360 * ( _cppBuzzerConn.get("connection_progress") / 100 )
-                }
-            }
-
-            Label {
-                id: content
-                text: parent.text
-                anchors.centerIn: parent
-                font.pixelSize: parent.width * 0.1
-
-            }
-        }
-
         Button {
             id: head_back
-
             anchors {
                 left: parent.left
                 leftMargin: parent.width * 0.17
                 top:parent.top
                 topMargin: parent.height * 0.01
             }
+
             height: parent.height * 0.13
             width: height
-            opacity: root.connecting.active === true ? 0:1
+            opacity: root.closePolicy === Popup.NoAutoClose ? 0:1
             enabled: opacity > 0
 
             background: Rectangle {
                 radius: width * 0.5
-                color: "white"
+                color: parent.pressed ? StyleSettings.buttonPressedColor:StyleSettings.buttonColor
-                border.color: "grey"
+                border.color: StyleSettings.buttonBorderColor
                 border.width: 1
                 Image {
                     anchors.fill: parent
                     anchors.margins: parent.width * 0.2
-                    source: "qrc:/graphics/icons/back_black.png"
+                    source: StyleSettings.backIcon
 
                 }
             }
@@ -182,17 +127,9 @@ Popup {
                  options_stack.depth > 1 ? options_stack.pop():root.close()
             }
 
-            onPressedChanged: {
-                if(pressed){
-                    background.color = "lightgrey"
-                }
-                else {
-                    background.color = "white"
-                }
-            }
             Behavior on opacity {
                 NumberAnimation {
-                    duration: 100
+                    duration: 200
                 }
             }
         }
@@ -227,16 +164,22 @@ Popup {
                 property string title: qsTr("Options")
                 id: settings_col
 
-                /*----Connect to buzzer----*/
+                /*----Connect to external devices----*/
                 ItemDelegate {
                     id: connect_del
                     text: qsTr("connections")
+
+                    contentItem: Text {
+                        text: parent.text
+                        color: StyleSettings.textColor
                         font.pixelSize: options_stack.text_pixelSize
+                    }
+
                     width: parent.width
 
                     Image {
                         id: connect_del_image
-                        source: "qrc:/graphics/icons/back_black.png"
+                        source: StyleSettings.backIcon
                         rotation: 180
                         height: options_stack.text_pixelSize
                         width: height
@@ -255,22 +198,17 @@ Popup {
                 ItemDelegate {
                     id: autostart_del
                     text: qsTr("start sequence")
-                    font.pixelSize: options_stack.text_pixelSize
                     width: parent.width
 
-                    Rectangle {
+                    contentItem: Text {
-                        color: "grey"
+                        text: parent.text
-                        height: 1
+                        color: StyleSettings.textColor
-                        width: parent.width * 0.9
+                        font.pixelSize: options_stack.text_pixelSize
-                        anchors {
-                            horizontalCenter: parent.horizontalCenter
-                            top: parent.top
-                        }
                     }
 
                     Image {
                         id: autostart_del_image
-                        source: "qrc:/graphics/icons/back_black.png"
+                        source: StyleSettings.backIcon
                         rotation: 180
                         height: options_stack.text_pixelSize
                         width: height
@@ -284,6 +222,35 @@ Popup {
                         options_stack.push(autostart)
                     }
                 }
+
+                /*----Style Settings----*/
+                ItemDelegate {
+                    id: style_del
+                    text: qsTr("change style")
+                    width: parent.width
+
+                    contentItem: Text {
+                        text: parent.text
+                        color: StyleSettings.textColor
+                        font.pixelSize: options_stack.text_pixelSize
+                    }
+
+                    Image {
+                        id: style_image
+                        source: StyleSettings.backIcon
+                        rotation: 180
+                        height: options_stack.text_pixelSize
+                        width: height
+                        anchors {
+                            verticalCenter: parent.verticalCenter
+                            right: parent.right
+                            rightMargin: 10
+                        }
+                    }
+                    onClicked: {
+                        StyleSettings.setTheme()
+                    }
+                }
             }
         }
 
@@ -292,25 +259,40 @@ Popup {
             id: connect
             Column {
                 id: connect_col
-                property string title: "connections"
+                property string title: qsTr("connections")
                 property int delegateHeight: height*0.18
-                ItemDelegate {
+                ConnectionDelegate {
                     id: connect_buzz_del
-                    width: parent.width
+
-                    text: _cppBuzzerConn.get("connected")===1 ? qsTr("connected to buzzer"):qsTr("connect to buzzer")
+                    contentItem: Text {
+                        text: parent.text
+                        color: StyleSettings.textColor
                         font.pixelSize: options_stack.text_pixelSize
-                    Timer {
-                        running: connect_buzz_del.scale === 1
-                        repeat: true
-                        interval: 10
-                        onTriggered: {
-                            connect_buzz_del.text = _cppBuzzerConn.get("connected")===1 ? qsTr("connected to buzzer"):qsTr("connect to buzzer")
-                        }
                     }
 
-                    onClicked: {
+                    status: root.connections.buzzer
-                        root.connect("buzzer")
+                    connect: root.connect
+                    type: "buzzer"
+
+                    width: parent.width
+                    font.pixelSize: options_stack.text_pixelSize
                 }
+
+                ConnectionDelegate {
+                    id: connect_stap_del
+
+                    contentItem: Text {
+                        text: parent.text
+                        color: StyleSettings.textColor
+                        font.pixelSize: options_stack.text_pixelSize
+                    }
+
+                    status: root.connections.startpad
+                    connect: root.connect
+                    type: "startpad"
+
+                    width: parent.width
+                    font.pixelSize: options_stack.text_pixelSize
                 }
             }
         }
@@ -326,6 +308,12 @@ Popup {
                 SwitchDelegate {
                     id: ready_del
                     text: qsTr("say 'ready'")
+                    contentItem: Text {
+                        text: parent.text
+                        color: StyleSettings.textColor
+                        font.pixelSize: options_stack.text_pixelSize
+                    }
+
                     checked: _cppAppSettings.loadSetting("ready_en") === "true"
                     width: parent.width
                     height: parent.delegateHeight
@@ -342,6 +330,12 @@ Popup {
                 ItemDelegate {
                     id: ready_delay_del
                     text: qsTr("delay (ms)")
+                    contentItem: Text {
+                        text: parent.text
+                        color: StyleSettings.textColor
+                        font.pixelSize: options_stack.text_pixelSize
+                    }
+
                     enabled: ready_del.checked
                     width: parent.width
                     font.pixelSize: options_stack.text_pixelSize
@@ -367,6 +361,12 @@ Popup {
                 SwitchDelegate {
                     id: at_marks_del
                     text: qsTr("say\n'at your marks'")
+                    contentItem: Text {
+                        text: parent.text
+                        color: StyleSettings.textColor
+                        font.pixelSize: options_stack.text_pixelSize
+                    }
+
                     checked: _cppAppSettings.loadSetting("at_marks_en") === "true"
                     width: parent.width
                     //height: parent.delegateHeight * 1.5
@@ -383,6 +383,12 @@ Popup {
                 ItemDelegate {
                     id: at_marks_delay_del
                     text: qsTr("delay (ms)")
+                    contentItem: Text {
+                        text: parent.text
+                        color: StyleSettings.textColor
+                        font.pixelSize: options_stack.text_pixelSize
+                    }
+
                     enabled: at_marks_del.checked
                     width: parent.width
                     height: parent.delegateHeight

qml/components/ConnectionDelegate.qml

@@ -0,0 +1,92 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.2
+
+ItemDelegate {
+    id: control
+    property var status
+    property var connect
+    property string type
+    text: qsTr(type)
+
+    enabled: status.status === "disconnected"
+
+
+    onClicked: {
+        connect(type)
+        if(status.status !== "connected"){
+            statusIndicator.color_override = "red"
+            shortDelay.start()
+        }
+    }
+
+    Timer {
+        id: shortDelay
+        running: false
+        repeat: false
+        interval: 1500
+        onTriggered: {
+            statusIndicator.color_override = ""
+        }
+    }
+
+    Item {
+        id: statusItem
+        anchors {
+            right: parent.right
+            verticalCenter: parent.verticalCenter
+        }
+        height: parent.font.pixelSize
+        width: height
+
+        Rectangle {
+            id: statusIndicator
+            property string color_override: ""
+            anchors.fill: parent
+            color: color_override === "" ? status.status === "connected" ? "#c1ff32":"transparent":color_override
+            opacity: status.status === "connecting" ? 0:1
+            radius: height * 0.5
+            border.color: "grey"
+            border.width: height * 0.1
+
+            Behavior on color {
+                ColorAnimation {
+                    duration: 200
+                }
+            }
+
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: 800
+
+                }
+            }
+        }
+
+        ProgressCircle {
+            id: prog
+            anchors.fill: parent
+            opacity: status.status === "connecting" ? 1:0
+            lineWidth: height * 0.1
+
+            arcBegin: 0
+            arcEnd: 0
+            colorCircle: "grey"
+            onColorCircleChanged: prog.repaint()
+
+            Timer {
+                id: prog_refresh
+                running: status.status === "connecting"
+                interval: 1
+                repeat: true
+                onTriggered: {
+                    prog.arcEnd = 360 * ( status.progress / 100 )
+                }
+            }
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: 200
+                }
+            }
+        }
+    }
+}

qml/components/ConnectionIcon.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.6
+
+Image {
+    id: logo
+    property var status
+
+    source: "qrc:/graphics/icons/buzzer_black.png"
+    mipmap: true
+
+    opacity: status !== "disconnected" ? 1:0
+    visible: false
+
+    width: height
+    onOpacityChanged: visible = true
+    SequentialAnimation {
+        //rotating animation
+        running: status === "connecting"
+        loops: Animation.Infinite
+        onStopped: {
+            logo.rotation = 0
+        }
+
+        NumberAnimation {
+            target: logo
+            property: "rotation"
+            duration: 1300
+            from: 0
+            to: 360
+            easing.type: Easing.InOutQuad
+        }
+    }
+    Behavior on rotation {
+        NumberAnimation {
+            duration: 200
+            easing.type: Easing.OutQuad
+        }
+    }
+    Behavior on opacity {
+        NumberAnimation {
+            duration: 200
+            easing.type: Easing.OutQuad
+        }
+    }
+}

qml/connections/BuzzerConn.qml

@@ -0,0 +1,96 @@
+import QtQuick 2.0
+
+Item {
+    id: buzzerConn
+    height: 0
+    width: 0
+    opacity: 0
+    visible: false
+
+    signal pushed()
+    property bool connected: false
+    property var status: {'status': buzzerConn.state, 'progress': get_progress()}
+
+    Timer {
+        //timer that refreshes the connection state to the buzzer
+        id: connectionRefreshTimer
+        running: root.state !== "RUNNING" && root.state !== "STARTING" && buzzerConn.status !== "connecting"
+        repeat: false
+        interval: 1000
+        onTriggered: {
+            _cppBuzzerConn.refresh()
+            if(!_cppBuzzerConn.get("connected") && buzzerConn.state !== "connecting"){
+                buzzerConn.state = "disconnected"
+            }
+
+            connectionRefreshTimer.start()
+        }
+    }
+
+    Timer {
+        //timer that checks, if the button has been pushed
+        id: running_refresh_timer
+        running: root.state === "RUNNING"
+        repeat: false
+        interval: 1
+
+        onTriggered: {
+            if(_cppBuzzerConn.buzzer_triggered()){
+                buzzerConn.pushed()
+
+            }
+            if(root.state === "RUNNING"){
+                running_refresh_timer.start()
+            }
+        }
+    }
+
+    Timer {
+        id: prog_refresh
+        running: buzzerConn.state === "connecting"
+        interval: 1
+        repeat: true
+        onTriggered: {
+            buzzerConn.status.progress = get_progress()
+        }
+    }
+
+    states: [
+        State {
+            name: "disconnected"
+            PropertyChanges {
+                target: buzzerConn
+            }
+        },
+        State {
+            name: "connecting"
+            PropertyChanges {
+                target: buzzerConn
+            }
+        },
+        State {
+            name: "connected"
+            PropertyChanges {
+                target: buzzerConn
+            }
+        }
+    ]
+
+    function connect(){
+        buzzerConn.state = "connecting"
+        if(_cppBuzzerConn.connect()){
+            buzzerConn.state = "connected"
+            return(true)
+        }
+        else {
+            buzzerConn.state = "disconnected"
+            return(false)
+        }
+
+
+    }
+
+    function get_progress(){
+        return(_cppBuzzerConn.get("connection_progress"))
+    }
+}

qml/connections/StartpadConn.qml

@@ -0,0 +1,96 @@
+import QtQuick 2.0
+
+Item {
+    id: startpadConn
+    height: 0
+    width: 0
+    opacity: 0
+    visible: false
+
+    signal pushed()
+    property bool connected: false
+    property var status: {'status': startpadConn.state, 'progress': get_progress()}
+
+    Timer {
+        //timer that refreshes the connection state to the buzzer
+        id: connectionRefreshTimer
+        running: root.state !== "RUNNING" && root.state !== "STARTING" && startpadConn.status !== "connecting"
+        repeat: false
+        interval: 1000
+        onTriggered: {
+            _cppStartpadConn.refresh()
+            if(!_cppStartpadConn.get("connected") && startpadConn.state !== "connecting"){
+                startpadConn.state = "disconnected"
+            }
+
+            connectionRefreshTimer.start()
+        }
+    }
+
+    Timer {
+        //timer that checks, if the button has been pushed
+        id: running_refresh_timer
+        running: root.state === "RUNNING"
+        repeat: false
+        interval: 1
+
+        onTriggered: {
+            if(_cppStartpadConn.buzzer_triggered()){
+                startpadConn.pushed()
+
+            }
+            if(root.state === "RUNNING"){
+                running_refresh_timer.start()
+            }
+        }
+    }
+
+    Timer {
+        id: prog_refresh
+        running: startpadConn.state === "connecting"
+        interval: 1
+        repeat: true
+        onTriggered: {
+            startpadConn.status.progress = get_progress()
+        }
+    }
+
+    states: [
+        State {
+            name: "disconnected"
+            PropertyChanges {
+                target: startpadConn
+            }
+        },
+        State {
+            name: "connecting"
+            PropertyChanges {
+                target: startpadConn
+            }
+        },
+        State {
+            name: "connected"
+            PropertyChanges {
+                target: startpadConn
+            }
+        }
+    ]
+
+    function connect(){
+        startpadConn.state = "connecting"
+        if(_cppStartpadConn.connect()){
+            startpadConn.state = "connected"
+            return(true)
+        }
+        else {
+            startpadConn.state = "disconnected"
+            return(false)
+        }
+
+
+    }
+
+    function get_progress(){
+        return(_cppStartpadConn.get("connection_progress"))
+    }
+}

qml/main.qml

@@ -19,6 +19,10 @@ import QtQuick 2.9
 import QtMultimedia 5.8
 import QtQuick.Window 2.2
 import QtQuick.Controls 2.2
+import "."
+import "./components"
+import "./connections"
+import "./styles"
 //import QtQuick.Layouts 1.11
 
 import com.itsblue.speedclimbingstopwatch 1.0
@@ -31,6 +35,9 @@ Window {
     property date currentTime: new Date()
     property int millis: 0
 
+    onBeforeRendering: {
+        StyleSettings.refreshTheme()
+    }
 
     Page {
         id:root
@@ -44,12 +51,37 @@ Window {
         property double last_button_pressed
 
         property var last_run : {
-            'stop_type': "", 'time': 0
+            'stop_type': "", 'time': 0, 'react_time': 0
         };
 
+        //array that contains all connections an their atatus
+        property var connections: {
+            'buzzer': buzzerConn.status,
+            'startpad': startpadConn.status
+        }
+
         //set default state to IDLE
         state: "IDLE"
 
+        Rectangle {
+            id: backgroundRect
+            anchors.fill: parent
+            color: StyleSettings.backgroundColor
+        }
+
+        BuzzerConn {
+            id: buzzerConn
+            onPushed: {
+                // the buzzer was pushed
+                root.stop("buzzer")
+            }
+        }
+
+        StartpadConn {
+            id: startpadConn
+
+        }
+
         Timer {
             //timer that updates the currTime variable
             running: true
@@ -57,15 +89,6 @@ Window {
             interval: 1
             onTriggered: {
                 root.currTime = new Date().getTime()
-
-            }
-        }
-
-        BuzzerConn {
-            id: buzzerConn
-            onPushed: {
-                // the buzzer was pushed
-                root.stop("buzzer")
             }
         }
 
@@ -165,6 +188,12 @@ Window {
                 bottomMargin: root.landscape() ? undefined:parent.height * 0.1
                 rightMargin: root.landscape() ? parent.width * 0.05:0
             }
+
+            Rectangle {
+                anchors.fill: parent
+                color: StyleSettings.menuColor
+            }
+
             //height: root.landscape() ? undefined:parent.height * 0.15
             Label {
                 id: time
@@ -173,7 +202,7 @@ Window {
                 anchors.centerIn: parent
                 //font.pixelSize: root.landscape() ? parent.width * 0.1:parent.height * 0.3
                 elide: "ElideRight"
-
+                color: StyleSettings.textColor
                 Behavior on text {
                     enabled: root.state !== "RUNNING"
                     FadeAnimation {
@@ -183,30 +212,37 @@ Window {
             }
         }
 
-        Image {
+        ConnectionIcon {
             id: buzzerLogo
             source: "qrc:/graphics/icons/buzzer_black.png"
-            mipmap: true
+            status: root.connections["buzzer"].status
             anchors {
                 top: parent.top
                 topMargin: 10
                 left: parent.left
                 leftMargin: 10
             }
-            visible: _cppBuzzerConn.get("connected")===1
             height: root.landscape()? root.height*0.1:root.width*0.1
-           width: height
+
             Component.onCompleted: {
-               visible= _cppBuzzerConn.get("connected")===1
+                console.log(root.connections.buzzer)
+            }
         }
 
-           Timer {
+        ConnectionIcon {
-               interval: 100
+            id: startpadLogo
-               running: true
+            source: "qrc:/graphics/icons/startpad_black.png"
-               repeat: true
+            status: root.connections["startpad"].status
-               onTriggered: {
+            anchors {
-                   buzzerLogo.visible= _cppBuzzerConn.get("connected")===1
+                top: parent.top
+                topMargin: 10
+                left: parent.left
+                leftMargin: 5 + buzzerLogo.width
             }
+            height: root.landscape()? root.height*0.1:root.width*0.1
+
+            Component.onCompleted: {
+                console.log(root.connections.buzzer)
             }
         }
 
@@ -214,7 +250,7 @@ Window {
             id: upper_line
             width: root.landscape() ? 1:parent.width
             height: root.landscape() ? parent.height:1
-            color: "grey"
+            color: StyleSettings.lineColor
             anchors.left: root.landscape() ? time_container.right:parent.left
             anchors.top: root.landscape() ? parent.top:time_container.bottom
             anchors.bottom: root.landscape() ? parent.bottom:undefined
@@ -240,18 +276,9 @@ Window {
             height: root.landscape() ? size > parent.height * 0.9 ? parent.height * 0.9:size : size
             width: root.landscape() ? size : size > parent.width * 0.9 ? parent.width * 0.9:size
 
-            onPressedChanged: {
-                if(pressed){
-                    background.color = "lightgrey"
-                }
-                else {
-                    background.color = "white"
-                }
-            }
-
             background: Rectangle {
-                color: "white"
+                color: parent.pressed ? StyleSettings.buttonPressedColor:StyleSettings.buttonColor
-                border.color: "grey"
+                border.color: StyleSettings.buttonBorderColor
                 border.width: 1
                 radius: width / 2
                 Label {
@@ -260,6 +287,7 @@ Window {
                     anchors.centerIn: parent
                     font.pixelSize: parent.height * 0.16
                     font.family: "Helvetica"
+                    color: enabled ? StyleSettings.textColor:StyleSettings.disabledTextColor
                 }
             }
 
@@ -329,14 +357,6 @@ Window {
             width: height
 
             enabled: root.state === "STARTING"
-            onPressedChanged: {
-                if(pressed){
-                    background.color = "lightgrey"
-                }
-                else {
-                    background.color = "white"
-                }
-            }
 
             onClicked: {
                 root.stop("false")
@@ -348,8 +368,8 @@ Window {
                 }
             }
             background: Rectangle {
-                color: "white"
+                color: parent.pressed ? StyleSettings.buttonPressedColor:StyleSettings.buttonColor
-                border.color: "grey"
+                border.color: StyleSettings.buttonBorderColor
                 border.width: 1
                 radius: width / 2
                 Label {
@@ -358,6 +378,7 @@ Window {
                     anchors.centerIn: parent
                     font.pixelSize: parent.height * 0.16
                     font.family: "Helvetica"
+                    color: StyleSettings.textColor
                 }
             }
         }
@@ -367,12 +388,14 @@ Window {
         ------*/
         SettingsDialog{
             id: settingsDialog
-
+            connections: root.connections
             onConnectRequested: {
                 switch(type){
                 case "buzzer":
-
+                    buzzerConn.connect()
-                    settingsDialog.connecting.ret = buzzerConn.connect()
+                    break
+                case "startpad":
+                    startpadConn.connect()
                     break
                 }
             }
@@ -388,7 +411,7 @@ Window {
         Rectangle {
             width: root.landscape() ? 1:parent.width
             height: root.landscape() ? parent.height:1
-            color: "grey"
+            color: StyleSettings.lineColor
             anchors.right: root.landscape() ? menu_container.left:parent.right
             anchors.bottom: root.landscape() ? parent.bottom:menu_container.top
             anchors.top: root.landscape() ? parent.top:undefined
@@ -405,6 +428,11 @@ Window {
                 leftMargin: root.landscape() ? parent.width * 0.05:0
             }
 
+            Rectangle {
+                anchors.fill: parent
+                color: StyleSettings.menuColor
+            }
+
             RoundButton {
                 id: settingsButt
 
@@ -426,29 +454,19 @@ Window {
                 height: root.landscape() ? parent.width * 0.7:parent.height * 0.7
                 width: height
 
-                onPressedChanged: {
-                    if(pressed){
-                        background.color = "lightgrey"
-                    }
-                    else {
-                        background.color = "white"
-                    }
-                }
-
                 onClicked: {
                     settingsDialog.open()
                 }
 
                 background: Rectangle {
-                    color: "white"
+                    color: parent.pressed ? StyleSettings.buttonPressedColor:StyleSettings.buttonColor
-                    border.color: "grey"
+                    border.color: StyleSettings.buttonBorderColor
                     border.width: 1
                     radius: width / 2
 
-
                     Image {
                         id: settungsButt_Image
-                        source: "qrc:/graphics/icons/settings.png"
+                        source: StyleSettings.settIcon
                         anchors.centerIn: parent
                         height: parent.height * 0.7
                         width: parent.width * 0.7

qml/qml.qrc

@@ -1,11 +1,19 @@
 <RCC>
     <qresource prefix="/">
-        <file>FadeAnimation.qml</file>
         <file>main.qml</file>
         <file>ProfilesDialog.qml</file>
-        <file>ProgressCircle.qml</file>
         <file>SettingsDialog.qml</file>
-        <file>SimpleIndicator.qml</file>
+        <file>components/ProgressCircle.qml</file>
-        <file>BuzzerConn.qml</file>
+        <file>components/SimpleIndicator.qml</file>
+        <file>components/ConnectionDelegate.qml</file>
+        <file>components/FadeAnimation.qml</file>
+        <file>connections/BuzzerConn.qml</file>
+        <file>connections/StartpadConn.qml</file>
+        <file>styles/StyleSettings.qml</file>
+        <file>styles/qmldir</file>
+        <file>styles/Dark.js</file>
+        <file>styles/Light.js</file>
+        <file>styles/Default.js</file>
+        <file>components/ConnectionIcon.qml</file>
     </qresource>
 </RCC>

qml/styles/Dark.js

@@ -0,0 +1,31 @@
+// Colors
+var backgroundColor = "#2d3037"
+
+// buttons
+var buttonColor = "#202227"
+var buttonPressedColor = "#6ccaf2"
+var buttonBorderColor = Qt.darker("grey", 2)
+var disabledButtonColor = "#555555"
+
+var viewColor = "#202227"
+var menuColor = Qt.darker("#2d3037", 1.1)
+
+//delegates
+var delegate1Color = Qt.darker(viewColor, 1.2)
+var delegate2Color = Qt.lighter(viewColor, 1.2)
+
+//text
+var textColor = "#ffffff"
+var textDarkColor = "#232323"
+var disabledTextColor = "#777777"
+
+var sliderColor = "#6ccaf2"
+
+var errorColor = "#ba3f62"
+var infoColor = "#3fba62"
+
+var lineColor = "grey"
+
+// Icons
+var backIcon = "qrc:/graphics/icons/back.png"
+var settIcon = "qrc:/graphics/icons/settings.png"

qml/styles/Default.js

@@ -0,0 +1,31 @@
+// Colors
+var backgroundColor = "white"
+
+// buttons
+var buttonColor = "white"
+var buttonPressedColor = "lightgrey"
+var buttonBorderColor = "grey"
+var disabledButtonColor = Qt.darker("white", 1.2)
+
+var viewColor = "white"
+var menuColor = "white"
+
+//delegates
+var delegate1Color = Qt.darker(viewColor, 1.2)
+var delegate2Color = Qt.lighter(viewColor, 1.2)
+
+//text
+var textColor = "black"
+var textDarkColor = "#232323"
+var disabledTextColor = "grey"
+
+var sliderColor = "#6ccaf2"
+
+var errorColor = "#ba3f62"
+var infoColor = "#3fba62"
+
+var lineColor = "grey"
+
+// Icons
+var backIcon = "qrc:/graphics/icons/back_black.png"
+var settIcon = "qrc:/graphics/icons/settings_black.png"

qml/styles/Light.js

@@ -0,0 +1,31 @@
+// Colors
+var backgroundColor = "white"
+
+// buttons
+var buttonColor = "white"
+var buttonPressedColor = "lightgrey"
+var buttonBorderColor = "grey"
+var disabledButtonColor = Qt.darker("white", 1.2)
+
+var viewColor = "white"
+var menuColor = Qt.darker("white", 1.03)
+
+//delegates
+var delegate1Color = Qt.darker(viewColor, 1.2)
+var delegate2Color = Qt.lighter(viewColor, 1.2)
+
+//text
+var textColor = "black"
+var textDarkColor = "#232323"
+var disabledTextColor = "grey"
+
+var sliderColor = "#6ccaf2"
+
+var errorColor = "#ba3f62"
+var infoColor = "#3fba62"
+
+var lineColor = "grey"
+
+// Icons
+var backIcon = "qrc:/graphics/icons/back_black.png"
+var settIcon = "qrc:/graphics/icons/settings_black.png"

qml/styles/StyleSettings.qml

@@ -0,0 +1,149 @@
+/***************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the QtBluetooth module of the Qt Toolkit.
+**
+**$QT_BEGIN_LICENSE:BSD$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+pragma Singleton
+import QtQuick 2.5
+import "./Dark.js" as Dark
+import "./Light.js" as Light
+import "./Default.js" as Default
+
+Item {
+    property int wHeight
+    property int wWidth
+    property var theme: Default
+
+    // Colors
+    readonly property color backgroundColor:  theme.backgroundColor
+
+    // buttons
+    readonly property color buttonColor:  theme.buttonColor
+    readonly property color buttonPressedColor:  theme.buttonPressedColor
+    readonly property color buttonBorderColor:  theme.buttonBorderColor
+    readonly property color disabledButtonColor:  theme.disabledButtonColor
+
+    readonly property color viewColor:  theme.viewColor
+    readonly property color menuColor: theme.menuColor
+
+    //delegates
+    readonly property color delegate1Color:  theme.delegate1Color
+    readonly property color delegate2Color:  theme.delegate2Color
+
+    //text
+    readonly property color textColor:  theme.textColor
+    readonly property color textDarkColor:  theme.textDarkColor
+    readonly property color disabledTextColor:  theme.disabledTextColor
+
+    readonly property color sliderColor:  theme.sliderColor
+
+    readonly property color errorColor:  theme.errorColor
+    readonly property color infoColor:  theme.infoColor
+
+    readonly property color lineColor:  theme.lineColor
+
+    // Icons
+    readonly property string backIcon:  theme.backIcon
+    readonly property string settIcon:  theme.settIcon
+
+    // Font sizes
+    property real microFontSize: hugeFontSize * 0.2
+    property real tinyFontSize: hugeFontSize * 0.4
+    property real smallTinyFontSize: hugeFontSize * 0.5
+    property real smallFontSize: hugeFontSize * 0.6
+    property real mediumFontSize: hugeFontSize * 0.7
+    property real bigFontSize: hugeFontSize * 0.8
+    property real largeFontSize: hugeFontSize * 0.9
+    property real hugeFontSize: (wWidth + wHeight) * 0.03
+    property real giganticFontSize: (wWidth + wHeight) * 0.04
+
+    // Some other values
+    property real fieldHeight: wHeight * 0.08
+    property real fieldMargin: fieldHeight * 0.5
+    property real buttonHeight: wHeight * 0.08
+    property real buttonRadius: buttonHeight * 0.1
+
+    function refreshTheme(){
+        switch(_cppAppSettings.loadSetting("theme")){
+            case "Dark":
+            theme = Dark
+            break
+            case "Light":
+            theme = Light
+            break
+        }
+    }
+
+
+
+    // Some help functions
+    function widthForHeight(h, ss)
+    {
+        return h/ss.height * ss.width;
+    }
+
+    function heightForWidth(w, ss)
+    {
+        return w/ss.width * ss.height;
+    }
+
+    function setTheme()
+    {
+        switch(_cppAppSettings.loadSetting("theme")){
+            case "Dark":
+                _cppAppSettings.writeSetting("theme", "Light")
+                theme = Light
+            break
+            case "Light":
+                _cppAppSettings.writeSetting("theme", "Dark")
+                theme = Dark
+            break
+        }
+    }
+
+}

qml/styles/qmldir

@@ -0,0 +1 @@
+singleton StyleSettings 1.0 StyleSettings.qml

shared.qrc

@@ -18,5 +18,7 @@
         <file>translations/german.ts</file>
         <file>translations/de_DE.qm</file>
         <file>translations/de_DE.ts</file>
+        <file>graphics/icons/settings_black.png</file>
+        <file>graphics/icons/startpad_black.png</file>
     </qresource>
 </RCC>

sources/appsettings.cpp

@@ -28,6 +28,8 @@ AppSettings::AppSettings(QObject* parent)
     this->setDefaultSetting("ready_delay", 0);
     this->setDefaultSetting("at_marks_en", "false");
     this->setDefaultSetting("at_marks_delay", 0);
+
+    this->setDefaultSetting("theme", "Default");
 }
 
 QString AppSettings::loadSetting(const QString &key)

sources/buzzerconn.cpp

@@ -17,7 +17,7 @@
 
 #include "headers/buzzerconn.h"
 
-BuzzerConn::BuzzerConn(QObject *parent) : QObject(parent)
+BuzzerConn::BuzzerConn(QObject *parent, QUrl ip) : QObject(parent)
 {
     this->networkManager = new QNetworkAccessManager();
     this->reloadNetworkManager = new QNetworkAccessManager();
@@ -26,13 +26,13 @@ BuzzerConn::BuzzerConn(QObject *parent) : QObject(parent)
     this->latest_button_pressed = 0;
     this->connected = false;
 
-    this->buzz_url = "https://api.itsblue.de/test/buzzerem.php";
+    this->buzz_url = ip;
     // "http://192.168.4.1"
 }
 
 bool BuzzerConn::connect()
 {
-    qDebug() << "connecting to buzzer...";
+    qDebug() << "connecting...";
     QList<double> times = gettimes(1000);
     qDebug() << times[0];
     if(times[0] == 200.0){

sources/main.cpp

@@ -91,10 +91,22 @@ int main(int argc, char *argv[])
     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
 
     connectToDatabase();
-    BuzzerConn * pBuzzerConn = new BuzzerConn;
+    BuzzerConn * pBuzzerConn = new BuzzerConn(nullptr, QUrl("http://api.itsblue.de/test/buzzerem.php"));
+    BuzzerConn * pStartpadConn = new BuzzerConn(nullptr, QUrl("http://api.itsblue.de/test/startpadem.php"));
     AppSettings * pAppSettings = new AppSettings();
 
     //setup the sql storage model as a qml model
@@ -114,6 +126,7 @@ int main(int argc, char *argv[])
         return -1;
 
     engine.rootContext()->setContextProperty("_cppBuzzerConn", pBuzzerConn);
+    engine.rootContext()->setContextProperty("_cppStartpadConn", pStartpadConn);
     engine.rootContext()->setContextProperty("_cppAppSettings", pAppSettings);
 
     return app.exec();