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) } } } }