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 Using Qt Quick Designer.

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 a form of QML Type Library. You can use them in your UI after you have imported the Qt Safe Renderer library in Qt Quick Designer with the following steps:

  1. Select Library in the sidebar menu (1).
  2. Select Imports (2).
  3. Select Add Import.
  4. Select Qt.SafeRenderer <version>.

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 three different safety-critical QML types:

The safety-critical QML types are rendered in the UI by Qt Safe Renderer. They are rendered as raw bitmaps.

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 Using Qt Quick Designer.

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:

widthThe width of the safe QML type.
heightThe height of the safe QML type.

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:

  1. Select Text Editor mode (1).
  2. Open the properties pane for the safe QML type by selecting the QML type from the Navigator (2).
  3. Edit the width and height properties by changing the W and H values in the Size section (3).
  4. 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:

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

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:

  1. Drag and drop SafePicture to the canvas.
  2. Right-click the picture element and select Choose Icon to open the ISO Icon Browser.
  3. To find icons, select a criterion for filtering icons and enter a search string.
  4. Select an icon in the list and then select OK to add the icon.

You can also adjust the icon color:

  1. Right-click the icon on the canvas or in the navigator.
  2. Select Edit Color in the context menu.
  3. Select color.

See also ISO Icon Browser.

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

    iso_grs_7000_4_2423 \
    iso_grs_7000_4_0238 \
    iso_grs_7000_4_0245 \

SafeText QML Type

With the SafeText QML Type, you can add safety-critical texts to your UI.

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.

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:

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

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:

CONFIGAdds qtsaferenderer configuration to the project.
SAFE_QMLA list of .ui.qml files that contain safety-critical QML types.
SAFE_LAYOUT_PATHA path where the generated safe layout data is saved.

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 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 .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:

  1. Select Build > Run QMake.
  2. Select Build > Build Project <a project name>.

To run the project, select Build > Run.


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:

Unsupported Feature
JavaScript blocks
Function definitions
Function calls (except qsTr())
Other bindings than pure expressions
Signal handlers
States in other items than the root item
Root items that are not derived from QQuickItem or Item
Unsupported Type
Shader effect

Available under certain Qt licenses.
Find out more.