qtdoc/examples/demos/lightningviewer/resources/qml/DistanceTimeLayer.qml

// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Layouts

Item {
    readonly property color titleColor: "white"
    readonly property int titleFontWeight: 700
    readonly property int titleFontSize: 14
    readonly property color valueColor: "#2CDE85"
    readonly property int valueFontWeight: 400
    readonly property int valueFontSize: 14

    Rectangle {
        anchors.fill: parent
        color: "#262626"
        opacity: 0.7
        radius: 15
    }

    GridLayout {
        anchors.fill: parent
        anchors.margins: 10
        columns: 2
        rows: 3

        Text {
            Layout.alignment: Qt.AlignLeft
            color: titleColor
            font.pixelSize: titleFontSize
            font.weight: titleFontWeight
            text: qsTr("Distance:")
        }
        Text {
            Layout.alignment: Qt.AlignRight
            color: valueColor
            font.pixelSize: valueFontSize
            font.weight: valueFontWeight
            readonly property double distance: LightningController.lastStrikeDistance
            text: distance < 0 ? "--" : `${(distance/1000).toFixed(1)}km`
        }

        Text {
            Layout.alignment: Qt.AlignLeft
            color: titleColor
            font.pixelSize: titleFontSize
            font.weight: titleFontWeight
            text: qsTr("Direction:")
        }
        Text {
            Layout.alignment: Qt.AlignRight
            color: valueColor
            font.pixelSize: valueFontSize
            font.weight: valueFontWeight
            readonly property real direction: LightningController.lastStrikeDirection
            text: toText(direction.toFixed(0))

            function toText(direction_) {
                if (direction_ < 0)
                    return "--";
                direction_ = direction_ % 360;
                if (direction_ < 90)
                    return `${direction_}° NE`;
                else if (direction_ < 180)
                    return `${180 - direction_}° SE`;
                else if (direction_ < 270)
                    return `${direction_ - 180}° SW`;
                else
                    return `${360 - direction_}° NW`;
            }
        }

        Text {
            Layout.alignment: Qt.AlignLeft
            color: titleColor
            font.pixelSize: titleFontSize
            font.weight: titleFontWeight
            text: qsTr("Time:")
        }
        Text {
            Layout.alignment: Qt.AlignRight
            color: valueColor
            font.pixelSize: valueFontSize
            font.weight: valueFontWeight
            readonly property bool valid: LightningController.lastStrikeTime > 0
            readonly property real duration: time.now - LightningController.lastStrikeTime
            text: valid ? toText(duration) : "--"

            function toText(duration_) {
                if (duration_ > 0) {
                    duration_ = (duration_ / 1000).toFixed(0);
                    const dh = (duration_ / 3600).toFixed(0);
                    const dm = ((duration_ % 3600) / 60).toFixed(0);
                    const ds = duration_ % 60;
                    if (dh > 0)
                        return `${dh}h ` + qsTr("ago");
                    else if (dm > 0)
                        return `${dm}m ` + qsTr("ago");
                    else
                        return `${ds}s ` + qsTr("ago");
                }
                return qsTr("now");
            }
        }
    }

    Timer {
        id: time
        interval: 1000
        running: true
        repeat: true
        property date now: new Date()
        onTriggered: now = new Date();
    }
}