gallery.qml Example File
gallery/qml/gallery.qml
/****************************************************************************
**
** 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 ();
}
}
}
}
}
}
