Can't make my QML rectangle plugin appear.....

Julian Guarin

Using a library template I did the following:

my .pro file:

TEMPLATE = lib
TARGET = plug
QT += qml quick
CONFIG += qt plugin c++11

TARGET = $$qtLibraryTarget($$TARGET)
uri = com.afmx.rndtngl

# Input
SOURCES += \
    plug_plugin.cpp \
    roundtangle.cpp

HEADERS += \
    plug_plugin.h \
    roundtangle.h

DISTFILES = qmldir \
    RoundTangle.qml

!equals(_PRO_FILE_PWD_, $$OUT_PWD) {
    copy_qmldir.target = $$OUT_PWD/qmldir
    copy_qmldir.depends = $$_PRO_FILE_PWD_/qmldir
    copy_qmldir.commands = $(COPY_FILE) \"$$replace(copy_qmldir.depends, /, $$QMAKE_DIR_SEP)\" \"$$replace(copy_qmldir.target, /, $$QMAKE_DIR_SEP)\"
    QMAKE_EXTRA_TARGETS += copy_qmldir
    PRE_TARGETDEPS += $$copy_qmldir.target
}

qmldir.files = qmldir
unix {
    installPath = $$[QT_INSTALL_QML]/$$replace(uri, \\., /)
    qmldir.path = $$installPath
    target.path = $$installPath
    INSTALLS += target qmldir
}

The usual C++ files for plugin definition:

plugin.h && plugin.cpp:

#ifndef PLUG_PLUGIN_H
#define PLUG_PLUGIN_H

#include <QQmlExtensionPlugin>

class PlugPlugin : public QQmlExtensionPlugin
{
    Q_OBJECT
    Q_PLUGIN_METADATA(IID "org.qt-project.Qt.QQmlExtensionInterface")
    
public:
    void registerTypes(const char *uri);
};

#endif // PLUG_PLUGIN_H
#include "plug_plugin.h"
#include "roundtangle.h"

#include <qqml.h>

void PlugPlugin::registerTypes(const char *uri)
{
    // @uri com.afmx.rndtngl
    qmlRegisterType<RoundTangle>(uri, 1, 0, "RoundTangle");
}

The C++ description of the Object, roundtangle.cpp & roundtangle.h:

#ifndef ROUNDTANGLE_H
#define ROUNDTANGLE_H

#include <QObject>

class RoundTangle : public QObject
{
    Q_OBJECT
    Q_DISABLE_COPY(RoundTangle)
    
public:
    RoundTangle(QObject *parent = 0);
    ~RoundTangle();
};

#endif // ROUNDTANGLE_H


#include "roundtangle.h"
#include <QDebug>
RoundTangle::RoundTangle(QObject *parent):
    QObject(parent)
{
    // By default, QQuickItem does not draw anything. If you subclass
    // QQuickItem to create a visual item, you will need to uncomment the
    // following line and re-implement updatePaintNode()
    
    // setFlag(ItemHasContents, true);
    qDebug()<<"Ok soo here we go.....";
    
}

RoundTangle::~RoundTangle()
{
}

The Round tangle QML definition:

import QtQuick 2.0

Rectangle {
    
    color:"green"
    width:100
    height:100
    anchors.top: parent.top
    Component.onCompleted: {
        console.log("Something")
    }
    
}

I go to the build dir, and type:

> make clean
> make install

A lot of compiling goes in here..... but everything is ok and the .dylib and qmldir files are copied to the Qt com/afmx/rndtngl

mac$ ls -la /Users/xxx/Code/Qt55/5.7/clang_64/qml/com/afmx/rndtngl/
total 176
drwxr-xr-x  4 xxx  staff    136 Sep  8 10:22 .
drwxr-xr-x  4 xxx  staff    136 Sep  8 05:32 ..
-rwxr-xr-x  1 xxx  staff  82012 Sep  8 10:22 libplug_debug.dylib
-rw-r--r--  1 xxx  staff     37 Sep  8 10:02 qmldir

And of course in another Qt Quick Application project, I try to use RoundTangle:

Heres the .pro:

TEMPLATE = app

QT += qml quick
CONFIG += c++11

SOURCES += main.cpp

RESOURCES += qml.qrc

# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH = /Users/xxx/Code/hack/QtApps/qqplugin/plug/plug

# Default rules for deployment.
include(deployment.pri)

Heres the main.qml:

import QtQuick 2.6
import QtQuick.Window 2.2
import com.afmx.rndtngl 1.0


Window {
    visible: true
    
    
    RoundTangle{
        
    }
}

The Syntax highlighting recognizes the shared lib in the Qt installation, so it colorizes fine. I run, and the constructor displays the message in it but no rectangle is displayed. It's like the C++ Object is load in memory, but QML RoudTangle definition is not......

What Am I doing wrong... I know this is extense but help me here please!

t3685

@Julian-Guarin

You do not seem to have any code on your custom class. Do you see your debug output («so here we go...») when you run your application?

raven-worx

@Julian-Guarin
you have some misunderstanding i guess.
You defined your RoundRectangle type in QML and C++. But you need to decide either or.
Currently you registered your C++ implementation, which actually is jsut a plain QObject which doesn't draw anything.
Your QML implementation would do would you want, but you need to add it to the qrc of your plugin and specify it in a qmldir file for example.

Julian Guarin

@t3685 Yes!. Indeed that is what flashes on the console.

Julian Guarin

@raven-worx That's It's what I've figured. I guess there's something I don't understand. What I mean is How Do I get to use a QML, like it is "installed" inside the Qt57/qml/com/whateever/qmliwantoreuse?.

How would I reuse a QML without having to copy it from project to project? Just like the QtQuicks objects... that's what i'm trying to achieve here....

Thank you...

raven-worx

@Julian-Guarin
id you are just using qml files you do not necessarily have to create a plugin. Since Qt is able to load qml files directly from the filesystem.
But if you want you can do this:

put the qml file in qrc (e.g. myresources.qrc) of the plugin
add Q_INIT_RESOURCE(myresources); in the constructor of the plugin class
put a qmldir file next to your plugin with the following content:

module MyModuleName
plugin myquickplugin
RoundTangle 1.0 qrc:///path/to/1.0/RoundTangle.qml

t3685

@Julian-Guarin

You have no painting logic for your rectangle. That would explain why you do not see anyting.

Julian Guarin

@t3685 Yes, Im trying it by using a QML file which invokes QtQuick and a Rectangle.... isn't that possible?

t3685

@Julian-Guarin

Like @raven-worx, it is unclear what you are tyring to do? Are you making a custom C++ class to use in your QML or are you making a QML file?

Julian Guarin

@t3685 I guess it is. Sorry about that.

What I'm trying to achieve is to redirect qDebug message functions to a overlaid rectangle, on my QML UI. For the matter I set two goals:

Draw a semi transparent Rectangle with a ListView a ListModel and a Delegate, which propagate mouse events to the rest of the QML objects, and display debug messages. (Using a QML File)
Redirect the qDebug() using QLogMessage functions and stuff which emit signals with the message and message's color to the overlaid rectangle (C++)

So I said, let's use the plugin C++ QtQuick2 project template, and for the C++ part it worked all right, what did not work is the QML.

It is like the QML file is not used when compiling the C++ portion, in fact when I " make |grep '.qml' ", there's no line associated, so no qml file is being used.

So I decided to make a separated file for the QML (view) apart from the C++ portion (controller)...

The link to the project is the following:

https://github.com/julianguarinautoformax/qml-debug-tool

Julian Guarin

@Julian-Guarin @t365 @raven-worx

Making things apart seemed to work:

Only use the plugin for instantiate the C++ portion of what I want to achieve.

The overlaid rectangle, was done in a different QML file. And the QML file was

manually copied to the Qt55/5.7/clang_64/qml/com/afmx/debug, where all the QML dynamic modules live.

The QML copying it's annoying, and non functional, I will try to automate with the .pro file.... am I right on that one?

So this now works:


ApplicationWindow {
    visible: true
    width: 800
    height: 600
    title: qsTr("Debug")
    Rectangle {
        
        color:"black"
        anchors.fill: parent
        MouseArea{
            anchors.fill: parent
            onClicked: console.log("Ok dokey");
            
            
        }
        
    }
    AMFXDebugScreenConsole{
        id:dbgConsole
        
    }

    AFMXDebug{
        
        id:debuggerConsole
        onDebugMessage: dbgConsole.debugViewAdd(aString,aColor)
        
    }
}

AFMXDebugScreenConsole is the QML file with the overlaid rectangle and AFMXDebug is the C++ messages redirection object.

I guess it makes sense, because of controller/view isolation. But to have to copy this manually into your Qt installation is not that technical...

Is there (I guess, should be) a better way to achieve this?.