MenuPage.qml

import QtQuick 2.8
import QtQuick.Window 2.0
import QtGraphicalEffects 1.0

Rectangle {
    id: menu

    // color: 'white'
    color: '#F4F4F4'

    signal loadPage(string page)

    ColorizedImage {
        id: logoBackground

        anchors.top: parent.top
        anchors.topMargin: menu.height * 0.25
        anchors.left: parent.left
        anchors.leftMargin: (Screen.width < 1920) ? 30 : 150
        anchors.right: parent.right
        anchors.rightMargin: (Screen.width < 1920) ? 30 : 150
        height: width
        source: 'qrc:///images/logo-large-white.png'
        fillMode: Image.PreserveAspectFit

        color: '#7297bf0d'
    }

    Image {
        id: gfLogo
        anchors.top: parent.top
        anchors.left: parent.horizontalCenter
        anchors.right: parent.right
        anchors.margins: 10

        source: 'qrc:///images/full-logo.png'
        fillMode: Image.PreserveAspectFit
    }

    Image {
        id: logo219
        anchors.top: gfLogo.bottom
        anchors.left: gfLogo.horizontalCenter
        anchors.right: parent.right
        anchors.margins: 10

        source: 'qrc:///images/219-design-logo.svg'
        fillMode: Image.PreserveAspectFit
    }
    ColorizedImage {
        id: settings
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.margins: 1
        width: 40
        height: 40
        color: 'lightgray'
        source: 'qrc:///images/icon-settings.png'
        fillMode: Image.PreserveAspectFit

        MouseArea {
            id: settingsMouseArea
            anchors.fill: parent
            anchors.margins: -40
            onClicked: menu.loadPage('settings')
        }
    }

    ListModel {
        id: items
        ListElement {
            name: 'video'
            iconSource: 'qrc:///images/icon-video.png'
            label: 'Video'
        }
        ListElement {
            name: 'hw-info'
            iconSource: 'qrc:///images/icon-hw-info.png'
            label: 'About This Device'
        }
//        ListElement {
//            name: 'medical'
//            iconSource: 'qrc:///images/icon-medical.png'
//            label: 'Ventilator'
//        }
        ListElement {
            name: 'industrial'
            iconSource: 'qrc:///images/icon-industrial.png'
            label: 'Industrial Control'
        }
        ListElement {
            name: 'kiosk'
            iconSource: 'qrc:///images/icon-kiosk.png'
            label: 'Ticket Vending\nMachine'
        }
        ListElement {
            name: 'vending'
            iconSource: 'qrc:///images/icon-vending.png'
            label: 'Coffee Machine'
        }

        ListElement {
            name: 'slideshow'
            iconSource: 'qrc:///images/icon-slideshow.png'
            label: 'Slideshow'
        }
//        ListElement {
//            name: 'contact'
//            iconSource: 'qrc:///images/icon-contact.png'
//            label: 'Contact Us'
//        }
    }

    Text {
        id: viewTitle
        font.family: "DINOT"
        color: 'black'
        text: items.get(view.currentIndex).label
        font.pointSize: 30

        anchors.horizontalCenter: view.horizontalCenter
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter

        z: 5
    }

    PathView {
        id: view
        anchors.fill: logoBackground
        property double margin: Math.max(30.0, view.width * 0.1)
        model: items

        pathItemCount: 6
        delegate: Component {
            Image {
                id: image
                source: (PathView.isCurrentItem ?
                         'qrc:///images/icon-background-active.png' :
                         'qrc:///images/icon-background-idle.png')
                opacity: PathView.itemOpacity

                width: view.width / 3 * PathView.scale
                height: sourceSize.height * width / sourceSize.width

                ColorizedImage {
                    width: parent.width / 2
                    height: sourceSize.height * width / sourceSize.width
                    anchors.centerIn: parent

                    source: iconSource

                    color: image.PathView.isCurrentItem ? 'black' : '#6D6C6F'
                }

                MouseArea {
                    id: mouseArea
                    anchors.fill: parent

                    onClicked: {
                        if (image.PathView.isCurrentItem) {
                            menu.loadPage(name)
                        } else {
                            view.currentIndex = index
                            stopAutoRotation()
                        }
                    }
                }
            }
        }

        preferredHighlightBegin: 0.5
        preferredHighlightEnd: 0.5
        highlightRangeMode: PathView.StrictlyEnforceRange
        dragMargin: 300
        path: Path {
            startX: 0.5 * view.width
            startY: view.height - view.margin
            PathLine {
                x: view.width - view.margin - (0.1 * view.width / 6)
                y: (view.height / 2) + ((view.height / 2) - view.margin) * 0.5
            }
            PathLine {
                x: view.width - view.margin
                y: (view.height / 2) - ((view.height / 2) - view.margin) * 0.5
            }
            PathAttribute { name: "itemOpacity"; value: 0.8 }
            PathAttribute { name: "scale"; value: 0.8 }
            PathLine {
                x: view.width / 2
                y: view.margin
            }
            PathAttribute { name: "itemOpacity"; value: 1.0 }
            PathAttribute { name: "scale"; value: 1.0 }
            PathLine {
                x: view.margin
                y: (view.height / 2) - ((view.height / 2) - view.margin) * 0.5
            }
            PathAttribute { name: "itemOpacity"; value: 0.8 }
            PathAttribute { name: "scale"; value: 0.8 }
            PathLine {
                x: view.margin + (0.1 * view.width / 6)
                y: (view.height / 2) + ((view.height / 2) - view.margin) * 0.5
            }
            PathLine {
                x: view.width / 2
                y: view.height - view.margin
            }
            PathAttribute { name: "itemOpacity"; value: 0.0 }
            PathAttribute { name: "scale"; value: 0.0 }
        }

        onDragStarted: stopAutoRotation()
        onDragEnded: {
            stopAutoRotation()
        }
        onFlickStarted: stopAutoRotation()
        onFlickEnded: stopAutoRotation()
        onMovementStarted: stopAutoRotation()
        onMovementEnded: stopAutoRotation()

        property double prevOffset: 0
        onOffsetChanged: {
            var delta = Math.abs(offset - prevOffset)
            const MAX_ALLOWED_DELTA = 0.75
            if (delta > MAX_ALLOWED_DELTA && delta < model.count - MAX_ALLOWED_DELTA) {
                offset = prevOffset
            } else {
                prevOffset = offset
            }
        }

        interactive: true
    }

    function stopAutoRotation() {
        rotationTimer.stop()
        initRotationTimer.restart()
    }

    property bool autoRotate: true
    onAutoRotateChanged: {
        rotationTimer.stop()
        if (autoRotate) {
            initRotationTimer.start()
        } else {
            initRotationTimer.stop()
        }
    }
    Timer {
        id: initRotationTimer

        interval: 10000
        running: true
        repeat: false

        onTriggered: rotationTimer.start()
    }

    Timer {
        id: rotationTimer

        interval: 3000
        running: false
        repeat: true
        triggeredOnStart: true

        onTriggered: view.decrementCurrentIndex()
    }

    Component.onCompleted: {
        if ( Screen.width == 480 && Screen.height == 800 ) {
            viewTitle.anchors.verticalCenter = view.verticalCenter
            viewTitle.font.pointSize = 18
        } else {
            viewTitle.anchors.bottom = view.verticalCenter
            viewTitle.anchors.bottomMargin = 0.05 * Screen.height
        }
    }
}