C

Qt Cluster: Rendering and Recovery from Main UI Failure

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

// This file is part of the Qt Safe Renderer module
import QtQuick
import ClusterDemo
import "gauges"
import Qt.SafeRenderer
import ".."

Item {
    width: 1920
    height: 1080

    property alias bottompanel: bottompanel

    property alias bottomPanelY: bottompanel.y
    property alias needleRotation: tachometer.speedometerNeedleRotation

    property alias meterOpacity: dashboardEntity.meterOpacity
    property alias speedometer: speedometer
    property alias tachometer: tachometer
    property alias speedText: speedText
    property alias smallMeter: smallMeter

    property alias turnIndicatorLeft: turnleft
    property alias turnIndicatorRight: turnright
    property alias iconCoolant: iconCoolant
    property alias iconBattery: iconBattery
    property alias iconFuel: iconFuel
    property alias iconParkingBrake: iconParkingBrake
    property alias iconLights: iconLights
    property alias iconTyre: iconTyre
    property alias iconLamp: iconLamp
    property alias iconSeatbelt: iconSeatbelt
    property alias safeText: safeText

    DashboardBackground {
        id: dashboardEntity
        width: 1920
        height: 720
        anchors.verticalCenter: parent.verticalCenter
        property real meterOpacity: 1.0

        SmallMeter {
            id: fuelMeter
            anchors.rightMargin: -1.5
            anchors.leftMargin: 1.5
            anchors.bottomMargin: 4.5
            anchors.top: batteryMeter.bottom
            anchors.right: batteryMeter.left
            anchors.bottom: batteryMeter.top
            anchors.left: batteryMeter.right
            value: ValueSource.fuelLevel
            opacity: dashboardEntity.meterOpacity
        }

        SmallMeter {
            id: batteryMeter
            x: 1074
            y: 42
            width: 216
            height: 216
            anchors.topMargin: 42
            anchors.rightMargin: 631.5
            value: ValueSource.batteryLevel
            opacity: dashboardEntity.meterOpacity
            maxValueAngle: 317
            minValueAngle: 225
            maximumValue: 100
            degreesPerValue: Math.abs(
            (maxValueAngle - minValueAngle) / maximumValue)
            rotationOffset: 135
            direction: -1
        }

        Image {
            source: "image://etc/gaugeCenterSmall.png"
            anchors.centerIn: batteryMeter
            width: 78
            height: 78
        }

        ConsumptionMeter {
            anchors.top: parent.top
            anchors.topMargin: 364.5
            anchors.rightMargin: 414
            anchors.right: parent.right
            opacity: dashboardEntity.meterOpacity
        }

        TemperatureMeter {
            opacity: dashboardEntity.meterOpacity
        }

        SmallMeter {
            id: smallMeter
            x: 621
            y: 42
            width: 216
            height: 216
            anchors.top: parent.top
            anchors.topMargin: 37.5
            opacity: dashboardEntity.meterOpacity
            value: ValueSource.rpm / 2000.
            maxValueAngle: 270
            minValueAngle: 0
            maximumValue: 4.0
            degreesPerValue: Math.abs(
                            (maxValueAngle - minValueAngle) / maximumValue)

        }

        Image {
            source: "image://etc/gaugeCenterSmall.png"
            anchors.centerIn: smallMeter
            width: 78
            height: 78
        }

        FpsMeter {
            id: fpsMeter
            anchors.rightMargin: 885
            anchors.topMargin: 129
            opacity: dashboardEntity.meterOpacity
        }

        Image {
            source: "image://etc/gaugeCenterSmall.png"
            anchors.centerIn: fpsMeter
            width: 78
            height: 78
        }

        BottomPanel {
            id: bottompanel
            y: 582
            width: 1228
            height: 138
            anchors.horizontalCenter: parent.horizontalCenter

            Row {
                id: leftindicators
                x: 307.5
                y: 61.5
                width: 270
                height: 45
                anchors.right: parent.horizontalCenter
                anchors.bottom: parent.bottom
                anchors.rightMargin: 48
                anchors.bottomMargin: 33
                spacing: 12

                TurnLeft {
                    id: turnleft
                    width: 45
                    height: 45
                }

                SafePicture {
                    id: iconCoolant
                    objectName: "iconCoolant"
                    width: 45
                    height: 45
                    color: "blue"
                    source: "qrc:/iso-icons/iso_grs_7000_4_2426.dat"
                    fillColor: "#30303a"
                }

                SafePicture {
                    id: iconBattery
                    objectName: "iconBattery"
                    width: 45
                    height: 45
                    color: "#e41e25"
                    source: "qrc:/iso-icons/iso_grs_7000_4_0247.dat"
                    fillColor: "#363641"
                }

                SafePicture {
                    id: iconFuel
                    objectName: "iconFuel"
                    width: 45
                    height: 45
                    color: "#e41e25"
                    source: "qrc:/iso-icons/iso_grs_7000_4_0245.dat"
                    fillColor: "#3d3e4a"
                }

                SafePicture {
                    id: iconParkingBrake
                    objectName: "iconParkingBrake"
                    width: 45
                    height: 45
                    color: "#e41e25"
                    source: "qrc:/iso-icons/iso_grs_7000_4_0238.dat"
                    fillColor: "#474752"
                }
            }

            Row {
                id: rightindicators
                y: 54
                width: 270
                height: 45
                anchors.left: parent.horizontalCenter
                anchors.leftMargin: 48
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 33
                spacing: 12

                SafePicture {
                    id: iconLights
                    objectName: "iconLights"
                    width: 45
                    height: 45
                    source: "qrc:/iso-icons/iso_grs_7000_4_0456.dat"
                    color: "#5caa15"
                    fillColor: "#444450"
                }

                SafePicture {
                    id: iconTyre
                    objectName: "iconTyre"
                    width: 45
                    height: 45
                    color: "#face20"
                    fillColor: "#3a3a47"
                    source: "qrc:/iso-icons/iso_grs_7000_4_1434A.dat"
                }

                SafePicture {
                    id: iconLamp
                    objectName: "iconLamp"
                    width: 45
                    height: 45
                    source: "qrc:/iso-icons/iso_grs_7000_4_1555.dat"
                    color: "#face20"
                    fillColor: "#34343f"
                }

                SafePicture {
                    id: iconSeatbelt
                    objectName: "iconSeatbelt"
                    width: 45
                    height: 45
                    color: "#e41e25"
                    fillColor: "#30313a"
                    source: "qrc:/iso-icons/iso_grs_7000_4_0249.dat"
                }
                TurnRight {
                    id: turnright
                    width: 45
                    height: 45
                }
            }
        }

        LargeMeter {
            id: speedometer
            opacity: dashboardEntity.meterOpacity
            actualValue: ValueSource.kph
            x: 159
            y: 105
            width: 514.5
            height: 514.5
        }

        LargeMeter {
            id: tachometer
            x: 1246.5
            y: 102
            width: 514.5
            height: 514.5
            opacity: dashboardEntity.meterOpacity
            minValueAngle: 55
            maxValueAngle: 255
            minimumValue: 0
            maximumValue: 8000
            limitValue: 4000
        }

        SafeText {
            id: speedText
            x: 348
            y: 480
            height: 78
            width: 138
            font.pixelSize: 72
            font.family: "Lato"
            color: "lightGray"
            text: "10"
            runtimeEditable: true
            horizontalAlignment: Text.AlignHCenter
            opacity: dashboardEntity.meterOpacity
        }

        Text {
            id: speedUnitText
            anchors.top: speedText.bottom
            font.pixelSize: 27
            color: "lightGray"
            text: "KM/H"
            font.family: "Lato"
            anchors.horizontalCenter: speedText.horizontalCenter
            opacity: dashboardEntity.meterOpacity
        }

        Text {
            id: textEco
            anchors.horizontalCenterOffset: 1086
            anchors.horizontalCenter: speedometer.horizontalCenter
            text: tachometer.actualValue > 4000 ? "POWER" : "ECO"
            anchors.verticalCenterOffset: 0
            anchors.verticalCenter: tachometer.verticalCenter
            font.pixelSize: 18
            visible: false
            color: tachometer.actualValue <= 4000 ? "white" : "red"
            opacity: dashboardEntity.meterOpacity
        }

        SafeText {
            id: safeText
            objectName: "safeText"
            color: "#face21"
            text: "Error occurred. Recovering.."
            font.family: "Lato"
            wrapMode: Text.WordWrap
            horizontalAlignment: Text.AlignHCenter
            x: 799.5
            y: 415.5
            width: 366
            height: 102
            font.pixelSize: 30
        }
    }
}