1. Home
2. Qt5 QML Filter

Qt5 QML Filter

This guide covers how to combine Qt QML based user interfaces with an ADTF Filter which can utilize a subset of the ADTF C++ API in JavaScript directly.

After reading this guide you will know how to:

• access ADTF data samples with Qt5 JavaScript
• create a simple GUI using Qt5 QML elements

This tutorial focuses on the Qt5 QML Filter which combines the functionality of QML from the Qt framework with the ADTF runtime. The Qt5 QML Filter extends the previously discussed Qt5 JavaScript Filter with an user interface for data visualization. It is important to note that this kind of Filter runs in the GUI thread of Qt and the timing of code execution is therefore asynchronous. Most functionality works similar to the Qt5 JavaScript Filter. The following section describes the differences and the new functionality of the Qt5 QML Filter.

We are going to create a small ADTF Session that has a Demo Time Trigger, a Demo Virtual Clock Input, a ADTFDAT File Recorder and a Qt5 QML Filter.

Open the context menu of the Filter by performing a right click on the Filter. Click on "Open Editor". This will open the JavaScript Editor where you can start writing JavaScript code. Paste the following code and save it.

  
import QtQuick 2.9
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.0

// this is required for ImageItem
import Adtf 1.0

// you can define any QML component you like
Item
{
    property var recorder;

    // use the onCompleted handler to setup all aspects of your Filter.
    // here you can use all the functionality available within the plain javascript Filter.
    Component.onCompleted:
    {
        var input = filter.createInputPin("input")
        input.sample.connect(function(sample)
        {
            // we just update the labels text to display the last value we recieved.
            lastValue.text = sample.data.value
        })

        var videoInput = filter.createInputPin("video")
        videoInput.sample.connect(function(sample)
        {
            // for video types, sample.data contains a QVariant that stores the frame as a QImage,
            // the ImageItem QML component can display these.
            imageDisplay.image = sample.data
        })

        // we wanna be able to control the recorder, so we create an interface client.
        recorder = filter.createInterfaceClient("recorder", "recorder")
    }

    // this is just basic QML
    ColumnLayout {
        RowLayout {
            ImageItem {
                id: imageDisplay
                width: 320
                height: 240
            }
            Label {
                text: "Last Input Value:"
            }
            Label {
                id: lastValue
            }
        }
        RowLayout {
            Button {
                text: "Start Recording"
                onClicked: recorder.start()
            }
            Button {
                text: "Stop Recording"
                onClicked: recorder.stop()
            }
        }
    }
}

  

We can then start the ADTF Session and get the UI we designed:

Where to go next?

Have a look at the ADTF 2 Support Toolbox to see how to connect ADTF 3 and ADTF 2 Filters.