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