Follow Us On

Previous: GstQtOverlay Overview/Capabilities

Index

Next: Getting Started

In this wiki, you can learn more about the GstQtOverlay plugin properties and signals. The following properties and signals are used to customize the Qt image overlay, interact with QML, control the plugin operation, and allow the plugin to interact with a Gstreamer application.

Currently, GstQtOverlay has the following custom properties:

qml
qml-attribute
qml-clear-cache
disable
enable-ui-events

GstQtOverlay also has the following signal:

qml-notify

The next subsection provides details about how to use each property and signal.

Properties

qml

The qml property specifies the location of the QML source file to use. This path can be either relative or absolute and must point to a valid/existing file at the moment the pipeline starts up. Some examples include:

gst-launch-1.0 videotestsrc ! '''qtoverlay qml=/mnt/gui/sources/main.qml''' ! videoconvert ! autovideosink

gst-launch-1.0 videotestsrc ! '''qtoverlay qml=../../sources/main.qml''' ! videoconvert ! autovideosink

If not specified, the element will attempt to load main.qml from the current working directory.

qml-attribute

QML attributes may be configured at runtime using the qml-attribute property. The property syntax is as follows:

<item name>.<attribute name>:<value>

Item name refers to the QML objectName attribute of an item, rather than its id. The following QML contains an item named labelMain:

 Label {
      text: "Way cool QT imaging with GStreamer!"
      font.pixelSize: 22
      font.italic: true
      color: "steelblue"
      '''objectName: "labelMain"'''
      }

For example, to modify the text attribute of a label named labelMain to display GStreamer with QT imaging is way cool! using Gstd you would run:

gstd-client element_set qtoverlay qml-attribute "labelMain.text:GStreamer with QT imaging is way cool!"

The qml-attribute will recursively traverse the object tree to find all the items in the hierarchy with the given objectName.

The objectName attribute is not required to be unique, so multiple items can be modified at once by assigning them the same objectName.

enable-ui-events

With this property, QTOverlay graphics and interact with mouse, keyboard and touchscreen inputs. There are different ways to handle mouse, keyboard, and touchscreen events within a QML.

A common way to handle mouse events is through the MouseArea Item. The following snippet shows the basic structure for using mouse events in QML:

import QtQuick 2.0

MouseArea {
    onClicked: (mouse) => {
        console.log(mouse.x)
        console.log(mouse.y)
    }
}

It is possible to handle keyboard events within an item using the Keys type. The following snippet shows how this can be done:

Keys.onPressed: (event) => {
        if (event.key == Qt.Key_M) {
            dashboard.toggle_mode()
        }
    }

Currently, touchscreen inputs are handled as mouse events.

Note

For more information on user input support, checkout our video example . Building user input support requires additional dependencies and additional build configuration .

qml-action

External events can also trigger actions on the QML by using the qml-action property. Similarly, the syntax goes as follows:

<item name>.<method name>()

Again, the qml-action will recursively traverse the object tree to find all the items in the hierarchy with the given objectName.

For example, consider the following QML snippet:

import QtQuick 2.0

Item {
    objectName:i1
    function sayHi() {
        console.log("Hello World!")
    }
}

To invoke sayHi() using Gstd you would run:

gstd-client element_set  qtoverlay qml-action "i1.sayHi()"

At this time, passing parameters to the invoked functions is not supported. Instead, first set an attribute value, then invoke the function that can access the attribute. There are plans to support function parameters via Variants or some similar mechanism.

Signals

qml-notify

The QTOverlay qml-notify signal allows the user to interact with a Gstreamer application from the QML logic. The user can invoke GstQtOverlayBackend.emitQmlNotifySignal("") with a string parameter from within the QML. Once the QTOverlay plugin comes across this invocation while processing the QML, it will emit the qml-notify signal. A Gstreamer application can connect a callback to this Gstreamer signal in order to receive the string parameter.

The following snippet shows an example of a QML Timer which invokes the qml-notify signal after 100ms:

import QtQuick 2.0

Timer {
    id: dashboardUpdateStats
    interval: 100; running: true; repeat: false
    onTriggered: {
        GstQtOverlayBackend.emitQmlNotifySignal("Message from QML called with 'qml-notify'")
    }
    triggeredOnStart: true
}

To wait on the signal and print its argument using Gstd you would run:

gstd-client signal_connect example_pipeline qtoverlay qml-notify