This topic provides some practical tips for creating layouts with safety-critical UI elements. For example, how you can use resources from .qrc files with Qt Safe Renderer QML types, and how you can utilize Qt Safe Renderer classes for reading the layout data from a file or resource structure.

Using .qrc Files

When you create layouts with Qt Safe Renderer QML types in Qt Quick Designer, you can utilize resources that have been added to a Qt's resource collection file (.qrc). For example, the resources can be image files that are used in a SafeImage QML type.

In Qt Creator, you can create a new .qrc file under a project as follows:

1. In Qt Creator, select File > New File or Project.
2. In Files and Classes, select Qt > Qt Resource File.
3. Select Choose.
4. Follow the instructions in the wizard.

You can add new resources to 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 Prefix and define a prefix.
5. Select Add Files.
6. Browse to the resource file (for example, a .jpg file and select Open.

Reading Layout Data with QSafeLayoutResourceReader

Qt Safe Layout Tool generates raw layout files (.srl) on based of the layouts you have created with Qt Quick Designer (.ui.qml). You can add the generated raw layout files to a Qt's resource collection file (.qrc) and read the layout data from there with QSafeLayoutResourceReader:

static QSafeLayoutResourceReader layout = QSafeLayoutResourceReader("layoutData/SafeUI/SafeUI.ui.srl");

The following example code creates a new window, and reads the layout data with QSafeLayoutResourceReader:

static QSafeLayoutResourceReader layout = QSafeLayoutResourceReader("layoutData/SafeUI/SafeUI.ui.srl");

SafeWindow telltaleWindow(layout.size());
SafeRenderer::StateManager stateManager(telltaleWindow, layout);

for (quint32 i=0U;i<layout.count(); i++) {
    QSafeEventVisibility visible;
    visible.setId(layout.item(i).id());
    visible.setValue(1U);
    stateManager.handleEvent(visible);
}

EventHandler msgHandler(&stateManager);
msgHandler.handleEvents();

Reading Layout Data with QSafeLayoutFileReader

If you have an existing raw layout file .srl that has been generated from a Qt Quick UI form (.ui.qml), you can read its raw layout data with the QSafeLayoutFileReader class as follows:

static QSafeLayoutFileReader layout = QSafeLayoutFileReader("SafeUI.ui.srl");

With QSafeLayoutFileReader, the Qt's resource system is not directly used at all. Instead, the file system is used for reading the data.

The following example code creates a new window, and reads the layout data with QSafeLayoutFileReader:

static QSafeLayoutFileReader layout = QSafeLayoutFileReader("SafeUI.ui.srl");

SafeWindow telltaleWindow(layout.size());
SafeRenderer::StateManager stateManager(telltaleWindow, layout);

for (quint32 i=0U;i<layout.count(); i++) {
    QSafeEventVisibility visible;
    visible.setId(layout.item(i).id());
    visible.setValue(1U);
    stateManager.handleEvent(visible);
}

EventHandler msgHandler(&stateManager);
msgHandler.handleEvents();

Using States Instead of Layouts

From Qt Safe Renderer 1.2 onwards, QML states are preferred solution for use cases where you need to change size, color, opacity, or position of safety-critical UI elements. Earlier you would have created separate layouts and changed them via the QSafeEventChangeLayout event.

If you are using layouts for changing for example the position of the UI element, the change layout event will be sent only for the currently active layout. As each layout has its own memory, the UI content may be incorrect if you don't synchronize the layouts.