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.

GDAL Python gdal_retile.py

Here is a small installation manual for GDAL and Python:

  1. Install GDAL core
  2. Install Python 3.3 and add the Python main path to the environment variable ‘path’ of your System
  3. Add GDAL_DATA to your environment variables
  4. Install GDAL Python bindings

If all there were no errors during installation GDAL Python scripts should work. Please be aware that all software parts are x64 and do have the same Python Version!

XG4 Toshiba NVME SSD Configuration Windows 10

  1. See if you have the latest bios update
  2. Download and install the latest Intel Rapid Storage driver provided by your mainboard manufacturer
  3. Go to the OCZ Homepage and download the RD400 driver
  4. Open the Windows ‘Device Manager’, go to ‘Storage Controllers’
  5. Right click the ‘Standard NVM Express Controller’ and choose ‘Update Driver Software’, then ‘Browse my computer for driver software (locate and install driver software manually)’
    Choose the ‘Let me pick from a list of device drivers on my computer’.
  6. Uncheck the ‘Show compatible hardware’ box to show the manufacturer list.
    From the manufacturer list you need choose ‘Toshiba’ and from the models select ‘RD400’
  7. Click the ‘Next’ button, close the window and restart your computer.

Optionally you can update the firmware of the XG4:

Consider that it is not my fault if you are loosing any data or if you are destroying your SSD drive!

  1. Download or use the Google search: xg4 dell firmware
  2. Double click the executeable
  3. Select the checkbox next to your XG4 from the HDD list
  4. Update and restart your Computer

The SSD Utility of OCZ is also working with that driver. Here is a link to download it.

Here are my test results:

Qt Creator Debugging Tools for Windows

After a fresh installation of Qt and Visual Studio 2015 I had some problems in configuring developing kits in the Qt Creator application. The main problem was that it could not find any debugger, so here is a small guide where you can save a little bit more time to setup all correctly:

  1. Download and install Microsoft Visual Studio Community 2015
  2. Download and install Qt
  3. Download the full package Windows 10 SDK
  4. After download execute the setup and select only ‘Debugging Tools for Windows’ for installation

Connect Synology Diskstation with Ubuntu Server

Here is a small manual for setting up a connection between an Ubuntu server and a Synology Diskstation. Prerequesites are that you created a shared folder and configured your Diskstation successfully. After that you can start sharing that content to your Ubuntu server.

  1. Open the Diskstation Web Application
  2. Go to “Control Panel – Shared Folder”
  3. Open “NFS-Access”
  4. Create a new one
    Client: *
    Privilegde: Read/Write
    Root squash: default
    Asynchronous: Yes
  5. Write down the mount path from the bottom of this pop-up, in my case it was “/volume1/Backup”
  6. Open a shell on your Ubuntu server
    sudo apt-get install nfs-common
    sudo mkdir /mnt/diskstation
    sudo mkdir /mnt/backup
    sudo mount -t nfs 192.168.0.X:/volume1/Backup /mnt/backup
  7. Congratulations! You just added a Synology Diskstation to your Ubuntu server.

What now? Perhaps you want to sync your data (like I did):

rsync -rvz /mnt/diskstation /mnt/backup
-r ... include subdirectories
-v ... verbose mode, display output
-z ... compress content for lesser network traffic