C

Qt Quick Ultralite Watch Demo

/****************************************************************************** ** ** Copyright (C) 2019 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Quick Ultralite module. ** ** $QT_BEGIN_LICENSE:COMM$ ** ** 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 http://www.qt.io/terms-conditions. For further ** information use the contact form at http://www.qt.io/contact-us. ** ** $QT_END_LICENSE$ ** ******************************************************************************/
import QtQuick Item { id: root height: Theme.appHeight width: Theme.appWidth property bool onScreen: false property bool offScreen: false property real baseOp: 0.0 property real stripesSideMargin: 4 property real stripesBottomMargin: 40 property real stripesIconsMargin: 30 property real needleOffset: 18 property real secondNeedleOffset: 20 property real arrowAnimationMs: 30 property real updateInterval: 1000 // One second property int introDuration: 100 SequentialAnimation { id: intro NumberAnimation { target: watchIndicators; property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDuration } NumberAnimation { target: stripesBackground; property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDuration } ParallelAnimation { NumberAnimation { target: batteryLevel; property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDuration } NumberAnimation { target: stepsLevel; property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDuration } } ParallelAnimation { NumberAnimation { target: batteryIcon; property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDuration } NumberAnimation { target: stepsIcon; property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDuration } NumberAnimation { target: heartBeat; property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDuration } NumberAnimation { target: calendar; property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDuration } } ParallelAnimation { NumberAnimation { target: secondArrow; property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDuration } NumberAnimation { target: centerDot; property: "opacity"; to: 1.0; easing.type: Easing.OutCubic; duration: introDuration } } } Timer { running: true repeat: true interval: updateInterval onTriggered: WatchModel.update() } Image { id: watchIndicators anchors.centerIn: parent source: "qrc:///images/shield/dots-all.png" opacity: baseOp } /* * Health content */ Image { id: stripesBackground source: "qrc:///images/shield/small-oval-alt.png" anchors.centerIn: parent opacity: baseOp } Image { id: batteryLevel source: "qrc:///images/shield/battery.png" anchors.bottom: stripesBackground.bottom anchors.bottomMargin: root.stripesBottomMargin anchors.left: stripesBackground.left anchors.leftMargin: root.stripesSideMargin opacity: baseOp } Image { id: stepsLevel source: "qrc:///images/shield/steps.png" anchors.bottom: stripesBackground.bottom anchors.bottomMargin: root.stripesBottomMargin anchors.right: stripesBackground.right anchors.rightMargin: root.stripesSideMargin opacity: baseOp } Image { id: batteryIcon source: "qrc:///images/shield/battery-icon.png" anchors.verticalCenter: stripesBackground.verticalCenter anchors.left: stripesBackground.left anchors.leftMargin: root.stripesIconsMargin opacity: baseOp } Image { id: stepsIcon source: "qrc:///images/shield/steps-icon.png" anchors.verticalCenter: stripesBackground.verticalCenter anchors.right: stripesBackground.right anchors.rightMargin: root.stripesIconsMargin opacity: baseOp } Row { id: heartBeat opacity: baseOp spacing: 10 anchors.top: parent.top anchors.topMargin: parent.height / 4 anchors.horizontalCenter: parent.horizontalCenter Image { anchors.verticalCenter: parent.verticalCenter source: "qrc:///images/shield/heart.png" } Text { anchors.verticalCenter: parent.verticalCenter text: HealthModel.HeartRate font.pixelSize: 34 font.family: Theme.fontFamily font.weight: Font.Light color: Theme.whiteColor } } /* * Watch arrows */ Image { id: minuteArrow source: "qrc:///images/shield/hand-minute.png" anchors.top: parent.top anchors.topMargin: parent.height / 2 - height + needleOffset anchors.horizontalCenter: parent.horizontalCenter transform: Rotation { angle: WatchModel.MinuteAngle origin.x: minuteArrow.width / 2 origin.y: minuteArrow.height - needleOffset } } Image { id: hourArrow source: "qrc:///images/shield/hand-hour.png" anchors.top: parent.top anchors.topMargin: parent.height / 2 - height + needleOffset anchors.horizontalCenter: parent.horizontalCenter transform: Rotation { angle: WatchModel.HourAngle origin.x: hourArrow.width / 2 origin.y: hourArrow.height - needleOffset } } Image { id: secondArrow source: "qrc:///images/shield/hand-second.png" anchors.top: parent.top anchors.topMargin: parent.height / 2 - height + secondNeedleOffset anchors.horizontalCenter: parent.horizontalCenter opacity: baseOp transform: Rotation { angle: WatchModel.SecondAngle origin.x: secondArrow.width / 2 origin.y: secondArrow.height - secondNeedleOffset } } Image { id: centerDot source: "qrc:///images/shield/hands-middle-dot.png" anchors.centerIn: parent opacity: baseOp } /* * Calendar text */ Column { id: calendar opacity: baseOp anchors.bottom: parent.bottom anchors.bottomMargin: parent.height / 4 anchors.horizontalCenter: parent.horizontalCenter StaticText { anchors.horizontalCenter: parent.horizontalCenter text: "Friday" font.pixelSize: 26 font.family: Theme.fontFamily font.weight: Font.Light color: Theme.whiteColor } StaticText { anchors.horizontalCenter: parent.horizontalCenter text: "16.08" font.pixelSize: 26 font.family: Theme.fontFamily font.weight: Font.Light color: Theme.whiteColor } } onOnScreenChanged: { console.log("Screen changed") if (onScreen) { intro.start() } } onOffScreenChanged: { if (offScreen) { resetIntro() } } function resetIntro() { intro.stop() watchIndicators.opacity = baseOp secondArrow.opacity = baseOp stripesBackground.opacity = baseOp batteryIcon.opacity = baseOp stepsIcon.opacity = baseOp batteryLevel.opacity = baseOp stepsLevel.opacity = baseOp heartBeat.opacity = baseOp calendar.opacity = baseOp } }