qml/time/AnalogClock.qml

0001 /*
0002  * Copyright 2012 Viranch Mehta <viranch.mehta@gmail.com>
0003  * Copyright 2012 Marco Martin <mart@kde.org>
0004  * Copyright 2013 David Edmundson <davidedmundson@kde.org>
0005  * Copyright 2020 Devin Lin <espidev@gmail.com>
0006  *
0007  * SPDX-License-Identifier: GPL-2.0-or-later
0008  */
0009
0010 import QtQuick
0011 import QtQuick.Controls
0012
0013 import org.kde.ksvg as KSvg
0014
0015 Item {
0016     id: representation
0017
0018     property double hours: 0
0019     property double minutes: 0
0020     property double seconds: 0
0021
0022     property int realHours
0023     property int realMinutes
0024     property int realSeconds
0025
0026     // update time each second
0027     Timer {
0028         running: true
0029         repeat: true
0030         triggeredOnStart: true
0031         interval: 1000
0032         onTriggered: {
0033             let date = new Date();
0034             realHours = date.getHours();
0035             realMinutes = date.getMinutes();
0036             realSeconds = date.getSeconds();
0037         }
0038     }
0039
0040     // open dial hands moving animation
0041     NumberAnimation on hours {
0042         id: hoursShowAnimation
0043         to: new Date().getHours()
0044         running: true
0045         duration: 1500
0046         easing.type: Easing.OutQuint
0047         onFinished: representation.hours = Qt.binding(() => representation.realHours)
0048     }
0049     NumberAnimation on minutes {
0050         id: minutesShowAnimation
0051         to: new Date().getMinutes()
0052         running: true
0053         duration: 1500
0054         easing.type: Easing.OutQuint
0055         onFinished: representation.minutes = Qt.binding(() => representation.realMinutes)
0056     }
0057     NumberAnimation on seconds {
0058         id: secondsShowAnimation
0059         to: new Date().getSeconds()
0060         running: true
0061         duration: 1500
0062         easing.type: Easing.OutQuint
0063         onFinished: representation.seconds = Qt.binding(() => representation.realSeconds)
0064     }
0065
0066     KSvg.Svg {
0067         id: clockSvg
0068         imagePath: "widgets/clock"
0069         function estimateHorizontalHandShadowOffset() {
0070             var id = "hint-hands-shadow-offset-to-west";
0071             if (hasElement(id)) {
0072                 return -elementSize(id).width;
0073             }
0074             id = "hint-hands-shadows-offset-to-east";
0075             if (hasElement(id)) {
0076                 return elementSize(id).width;
0077             }
0078             return 0;
0079         }
0080         function estimateVerticalHandShadowOffset() {
0081             var id = "hint-hands-shadow-offset-to-north";
0082             if (hasElement(id)) {
0083                 return -elementSize(id).height;
0084             }
0085             id = "hint-hands-shadow-offset-to-south";
0086             if (hasElement(id)) {
0087                 return elementSize(id).height;
0088             }
0089             return 0;
0090         }
0091         property double naturalHorizontalHandShadowOffset: estimateHorizontalHandShadowOffset()
0092         property double naturalVerticalHandShadowOffset: estimateVerticalHandShadowOffset()
0093         onRepaintNeeded: {
0094             naturalHorizontalHandShadowOffset = estimateHorizontalHandShadowOffset();
0095             naturalVerticalHandShadowOffset = estimateVerticalHandShadowOffset();
0096         }
0097     }
0098
0099     Item {
0100         id: clock
0101         anchors.fill: parent
0102         readonly property double svgScale: face.width / face.naturalSize.width
0103         readonly property double horizontalShadowOffset:
0104             Math.round(clockSvg.naturalHorizontalHandShadowOffset * svgScale) + Math.round(clockSvg.naturalHorizontalHandShadowOffset * svgScale) % 2
0105         readonly property double verticalShadowOffset:
0106             Math.round(clockSvg.naturalVerticalHandShadowOffset * svgScale) + Math.round(clockSvg.naturalVerticalHandShadowOffset * svgScale) % 2
0107
0108         KSvg.SvgItem {
0109             id: face
0110             anchors.centerIn: parent
0111             width: Math.min(parent.width, parent.height)
0112             height: Math.min(parent.width, parent.height)
0113             svg: clockSvg
0114             elementId: "ClockFace"
0115         }
0116
0117         AnalogClockHand {
0118             elementId: "HourHandShadow"
0119             rotationCenterHintId: "hint-hourhandshadow-rotation-center-offset"
0120             horizontalRotationOffset: clock.horizontalShadowOffset
0121             verticalRotationOffset: clock.verticalShadowOffset
0122             rotation: 180 + hours * 30 + (minutes/2)
0123             svgScale: clock.svgScale
0124             animateRotation: !hoursShowAnimation.running
0125         }
0126         AnalogClockHand {
0127             elementId: "HourHand"
0128             rotationCenterHintId: "hint-hourhand-rotation-center-offset"
0129             rotation: 180 + hours * 30 + (minutes/2)
0130             svgScale: clock.svgScale
0131             animateRotation: !hoursShowAnimation.running
0132         }
0133
0134         AnalogClockHand {
0135             elementId: "MinuteHandShadow"
0136             rotationCenterHintId: "hint-minutehandshadow-rotation-center-offset"
0137             horizontalRotationOffset: clock.horizontalShadowOffset
0138             verticalRotationOffset: clock.verticalShadowOffset
0139             rotation: 180 + minutes * 6
0140             svgScale: clock.svgScale
0141             animateRotation: !minutesShowAnimation.running
0142         }
0143         AnalogClockHand {
0144             elementId: "MinuteHand"
0145             rotationCenterHintId: "hint-minutehand-rotation-center-offset"
0146             rotation: 180 + minutes * 6
0147             svgScale: clock.svgScale
0148             animateRotation: !minutesShowAnimation.running
0149         }
0150
0151         AnalogClockHand {
0152             elementId: "SecondHandShadow"
0153             rotationCenterHintId: "hint-secondhandshadow-rotation-center-offset"
0154             horizontalRotationOffset: clock.horizontalShadowOffset
0155             verticalRotationOffset: clock.verticalShadowOffset
0156             rotation: 180 + seconds * 6
0157             svgScale: clock.svgScale
0158             animateRotation: !secondsShowAnimation.running
0159         }
0160         AnalogClockHand {
0161             elementId: "SecondHand"
0162             rotationCenterHintId: "hint-secondhand-rotation-center-offset"
0163             rotation: 180 + seconds * 6
0164             svgScale: clock.svgScale
0165             animateRotation: !secondsShowAnimation.running
0166         }
0167
0168         KSvg.SvgItem {
0169             id: center
0170             width: naturalSize.width * clock.svgScale
0171             height: naturalSize.height * clock.svgScale
0172             anchors.centerIn: clock
0173             svg: clockSvg
0174             elementId: "HandCenterScrew"
0175             z: 1000
0176         }
0177
0178         KSvg.SvgItem {
0179             anchors.fill: face
0180             svg: clockSvg
0181             elementId: "Glass"
0182             width: naturalSize.width * clock.svgScale
0183             height: naturalSize.height * clock.svgScale
0184         }
0185     }
0186 }