QtQuick 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:

This tutorial focuses on the QtQuick Filter which combines the functionality of QML from the Qt framework with the ADTF runtime. The QtQuick Filter extends the previously discussed 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 JavaScript Filter. The following section describes the differences and the new functionality of the QtQuick 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 QtQuick Filter.

Data generation
Data processing

Open the context menu of the Filter by performing a right click on the Filter. Click on "Open Editor". This will open the ADTF 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:

Tutorial output

For more elaborate examples please have a look at the Demo QtQuick Tachometer Session and Demo Qt Shared Session.

Where to go next?

Have a look at the JavaScript/QTQuick Example to see an implementation of the previously described Data Generator and Data Processor using the JavaScript and QtQuick Filters. The example project is extended by simple GUI and data visualization elements.