Suffering from absence of useful QSettings in QML?

Its pretty easy to solve (if you not afraid of some c++ code in your project)

#ifndef SETTINGS_H
#define SETTINGS_H

#include <QObject>
#include <QSettings>

class Settings : public QObject
{
    Q_OBJECT
public:
    explicit Settings(QObject *parent = 0);
    Q_INVOKABLE void setValue(const QString & key, const QVariant & value);
    Q_INVOKABLE QVariant value(const QString &key, const QVariant &defaultValue = QVariant()) const;

signals:

public slots:
private:
    QSettings settings_;
};

#endif // SETTINGS_H

#include "settings.h"

Settings::Settings(QObject *parent) :
    QObject(parent)
{
}

void Settings::setValue(const QString &key, const QVariant &value) {
    settings_.setValue(key, value);
}

QVariant Settings::value(const QString &key, const QVariant &defaultValue) const {
    return settings_.value(key, defaultValue);
}

register it:

    QQmlContext *context = engine->rootContext();
    context->setContextProperty("settings", &settings);

and use:

    FileDialog {
        id: fileDialog
        folder: settings.value("lastFolder", ".")
        onAccepted:  {
            settings.setValue("lastFolder", fileDialog.folder)
        }
    }

pretty easy, eh?

Ok folks, today we are talking about how to load custom QML file and integrate it into your main application? It is useful, for example, to create settings UI for different plugins, when each plugin requires its own UI

So, here is a code:

#ifndef QMLSETTINGSVIEW_H
#define QMLSETTINGSVIEW_H

#include <QObject>
#include <QQuickView>
#include <QQmlApplicationEngine>
#include <QQuickItem>

class QmlSettingsView: public QObject
{
    Q_OBJECT
public:
    QmlSettingsView(QObject *parent = 0);
    ~QmlSettingsView();
    QQmlApplicationEngine *engine() const;
    void setEngine(QQmlApplicationEngine *engine, const QString &qmlpath, const QString &finishedSignal);
    void showSettings();
    void hideSettings();
    bool setSettingsProperty(const char *name, const QVariant &value);
    QVariant settingsProperty(const char *name);

public slots:
    virtual void settingsFinished() = 0;

    QQuickWindow *parentWindow() const;

private:
    QQuickView *view_;
    QQmlApplicationEngine *engine_;
    QQuickItem *root_;
    QQuickWindow *parentWindow_;
};

#endif // QMLSETTINGSVIEW_H

#include "qmlsettingsview.h"
#include <QQmlContext>

QmlSettingsView::QmlSettingsView(QObject *parent):
    QObject(parent)
  , view_(0)
  , engine_(0)
  , root_(0)
  , parentWindow_(0){
}

QmlSettingsView::~QmlSettingsView() {
    if (view_)
        view_->deleteLater();
}

QQmlApplicationEngine *QmlSettingsView::engine() const {
    return engine_;
}

void QmlSettingsView::setEngine(QQmlApplicationEngine *engine, const QString &qmlpath, const QString &finishedSignal) {
    engine_ = engine;
    if (!engine_)
        return;

    if (view_) //already created
        return;

    engine_->clearComponentCache();
    if (engine_->rootObjects().count() <= 0)
        return;

    QObject *topLevel = engine_->rootObjects().value(0);
    parentWindow_ = qobject_cast<QQuickWindow *>(topLevel);

    if (!parentWindow_)
        return;

    view_ = new QQuickView(engine, parentWindow_);
    if (!view_)
        return;

    view_->setSource(QUrl(qmlpath));
    if (view_->status() != QQuickView::Ready) {
        return;
    }

    root_ = view_->rootObject();
    QString f_ = finishedSignal;
    f_ = f_.insert(0, "2");
    //settingsFinished() must be implemented in child class
    connect(root_, f_.toLatin1().data(), this, SLOT(settingsFinished()));
}

void QmlSettingsView::showSettings() {
    if (!view_)
        return;
    view_->show();
}

void QmlSettingsView::hideSettings() {
    if (!view_)
        return;
    view_->hide();
}

bool QmlSettingsView::setSettingsProperty(const char *name, const QVariant &value) {
    if (!root_)
        return false;

    return root_->setProperty(name, value);
}

QVariant QmlSettingsView::settingsProperty(const char *name) {
    if (!root_)
        return false;

    return root_->property(name);
}

QQuickWindow *QmlSettingsView::parentWindow() const {
    return parentWindow_;
}

The main purpose to create the code was to implement UI logic for separate plugins, that’s why its naming

Usage example:

#include "qmlsettingsview/qmlsettingsview.h"

class GrayScaleFilterPluginSettings: public QmlSettingsView {

    Q_OBJECT

public:
    GrayScaleFilterPluginSettings(QObject *parent = 0);
    virtual ~GrayScaleFilterPluginSettings();

    void settingsFinished();
signals:
    void finished();
};

define your new class somewhere in the main code:

GrayScaleFilterPluginSettings qmlsettingsview;

implementation

GrayScaleFilterPluginSettings::GrayScaleFilterPluginSettings(QObject *parent):
    QmlSettingsView(parent) {
}

GrayScaleFilterPluginSettings::~GrayScaleFilterPluginSettings() {
}

void GrayScaleFilterPluginSettings::settingsFinished() {
    emit finished();
}

connect finished signal to your main class slot, which will deal with the settings etc

connect(&qmlsettingsview, SIGNAL(finished()), this, SLOT(settingsClosed()));

here we show and hide our settings

void GrayScaleFilterPlugin::setupItem(QQmlApplicationEngine *engine) {
    if (!engine)
        return;

    qmlsettingsview.setEngine(engine, "qrc:/gssettings.qml", "finished()");
    qmlsettingsview.setSettingsProperty("width", qmlsettingsview.parentWindow()->width());
    qmlsettingsview.setSettingsProperty("height", qmlsettingsview.parentWindow()->width());
    qmlsettingsview.showSettings();
    return;
}

void GrayScaleFilterPlugin::settingsClosed() {
    qmlsettingsview.hideSettings();
}

setEngine() sets QML engine, path to your settings qml file and name of signal when the settings are gets closed.

You can read new properties in settingsClosed() slot and save them to file

That’s actually it at the moment

Feel free to ask a questions

Nice blog post about how Qt for Android made: http://blog.qt.digia.com/blog/2013/07/23/anatomy-of-a-qt-5-for-android-application/

Be careful, when using MouseArea in Flickable or its items. Make sure you’ll disable it before using Flickable

In this post I’ll show how to provide QImage from C++ code to QML

All we know, that Image {} element in QML supports only source property, which takes an URL as input. So how to put an QImage (or QPixmap or texture) to Image {}?

Answer is: QQuickImageProvider (in Qt 5)

First of all you have to create a so called image provider class, derived from QQuickImageProvider:

#include <QQuickImageProvider>

QT_BEGIN_NAMESPACE

class ImageProvider : public QQuickImageProvider
{
public:
explicit ImageProvider();
virtual QImage requestImage(const QString &id, QSize *size, const QSize& requestedSize);
};

You have to reimplement method requestImage(). It takes an string id as input as well as requested image size.
String id is an unique id, generated in your QML code. We will come there later
If Image {} element request specific image size, you’ll get the size in requestedSize parameter. Just check it is it valid or not. If so, you have to resize your original image and return resized version. Also, you have to return new image size in the size parameter

Before using your image provider, you have to register it in QML engine:

ImageProvider *imageProvider = new ImageProvider;
QQmlApplicationEngine engine(QUrl("qml/main.qml"));
engine.addImageProvider("images", imageProvider);

in this case, “images” is an identifier for your image provider
Note: if you want to register several identifiers for several providers, you have to create separate object for each identifier:

QQmlApplicationEngine engine(QUrl("qml/main.qml"));

ImageProvider *imageProvider = new ImageProvider;
engine.addImageProvider("images", imageProvider);

ImageProvider *imageProvider1 = new ImageProvider;
engine.addImageProvider("images1", imageProvider1);

And, finally, last step. Adding Image element to QML code:

Image {
source: "image://images/" + id
cache: false
}

Take a look at source property.
In that URL image means that you will use an image provider. Then, images is provider identifier and id is the string value, which will be passed to your requestImage() implementation

Its important to turn cache off if you gonna to reuse an image id

That’s it. Hope this will help to someone

Last note: with the QQuickImageProvider class you can pass not only QImage but also QPixmaps and OpenGL textures to Image element

Very last note: do not try to use QSharedPointer<QImage>