diff --git a/doc/qtcreator/src/qtquick/library/qtquick-images.qdoc b/doc/qtcreator/src/qtquick/library/qtquick-images.qdoc index 2e0feaf638c..92b00c37884 100644 --- a/doc/qtcreator/src/qtquick/library/qtquick-images.qdoc +++ b/doc/qtcreator/src/qtquick/library/qtquick-images.qdoc @@ -29,6 +29,7 @@ \nextpage quick-controls.html \title Images + \target basic-image The Image type is used for adding images to the UI in several supported formats, including bitmap formats, such as PNG and JPEG, and vector graphics diff --git a/doc/qtdesignstudio/examples/doc/images/washingmachineui-application-flow.png b/doc/qtdesignstudio/examples/doc/images/washingmachineui-application-flow.png new file mode 100644 index 00000000000..42c54ee9fb8 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/washingmachineui-application-flow.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/washingmachineui-connections-presets.png b/doc/qtdesignstudio/examples/doc/images/washingmachineui-connections-presets.png new file mode 100644 index 00000000000..59c5c61315f Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/washingmachineui-connections-presets.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/washingmachineui-connections.png b/doc/qtdesignstudio/examples/doc/images/washingmachineui-connections.png new file mode 100644 index 00000000000..04f3acad87e Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/washingmachineui-connections.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/washingmachineui-insert-keyframe.png b/doc/qtdesignstudio/examples/doc/images/washingmachineui-insert-keyframe.png new file mode 100644 index 00000000000..4ffcf8fa2a0 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/washingmachineui-insert-keyframe.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/washingmachineui-multisegmentarc.png b/doc/qtdesignstudio/examples/doc/images/washingmachineui-multisegmentarc.png new file mode 100644 index 00000000000..c8dcc67a971 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/washingmachineui-multisegmentarc.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/washingmachineui-multsegmentarc.gif b/doc/qtdesignstudio/examples/doc/images/washingmachineui-multsegmentarc.gif new file mode 100644 index 00000000000..db9f3549087 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/washingmachineui-multsegmentarc.gif differ diff --git a/doc/qtdesignstudio/examples/doc/images/washingmachineui-progress-indicator.png b/doc/qtdesignstudio/examples/doc/images/washingmachineui-progress-indicator.png new file mode 100644 index 00000000000..c81e1fde535 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/washingmachineui-progress-indicator.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/washingmachineui-states.png b/doc/qtdesignstudio/examples/doc/images/washingmachineui-states.png new file mode 100644 index 00000000000..6d2a9663691 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/washingmachineui-states.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/washingmachineui-timeline-settings.png b/doc/qtdesignstudio/examples/doc/images/washingmachineui-timeline-settings.png new file mode 100644 index 00000000000..95d04a60e02 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/washingmachineui-timeline-settings.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/washingmachineui-timeline.png b/doc/qtdesignstudio/examples/doc/images/washingmachineui-timeline.png new file mode 100644 index 00000000000..4427c696bb8 Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/washingmachineui-timeline.png differ diff --git a/doc/qtdesignstudio/examples/doc/images/washingmachineui.png b/doc/qtdesignstudio/examples/doc/images/washingmachineui.png new file mode 100644 index 00000000000..f87cd81f04f Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/washingmachineui.png differ diff --git a/doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc b/doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc new file mode 100644 index 00000000000..2bd8e7538b1 --- /dev/null +++ b/doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc @@ -0,0 +1,277 @@ +/**************************************************************************** +** +** Copyright (C) 2021 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the Qt Design Studio documentation. +** +** 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. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: https://www.gnu.org/licenses/fdl-1.3.html. +** +****************************************************************************/ + +/*! + \example washingMachineUI + \ingroup studioexamples + + \title Washing Machine UI + \brief Illustrates how to create a UI that can be run both on the desktop + and on MCUs. + + \image washingmachineui.png "Start screen" + + \e {Washing Machine UI} is a control panel application for washing machines. + The application contains the following screens: + + \list + \li \e Start displays a start button + \li \e Presets displays recently used wash programs + \li \e {Quick Start} enables users to either specify settings or + start the selected wash program + \li \e {Wash Program} displays wash program settings + \li \e Running displays the progress of the wash program + \endlist + + Users select buttons to navigate between the screens. + We use \l{Connecting Objects to Signals}{connections} to determine which + screen to open when users select a particular button and \l{Adding States} + {States} to show the screens. We use the \l{Creating Animations}{timeline} + to create progress indicators for buttons and the \e Running screen. + + In addition, all screens contain a small clock component that displays + the current time. We implement a \e TimeDate JavaScript component to + support this feature on \l{https://doc.qt.io/QtForMCUs/qtul-qmltypes.html} + {Qt for MCUs}, which does not support the \l Date QML type at the time of + writing. + + \section1 Creating an Application for MCUs + + We use the \uicontrol {Qt for MCUs Application} project template to create + an application for MCUs, which support only a subset of the \l{Qt QML}, + \l {Qt Quick}, and \l{Qt Quick Controls} types. We select \uicontrol File > + \uicontrol {New File or Project} > \uicontrol {Qt for MCUs Application} > + \uicontrol Choose, and follow the instructions of the wizard to create our + project. + + This way, only the components and properties supported on MCUs are visible + in \uicontrol Library and \uicontrol Properties, and we won't accidentally + add unsupported components to our UI or specify unsupported properties for + supported components. For more information, see \l{Creating Projects}. + + In addition, the wizard template creates a generic \c CMakeLists.txt file + that we can use to configure and build our example application for running + it on MCUs. + + \note This example was developed using Qt for MCUs version 1.6. You + cannot run it on older versions, and we cannot make any promises about + newer versions. + + \section1 Creating Screens + + For this example, we used an external tool to design the UI and then + exported and imported our design into \QDS as assets and components + using \QB, as instructed in \l{Exporting from Design Tools}. While + exporting, we only picked QML types supported by Qt for MCUs to use + for our components. For the button components, we mostly use the + \l {basic-image}{Image}, \l Text, and \l {Mouse Area} types. For the + screen background, we use the \l {basic-rectangle}{Rectangle} type. + + The text might look different on the desktop and MCUs, because on the + desktop we use dynamic font loading, whereas on MCUs fonts are compiled + into application sources. Therefore, the text will always be Maven Pro + on MCUs, whereas on the desktop you'd need to have Maven Pro installed + for it to be used. Usually, you will see the system default font instead. + + We also created a more complicated component called \e MultSegmentArc + that we use to indicate that a button is pressed. + + Alternatively, you could create the screens from scratch in \QDS + by selecting \uicontrol File > \uicontrol {New File or Project} > + \uicontrol {Qt Quick Files}. While designing the screens, you can + move reusable components into separate files. For more information, + see \l{Creating Components}. + + \section1 Creating a Progress Indicator + + We create a reusable MultSegmentArc component, and use it in our + \e Bigbutton and \e Smallbutton components to indicate the button + press progress. The component displays an animated arc around a + button when it is pressed. On the desktop, users only need to click + once to run the animation to the end, whereas on MCUs, they need + to keep the button pressed until the animation finishes. + + \image washingmachineui-progress-indicator.png "Button progress indicator" + + Our component is composed of four blocks, into which the arc segments will + rotate to indicate progress. To build it, we use \l{basic-image}{Image} + components that have pictures of four segments of an arc as sources and + \l{basic-rectangle}{Rectangle} components that mask the segments of the + arc that should be hidden until they have rotated into place. For the + \e Smallbutton component, we override the images with pictures of smaller + arc segments that will fit nicely around the small button. + + \image washingmachineui-multisegmentarc.png "MultSegmentArc component" + + We animate the rotation properties of the arc segments to rotate each of + them into the next block, one after another. + + We use this component instead of the \l Arc type, which is not supported + on MCUs. + + We can now add a timeline animation to make the arc move around the button + when the button is pressed. In the \uicontrol Timeline view, we select the + \inlineimage plus.png + button to add a 1000-frame timeline to the \e root of the component. + We'll use the default values for all other fields. + + \image washingmachineui-timeline-settings.png "Timeline settings" + + First, we select the initial arc segment, \e arcSegment1, in + \uicontrol Navigator to display its properties in \uicontrol Properties. + In the \uicontrol Layout tab, \uicontrol Rotation field, we select + \inlineimage icons/action-icon.png + , and then select \uicontrol {Insert Keyframe} to insert a keyframe + that we can animate in the \uicontrol Timeline view. + + \image washingmachineui-insert-keyframe.png "Inserting keyframe for Rotation property" + + To start recording a rotation animation on the timeline, we check that the + playhead is at frame 0 and then select the \inlineimage recordfill.png + (\uicontrol {Auto Key (K)}) button (or press \key k). + + First, we set the rotation at frame 0 to -90 in \uicontrol Properties > + \uicontrol Layout > \uicontrol Rotation. Next, we move the playhead to + frame 250 and set the rotation to 0. + + When we deselect the record button to stop recording the timeline, the + new timeline appears in the view. + + \image washingmachineui-timeline.png "Rotation animation in Timeline view" + + We now repeat the above steps to add keyframes for the other arc + segments and to animate their rotation property to move from -90 + at frame 0 to 0 at frame 500 (\e arcSegment2), 750 (\e arcSegment3), + and 1000 (\e arcSegment4). + + When we move the playhead in \uicontrol Timeline, we can see the rotation + animation in \uicontrol {Form Editor}. + + \image washingmachineui-multsegmentarc.gif "Rotation animation in Form Editor" + + \section1 Creating States + + In our UI, we use connections and states to move between screens. First, + we specify the application workflow in \e ApplicationFlow.qml. When the + file is open in \uicontrol {Form Editor}, we drag and drop the components + that define the screens in the application from \uicontrol Library to + \uicontrol Navigator or \uicontrol {Form Editor}: \e StartScreen, + \e SettingsScreen, \e PresetsScreen, and \e RunningScreen. + + \image washingmachineui-application-flow.png "startScreen component in different views" + + Because we will use states to display one screen at a time, depending on + the choices users make, we can place all the screens on top of each other + in the top-left corner of the root component. + + Then, we open the \uicontrol States view to create the \e start, + \e settings, \e presets, and \e running \l{Adding States}{states} for + displaying a particular screen by selecting \uicontrol {Create New State}. + + \image washingmachineui-states.png "States view" + + In Qt for MCU, states work differently from Qt Quick, and therefore we + sometimes use \c when conditions to determine the state to apply, and + sometimes switch states using signals and JavaScript expressions. + + \section1 Connecting Buttons to State Changes + + In each file that defines a screen, we connect signals to the + button objects to change to a particular state when users select + buttons. + + Some signals are predefined for the \l {Mouse Area} type, some we have to + add ourselves. For example, let's look at the start button that we use + in \e StartScreen.ui.qml. First, we use the \uicontrol {Text Editor} view + to create the \c startClicked signal: + + \quotefromfile washingMachineUI/StartScreen.ui.qml + \skipto Item { + \printuntil startClicked + + Then, we select the mouse area for the start button, \e startMA, + in \uicontrol Navigator. In the \uicontrol {Connection View} > + \uicontrol Connections tab, we select the \inlineimage plus.png + (\uicontrol Add) button to connect the \c onClicked() signal handler + of the button to the \c startClicked() signal. + + \image washingmachineui-connections.png "Connections view" + + Then, in \e ApplicationView.qml, we specify that the \c startClicked() + signal changes the application state to \e presets: + + \quotefromfile washingMachineUI/ApplicationFlow.qml + \skipto Item { + \printuntil } + + We have to do it this way, because we are developing for MCUs. We have to + use either \c when conditions or set the state directly through code, + which overrides \c when conditions. Otherwise, we could just select the + action to change to the state that we want in the \uicontrol Action field. + + We create similar connections between button objects and signals in the + other screens to apply other actions that move users to other screens. + + For more information, see \l {Connecting Objects to Signals}. + + \section1 Showing the Current Time + + The \l Date QML type is not supported on Qt for MCUs, and the + \l{https://doc.qt.io/QtForMCUs/qtul-javascript-environment.html} + {implementation of the JavaScript \c Date()} object returns elapsed + time since when the application was started instead of the current + date and time, as specified in ECMAScript specification. + + To get around this limitation on the desktop, we create our own component + in the \e Timedate.qml file with some properties that we will need later + to get the current time in hours and minutes: + + \quotefromfile washingMachineUI/Timedate.qml + \skipto Item { + \printuntil minInt + + On MCUs, we will unfortunately still see the elapsed time since when the + application was started. However, this is useful on the \e Running screen + for indicating the progress of the selected wash program. + + We use a \l Text component to create a label with formatted text: + + \printuntil } + + We use an \l Item as a logic module to get and format current time + information: + + \printuntil } + + We use the \c updateTime() function to display the current time in + hours and minutes: + + \printuntil } + + To use two digits for hours and minutes, we use the \c hrsStr, \c minStr, + \c hrsInt, and \c minInt properties to add extra zeros for values below + 10. This way, the clock will display the time as \c 08:00 instead as \c 8:0, + for example. +*/ diff --git a/doc/qtdesignstudio/examples/washingMachineUI/ApplicationFlow.qml b/doc/qtdesignstudio/examples/washingMachineUI/ApplicationFlow.qml new file mode 100644 index 00000000000..55cc25e4600 --- /dev/null +++ b/doc/qtdesignstudio/examples/washingMachineUI/ApplicationFlow.qml @@ -0,0 +1,209 @@ +/**************************************************************************** +** +** Copyright (C) 2021 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $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.15 + +Item { + id: root + state: "start" + + width: 480 + height: 272 + + StartScreen { + id: startScreen + + visible: true + + onStartClicked: { + root.state = "presets" + } + + onSettingsClicked: { + root.state = "settings" + } + } + + SettingsScreen { + id: settingsScreen + + visible: false + + onSettingsClosed: { + root.state = "start" + } + } + + PresetsScreen { + id: presetsScreen + + visible: false + + onStartRun: { + root.state = "running" + runningScreen.startRun() + } + + onCancelPresets: { + root.state = "start" + } + } + + RunningScreen { + id: runningScreen + + runDuration: presetsScreen.runDuration + visible: false + + onRunFinished: { + root.state = "start" + } + } + + states: [ + State { + name: "start" + + PropertyChanges { + target: startScreen + visible: true + } + + PropertyChanges { + target: settingsScreen + visible: false + } + + PropertyChanges { + target: presetsScreen + visible: false + } + + PropertyChanges { + target: runningScreen + visible: false + activated: false + } + }, + State { + name: "settings" + + PropertyChanges { + target: startScreen + visible: false + } + + PropertyChanges { + target: settingsScreen + visible: true + } + + PropertyChanges { + target: presetsScreen + visible: false + } + + PropertyChanges { + target: runningScreen + visible: false + activated: false + } + }, + State { + name: "presets" + + PropertyChanges { + target: startScreen + visible: false + } + + PropertyChanges { + target: settingsScreen + visible: false + } + + PropertyChanges { + target: presetsScreen + visible: true + } + + PropertyChanges { + target: runningScreen + visible: false + activated: false + } + }, + State { + name: "running" + + PropertyChanges { + target: startScreen + visible: false + } + + PropertyChanges { + target: settingsScreen + visible: false + } + + PropertyChanges { + target: presetsScreen + visible: false + } + + PropertyChanges { + target: runningScreen + visible: true + activated: true + } + } + + ] +} diff --git a/doc/qtdesignstudio/examples/washingMachineUI/MultSegmentArc.ui.qml b/doc/qtdesignstudio/examples/washingMachineUI/MultSegmentArc.ui.qml new file mode 100644 index 00000000000..7af230869ba --- /dev/null +++ b/doc/qtdesignstudio/examples/washingMachineUI/MultSegmentArc.ui.qml @@ -0,0 +1,251 @@ +/**************************************************************************** +** +** Copyright (C) 2021 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $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.Timeline 1.0 + +Item { + id: root + width: arcSegment1.width * 2 + root.borderOffest + height: arcSegment1.height * 2 + root.borderOffest + clip: true + property int borderOffest: 0 //was 5 + property alias arcSegment4Source: arcSegment4.source + property alias arcSegment3Source: arcSegment3.source + property alias arcSegment2Source: arcSegment2.source + property alias arcSegment1Source: arcSegment1.source + property alias timelineCurrentFrame: timeline.currentFrame + property color maskColor: "#000000" + + Image { + id: arcSegment4 + anchors.left: parent.left + anchors.top: parent.top + source: "assets/bigArcSegment4.png" + transformOrigin: Item.BottomRight + rotation: 0 + fillMode: Image.PreserveAspectFit + } + + Rectangle { + id: mask3 + width: arcSegment1.width + root.borderOffest + height: arcSegment1.height + root.borderOffest + color: root.maskColor + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + } + + Image { + id: arcSegment3 + anchors.left: parent.left + anchors.bottom: parent.bottom + source: "assets/bigArcSegment3.png" + rotation: 0 + transformOrigin: Item.TopRight + fillMode: Image.PreserveAspectFit + } + + Rectangle { + id: mask2 + width: arcSegment1.width + root.borderOffest + height: arcSegment1.height + root.borderOffest + color: root.maskColor + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + anchors.rightMargin: 0 + } + + Image { + id: arcSegment2 + anchors.right: parent.right + anchors.bottom: parent.bottom + source: "assets/bigArcSegment2.png" + rotation: 0 + transformOrigin: Item.TopLeft + fillMode: Image.PreserveAspectFit + } + + Rectangle { + id: mask1 + width: arcSegment1.width + root.borderOffest + height: arcSegment1.height + root.borderOffest + color: root.maskColor + anchors.right: parent.right + anchors.top: parent.top + anchors.topMargin: 0 + } + + Image { + id: arcSegment1 + anchors.right: parent.right + anchors.top: parent.top + source: "assets/bigArcSegment1.png" + rotation: 0 + transformOrigin: Item.BottomLeft + fillMode: Image.PreserveAspectFit + } + + Rectangle { + id: mask4 + width: arcSegment1.width + root.borderOffest + height: arcSegment1.height + root.borderOffest + opacity: 0 + color: root.maskColor + anchors.left: parent.left + anchors.top: parent.top + anchors.topMargin: 0 + } + + Timeline { + id: timeline + endFrame: 1000 + startFrame: 0 + enabled: true + + KeyframeGroup { + target: arcSegment1 + property: "rotation" + + Keyframe { + value: -90 + frame: 0 + } + + Keyframe { + value: 0 + frame: 250 + } + } + + KeyframeGroup { + target: arcSegment2 + property: "rotation" + + Keyframe { + value: -90 + frame: 0 + } + + Keyframe { + value: -90 + frame: 250 //was 252 + } + + Keyframe { + value: 0 + frame: 500 + } + } + + KeyframeGroup { + target: arcSegment3 + property: "rotation" + + Keyframe { + value: -90 + frame: 0 + } + + Keyframe { + value: -90 + frame: 500 + } + + Keyframe { + value: 0 + frame: 750 + } + } + + KeyframeGroup { + target: mask4 + property: "opacity" + + Keyframe { + value: 1 + frame: 0 + } + + Keyframe { + value: 1 + frame: 750 + } + + Keyframe { + value: 0 + frame: 751 + } + } + + KeyframeGroup { + target: arcSegment4 + property: "rotation" + + Keyframe { + value: -90 + frame: 0 + } + + Keyframe { + value: -90 + frame: 750 + } + + Keyframe { + value: 0 + frame: 1000 + } + } + } +} + diff --git a/doc/qtdesignstudio/examples/washingMachineUI/StartScreen.ui.qml b/doc/qtdesignstudio/examples/washingMachineUI/StartScreen.ui.qml new file mode 100644 index 00000000000..3feba436a46 --- /dev/null +++ b/doc/qtdesignstudio/examples/washingMachineUI/StartScreen.ui.qml @@ -0,0 +1,105 @@ +/**************************************************************************** +** +** Copyright (C) 2021 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $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.8 + +Item { + id: start + width: 480 + height: 272 + + signal startClicked + signal settingsClicked + + Flatbackground { + id: backgroundfull + anchors.fill: parent + } + + Timedate { + id: start_timedateinstance + x: 425 + y: 8 + width: 47 + height: 30 + } + + Image { + id: startButton + anchors.verticalCenter: parent.verticalCenter + source: "assets/drumcopy_temp.png" + anchors.horizontalCenter: parent.horizontalCenter + + Text { + id: startlabel + width: 80 + height: 37 + color: "#B8B8B8" + text: "Start" + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 36 + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + anchors.horizontalCenter: parent.horizontalCenter + font.family: "Maven Pro" + } + + MouseArea { + id: startMA + + anchors.fill: parent + + Connections { + target: startMA + onClicked: startClicked() + } + } + } +} diff --git a/doc/qtdesignstudio/examples/washingMachineUI/Timedate.qml b/doc/qtdesignstudio/examples/washingMachineUI/Timedate.qml new file mode 100644 index 00000000000..990b1febc57 --- /dev/null +++ b/doc/qtdesignstudio/examples/washingMachineUI/Timedate.qml @@ -0,0 +1,110 @@ +/**************************************************************************** +** +** Copyright (C) 2021 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Design Studio. +** +** $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.8 + +Item { + id: timedate + width: 47 + height: 29 + + readonly property alias currentHourInt: timeContainer.hrsInt + readonly property alias currentMinuteInt: timeContainer.minInt + + Text { + id: timelabel + x: 2 + y: -1 + width: 43 + height: 16 + color: "#B8B8B8" + font.pixelSize: 16 + horizontalAlignment: Text.AlignHCenter + font.family: "Maven Pro" + + text: timeContainer.hrsStr + ":" + timeContainer.minStr + } + + + Item { + id: timeContainer + property string hrsStr: "00" + property string minStr: "00" + + property int hrsInt: 0 + property int minInt: 0 + + Timer { + id: timer + interval: 1000 + running: true + repeat: true + + onTriggered: { + updateTime() + } + + function updateTime() { + var currentDate = new Date() + timeContainer.hrsInt = currentDate.getHours() + if (timeContainer.hrsInt < 10) timeContainer.hrsStr = "0" + timeContainer.hrsInt + else timeContainer.hrsStr = timeContainer.hrsInt + + timeContainer.minInt = currentDate.getMinutes() + if (timeContainer.minInt < 10) timeContainer.minStr = "0" + timeContainer.minInt + else timeContainer.minStr = timeContainer.minInt + } + } + } + + Component.onCompleted: { + timer.updateTime() + } +} diff --git a/doc/qtdesignstudio/examples/washingMachineUI/washingMachineUI.qmlproject b/doc/qtdesignstudio/examples/washingMachineUI/washingMachineUI.qmlproject new file mode 100644 index 00000000000..69a7f22f041 --- /dev/null +++ b/doc/qtdesignstudio/examples/washingMachineUI/washingMachineUI.qmlproject @@ -0,0 +1,40 @@ +import QmlProject 1.1 + +Project { + mainFile: "washingMachineUI.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + + JavaScriptFiles { + directory: "." + } + + ImageFiles { + directory: "." + } + + Files { + filter: "*.conf" + files: ["qtquickcontrols2.conf"] + } + + Files { + filter: "qmldir" + directory: "." + } + + Files { + filter: "*.ttf;*.otf" + } + + qtForMCUs: true + + /* List of plugin directories passed to QML runtime */ + importPaths: [ "imports", "asset_imports" ] + + /* Required for deployment */ + targetDirectory: "/opt/washingMachineUI" +}