qml/SettingsDialog.qml

@@ -20,6 +20,7 @@ import QtMultimedia 5.8
 import QtQuick.Window 2.2
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.0
 import "./components"
 import "./styles"
 
@@ -31,7 +32,7 @@ Popup {
     height: startButt.height
     modal: true
     dim: false
-    scale: 0
+    opacity: 0
 
     property var connections
 
@@ -56,18 +57,75 @@ Popup {
     }
 
     enter: Transition {
-        NumberAnimation { properties: "scale"; to: 1; duration: 300; easing.type: Easing.Linear }
+        NumberAnimation { properties: "opacity"; to: 1; duration: 300; easing.type: Easing.InOutQuad }
     }
 
     exit: Transition {
-        NumberAnimation { properties: "scale"; to: 0; duration: 300; easing.type: Easing.Linear }
+        NumberAnimation { properties: "opacity"; to: 0; duration: 300; easing.type: Easing.InOutQuad }
     }
 
     background: Rectangle {
         radius: width * 0.5
         color: StyleSettings.viewColor
         border.color: StyleSettings.lineColor
-        border.width: 1
+        border.width: 0
+
+        RectangularGlow {
+            id: effect_2
+            glowRadius: 7
+            spread: 0.02
+            color: "black"
+            opacity: 0.18
+            anchors.fill: headlineUnderline
+            scale: 1
+
+        }
+
+        Canvas {
+
+            id: headerBackground
+
+            anchors {
+                left: parent.left
+                right: parent.right
+                top: parent.top
+                bottom: headlineUnderline.bottom
+            }
+
+            height: header.height
+            width: header.width
+
+            property color color: StyleSettings.viewColor
+
+            onColorChanged: {
+                requestPaint()
+            }
+
+            onPaint: {
+                var ctx = getContext("2d");
+                ctx.reset();
+
+                var centreX = root.width / 2;
+                var centreY = root.height / 2;
+
+                ctx.beginPath();
+                ctx.fillStyle = headerBackground.color
+                ctx.moveTo(centreX, centreY);
+                ctx.arc(centreX, centreY, root.width / 2, 1 * Math.PI, 2*Math.PI, false);
+                //ctx.lineTo(centreX, centreY);
+                ctx.fill();
+            }
+        }
+
+        Item {
+            id: header
+
+            anchors {
+                left: parent.left
+                right: parent.right
+                top: parent.top
+                bottom: headlineUnderline.bottom
+            }
 
             Label {
                 id: head_text
@@ -80,12 +138,14 @@ Popup {
                     topMargin: headlineUnderline.anchors.topMargin / 2 - height / 2
                 }
             }
+        }
 
         Rectangle {
             id: headlineUnderline
             height: 1
             width: parent.width
             color: StyleSettings.lineColor
+            visible: false
             anchors {
                 top: parent.top
                 left: parent.left
@@ -96,7 +156,7 @@ Popup {
             }
         }
 
-        Button {
+        FancyButton {
             id: head_back
             anchors {
                 left: parent.left
@@ -107,21 +167,13 @@ Popup {
 
             height: parent.height * 0.13
             width: height
-            opacity: root.closePolicy === Popup.NoAutoClose ? 0:1
+            //opacity: root.closePolicy === Popup.NoAutoClose ? 0:1
             enabled: opacity > 0
 
-            background: Rectangle {
+            glowOpacity: Math.pow( root.opacity, 100 )
-                radius: width * 0.5
-                color: parent.pressed ? StyleSettings.buttonPressedColor:StyleSettings.buttonColor
-                border.color: StyleSettings.buttonBorderColor
-                border.width: 1
-                Image {
-                    anchors.fill: parent
-                    anchors.margins: parent.width * 0.2
-                    source: StyleSettings.backIcon
 
-                }
+            backgroundColor: StyleSettings.buttonColor
-            }
+            image: StyleSettings.backIcon
 
             onClicked: {
                 options_stack.depth > 1 ? options_stack.pop():root.close()

qml/components/FancyButton.qml

@@ -0,0 +1,70 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.4
+import QtGraphicalEffects 1.0
+
+Button {
+    id: control
+
+    property string image
+    property color backgroundColor: "white"
+    property real imageScale: 1
+    property double glowRadius: 0.001
+    property double glowSpread: 0.2
+    property bool glowVisible: true
+    property double glowScale: 0.75
+    property double glowOpacity: 1
+
+
+
+    scale: control.pressed ? 0.8:1
+
+    Behavior on scale {
+        PropertyAnimation {
+            duration: 100
+        }
+    }
+
+    background: Item {
+        id: controlBackgroundContainer
+
+        RectangularGlow {
+            id: effect
+            glowRadius: control.glowRadius
+            spread: control.glowSpread
+            color: "black"
+
+            visible: control.glowVisible
+
+            cornerRadius: controlBackground.radius
+            anchors.fill: controlBackground
+            scale: control.glowScale
+            opacity: control.glowOpacity
+        }
+
+        Rectangle {
+            id: controlBackground
+
+            anchors.fill: parent
+
+            radius: height * 0.5
+
+            color: control.backgroundColor
+
+            Image {
+                id: buttonIcon
+                source: control.image
+
+                anchors.centerIn: parent
+                height: parent.height * 0.5
+                width: height
+
+                mipmap: true
+
+                fillMode: Image.PreserveAspectFit
+
+                scale: control.imageScale
+            }
+        }
+    }
+
+}

qml/main.qml

@@ -19,6 +19,7 @@ import QtQuick 2.9
 import QtMultimedia 5.8
 import QtQuick.Window 2.2
 import QtQuick.Controls 2.2
+import QtGraphicalEffects 1.0
 import "."
 import "./components"
 import "./styles"
@@ -66,12 +67,15 @@ Window {
                     break;
                 case 1:
                     stateString = "STARTING"
+                    settingsDialog.close()
                     break;
                 case 2:
                     stateString = "RUNNING"
+                    settingsDialog.close()
                     break;
                 case 3:
                     stateString = "STOPPED"
+                    settingsDialog.close()
                 }
                 root.state = stateString
             }
@@ -80,6 +84,16 @@ Window {
         /*------------------------
           Timer text an upper line
         ------------------------*/
+        RectangularGlow {
+            id: effect_2
+            glowRadius: 7
+            spread: 0.02
+            color: "black"
+            opacity: 0.18
+            anchors.fill: time_container
+            scale: 1
+        }
+
         Item {
             id: time_container
             anchors {
@@ -136,12 +150,13 @@ Window {
             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
+            visible: false
         }
 
         /*----------------------
           Start / Stop / Reset button
         ----------------------*/
-        Button {
+        FancyButton {
             id : startButt
 
             text: qsTr("start")
@@ -158,11 +173,6 @@ 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
 
-            background: Rectangle {
-                color: parent.pressed ? StyleSettings.buttonPressedColor:StyleSettings.buttonColor
-                border.color: StyleSettings.buttonBorderColor
-                border.width: 1
-                radius: width / 2
             Label {
                 id: startButt_text
                 text: startButt.text
@@ -171,7 +181,9 @@ Window {
                 font.family: "Helvetica"
                 color: enabled ? StyleSettings.textColor:StyleSettings.disabledTextColor
             }
-            }
+
+
+            backgroundColor: StyleSettings.buttonColor
 
             Behavior on text {
                 //animate a text change
@@ -201,6 +213,8 @@ Window {
             anchors.fill: startButt
             opacity: root.state === "STARTING" || root.state === "IDLE" ? 1:0
 
+            scale: startButt.scale
+
             lineWidth: 5
 
             arcBegin: 0
@@ -220,7 +234,7 @@ Window {
         /*----------------------
           Cancel button
         ----------------------*/
-        RoundButton {
+        FancyButton {
             id: cancelButt
 
             text: qsTr("cancel")
@@ -246,11 +260,7 @@ Window {
                     duration: 200
                 }
             }
-            background: Rectangle {
+
-                color: parent.pressed ? StyleSettings.buttonPressedColor:StyleSettings.buttonColor
-                border.color: StyleSettings.buttonBorderColor
-                border.width: 1
-                radius: width / 2
             Label {
                 id: cancelButt_text
                 text: cancelButt.text
@@ -259,7 +269,8 @@ Window {
                 font.family: "Helvetica"
                 color: StyleSettings.textColor
             }
-            }
+
+            backgroundColor: StyleSettings.buttonColor
         }
 
         /*------
@@ -294,13 +305,26 @@ Window {
         /*-------------------
           lower line and menu
         -------------------*/
+
         Rectangle {
+            id: lowerLine
             width: root.landscape() ? 1:parent.width
             height: root.landscape() ? parent.height:1
             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
+            visible: false
+        }
+
+        RectangularGlow {
+            id: effect
+            glowRadius: 7
+            spread: 0.02
+            color: "black"
+            opacity: 0.18
+            anchors.fill: menu_container
+            scale: 1
         }
 
         Item {
@@ -315,11 +339,12 @@ Window {
             }
 
             Rectangle {
+                id: lowerMenuBackground
                 anchors.fill: parent
                 color: StyleSettings.menuColor
             }
 
-            RoundButton {
+            FancyButton {
                 id: settingsButt
 
                 anchors {
@@ -344,21 +369,10 @@ Window {
                     settingsDialog.open()
                 }
 
-                background: Rectangle {
+                image: StyleSettings.settIcon
-                    color: parent.pressed ? StyleSettings.buttonPressedColor:StyleSettings.buttonColor
+
-                    border.color: StyleSettings.buttonBorderColor
+                backgroundColor: parent.pressed ? StyleSettings.buttonPressedColor:StyleSettings.buttonColor
-                    border.width: 1
-                    radius: width / 2
 
-                    Image {
-                        id: settungsButt_Image
-                        source: StyleSettings.settIcon
-                        anchors.centerIn: parent
-                        height: parent.height * 0.7
-                        width: parent.width * 0.7
-                        mipmap: true
-                    }
-                }
             }
 
             /*

qml/qml.qrc

@@ -11,10 +11,10 @@
         <file>styles/qmldir</file>
         <file>styles/Dark.js</file>
         <file>styles/Light.js</file>
-        <file>styles/Default.js</file>
         <file>components/ConnectionIcon.qml</file>
         <file>SpeedTimer.qml</file>
         <file>components/NextPageDelegate.qml</file>
         <file>ErrorDialog.qml</file>
+        <file>components/FancyButton.qml</file>
     </qresource>
 </RCC>

qml/styles/Default.js

@@ -1,31 +0,0 @@
-// 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/StyleSettings.qml

@@ -52,13 +52,11 @@ 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: _cppAppSettings.loadSetting("theme") === "Default" ? Default:
+    property var theme: _cppAppSettings.loadSetting("theme") === "Light" ? Light:
-                        _cppAppSettings.loadSetting("theme") === "Light" ? Light:
                         _cppAppSettings.loadSetting("theme") === "Dark" ? Dark:null
     // Colors
     readonly property color backgroundColor:  theme.backgroundColor
@@ -111,14 +109,14 @@ Item {
 
     function refreshTheme(){
         switch(_cppAppSettings.loadSetting("theme")){
-        case "Default":
-            theme = Dark
-            break
         case "Dark":
             theme = Light
             break
         case "Light":
-            theme = Default
+            theme = Dark
+            break
+        default:
+            theme = Light
             break
         }
     }
@@ -139,17 +137,17 @@ Item {
     function setTheme()
     {
         switch(_cppAppSettings.loadSetting("theme")){
-        case "Default":
-            _cppAppSettings.writeSetting("theme", "Dark")
-            theme = Dark
-            break
         case "Dark":
             _cppAppSettings.writeSetting("theme", "Light")
             theme = Light
             break
         case "Light":
-            _cppAppSettings.writeSetting("theme", "Default")
+            _cppAppSettings.writeSetting("theme", "Dark")
-            theme = Default
+            theme = Dark
+            break
+        default:
+            _cppAppSettings.writeSetting("theme", "Light")
+            theme = Light
             break
         }
     }

sources/climbingrace.cpp

@@ -18,7 +18,7 @@ ClimbingRace::ClimbingRace(QObject *parent) : QObject(parent)
     this->appSettings = new AppSettings;
     this->baseConn = new BaseConn;
 
-    this->baseConn->setIP("localhost");
+    this->baseConn->setIP("192.168.4.1");
     connect(this->baseConn, &BaseConn::stateChanged, this, &ClimbingRace::baseStationStateChanged);
 
     this->speedTimers.append( new SpeedTimer );