MenuPage.qml

import QtQuick 2.8
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: 30
        anchors.right: parent.right
        anchors.rightMargin: 30
        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
    }

    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: 'settings'
            iconSource: 'qrc:///images/icon-settings.png'
            label: 'Settings'
        }
        ListElement {
            name: 'slideshow'
            iconSource: 'qrc:///images/icon-slideshow.png'
            label: 'Slideshow'
        }
        ListElement {
            name: 'contact'
            iconSource: 'qrc:///images/icon-contact.png'
            label: 'Contact Us'
        }
    }

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

        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: view.verticalCenter
        anchors.bottomMargin: 0.05 * view.height
        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
        interactive: true
        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
                    enabled: image.PathView.isCurrentItem

                    onClicked: menu.loadPage(name)
                }
            }
        }

        preferredHighlightBegin: 0.5
        preferredHighlightEnd: 0.5
        highlightRangeMode: PathView.StrictlyEnforceRange
        path: Path {
            startX: 0.5 * view.width
            startY: view.height - view.margin
            PathLine {
                x: view.width - view.margin
                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
                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()
    }

    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()
    }
}