gallery.qml Example File

 /****************************************************************************
 **
 ** Copyright (C) 2016 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.2
 import QtGraphicalEffects 1.0
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
 import QtQuick.Dialogs 1.0
 import QtQuick.Extras 1.4
 import QtQuick.Layouts 1.0
 import QtQuick.Window 2.1

 Window {
     id: root
     objectName: "window"
     visible: true
     width: 480
     height: 800

     color: "#161616"
     title: "Qt Quick Extras Demo"

     function toPixels(percentage) {
         return percentage * Math.min(root.width, root.height);
     }

     property bool isScreenPortrait: height > width
     property color lightFontColor: "#222"
     property color darkFontColor: "#e7e7e7"
     readonly property color lightBackgroundColor: "#cccccc"
     readonly property color darkBackgroundColor: "#161616"
     property real customizerPropertySpacing: 10
     property real colorPickerRowSpacing: 8

     Text {
         id: textSingleton
     }

     property Component circularGauge: CircularGaugeView {}

     property Component dial: ControlView {
         darkBackground: false

         control: Column {
             id: dialColumn
             width: controlBounds.width
             height: controlBounds.height - spacing
             spacing: root.toPixels(0.05)

             ColumnLayout {
                 id: volumeColumn
                 width: parent.width
                 height: (dialColumn.height - dialColumn.spacing) / 2
                 spacing: height * 0.025

                 Dial {
                     id: volumeDial
                     Layout.alignment: Qt.AlignCenter
                     Layout.fillWidth: true
                     Layout.fillHeight: true

                     /*!
                         Determines whether the dial animates its rotation to the new value when
                         a single click or touch is received on the dial.
                     */
                     property bool animate: customizerItem.animate

                     Behavior on value {
                         enabled: volumeDial.animate && !volumeDial.pressed
                         NumberAnimation {
                             duration: 300
                             easing.type: Easing.OutSine
                         }
                     }
                 }

                 ControlLabel {
                     id: volumeText
                     text: "Volume"
                     Layout.alignment: Qt.AlignCenter
                 }
             }

             ColumnLayout {
                 id: trebleColumn
                 width: parent.width
                 height: (dialColumn.height - dialColumn.spacing) / 2
                 spacing: height * 0.025

                 Dial {
                     id: dial2
                     Layout.alignment: Qt.AlignCenter
                     Layout.fillWidth: true
                     Layout.fillHeight: true

                     stepSize: 1
                     maximumValue: 10

                     style: DialStyle {
                         labelInset: outerRadius * 0
                     }
                 }

                 ControlLabel {
                     id: trebleText
                     text: "Treble"
                     Layout.alignment: Qt.AlignCenter
                 }
             }
         }

         customizer: Column {
             spacing: customizerPropertySpacing

             property alias animate: animateCheckBox.checked

             CustomizerLabel {
                 text: "Animate"
             }

             CustomizerSwitch {
                 id: animateCheckBox
             }
         }
     }

     property Component delayButton: ControlView {
         darkBackground: false

         control: DelayButton {
             text: "Alarm"
             anchors.centerIn: parent
         }
     }

     property Component gauge: ControlView {
         id: gaugeView
         control: Gauge {
             id: gauge
             width: orientation === Qt.Vertical ? implicitWidth : gaugeView.controlBounds.width
             height: orientation === Qt.Vertical ? gaugeView.controlBounds.height : implicitHeight
             anchors.centerIn: parent

             minimumValue: 0
             value: customizerItem.value
             maximumValue: 100
             orientation: customizerItem.orientationFlag ? Qt.Vertical : Qt.Horizontal
             tickmarkAlignment: orientation === Qt.Vertical
                 ? (customizerItem.alignFlag ? Qt.AlignLeft : Qt.AlignRight)
                 : (customizerItem.alignFlag ? Qt.AlignTop : Qt.AlignBottom)
         }

         customizer: Column {
             spacing: customizerPropertySpacing

             property alias value: valueSlider.value
             property alias orientationFlag: orientationCheckBox.checked
             property alias alignFlag: alignCheckBox.checked

             CustomizerLabel {
                 text: "Value"
             }

             CustomizerSlider {
                 id: valueSlider
                 minimumValue: 0
                 value: 50
                 maximumValue: 100
             }

             CustomizerLabel {
                 text: "Vertical orientation"
             }

             CustomizerSwitch {
                 id: orientationCheckBox
                 checked: true
             }

             CustomizerLabel {
                 text: controlItem.orientation === Qt.Vertical ? "Left align" : "Top align"
             }

             CustomizerSwitch {
                 id: alignCheckBox
                 checked: true
             }
         }
     }

     property Component toggleButton: ControlView {
         darkBackground: false

         control: ToggleButton {
             text: checked ? "On" : "Off"
             anchors.centerIn: parent
         }
     }

     property Component pieMenu: PieMenuControlView {}

     property Component statusIndicator: ControlView {
         id: statusIndicatorView
         darkBackground: false

         Timer {
             id: recordingFlashTimer
             running: true
             repeat: true
             interval: 1000
         }

         ColumnLayout {
             id: indicatorLayout
             width: statusIndicatorView.controlBounds.width * 0.25
             height: statusIndicatorView.controlBounds.height * 0.75
             anchors.centerIn: parent

             Repeater {
                 model: ListModel {
                     id: indicatorModel
                     ListElement {
                         name: "Power"
                         indicatorColor: "#35e02f"
                     }
                     ListElement {
                         name: "Recording"
                         indicatorColor: "red"
                     }
                 }

                 ColumnLayout {
                     Layout.preferredWidth: indicatorLayout.width
                     spacing: 0

                     StatusIndicator {
                         id: indicator
                         color: indicatorColor
                         Layout.preferredWidth: statusIndicatorView.controlBounds.width * 0.07
                         Layout.preferredHeight: Layout.preferredWidth
                         Layout.alignment: Qt.AlignHCenter
                         on: true

                         Connections {
                             target: recordingFlashTimer
                             onTriggered: if (name == "Recording") indicator.active = !indicator.active
                         }
                     }
                     ControlLabel {
                         id: indicatorLabel
                         text: name
                         Layout.alignment: Qt.AlignHCenter
                         Layout.maximumWidth: parent.width
                         horizontalAlignment: Text.AlignHCenter
                     }
                 }
             }
         }
     }

     property Component tumbler: ControlView {
         id: tumblerView
         darkBackground: false

         Tumbler {
             id: tumbler
             anchors.centerIn: parent

             // TODO: Use FontMetrics with 5.4
             Label {
                 id: characterMetrics
                 font.bold: true
                 font.pixelSize: textSingleton.font.pixelSize * 1.25
                 font.family: openSans.name
                 visible: false
                 text: "M"
             }

             readonly property real delegateTextMargins: characterMetrics.width * 1.5
             readonly property var days: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

             TumblerColumn {
                 id: tumblerDayColumn

                 function updateModel() {
                     var previousIndex = tumblerDayColumn.currentIndex;
                     var newDays = tumbler.days[monthColumn.currentIndex];

                     if (!model) {
                         var array = [];
                         for (var i = 0; i < newDays; ++i) {
                             array.push(i + 1);
                         }
                         model = array;
                     } else {
                         // If we've already got days in the model, just add or remove
                         // the minimum amount necessary to make spinning the month column fast.
                         var difference = model.length - newDays;
                         if (model.length > newDays) {
                             model.splice(model.length - 1, difference);
                         } else {
                             var lastDay = model[model.length - 1];
                             for (i = lastDay; i < lastDay + difference; ++i) {
                                 model.push(i + 1);
                             }
                         }
                     }

                     tumbler.setCurrentIndexAt(0, Math.min(newDays - 1, previousIndex));
                 }
             }
             TumblerColumn {
                 id: monthColumn
                 width: characterMetrics.width * 3 + tumbler.delegateTextMargins
                 model: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
                 onCurrentIndexChanged: tumblerDayColumn.updateModel()
             }
             TumblerColumn {
                 width: characterMetrics.width * 4 + tumbler.delegateTextMargins
                 model: ListModel {
                     Component.onCompleted: {
                         for (var i = 2000; i < 2100; ++i) {
                             append({value: i.toString()});
                         }
                     }
                 }
             }
         }
     }

     FontLoader {
         id: openSans
         source: "qrc:/fonts/OpenSans-Regular.ttf"
      }

     property var componentMap: {
         "CircularGauge": circularGauge,
         "DelayButton": delayButton,
         "Dial": dial,
         "Gauge": gauge,
         "PieMenu": pieMenu,
         "StatusIndicator": statusIndicator,
         "ToggleButton": toggleButton,
         "Tumbler": tumbler
     }

     StackView {
         id: stackView
         anchors.fill: parent

         initialItem: ListView {
             model: ListModel {
                 ListElement {
                     title: "CircularGauge"
                 }
                 ListElement {
                     title: "DelayButton"
                 }
                 ListElement {
                     title: "Dial"
                 }
                 ListElement {
                     title: "Gauge"
                 }
                 ListElement {
                     title: "PieMenu"
                 }
                 ListElement {
                     title: "StatusIndicator"
                 }
                 ListElement {
                     title: "ToggleButton"
                 }
                 ListElement {
                     title: "Tumbler"
                 }
             }

             delegate: Button {
                 width: stackView.width
                 height: root.height * 0.125
                 text: title

                 style: BlackButtonStyle {
                     fontColor: root.darkFontColor
                     rightAlignedIconSource: "qrc:/images/icon-go.png"
                 }

                 onClicked: {
                     if (stackView.depth == 1) {
                         // Only push the control view if we haven't already pushed it...
                         stackView.push({item: componentMap[title]});
                         stackView.currentItem.forceActiveFocus();
                     }
                 }
             }
         }
     }
 }