Safety-Critical UI with Qt Quick Designer

You can use Qt Quick Designer included in Qt Creator for designing an application UI that contains both safety-critical and non-safety elements. This topic introduces the Qt Safe Renderer related functionality in Qt Quick Designer. For more information about how to use Qt Quick Designer, see Editing QML Files in Design Mode.

Accessing Qt Quick Designer

Before you can access Qt Quick Designer, you must launch Qt Creator and open or create a new Qt Quick project that contains at least one Qt Quick UI form (a .ui.qml file).

When you have the Qt Quick project open in Qt Creator's Edit mode (1), select a .ui.qml form under your project (2) and enter to Qt Quick Designer by selecting Design (3) or by double-clicking the .ui.qml form.

Note: For detailed steps how to create a new Qt Quick project, see the Creating Qt Quick Projects. When you create a new Qt Quick Application - Stack project, the generated project contains an empty Qt Quick UI form.

Importing Qt Safe Renderer QML Types

In Qt Quick Designer, Qt Safe Renderer provides the safety-critical UI elements as QML Types. You can use them in your UI after you have imported the Qt Safe Renderer library in Qt Quick Designer with the following steps:

• Select Library in the sidebar menu (1).
• Select Imports (2).
• Select Add Import.
• Select Qt.SafeRenderer . Now you see the Qt.SafeRenderer <version> library in the list of imported QML type libraries (3).

When you select QML Types (4), you see the Qt Safe Renderer safety-critical QML types in the list of available types (5).

Now you can start to use the safety-critical QML types in your UI.

Safety-Critical QML Types

Qt Safe Renderer provides the following safety-critical QML types:

• SafeImage
• SafePicture
• SafeText The safety-critical QML types are rendered in the UI by Qt Safe Renderer. They are rendered as raw bitmaps. The Qt Safe Renderer messaging interface defines how non-safe parts of system can communicate with safety-critical items on runtime. For more information, see the safety-critical QML type topics.

In Qt Quick Designer, you can work with the safety-critical QML types just like with any other QML types. For example, you can drag and drop the safety-critical types to the canvas (that is the working area where you create your UI), and define properties and connections for them. For detailed information about how to use Qt Quick Designer, see Editing QML Files in Design Mode. Especially, Creating Components provides information how to use Qt Quick Designer for creating UI screens that contain QML types.

There are also many other properties available for the safety-critical QML types than listed in the sections below. See Specifying Item Properties for more information about using the properties.

Mandatory Properties for Safe QML Types

You must remember to define the following properties for each safe QML type that you add to the canvas:

When you add the safe QML type to the canvas, the width and height values are visible in the properties window (3) but they do not yet automatically appear in the QML source code. You can add them to your QML code as follows:

• Select Text Editor mode (1).
• Open the properties pane for the safe QML type by selecting the QML type from the Navigator (2).
• Edit the width and height properties by changing the W and H values in the Size section (3).
• After editing the width and height values, they appear in the QML source code(4).

Alternatively, you can edit the QML source code directly in the Text Editor mode (1) and add the width and height properties to the safe QML type as follows:

SafeText {
    id: safeText
    x: 138
    y: 158
    width: 127
    height: 65
}

Note: In the Text Editor mode, you can open the Qt Safe Renderer help pages by highlighting the name of the QML type and selecting F1.

SafeImage QML Type

With the SafeImage QML type, you can add images to your UI. The SafeImage supports the image formats listed in Qt Image Formats.

Note: The image file must be located in the same directory where you have the .pro file.

You can change the image in SafeImage with the following steps:

• Right-click SafeImage in the canvas or in the item navigator.
• Select Change Source URL in the context menu.
• Browse to the image file and select Open.

Runtime Functionality

On runtime, you can change the position of SafeImage on the layout.

SafePicture QML Type

With SafePicture QML type, you can add safety-critical ISO icons to your UI.

Add the ISO icon to SafePicture with the following steps:

• Drag and drop SafePicture to the canvas from QML Components in Library.
• Right-click the picture element and select Choose Icon to open the ISO Icon Browser.
• To find icons, select a criterion for filtering icons and enter a search string.

• Select an icon in the list and then select OK to add the icon. You can also adjust the icon color:

• Right-click the icon on the canvas or in the navigator.

• Select Edit Color in the context menu.
• Select color. See also ISO Icon Browser.

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

ISO_ICONS += \
    iso_grs_7000_4_2423 \
    iso_grs_7000_4_0238 \
    iso_grs_7000_4_0245 \

Runtime Functionality

On runtime, you can change the position of SafePicture on the layout.

SafeText QML Type

With the SafeText QML Type, you can add safety-critical texts to your UI. The dynamic SafeText is supported from Qt Safe Renderer 1.1 onwards. With the dynamic SafeText, you can change the text in the SafeText QML type on runtime.

You can add the text in the Properties window. The SafeText properties are visible in the window after you have highlighted the SafeText type in the navigator or on the canvas.

Add the text in SafeText as follows:

• Select SafeText on the canvas or in the navigator.
• In SafeText properties window, type the text into Text (1).

The default color of the text is black. If the background color in your view is black, remember to change the text color for SafeText:

• Right-click SafeText on the canvas or in the navigator.
• Select Edit Color in the context menu.
• Select color.

Dynamic SafeText

From Qt Safe Renderer 1.1 onwards, you can enable the dynamic SafeText as follows:

• Select SafeText on the canvas or in the navigator.
• In SafeText properties window, enable Dynamic (2). When you build a Qt Quick project that contains dynamic SafeText types, a .qpf2 file is generated for each font type (3) that you use in dynamic SafeText QML types in your project if runtimeEditable is set to true. If the property is left to default value false an .srb file is generated. See Generating Safe Layout Data.

Runtime Functionality

On runtime, you can change the position of SafeText on the layout. From Qt Safe Renderer 1.1 onwards, you can change the text in SafeText on runtime if runtimeEditable is set to true.

Enabling Qt Safe Layout Tool

Qt Safe Renderer renders the safety-critical UI elements on basis of the safe layout data that is provided to it. You can automatically generate the properly formatted safe layout data with Qt Safe Layout Tool. In order to enable Qt Safe Layout Tool in your Qt Quick project, you must define the following variables in the project (.pro) file:

In the Qt Safe Renderer Indicators example's project file (indicators.pro), these variables are defined as follows:

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

Generating Safe Layout Data

After you have enabled Qt Safe Layout Tool in your Qt Quick project, the safe layout data is generated when you build the project:

• An .srb file is generated for each static safe QML type that you have added to the canvas. The file contains the raw bitmap data that Qt Safe Renderer requires for rendering the UI element defined with the safe QML type.
• An .srt file is generated for each dynamic SafeText QML type that you have added to the canvas. The file contains the following metadata for a layout: text layout width and height, a file name of a font, Cyclic redundancy check (CRC) in a font file, a horizontal and vertical alignment, a text and a text color.
• A .qpf2 file is generated for each font type that you use in the dynamic SafeText QML type. The file contains the font data.

• An .srl file is generated for each Qt Quick UI form that contains safe QML types. The file contains the raw layout data. You can build the project in Qt Creator with the following steps:

• Select Build > Run QMake. Running the qmake tool generates a folder that is defined in the SAFE_LAYOUT_PATH variable.

• Select Build > Build Project . Building the project generates the .srb, .srt, .srl, and .qpf2 files under the folder that the SAFE_LAYOUT_PATH variable defines. To run the project, select Build > Run.

Constraints

The Qt Safe Renderer QML types have the following constraints:

• There is no localization support for SafeText.
• The Qt Safe Renderer QML types cannot be used in the views defined by Qt Quick View QML types.
• The supported positioners are a column, a row, anchors, and an absolute x-coordinate and y-coordinate. Qt Safe Renderer does not support the following features and types in the Qt Quick UI form files:

Developing UI with Qt Safe RendererQt Safe Renderer Examples

Available under certain Qt licenses.Find out more.