C

Indicators: Creating Safety-Critical UI

// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial

// This file is part of the Qt Safe Renderer module
import QtQuick
import QtQuick.Window
import Qt.SafeRenderer
import QtQuick.Controls.Basic

Window {
    visible: true
    width: 275
    height: 375
    title: qsTr("Control UI")
    id: root
    color: "#f3f3f4"

    Column {
        x: 144
        y: 18
        width: 124
        height: 281

        Row {
            Column {
                anchors.verticalCenter: parent.verticalCenter
                Switch {
                    id: mySwitchBattery
                    checked: true
                    onCheckedChanged: {
                        QSafeMessageSender.changeState("iconBattery", checked ? "ON" : "OFF")
                    }
                }
            }

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

        Row {
            Column {
                anchors.verticalCenter: parent.verticalCenter
                Switch {
                    id: mySwitchFuel
                    checked: true
                    onCheckedChanged: {
                        QSafeMessageSender.changeState("iconFuel", checked ? "ON" : "OFF")
                    }
                }
            }

            SafePicture {
                id: iconFuel
                width: 40
                height: 40
                color: "#e41e25"
                source: "qrc:/iso-icons/iso_grs_7000_4_0245.dat"
            }
        }

        Row {
            Column {
                anchors.verticalCenter: parent.verticalCenter
                Switch {
                    id: mySwitchParkingBrake
                    checked: true
                    onCheckedChanged: {
                        QSafeMessageSender.changeState("iconParkingBrake", checked ? "ON" : "OFF")
                    }
                }
            }

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

        Row {
            Column {
                anchors.verticalCenter: parent.verticalCenter
                Switch {
                    id: mySwitchLowbeam
                    checked: true
                    onCheckedChanged: {
                        QSafeMessageSender.changeState("iconLowbeam", checked ? "ON" : "OFF")
                    }
                }
            }

            SafePicture {
                id: iconSeatbelt
                objectName: "iconSeatbelt"
                width: 40
                height: 40
                color: "#e41e25"
                source: "qrc:/iso-icons/iso_grs_7000_4_0249.dat"
            }
        }

        Row {
            Column {
                anchors.verticalCenter: parent.verticalCenter
                Switch {
                    id: mySwitchTyre
                    checked: true
                    onCheckedChanged: {
                        QSafeMessageSender.changeState("iconTyre", checked ? "ON" : "OFF")
                    }
                }
            }

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

        Row {
            Column {
                anchors.verticalCenter: parent.verticalCenter
                Switch {
                    id: mySwitchLamp
                    checked: true
                    onCheckedChanged: {
                        QSafeMessageSender.changeState("iconLamp", checked ? "ON" : "OFF")
                    }
                }
            }

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

        Row {
            Column {
                anchors.verticalCenter: parent.verticalCenter
                Switch {
                    id: mySwitchSeatbelt
                    checked: true
                    onCheckedChanged: {
                        QSafeMessageSender.changeState("iconSeatbelt", checked ? "ON" : "OFF")
                    }
                }
            }

            SafePicture {
                id: iconLowbeam
                objectName: "iconLowbeam"
                width: 40
                height: 40
                source: "qrc:/iso-icons/iso_grs_7000_4_0456.dat"
                color: "#5caa15"
            }
        }
    }

    ButtonGroup {
        buttons: column.children
    }

    Column {
        id: column
        x: 14
        y: 66
        width: 66
        height: 192
        spacing: 15

        ButtonGroup {
            id: buttonGroup
        }

        RadioButton {
            id: buttonR
            implicitWidth: 35
            implicitHeight: 35
            onClicked: QSafeMessageSender.changeState("root","reverse")
        }

        RadioButton {
            id: buttonN
            implicitWidth: 35
            implicitHeight: 35
            onClicked: QSafeMessageSender.changeState("root","neutral")
        }

        RadioButton {
            id: buttonD
            implicitWidth: 35
            implicitHeight: 35
            onClicked: QSafeMessageSender.changeState("root","drive")
        }

        RadioButton {
            id: buttonP
            implicitWidth: 35
            implicitHeight: 35
            onClicked: QSafeMessageSender.changeState("root","park")
        }
    }

    Text {
        id: textR
        x: 57
        y: 66
        width: 23
        height: 32
        visible: true
        text: qsTr("R")
        font.pixelSize: 23
    }

    Text {
        id: textN
        x: 57
        y: 118
        width: 23
        height: 22
        visible: true
        text: qsTr("N")
        font.pixelSize: 23
    }

    Text {
        id: textD
        x: 57
        y: 167
        width: 23
        height: 22
        visible: true
        text: qsTr("D")
        font.pixelSize: 23
    }

    Text {
        id: textP
        x: 57
        y: 219
        width: 23
        height: 22
        visible: true
        text: qsTr("P")
        font.pixelSize: 23
    }

    Label {
        width: slider.width
        wrapMode: Label.Wrap
        horizontalAlignment: Qt.AlignHCenter
        y: 305
        x: 22
        text: "Change the speed."
        font.pixelSize: 14
    }

    Slider {
        id: slider
        from: 0
        to: 300
        stepSize: 1
        value: 0
        y: 315
        width: 232
        height: 60
        x: 22

        background: Rectangle {
            x: slider.leftPadding
            y: slider.topPadding + slider.availableHeight / 2 - height / 2
            implicitWidth: 200
            implicitHeight: 4
            width: slider.availableWidth
            height: implicitHeight
            radius: 2
            color: "#cecfd5"

            Rectangle {
                width: slider.visualPosition * parent.width
                height: parent.height
                color: "#41cd52"
                radius: 2
            }
        }

        handle: Rectangle {
            x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
            y: slider.topPadding + slider.availableHeight / 2 - height / 2
            implicitWidth: 26
            implicitHeight: 26
            radius: 13
            color: slider.pressed ? "#f0f0f0" : "#f6f6f6"
            border.color: "#cecfd5"
        }

        onValueChanged: {
            if (slider.value >= 1 && slider.value <= 299) {
                QSafeMessageSender.setText("safetextitem", slider.value + stepSize)
            } else {
                QSafeMessageSender.setText("safetextitem", slider.value)
            }
        }
    }
}