C

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.

Note: Similar functionality is also available in Qt Design Studio. For more information, see Editing QML Files in Qt Design Studio's 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:

  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 the following safety-critical QML types:

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) or to the navigator, 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:

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

If you are using a resource collection file (.qrc) for storing your images, you can add the image file into the .qrc file as follows:

  1. In Qt Creator, open the Edit mode.
  2. In Projects, right-click the .qrc file.
  3. Select Open in Editor.
  4. Select Add Files.
  5. Browse to the image file and select Open.

See Enabling Qt Safe Resource Compiler Tool for more information about how to use Qt Safe Resource Compiler Tool for generating Misra compliant data structures.

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

  1. In Qt Creator, open the Design mode.
  2. Right-click SafeImage in the canvas or in the item navigator.
  3. Select Change Source URL in the context menu.
  4. 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:

  1. Drag and drop SafePicture to the canvas from QML Components in Library.
  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_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. From Qt Safe Renderer 1.2 onwards, you can change the color of SafePicture on runtime. The color is changed by using an event provided by SafeRenderer::QSafeEventSetColor.

SafeText QML Type

With the SafeText QML Type, you can add safety-critical texts to your UI. Qt Safe Renderer utilizes the Qt Prerendered Fonts (QPF2) in the safe texts. The texts in the QML source code can be internationalized just like any other Qt Quick code. For more information, see Internationalization and Localization with Qt Quick.

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:

  1. Select SafeText on the canvas or in the navigator.
  2. 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:

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

Dynamic SafeText

With the dynamic SafeText, you can change the text in the SafeText QML type on runtime. The dynamic SafeText is availabe from Qt Safe Renderer 1.1 onwards. You can enable the dynamic SafeText as follows:

  1. Select SafeText on the canvas or in the navigator.
  2. In SafeText properties window, enable Dynamic (2).

In the generated QML source code, the runtimeEditable property is set to true.

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. If the runtimeEditable property is left to its default value false, an .srb file is generated. For more information about the generated files, see Generating Safe Layout Data.

Note: Internationalization and localization are not supported in the dynamic text.

Runtime Functionality

On runtime, you can change the position of SafeText on the layout. From Qt Safe Renderer 1.1 onwards, you can also change the text and color on runtime.

For more information about changing the text, see Dynamic SafeText.

You can change the color on runtime by using an event provided by SafeRenderer::QSafeEventSetColor.

Constraints

The Qt Safe Renderer QML types have the following constraints:

  • There is no localization support for the dynamic 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.
  • The objectName and the id must be equal. Otherwise an unhandled exception is thrown.

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
Behavior
Binding
Canvas
Component
Shader effect
Timer
Transform

Previewing Qt Quick UI Form

The created Qt Quick UI forms (.ui.qml) can be previewed with the QML Scene. It enables you to load QML documents for viewing and testing while you are developing an application. For more information, see Previewing QML Files.

If you have added SafePicture QML Types to your UI form by using ISO Icon Browser, generated code contains a qrc:/ prefix:

SafePicture {
    id: safePicture1
    x: 182
    y: 135
    source: "qrc:/iso-icons/iso_grs_7000_4_0001.dat"
}

QML Scene does not render the icon if the prefix is in the QML code. You need to remove it manually before using QML Scene:

source: "iso-icons/iso_grs_7000_4_0001.dat"

Available under certain Qt licenses.
Find out more.