Qml Qwt Android

В данной статье будем запускать библиотеку qwt под Android.
Отображение qwt будем производить с помощью qml.  Для этих цели будет использоваться Qt5.

Рабочая среда:
Ubuntu 13.04

Будет продемонстрировано:
- отображения QWidget в qml и взаимодействия с ним(на примере QwtPlot)

Сборка qwt  под android http://vadim-d.blogspot.com/2013/07/qwt-android.html

Отображения QWidget в qml и взаимодействия с ним

Для отображения простого графика на qwt необходимы два класса QwtPlot и QwtPlotCurve. Добавим эти классы в qml.

Для добавления своих типов в qml существуют классы: QQuickPaintedItem, QQuickItem.
Подробнее http://qt-project.org/doc/qt-5.1/qtquick/qquickitem.html

Поскольку QwtPlot наследуется от QWidget, для типа который будет представлять QwtPlot, необходимо наследоваться от QQuickPaintedItem. В методе void paint(QPainter *painter) происходит рисование QwtPlot.

.h

#ifndef QUICKWIDGET_H
#define QUICKWIDGET_H

#include <QQuickPaintedItem>

class QwtPlot;

class QuickQwtPlot : public QQuickPaintedItem
{
    Q_OBJECT
    Q_PROPERTY(QString titleYLeft READ titleYLeft WRITE setAxisYLeft)
    Q_PROPERTY(QString titleYRight READ titleYRight WRITE setAxisYRight)
  Q_PROPERTY(QString titleXBottom READ titleXBottom WRITE setAxisXBottom)
    Q_PROPERTY(QString titleXTop READ titleXTop WRITE setAxisXTop)
    Q_PROPERTY(QString title READ title WRITE setTitle)

public:
    QuickQwtPlot(QQuickItem *parent = 0);
    ~QuickQwtPlot();

    void paint(QPainter *painter);

    QwtPlot *getPlot();

    QString titleXBottom() const;
    QString titleXTop() const;
    QString titleYRight() const;
    QString titleYLeft() const;
    QString title() const;

public slots:
    void heightChanged();
    void widthChanged();
    void setAxisXBottom(QString arg);
    void setAxisXTop(QString arg);
    void setAxisYRight(QString arg);
    void setAxisYLeft(QString arg);
    void setTitle(QString arg);

private:
    QwtPlot *mPlot;
};

#endif // QUICKWIDGET_H

.cpp

#include "QuickQwtPlot.h"

#include <qwt_legend.h>
#include <qwt_plot_canvas.h>
#include "qwt_plot.h"

#include <QDebug>

QuickQwtPlot::QuickQwtPlot(QQuickItem *parent)  : QQuickPaintedItem(parent)
{
    mPlot = new QwtPlot;

    mPlot->setAttribute(Qt::WA_NoSystemBackground);

    connect(this, SIGNAL(heightChanged()), this, SLOT(heightChanged()));
    connect(this, SIGNAL(widthChanged()), this, SLOT(widthChanged()));

    mPlot->insertLegend(new QwtLegend(), QwtPlot::BottomLegend);

    // canvas
    QwtPlotCanvas *canvas = new QwtPlotCanvas();
    canvas->setLineWidth(0);
    canvas->setFrameStyle(QFrame::Box | QFrame::Plain);
    canvas->setBorderRadius(4);
    QPalette canvasPalette(Qt::white);
    canvas->setPalette(canvasPalette);
    mPlot->setCanvas(canvas);

    mPlot->setAutoReplot(true);
}

QuickQwtPlot::~QuickQwtPlot()
{
    delete mPlot;
}

void QuickQwtPlot::paint(QPainter *painter)
{
    painter->setRenderHints(QPainter::Antialiasing, true);
    mPlot->render(painter);
}

QwtPlot *QuickQwtPlot::getPlot()
{
    return mPlot;
}

QString QuickQwtPlot::titleXBottom() const
{
    return mPlot->axisTitle(QwtPlot::xBottom).text();
}

QString QuickQwtPlot::titleXTop() const
{
    return mPlot->axisTitle(QwtPlot::xTop).text();
}

QString QuickQwtPlot::titleYRight() const
{
    return mPlot->axisTitle(QwtPlot::yRight).text();
}

QString QuickQwtPlot::titleYLeft() const
{
    return mPlot->axisTitle(QwtPlot::yLeft).text();
}

void QuickQwtPlot::heightChanged()
{
    mPlot->setFixedHeight(contentsBoundingRect().height());
}

void QuickQwtPlot::widthChanged()
{
    mPlot->setFixedWidth(contentsBoundingRect().width());
}

void QuickQwtPlot::setAxisXBottom(QString arg)
{
    mPlot->setAxisTitle(QwtPlot::xBottom, arg);
}

void QuickQwtPlot::setAxisXTop(QString arg)
{
    mPlot->setAxisTitle(QwtPlot::xTop, arg);
}

void QuickQwtPlot::setAxisYRight(QString arg)
{
    mPlot->setAxisTitle(QwtPlot::yRight, arg);
}

void QuickQwtPlot::setAxisYLeft(QString arg)
{
    mPlot->setAxisTitle(QwtPlot::yLeft, arg);
}

QString QuickQwtPlot::title() const
{
    return mPlot->title().text();
}

void QuickQwtPlot::setTitle(QString arg)
{
    mPlot->setTitle(arg);
}

Можно видеть, что добавлены свойства типа:

Q_PROPERTY(QString titleYLeft READ titleYLeft WRITE setAxisYLeft) 

они необходимы для доступа к свойствам класса QwtPlot из qml. Например для задания названия осей.

Изменение размера нашего типа QuickQwtPlot в qml вызовет слоты heightChanged(), widthChanged(). Из них мы установим соответствующий размер для QwtPlot через contentsBoundingRect().
Для того чтобы QuickQwtPlot был виден в qml, нужно его зарегистрировать с помощью функции qmlRegisterType. qmlRegisterType вызывать в main до создания объекта QQuickView.

qmlRegisterType<QuickQwtPlot>("QuickQwt", 1, 0, "QuickQwtPlot");

Тогда в qml:

import QuickQwt 1.0
QuickQwtPlot {} // QwtPlot

Далее  рассмотрим добавление QwtPlotCurve в qml.
Поскольку класс QwtPlotCurve не производит рисования, то наследоваться нужно от QQuickItem.

.h

#ifndef QUICKCURVE_H
#define QUICKCURVE_H

#include "qwt_plot_curve.h"

#include <QQuickItem>
#include <QMetaType>

class QuickCurve : public QQuickItem
{
    Q_OBJECT
    Q_PROPERTY(QVariantList attach READ attach WRITE setAttach)
    Q_PROPERTY(QString title READ title WRITE setTitle)
    Q_PROPERTY(QColor color READ color WRITE setColor)
    Q_PROPERTY(int lineWidth READ lineWidth WRITE setLineWidth)
    Q_PROPERTY(QwtPlotCurve::CurveStyle style READ style WRITE setStyle)
    Q_PROPERTY(QwtPlotCurve::CurveStyle NoCurve READ NoCurve)
    Q_PROPERTY(QwtPlotCurve::CurveStyle Lines READ Lines)
    Q_PROPERTY(QwtPlotCurve::CurveStyle Sticks READ Sticks)
    Q_PROPERTY(QwtPlotCurve::CurveStyle Steps READ Steps)
    Q_PROPERTY(QwtPlotCurve::CurveStyle Dots READ Dots)

public:
    explicit QuickCurve(QQuickItem *parent = 0);
    ~QuickCurve();

    QVariantList attach() const;
    QString title() const;
    QColor color() const;
    int lineWidth() const;

    QwtPlotCurve::CurveStyle NoCurve() const;
    QwtPlotCurve::CurveStyle style() const;
    QwtPlotCurve::CurveStyle Lines() const;
    QwtPlotCurve::CurveStyle Sticks() const;
    QwtPlotCurve::CurveStyle Steps() const;
    QwtPlotCurve::CurveStyle Dots() const;

signals:

public slots:
    void setAttach(QVariantList arg);
    void setTitle(QString arg);
    void setColor(QColor arg);
    void setLineWidth(int arg);
    void setStyle(QwtPlotCurve::CurveStyle arg);

protected:
    void replote();
    QwtPlotCurve *getCurve() const;

private:
    QwtPlotCurve *mCurve;
    QVariantList mPlots;
};

Q_DECLARE_METATYPE(QwtPlotCurve::CurveStyle)

#endif // QUICKCURVE_H

Как видно, класс в основном реализует проброс свойств класса QwtPlotCurve из c++ в qml с помощью Q_PROPERTY. Свойства добавлены не все, лишь те, что  были необходимы. В объявлении содержится макрос Q_DECLARE_METATYPE. Он необходим для добавления всех функций с которыми будет работать QVariant. Также нужно зарегистрировать в main собственные типы которые используются в  Q_PROPERTY. Производится это через функцию qRegisterMetaType<>().
Например:

qRegisterMetaType<QwtPlotCurve::CurveStyle>();

.cpp

#include "QuickCurve.h"
#include "QuickQwtPlot.h"

#include <QDebug>

QuickCurve::QuickCurve(QQuickItem *parent) :
    QQuickItem(parent)
{
    mCurve = new QwtPlotCurve;
    mCurve->setRenderHint(QwtPlotItem::RenderAntialiased, true);
}

QuickCurve::~QuickCurve()
{
    delete mCurve;
}

QVariantList QuickCurve::attach() const
{
    return mPlots;
}

QString QuickCurve::title() const
{
    return mCurve->title().text();
}

QColor QuickCurve::color() const
{
    return mCurve->pen().color();
}

int QuickCurve::lineWidth() const
{
    return mCurve->pen().width();
}

QwtPlotCurve::CurveStyle QuickCurve::NoCurve() const
{
    return QwtPlotCurve::NoCurve;
}

QwtPlotCurve::CurveStyle QuickCurve::style() const
{
    return mCurve->style();
}

QwtPlotCurve::CurveStyle QuickCurve::Lines() const
{
    return QwtPlotCurve::Lines;
}

QwtPlotCurve::CurveStyle QuickCurve::Sticks() const
{
    return QwtPlotCurve::Sticks;
}

QwtPlotCurve::CurveStyle QuickCurve::Steps() const
{
    return QwtPlotCurve::Steps;
}

QwtPlotCurve::CurveStyle QuickCurve::Dots() const
{
    return QwtPlotCurve::Dots;
}

void QuickCurve::setAttach(QVariantList arg)
{
    foreach (QVariant item, arg) {
        if (item.canConvert<QuickQwtPlot *>()) {
            qDebug() << "attach plot";
            QuickQwtPlot *plot = item.value<QuickQwtPlot *>();
            mCurve->attach(plot->getPlot());
            mPlots.append(item);
        }
    }
}

QwtPlotCurve *QuickCurve::getCurve() const
{
    return mCurve;
}

void QuickCurve::setStyle(QwtPlotCurve::CurveStyle arg)
{
    mCurve->setStyle(arg);
}

void QuickCurve::replote()
{
    foreach (QVariant item, mPlots) {
        if (item.canConvert<QuickQwtPlot *>()) {
            QuickQwtPlot *plot = item.value<QuickQwtPlot *>();
            plot->update();
        }
    }
}

void QuickCurve::setTitle(QString arg)
{
    mCurve->setTitle(arg);
}

void QuickCurve::setColor(QColor arg)
{
    mCurve->setPen(arg, mCurve->pen().width());
}

void QuickCurve::setLineWidth(int arg)
{
    mCurve->setPen(mCurve->pen().color(), arg);
}

Переменная mPlots типа QVariantList содержит все экземпляра QwtPlot, которые были добавлены через attach. С одной кривой можно связать несколько полотен QwtPlot. Функции void replote() и QwtPlotCurve *getCurve() const видны как protected. Было задумано наследоваться от класса QwtPlotCurve и уже в нем задавать данные для кривой. Например:

.h

#ifndef QUICKCURVELIGHT_H
#define QUICKCURVELIGHT_H

#include <QLightSensor>

#include "QuickCurve.h"

class QuickCurveLight : public QuickCurve
{
    Q_OBJECT
public:
    explicit QuickCurveLight(QQuickItem *parent = 0);
   
signals:
   
public slots:
    void timerEvent(QTimerEvent *event);

private:
    void updatePlygon(QPolygonF *polygon, double value, quint32 size = 100);

    QPolygonF mPointsLight;
    QLightSensor mLightSensor;
};

#endif // QUICKCURVELIGHT_H

.cpp

#include "QuickCurveLight.h"

QuickCurveLight::QuickCurveLight(QQuickItem *parent) :
    QuickCurve(parent)
{
    startTimer(500);
    mLightSensor.start();
}

void QuickCurveLight::timerEvent(QTimerEvent *event)
{
    if (mLightSensor.isActive() && !mLightSensor.isBusy()) {
        updatePlygon(&mPointsLight, mLightSensor.reading()->lux());
        getCurve()->setSamples(mPointsLight);
    }
    replote();
    QQuickItem::timerEvent(event);
}

void QuickCurveLight::updatePlygon(QPolygonF *polygon, double value, quint32 size)
{
    if (static_cast<quint32>(polygon->size()) > size) {
        polygon->pop_front();

        const int h = 1;
        for (quint32 i = 0; i < size; ++i)
            (*polygon)[i].rx() = polygon->at(i).x() - h;
    }
    polygon->push_back(QPointF(polygon->size(), value));
}

Отображение графика в qml:

import QtQuick 2.0
import QuickQwt 1.0

Rectangle {
    color: "lightblue"
    focus: true

    QuickQwtPlot {
        id: plot
        anchors.fill: parent

        title: "Light sensor"
        titleYLeft: "lx"
    }

    QuickCurveLight {
        title: "Light"
        color: "yellow"
        lineWidth: 5
        style: Lines

        attach: [plot]
    }

    MouseArea {
        anchors.fill: parent;

        onClicked: Qt.quit()
    }
}