Output Verification Features Affecting Visibility of Safety-Critical UI Elements

C

Animations in Safety-Critical UI

From Qt Safe Renderer 1.2 onwards, you can animate safety-critical UI elements. In general, Animation Framework is supported in Qt Safe Renderer just like in Qt Quick where animations are created by applying animation types to property values. Animation types interpolate property values to create smooth transitions. As well, state transitions may assign animations to state changes. The Qt Safe Renderer specific constraints are described in Animation Constraints in Qt Safe Renderer.

You can create animations with safety-critical UI elements via Qt Design Studio.

With the safety-critical UI elements, you can animate position, scale, color, and opacity of the element. Timeline animations are also supported, and you can change several properties in the same animation sequence.

See Customizing Animation Default Values for information about changing the default values for animations.

The following pages provide more information about using animations in Qt Quick:

Animation and Transitions in Qt Quick
Important Concepts in Qt Quick - States, Transitions and Animations
Timeline Animations describes how you can create timeline animations in Qt Quick Designer

Known Issues in Animations

When you animate the scale (that is, height and width) of the safety-critical UI element, a set of bitmaps with different sizes is generated. This increases memory consumption on runtime as more memory is needed to store the bitmaps.

When you use the opacity feature in your animations, you must remember that opacity value 0 makes the safety-critical UI elements invisible in the UI.

When you increase the Constraints::MAX_NUM_OF_STATES it increases the memory consumption significantly.

If some of the following exceptions occur, you should increase the related constraint value in qsafeconstraints.h:

Exception	Constraint value
SafeRenderer::QSafeStateException with id IndexOutOfBounds	Constraints::MAX_NUM_OF_STATES
SafeRenderer::QSafeAnimationException with id IndexOutOfBounds	Constraints::MAX_NUM_OF_ANIMATIONS_PER_ITEM

When you create timeline animations, specify KeyframeGroup QML Type for the start and end values to ensure that those are taken into account in layout animation building:

KeyframeGroup {
    target: image
    property: "width"
    Keyframe {
        easing.type: Easing.InOutQuad
        frame: 0
        value: 256
    }
    Keyframe {
        easing.type: Easing.InOutQuad
        frame: 500
        value: 128
    }
    Keyframe {
        easing.type: Easing.InOutQuad
        frame: 1000
        value: 64
    }
}

Animation Constraints in Qt Safe Renderer

When you animate the safety-critical UI elements, you should note the following constraints:

NumberAnimation QML Type is the only QML type inherited from PropertyAnimation that is supported in Qt Safe Renderer.
Transitions must be done by using states. For more information, see Transitions During State Changes. Note! You can use states without transitions. For more information, see Changing States.
You cannot bind an animation to a property change.
Parallel or sequential animations are not supported.
Dynamic text scaling is not supported in animations.
If timeline animations are done with Qt Design Studio, the generated code may contain loops or ping pong features that are not supported in Qt Safe Renderer.
The number of states per safe item is constrained by Constraints::MAX_NUM_OF_STATES. As the implicit default state consumes always one state, you can use MAX_NUM_OF_STATES-1 states. See also Known Issues in Animations and Customizing Animation Default Values.

Easing Curves

The PropertyAnimation QML type provides the easing.type enumeration that specifies the easing curve used for the animation. The following easing curves are supported in Qt Safe Renderer:

Easing.Linear
Easing.InQuad
Easing.InOutQuad
Easing.OutQuad
Easing.OutInQuad
Easing.InCubic
Easing.OutCubic
Easing.InOutCubic
Easing.OutInCubic
Easing.InQuart
Easing.OutQuart
Easing.InOutQuart
Easing.OutInQuart
Easing.InQuint
Easing.OutQuint
Easing.InOutQuint
Easing.OutInQuint
Easing.InSine
Easing.OutSine
Easing.InOutSine
Easing.OutInSine
Easing.InExpo
Easing.OutExpo
Easing.InOutExpo
Easing.OutInExpo
Easing.InCirc
Easing.OutCirc
Easing.InOutCirc
Easing.OutInCirc

If the timeline or transition animation contains an unsupported easing curve, it is replaced with a liner animation, that is, no easing curve is used.

Customizing Animation Default Values

The default frame rate in the animation is 64 frames per second. You can change it with the Qt Safe Layout Tool by using the -fps <frame-rate> option. The animation frame rate must match with your target screen refresh value. For more information, see Qt Safe Renderer Tools.

SafeRenderer::Constraints holds various constraint values for Qt Safe Renderer and some of the values can be changed in qsafeconstraints.h. The following constraint values affecting animations are customizable:

Constraints::ANIMATION_TIMER_TICK_IN_MS holds the animation timer in milliseconds. In the QNX Screen and OpenWFD graphics adaptation the animation timer is tied to the VSync interval and thus ANIMATION_TIMER_TICK_IN_MS in ignored.
Constraints::MAX_ANIMATION_STEPS holds the maximum number of animation steps

Duration of Animation

The maximum length of animation is defined as a combination of ANIMATION_TIMER_TICK_IN_MS and MAX_ANIMATION_STEPS. For example, if ANIMATION_TIMER_TICK_IN_MS is 16 milliseconds and MAX_ANIMATION_STEPS is 64 frames per second, the maximum length of animation is 1024 milliseconds.

The duration of animation is defined in milliseconds in Duration Property. If you modify the ANIMATION_TIMER_TICK_IN_MS and MAX_ANIMATION_STEPS, you need to modify the duration property too.

Defining States

It is recommended to define the States and Transitions inside the safe element instead of the root item. Within this approach it simplifies the States logic. When you define the States and Transitions under the root item you easily reach the limit defined by SafeRenderer::Constraints::MAX_NUM_OF_STATES{Constraints::MAX_NUM_OF_STATES}.

See the example code in the next section.

Changing States

Your animation can contain several states and you can change between the states with or without transitions. A transition is an "edge" between two states that defines what occurs when the safety-critical UI element changes from one state to another. Example of Animation with Safe-Critical UI Elements demonstrates how to use transitions with states in Qt Safe Renderer. For more information about the states, see Qt Quick States.

However, it is also possible to change states without transitions. Then you can use SafeRenderer::QSafeEventChangeState for changing the state.

The following example demonstrates a SafePicture that has two different states and no transitions:

SafePicture {
    id: engineIcon
    width: 40
    height: 40
    x: 40
    y: 40
    source: "iso_grs_7000_4_2423.dat"
    states: [
        State {
            name: "warning"
            PropertyChanges { target: engineIcon; width: 80; height: 80; color: "yellow"}
        },
        State {
            name: "fault"
            PropertyChanges { target: engineIcon; width: 80; height: 80; color: "red"}
        }
    ]
}

Example of Animation with Safe-Critical UI Elements

The Qt Cluster Example demonstrates how you can add animations to SafeImage. In this example, transitions are used during state changes.

SafeImage has two states: a hidden state and a visible state. When you change the state, the opacity value of SafeImage is updated. Similarly, you could update the scale, color, or position of SafeImage.

SafeImage {
    id: turnleft
    objectName: "turnleft"
    source: "qrc:/images/Icon_TurnLeft_ON_small.png"
    width: 30
    height: 30
    opacity: 1.0
    states: [
        State {
            name: "visible"
            PropertyChanges {
                target: turnleft
                opacity: 1.0
            }
        },
        State {
            name: "hidden"
            PropertyChanges {
                target: turnleft
                opacity: 0.0
            }
        }
    ]
    transitions: [
        Transition {
            from: "*"
            to: "*"
            NumberAnimation {
                target: turnleft // refers to the id
                properties: "opacity"
                duration: 1000
                easing.type: Easing.InOutQuad
            }
        }
    ]
}

You find the full example code under saferenderer/qtcluster/qml/dash_hybrid/DashboardForm.ui.qml.

Animation API in Qt Safe Renderer

The Qt Safe Renderer animation API provides the following classes:

Output Verification Features Affecting Visibility of Safety-Critical UI Elements

Available under certain Qt licenses.
Find out more.