Display QImage in QML

Currently I am developing an application that captures images and should display them via a Qt’s QML frontend. I thought that would be an easy task because I am familiar with QML and collected my own experiences in the last months.

So I got the QImages continously from my capturing thread. I updated my QImage member variable and wanted to display it via a QML image structure via the source tag and recognised this does not work….After a research session an trying out different ways to solve this problem I want to share my knowledge with all of you out there that do have the same problem. The order of the solutions is also the ranking, beginning from the best one (for me):

1. QPainter
Here I use a user defined QML item called ImageItem and paint the content of the image by a QPainter. For me it worked best but you have to take care by yourself about the image output.

// ImageItem.h
#ifndef IMAGEITEM_H
#define IMAGEITEM_H
#include <QQuickPaintedItem>
#include <QQuickItem>
#include <QPainter>
#include <QImage>

class ImageItem : public QQuickPaintedItem
{
Q_OBJECT
    Q_PROPERTY(QImage image READ image WRITE setImage NOTIFY imageChanged)
public:
    ImageItem(QQuickItem *parent = nullptr);
    Q_INVOKABLE void setImage(const QImage &image);
    void paint(QPainter *painter);
    QImage image() const;
signals:
    void imageChanged();
private:
    QImage current_image;
};
#endif // IMAGEITEM_H
// ImageItem.cpp
#include "ImageItem.h"

ImageItem::ImageItem(QQuickItem *parent) : QQuickPaintedItem(parent)
{    
this->current_image = QImage(":/images/no_image.png");
}

void ImageItem::paint(QPainter *painter)
{
    QRectF bounding_rect = boundingRect();
    QImage scaled = this->current_image.scaledToHeight(bounding_rect.height());
    QPointF center = bounding_rect.center() - scaled.rect().center();

    if(center.x() < 0)
        center.setX(0);
    if(center.y() < 0)
        center.setY(0);
   painter->drawImage(center, scaled);
}

QImage ImageItem::image() const
{    return this->current_image;
}

void ImageItem::setImage(const QImage &image)
{
    this->current_image = image;
    update();
}

Don’t forget to register the user defined item:

main.cpp
...
qmlRegisterType<ImageItem>("myextension", 1, 0, "ImageItem");
...

Then use it in your QML:

// main.qml
import myextension 1.0
...
ImageItem {
  id: liveImageItem
  height: parent.height
  width: parent.width
}
...

2. QImageProvider
Here you create your own QQuickImageProvider that is used to display the image. This should be the preferred solution but caused flickering output errors on animations of my user interface. So it got the good 2nd place.

// LiveImageProvider.h
#ifndef LIVEIMAGEPROVIDER_H
#define LIVEIMAGEPROVIDER_H

#include <QImage>
#include <QQuickImageProvider>

class LiveImageProvider : public QObject, public QQuickImageProvider
{
    Q_OBJECT
public:
    LiveImageProvider();

    QImage requestImage(const QString &id, QSize *size, const QSize &requestedSize) override;

public slots:
    void updateImage(const QImage &image);

signals:
    void imageChanged();

private:
    QImage image;
    QImage no_image;
};

#endif // LIVEIMAGEPROVIDER_H
// LiveImageProvider.cpp
#include "LiveImageProvider.h"
#include <QDebug>
/**
* @brief Image provider that is used to handle the live image stream in the QML viewer.
 */
LiveImageProvider::LiveImageProvider() : QQuickImageProvider(QQuickImageProvider::Image)
{
    this->no_image = QImage(":/images/no_image.png");
    this->blockSignals(false);
}

/**
 * @brief Delivers image. The id is not used.
 * @param id The id is the requested image source, with the "image:" scheme and provider identifier removed.
 * For example, if the image source was "image://myprovider/icons/home", the given id would be "icons/home".
 * @param size In all cases, size must be set to the original size of the image. This is used to set the
 * width and height of the relevant Image if these values have not been set explicitly.
 * @param requestedSize The requestedSize corresponds to the Image::sourceSize requested by an Image item.
 * If requestedSize is a valid size, the image returned should be of that size.
 * @return
 */
QImage LiveImageProvider::requestImage(const QString &id, QSize *size, const QSize &requestedSize)
{
    QImage result = this->image;

    if(result.isNull()) {
        result = this->no_image;
    }

    if(size) {
        *size = result.size();
    }

    if(requestedSize.width() > 0 && requestedSize.height() > 0) {
        result = result.scaled(requestedSize.width(), requestedSize.height(), Qt::KeepAspectRatio);
    }

    return result;
}

/**
 * @brief Update of the current image.
 * @param image The new image.
 */
void LiveImageProvider::updateImage(const QImage &image)
{
    if(this->image != image) {
        this->image = image;
        emit imageChanged();
    }
}

Keep attention to the reload() function because to update the scene graph that finally displays the content you need to change the (dummy) source.

// main.qml
...
Image {
  id: liveImage
  property bool counter: false

  asynchronous: true
  source: "image://live/image"
  anchors.fill: parent
  fillMode: Image.PreserveAspectFit
  cache: false


  function reload() {
    counter = !counter
    source = "image://live/image?id=" + counter
  }
  }
...

Dont’t forget to register the new image provider.

// main.cpp
...
QScopedPointer<LiveImageProvider> liveImageProvider(new LiveImageProvider());
QQmlApplicationEngine engine;
engine.rootContext()->setContextProperty("liveImageProvider", liveImageProvider.data());
engine.addImageProvider("live", liveImageProvider.data());
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
...

3. QString
This solution creates a string out of the QImage. This string is set to the source property of the QML image tag. Why this is the worst solution: a lot of conversions and copies, need prior knowledge about the image type (jpg/png/…).

QString ImageViewer::imageData() const
 {
 QByteArray bArray;
 QBuffer buffer(&bArray);
 buffer.open(QIODevice::WriteOnly);
 this->image.save(&buffer, "JPEG");

QString image("data:image/jpg;base64,");
 image.append(QString::fromLatin1(bArray.toBase64().data()));

return image;
 }

 

Windows Qt Maintenance Tool Stucks Solution

Sometimes it happens, that the maintenance tool of Qt is running and running and nothing is happening. It stucks at 99% and I waited hours of hours. In my case the following helped me to overcome this:

  1. Open Windows Explorer and enable the following option: show hidden files and folders
  2. Be sure that the maintenance tool is not running in the background (TaskManager)
  3. Now clear the following folder (it should contain ‘remoterepo-*’ – folders)
    C:\Users\profile-name\AppData\Local\Temp\
  4. Finished. Now open the Qt Maintenance tool and try again to update or modify your packages.

C++11 Hints

Life long learning is it called, isn’t it? So I decided to improve and extend my knowlegde by reading some extra material concerning this topic. Below you will find a link to the main developer of C++ – Bjarne Stroustrup. He has some interesting literature references and shares some of his ebooks on his webpage:

http://www.stroustrup.com/

Kinect v2 Free API: libfreenect2 (Windows)

If you are going to work with Microsoft’s Kinect v2 in the visual area you don’t need to use the official SDK and driver. Instead of that you should work with libfreenect2 to get platform and IDE independency. There is only one thing you have to do before you can use it: you have to build it (not difficult but time consuming – in my case). To avoid the same problems that I had, follow the guide below.

Dependencies
Download and install all applications. Extract the source files to your favorite projects’ directory.

Applications:
cmake
nasm
opencl

Sources:
libfreenect2
glfw
libjpeg-turbo
libusbx
opencv

Building

Start building of all sources by using cmake, but the last project you should build is libfreenect2. Follow the rules on the libfreenect2 homepage.