Indicators: Creating Safety-Critical UI

Indicators: Creating Safety-Critical UI

Building Indicators Example

Before you can build the Indicators example, you must build Qt Safe Renderer. For instructions how to build Qt Safe Renderer and the Indicators example, see Building Qt Safe Renderer.

Indicators Example

The Indicators project demonstrates how you can use Qt Quick project and Qt Quick UI Forms (.ui.qml files) to create a UI that contains safety-critical UI elements, that is, QML types. The same UI can also contain non-safe UI elements but in the Indicators example, we have only safety-critical elements in the UI.

When you run Indicators on your host platform, its application window shows by default the content that is defined in the MainForm.ui.qml file. Indicators has also another .ui.qml file called SecondaryForm.ui.qml. It contains a different set of safety-critical QML types. You can change the displayed form by editing code in the main.qml file:

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Indicators test")
    id: root
    // name of the ui.qml file to be displayed
    MainForm {
    }
}

To see the content of the SecondaryForm.ui.qml form, replace MainForm with SecondaryForm.

If you run Indicators parallel to Telltales, Qt Safe Renderer renders the safety-critical UI elements also in the Telltales application window. For more information, see Telltales: Rendering Safety-Critical UI.

Enabling Qt Safe Layout Tool

In Qt Quick UI forms, you can add safety-critical UI elements to your UI by using safe QML types provided by Qt Safe Renderer. When you build the project, Qt Safe Layout Tool automatically generates the safe layout data for those safe QML types. In order to enable Qt Safe Layout Tool in your project, you must define the following variables in the project (.pro) file:

Variable	Description
CONFIG	Adds a qtsaferenderer configuration to the project.
SAFEQML	Defines .ui.qml_ files that contain safety-critical QML types.
SAFE_LAYOUT_PATH	Defines a path where the generated safe layout data is saved.

In the indicators.pro file, these variables are defined as follows:

CONFIG += qtsaferenderer
SAFE_QML = $$PWD/MainForm.ui.qml $$PWD/SecondaryForm.ui.qml
SAFE_LAYOUT_PATH = $$PWD/../telltales/layoutData

When you build the Indicators project, the layout data will be generated in the layoutData folder under the Telltales project directory.

Safety-Critical QML Types in UI Forms

Indicators has two .ui.qml forms that contain safe QML types: MainForm.ui.qml and SecondaryForm.ui.qml. You can open the forms to Qt Quick Designer by double-clicking the .ui.qml files.

In Qt Quick Designer, there are three safe QML types available: SafeText, SafeImage and SafePicture. Indicators contains only SafePicture QML types. ISO icons have been added for each safe picture.

In the .pro file, the used ISO icons are listed under ISO_ICONS as follows:

ISO_ICONS += \
    iso_grs_7000_4_2423 \
    iso_grs_7000_4_0238 \
    iso_grs_7000_4_0245 \

Project file also lists the generated iso-icons.qrc file under RESOURCES:

RESOURCES += qml.qrc \
    iso-icons.qrc

Running the Example

If you like to test the safe QML types yourself, you can add some new safe QML types to the Qt Quick UI forms in Indicators. The safe QML types behave just like any other QML types so you can add new types by dragging and dropping them to the form. Note that the background of the Indicators UI is black so you should remember to use some other color for new safe texts and pictures.

You can test your UI updates on the host platform simply by building and running the Indicators example:

Select Build > Run QMake.
Select Build > Build Project . To run the project, select Build > Run.

Rendering Safe Content of Indicators in Telltales UI describes how the safety-critical UI elements defined in Indicators are rendered in the Telltales UI by Qt Safe Renderer.

Example Files

Files:

Available under certain Qt licenses.Find out more.