app/qml/SettingsDialog.qml

import QtQuick 2.9
import QtMultimedia 5.8
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Popup {
    id: root
    x: startButt.x
    y: startButt.y
    width: startButt.width
    height: startButt.height
    modal: true
    dim: false

    enter: Transition {
        NumberAnimation { properties: "scale"; from: 0; to: 1; duration: 300; easing.type: Easing.Linear }
    }

    exit: Transition {
        NumberAnimation { properties: "scale"; from: 1; to: 0; duration: 300; easing.type: Easing.Linear }
    }

    background: Rectangle {
        radius: width * 0.5
        color: "white"
        border.color: "grey"
        border.width: 1

        Label {
            id: head_text
            text: options_stack.currentItem.title
            font.pixelSize: headlineUnderline.width * 0.1
            anchors {
                horizontalCenter: parent.horizontalCenter
                top: parent.top
                topMargin: headlineUnderline.anchors.topMargin / 2 - height / 2
            }
        }

        Rectangle {
            id: headlineUnderline
            height: 1
            width: parent.width
            color: "grey"
            anchors {
                top: parent.top
                left: parent.left
                right: parent.right
                topMargin: parent.height * 0.15
                rightMargin: parent.radius - Math.sqrt(Math.pow(parent.radius,2)-Math.pow(parent.radius-anchors.topMargin,2))
                leftMargin: parent.radius - Math.sqrt(Math.pow(parent.radius,2)-Math.pow(parent.radius-anchors.topMargin,2))
            }
        }

        ProgressCircle {
            id: prog
            property string text: "connecting.."
            anchors.fill: parent
            opacity: 0
            lineWidth: 5

            arcBegin: 0
            arcEnd: 0

            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

            background: Rectangle {
                radius: width * 0.5
                color: "white"
                border.color: "grey"
                border.width: 1
                Image {
                    anchors.fill: parent
                    anchors.margins: parent.width * 0.2
                    source: "qrc:/graphics/icons/back_black.png"

                }
            }

            onClicked: {
                 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
                }
            }
        }
    }

    StackView {
        id: options_stack
        property int text_pixelSize: headlineUnderline.width * 0.08
        initialItem: settings
        width: headlineUnderline.width

        anchors  {
            top: parent.top
            left: parent.left
            leftMargin: ( parent.width - headlineUnderline.width ) / 2
            topMargin: parent.height * 0.12
            bottom: parent.bottom
        }

        Behavior on opacity {
            NumberAnimation {duration: 200}
        }

        /*-----start page of the settings-----*/
        Component {
            id: settings

            Column {
                property string title: "Options"
                id: settings_col

                /*----Connect to buzzer----*/
                ItemDelegate {
                    id: connect_del
                    width: parent.width
                    text: _cppBuzzerConn.get("connected")===1 ? "connected to buzzer":"connect to buzzer"
                    font.pixelSize: options_stack.text_pixelSize
                    Timer {
                        running: connect_del.scale === 1
                        repeat: true
                        interval: 10
                        onTriggered: {
                            connect_del.text = _cppBuzzerConn.get("connected")===1 ? "connected to buzzer":"connect to buzzer"
                        }
                    }

                    onClicked: {
                        root.closePolicy = Popup.NoAutoClose
                        options_stack.opacity = 0

                        prog.arcEnd = 0
                        prog.colorCircle = "grey"
                        prog.opacity = 1
                        prog.text = "connecting..."
                        prog_refresh.running = true

                        if(_cppBuzzerConn.connect()){
                            prog_refresh.running = false
                            prog.colorCircle = "green"
                            prog.text = "success!"
                            prog.arcEnd = 360
                        }
                        else {
                            prog_refresh.running = false
                            prog.colorCircle = "red"
                            prog.text = "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: {
                            connect_del.enabled = true;
                            prog.opacity = 0;
                            options_stack.opacity = 1
                            root.closePolicy = Popup.CloseOnPressOutside;
                        }
                    }
                }

                /*----Automated Start----*/
                ItemDelegate {
                    id: autostart_del
                    text: "start sequence"
                    font.pixelSize: options_stack.text_pixelSize
                    width: parent.width

                    Rectangle {
                        color: "grey"
                        height: 1
                        width: parent.width * 0.9
                        anchors {
                            horizontalCenter: parent.horizontalCenter
                            top: parent.top
                        }
                    }

                    Image {
                        id: autostart_del_image
                        source: "qrc:/graphics/icons/back_black.png"
                        rotation: 180
                        height: options_stack.text_pixelSize
                        width: height
                        anchors {
                            verticalCenter: parent.verticalCenter
                            right: parent.right
                            rightMargin: 10
                        }
                    }
                    onClicked: {
                        options_stack.push(autostart)
                    }
                }
            }
        }

        /*-----Page to setup automatc start sequence-----*/
        Component {
            id: autostart

            Column {
                id: autostart_col
                property string title: "Autostart"


                SwitchDelegate {
                    id: ready_del
                    text: qsTr("say 'ready'")
                    checked: _cppAppSettings.loadSetting("ready_en") === "true"
                    width: parent.width
                    font.pixelSize: options_stack.text_pixelSize

                    onCheckedChanged: {
                        _cppAppSettings.writeSetting("ready_en",checked)
                    }

                    indicator: Rectangle {
                        implicitWidth: 48
                        implicitHeight: 26
                        x: ready_del.width - width - ready_del.rightPadding
                        y: parent.height / 2 - height / 2
                        radius: 13
                        color: ready_del.checked ? "#17a81a" : "transparent"
                        border.color: ready_del.checked ? "#17a81a" : "#cccccc"
                        Behavior on color{
                            ColorAnimation{
                                duration: 200
                            }
                        }

                        Rectangle {
                            x: ready_del.checked ? parent.width - width : 0
                            width: 26
                            height: 26
                            radius: 13
                            color: ready_del.down ? "#cccccc" : "#ffffff"
                            border.color: ready_del.checked ? (ready_del.down ? "#17a81a" : "#21be2b") : "#999999"
                            Behavior on x{
                                NumberAnimation {
                                    property: "x"
                                    duration: 200
                                    easing.type: Easing.InOutQuad
                                }
                            }
                        }
                    }
                }

                ItemDelegate {
                    id: ready_delay_del
                    text: "delay (ms)"
                    enabled: ready_del.checked
                    width: parent.width
                    font.pixelSize: options_stack.text_pixelSize

                    TextField {
                        focus: true
                        placeholderText: "time"
                        width: parent.width * 0.3
                        anchors.right: parent.right
                        inputMethodHints: Qt.ImhFormattedNumbersOnly

                        text: _cppAppSettings.loadSetting("ready_delay")

                        onTextChanged: {
                            _cppAppSettings.writeSetting("ready_delay", text)
                        }
                    }
                }

                SwitchDelegate {
                    id: at_marks_del
                    text: qsTr("say\n'at your marks'")
                    checked: _cppAppSettings.loadSetting("at_marks_en") === "true"
                    width: parent.width
                    font.pixelSize: options_stack.text_pixelSize

                    onCheckedChanged: {
                        _cppAppSettings.writeSetting("at_marks_en",at_marks_del.checked)
                    }

                    indicator: Rectangle {
                        implicitWidth: 48
                        implicitHeight: 26
                        x: at_marks_del.width - width - at_marks_del.rightPadding
                        y: parent.height / 2 - height / 2
                        radius: 13
                        color: at_marks_del.checked ? "#17a81a" : "transparent"
                        border.color: at_marks_del.checked ? "#17a81a" : "#cccccc"
                        Behavior on color{
                            ColorAnimation{
                                duration: 200
                            }
                        }

                        Rectangle {
                            x: at_marks_del.checked ? parent.width - width : 0
                            width: 26
                            height: 26
                            radius: 13
                            color: at_marks_del.down ? "#cccccc" : "#ffffff"
                            border.color: at_marks_del.checked ? (at_marks_del.down ? "#17a81a" : "#21be2b") : "#999999"
                            Behavior on x{
                                NumberAnimation {
                                    property: "x"
                                    duration: 200
                                    easing.type: Easing.InOutQuad
                                }
                            }
                        }
                    }
                }

                ItemDelegate {
                    id: at_marks_delay_del
                    text: "delay (ms)"
                    enabled: at_marks_del.checked
                    width: parent.width
                    font.pixelSize: options_stack.text_pixelSize

                    TextField {
                        focus: true
                        placeholderText: "time"
                        width: parent.width * 0.3
                        anchors.right: parent.right
                        inputMethodHints: Qt.ImhFormattedNumbersOnly

                        text: _cppAppSettings.loadSetting("at_marks_delay")

                        onTextChanged: {
                            _cppAppSettings.writeSetting("at_marks_delay",text)
                        }
                    }
                }
            }
        }

        /*-----Custom animations-----*/

        pushEnter: Transition {
            NumberAnimation {
                property: "opacity"
                from: 0
                to: 1
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }
        pushExit: Transition {
            NumberAnimation {
                property: "opacity"
                from: 1
                to: 0
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }

        popExit: Transition {
            NumberAnimation {
                property: "opacity"
                from: 1
                to: 0
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }
        popEnter: Transition {
            NumberAnimation {
                property: "opacity"
                from: 0
                to: 1
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }
    }


}