LauncherPage.qml Example File | Qt Quick Controls 5.12.7

Qt 5.12 | Qt Quick Controls | Qt Quick Controls - Wearable Demo | LauncherPage.qml Example File

Qt 5.12.7 Reference Documentation

# LauncherPage.qml Example File

wearable/qml/LauncherPage.qml

      /****************************************************************************
      **
      ** Copyright (C) 2017 The Qt Company Ltd.
      ** Contact: https://www.qt.io/licensing/
      **
      ** This file is part of the examples 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$
      **
      ****************************************************************************/

      import QtQuick 2.12
      import QtQuick.Controls 2.3 as QQC2
      import "Style"

      PathView {
          id: circularView

          signal launched(string page)

          readonly property int cX: width / 2
          readonly property int cY: height / 2
          readonly property int itemSize: size / 4
          readonly property int size: Math.min(width - 80, height)
          readonly property int radius: size / 2 - itemSize / 3

          snapMode: PathView.SnapToItem

          model: ListModel {
              ListElement {
                  title: qsTr("World Clock")
                  icon: "worldclock"
                  page: "WorldClock/WorldClockPage.qml"
              }
              ListElement {
                  title: qsTr("Navigation")
                  icon: "navigation"
                  page: "Navigation/NavigationPage.qml"
              }
              ListElement {
                  title: qsTr("Weather")
                  icon: "weather"
                  page: "Weather/WeatherPage.qml"
              }
              ListElement {
                  title: qsTr("Fitness")
                  icon: "fitness"
                  page: "Fitness/FitnessPage.qml"
              }
              ListElement {
                  title: qsTr("Notifications")
                  icon: "notifications"
                  page: "Notifications/NotificationsPage.qml"
              }
              ListElement {
                  title: qsTr("Alarm")
                  icon: "alarms"
                  page: "Alarms/AlarmsPage.qml"
              }
              ListElement {
                  title: qsTr("Settings")
                  icon: "settings"
                  page: "Settings/SettingsPage.qml"
              }
          }

          delegate: QQC2.RoundButton {
              width: circularView.itemSize
              height: circularView.itemSize

              property string title: model.title

              icon.width: 36
              icon.height: 36
              icon.name: model.icon
              opacity: PathView.itemOpacity
              padding: 12

              background: Rectangle {
                  radius: width / 2
                  border.width: 3
                  border.color: parent.PathView.isCurrentItem ? UIStyle.colorQtPrimGreen : UIStyle.themeColorQtGray4
              }

              onClicked: {
                  if (PathView.isCurrentItem)
                      circularView.launched(Qt.resolvedUrl(page))
                  else
                      circularView.currentIndex = index
              }
          }

          path: Path {
              startX: circularView.cX
              startY: circularView.cY
              PathAttribute {
                  name: "itemOpacity"
                  value: 1.0
              }
              PathLine {
                  x: circularView.cX + circularView.radius
                  y: circularView.cY
              }
              PathAttribute {
                  name: "itemOpacity"
                  value: 0.7
              }
              PathArc {
                  x: circularView.cX - circularView.radius
                  y: circularView.cY
                  radiusX: circularView.radius
                  radiusY: circularView.radius
                  useLargeArc: true
                  direction: PathArc.Clockwise
              }
              PathAttribute {
                  name: "itemOpacity"
                  value: 0.5
              }
              PathArc {
                  x: circularView.cX + circularView.radius
                  y: circularView.cY
                  radiusX: circularView.radius
                  radiusY: circularView.radius
                  useLargeArc: true
                  direction: PathArc.Clockwise
              }
              PathAttribute {
                  name: "itemOpacity"
                  value: 0.3
              }
          }

          Text {
              id: appTitle

              property Item currentItem: circularView.currentItem

              visible: currentItem ? currentItem.PathView.itemOpacity === 1.0 : 0

              text: currentItem ? currentItem.title : ""
              anchors.centerIn: parent
              anchors.verticalCenterOffset: (circularView.itemSize + height) / 2

              font.bold: true
              font.pixelSize: circularView.itemSize / 3
              font.letterSpacing: 1
              color: UIStyle.themeColorQtGray1
          }
      }