Adding alternative watch demo

playground/watchDS/DateComp.ui.qml

+import QtQuick 2.8
+import QtQuick.Timeline 1.0
+import QtQuick.Studio.Components 1.0
+
+RectangleItem {
+    id: rectangle
+    width: 80
+    height: 22
+    fillColor: "#0b0a0a"
+    strokeColor: "#f0efef"
+    strokeWidth: 1
+
+    RectangleItem {
+        id: rectangle1
+        x: 42
+        y: 1
+        width: 37
+        height: 20
+        borderMode: 1
+        bottomLeftRadius: 0
+        topLeftRadius: 0
+        strokeColor: "#00f0efef"
+        strokeWidth: 0
+        fillColor: "#b7b3b3"
+
+        Item {
+            id: clipMaskDays1
+            x: -4
+            y: 0
+            width: 47
+            height: 22
+            clip: true
+
+            PathView {
+                id: pathView1
+                x: 5
+                y: -219
+                width: 42
+                height: 549
+                path: Path {
+                    PathCubic {
+                        x: 24
+                        y: 600
+                        control1X: 13
+                        control2Y: 315
+                        control1Y: 144.667
+                        control2X: 23
+                    }
+                    startY: 78
+                    startX: 13
+                }
+                delegate: Column {
+                    width: 50
+                    height: 140
+                    spacing: 5
+                    Text {
+                        x: 5
+                        color: "#484848"
+                        text: name
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        font.bold: true
+                    }
+                }
+                model: ListModel {
+                    ListElement {
+                        name: "1"
+                    }
+
+                    ListElement {
+                        name: "2"
+                    }
+
+                    ListElement {
+                        name: "3"
+                    }
+
+                    ListElement {
+                        name: "4"
+                    }
+
+                    ListElement {
+                        name: "5"
+                    }
+
+                    ListElement {
+                        name: "6"
+                    }
+
+                    ListElement {
+                        name: "7"
+                    }
+
+                    ListElement {
+                        name: "8"
+                    }
+
+                    ListElement {
+                        name: "9"
+                    }
+
+                    ListElement {
+                        name: "10"
+                    }
+
+                    ListElement {
+                        name: "11"
+                    }
+
+                    ListElement {
+                        name: "12"
+                    }
+
+                    ListElement {
+                        name: "13"
+                    }
+
+                    ListElement {
+                        name: "14"
+                    }
+
+                    ListElement {
+                        name: "15"
+                    }
+
+                    ListElement {
+                        name: "16"
+                    }
+
+                    ListElement {
+                        name: "17"
+                    }
+
+                    ListElement {
+                        name: "18"
+                    }
+
+                    ListElement {
+                        name: "19"
+                    }
+
+                    ListElement {
+                        name: "20"
+                    }
+
+                    ListElement {
+                        name: "21"
+                    }
+
+                    ListElement {
+                        name: "22"
+                    }
+
+                    ListElement {
+                        name: "23"
+                    }
+
+                    ListElement {
+                        name: "22"
+                    }
+
+                    ListElement {
+                        name: "24"
+                    }
+
+                    ListElement {
+                        name: "25"
+                    }
+
+                    ListElement {
+                        name: "26"
+                    }
+
+                    ListElement {
+                        name: "27"
+                    }
+
+                    ListElement {
+                        name: "28"
+                    }
+
+                    ListElement {
+                        name: "29"
+                    }
+
+                    ListElement {
+                        name: "30"
+                    }
+
+                    ListElement {
+                        name: "31"
+                    }
+                }
+            }
+        }
+
+        Item {
+            id: clipMaskDays
+            x: -42
+            y: 0
+            width: 47
+            height: 22
+            clip: true
+
+            PathView {
+                id: pathView
+                x: 6
+                y: -128
+                width: 42
+                height: 312
+                path: Path {
+                    startY: 78
+                    startX: 13
+
+                    PathCubic {
+                        x: 24
+                        y: 313
+                        control1X: 13
+                        control2Y: 315
+                        control1Y: 144.667
+                        control2X: 23
+                    }
+                }
+                delegate: Column {
+                    width: 50
+                    height: 140
+                    spacing: 5
+
+                    Text {
+                        x: 5
+                        color: "#ffffff"
+                        text: name
+                        styleColor: "#00000000"
+                        style: Text.Normal
+                        font.family: "Verdana"
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        font.bold: true
+                    }
+                }
+                model: ListModel {
+                    ListElement {
+                        name: "Mon"
+                    }
+
+                    ListElement {
+                        name: "Tues"
+                    }
+
+                    ListElement {
+                        name: "Wed"
+                    }
+
+                    ListElement {
+                        name: "Thur"
+                    }
+
+                    ListElement {
+                        name: "Fri"
+                    }
+
+                    ListElement {
+                        name: "Sat"
+                    }
+
+                    ListElement {
+                        name: "Sun"
+                    }
+                }
+            }
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:22;width:80}
+}
+##^##*/

playground/watchDS/testProject/Screen01.ui.qml

+import QtQuick 2.12
+import testProject 1.0
+
+Rectangle {
+    width: Constants.width
+    height: Constants.height
+
+    color: Constants.backgroundColor
+
+    Text {
+        text: qsTr("Hello testProject")
+        anchors.centerIn: parent
+        font.family: Constants.font.family
+    }
+}

playground/watchDS/testProject/fonts/fonts.txt

+Fonts in this folder are loaded automatically.

playground/watchDS/testProject/imports/QtQuick/Studio/Components/ArcItem.qml

+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick 2.9
+import QtQuick.Shapes 1.0
+
+Shape {
+    id: root
+
+    implicitWidth: 100
+    implicitHeight: 100
+
+    property alias gradient: path.fillGradient
+    property alias strokeStyle: path.strokeStyle
+    property alias strokeWidth: path.strokeWidth
+    property alias strokeColor: path.strokeColor
+    property alias dashPattern: path.dashPattern
+    property alias joinStyle: path.joinStyle
+    property alias fillColor: path.fillColor
+    property alias capStyle: path.capStyle
+    property alias dashOffset: path.dashOffset
+
+    property real begin: 0
+    property real end: 90
+
+    property real arcWidth: 10
+
+    property real arcWidthBegin: arcWidth
+    property real arcWidthEnd: arcWidth
+
+    property real radiusInnerAdjust: 0
+    property real radiusOuterAdjust: 0
+
+    property real alpha: clamp(sortedEnd() - sortedBegin(),0, 359.9)
+
+    property bool antialiasing: false
+    layer.enabled: antialiasing
+    layer.smooth: antialiasing
+    layer.textureSize: Qt.size(width * 2, height * 2)
+    property bool outlineArc: false
+
+    property bool round: false
+
+    property bool roundEnd: round
+    property bool roundBegin: round
+
+    function clamp(num, min, max) {
+        return num <= min ? min : num >= max ? max : num;
+    }
+
+    function myCos(angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        return Math.cos(angleInRadians)
+    }
+
+    function mySin(angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        return Math.sin(angleInRadians)
+    }
+
+    function polarToCartesianX(centerX, centerY, radius, angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        var x = centerX + radius * Math.cos(angleInRadians)
+        return x
+    }
+
+    function polarToCartesianY(centerX, centerY, radius, angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        var y = centerY + radius * Math.sin(angleInRadians);
+        return y
+    }
+
+    function calc()
+    {
+        path.__xRadius = root.width / 2 - root.strokeWidth / 2
+        path.__yRadius = root.height / 2 - root.strokeWidth / 2
+
+        path.__Xcenter = root.width / 2
+        path.__Ycenter = root.height / 2
+
+        path.startX = root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.sortedBegin() - 90) +  root.__beginOff * myCos(root.sortedBegin() + 90)
+        path.startY = root.polarToCartesianY(path.__Xcenter, path.__Ycenter, path.__yRadius, root.sortedBegin() - 90) + root.__beginOff * mySin(root.sortedBegin() + 90)
+
+        arc1.x = root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.sortedEnd() - 90) + root.__endOff * myCos(root.sortedEnd() + 90)
+        arc1.y = root.polarToCartesianY(path.__Xcenter, path.__Ycenter,  path.__yRadius, root.sortedEnd() - 90) + root.__endOff * mySin(root.sortedEnd() + 90)
+
+        arc1.radiusX =  path.__xRadius - root.__endOff / 2 -root.__beginOff / 2 + root.radiusOuterAdjust
+        arc1.radiusY =  path.__yRadius - root.__endOff / 2 -root.__beginOff / 2 + root.radiusOuterAdjust
+
+        arc1.useLargeArc =  root.alpha > 180
+    }
+
+    function sortedBegin()
+    {
+        return(Math.min(root.begin, root.end))
+    }
+
+    function sortedEnd()
+    {
+        return(Math.max(root.begin, root.end))
+    }
+
+
+    onWidthChanged: calc()
+    onBeginChanged: calc()
+    onEndChanged: calc()
+    onAlphaChanged: calc()
+
+    ShapePath {
+        id: path
+
+        property real __xRadius
+        property real __yRadius
+
+        property real __Xcenter
+        property real __Ycenter
+
+        strokeColor: "transparent"
+        strokeWidth: 1
+        capStyle: ShapePath.FlatCap
+    }
+
+    property real __beginOff: {
+
+        if (root.arcWidthEnd > root.arcWidthBegin)
+            return (root.arcWidthEnd - root.arcWidthBegin) / 2
+
+        return 0;
+    }
+
+    property real __endOff: {
+
+        if (root.arcWidthBegin > root.arcWidthEnd)
+            return (root.arcWidthBegin - root.arcWidthEnd) / 2
+
+        return 0;
+    }
+
+    property real __startP: root.arcWidthBegin + __beginOff
+    property real __endP: root.arcWidthEnd + __endOff
+
+    Item {
+        id: shapes
+        PathArc {
+            id: arc1
+            property bool add: true
+        }
+
+        PathLine {
+            relativeX: root.arcWidthEnd * myCos(root.sortedEnd())
+            relativeY: root.arcWidthEnd * mySin(root.sortedEnd())
+            property bool add: !root.roundEnd && (root.outlineArc && root.alpha < 359.8)
+
+        }
+
+        PathArc {
+            relativeX: root.arcWidthEnd * myCos(root.sortedEnd())
+            relativeY: root.arcWidthEnd * mySin(root.sortedEnd())
+            radiusX: root.arcWidthEnd /2
+            radiusY: root.arcWidthEnd /2
+            property bool add: root.roundEnd && (root.outlineArc && root.alpha < 359.8)
+        }
+
+        PathMove {
+            relativeX: root.arcWidthEnd * myCos(root.sortedEnd())
+            relativeY: root.arcWidthEnd * mySin(root.sortedEnd())
+            property bool add: root.outlineArc && root.alpha > 359.7
+        }
+
+        PathArc {
+            id: arc2
+            useLargeArc: arc1.useLargeArc
+
+            radiusX: path.__xRadius - root.arcWidthBegin + root.__beginOff / 2 + root.__endOff / 2  + root.radiusInnerAdjust
+            radiusY:path.__yRadius - root.arcWidthBegin + root.__beginOff / 2 + root.__endOff / 2 + root.radiusInnerAdjust
+
+            x: path.startX + root.arcWidthBegin * myCos(root.sortedBegin())
+            y: path.startY + root.arcWidthBegin * mySin(root.sortedBegin())
+
+            direction: PathArc.Counterclockwise
+
+            property bool add: root.outlineArc
+        }
+
+
+        PathLine {
+            x: path.startX
+            y: path.startY
+            property bool add: !root.roundBegin && root.outlineArc && root.alpha < 359.8
+
+        }
+
+        PathArc {
+            x: path.startX
+            y: path.startY
+            radiusX: root.arcWidthEnd /2
+            radiusY: root.arcWidthEnd /2
+            property bool add: root.roundBegin && root.outlineArc && root.alpha < 359.8
+        }
+
+        PathMove {
+            x: path.startX
+            y: path.startY
+            property bool add: root.outlineArc && root.alpha == 360
+        }
+    }
+
+    function invalidatePaths() {
+        if (!root.__completed)
+            return
+
+        for (var i = 0; i < shapes.resources.length; i++) {
+            var s = shapes.resources[i];
+            if (s.add)
+                path.pathElements.push(s)
+        }
+
+    }
+
+    property bool __completed: false
+
+    Component.onCompleted: {
+        root.__completed = true
+        invalidatePaths()
+        calc()
+    }
+}

playground/watchDS/testProject/imports/QtQuick/Studio/Components/BorderItem.qml

+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.