Qt World Summit: Submit your Presentation

Unable to make a custom QML control appear in the Library in Qt Quick designer

  • Hello everyone.
    I've just written a simple module that uses a CircularGauge from QtQuick.Extras 1.4 which value changes according to the value calculated by a C++ backend named QmlReaderBackend

    class QmlReaderBackend : public QObject
    Q_PROPERTY(QVariant value READ value NOTIFY valueChanged)
    Q_PROPERTY(QVariant min READ min NOTIFY minChanged)
    Q_PROPERTY(QVariant max READ max NOTIFY maxChanged)


    Once the backend had been written, it was easy to write a test QML application, and it worked:

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Extras 1.4
    import QtQuick.Controls.Styles 1.0
    import CumbiaQmlControls 1.0

    Item {

    CircularGauge {
        QmlReaderBackend {
            id: cgbackend2
            source: "$1/long_scalar"
            Component.onCompleted: {
        id: circularGauge
        x: 395
        y: 37
        property QmlReaderBackend backend: cgbackend2;
        maximumValue: backend.max
        minimumValue: backend.min
        style: CircularGaugeStyle {
            function get_color(backend, val) {
                var color = "#000000"
                if(backend.max_alarm !== backend.min_alarm && (
                            val >= backend.max_alarm || val <= backend.min_alarm))
                    color = "red"
                else if(backend.max_warning !== backend.min_warning &&
                        (val >= backend.max_warning || val <= backend.min_warning) )
                    color = "orange"
                console.debug("color: ", color)
                return color
            tickmarkStepSize: (circularGauge.maximumValue - circularGauge.minimumValue) / 10;
            tickmarkLabel:  Text {
                font.pixelSize: Math.max(6, outerRadius * 0.1)
                text: styleData.value
                color: get_color(circularGauge.backend, styleData.value)
                antialiasing: true
        value: cgbackend2.value


    With the appropriate QML_IMPORT_PATH in the .pro file, QtCreator recognizes and highlights QmlReaderBackend correctly.

    My goal is to use some QtQuick controls, (Gauge, labels, sliders, buttons), customise their style and then connect them to the QmlReaderBackend to perform readings and update the items accordingly.

    I would like those controls to be available through the designer within the Qt creator.

    Which is the simplest way to go?

    Being able to drag and drop the CircularGauge above defined would be already enough.
    Somewhere I've read that it is not necessary to write a plugin just to make qml templates available to the QtCreator Library.
    As far as I've understood, once the designer finds the module (i.e. the one providing QmlReaderBackend in my case), it should be enough to make it find the custom qml files.

    I've placed a qmldir file in the directory QML_IMPORT_PATH like this:

    module CumbiaQmlControls
    classname CumbiaQmlControlsPlugin
    plugin cumbia-qtcontrols-qml-qt5

    and there I placed the .qml file above described.

    Nothing is displayed by QtCreator designer

    Thanks for any hint.

Log in to reply