How add mouse/cursor to QML app for non-touch phone?

Question

This is a simple Qt/QML-based web browser "MeeBro" (Qt 4.7 & QtWebKit 1.0), that consists of a few qml files and one javascript file:

github.com/anssiko/webbrowser/blob/master/qml/content/WebBrowser.qml

It has an element Rectangle where URL is set:

property string urlString: "http://anssiko.github.com/"

Can you tell how to add a cursor that can be moved by joystik (◀, ▲, ▼, ▶) and can click on links by click on joystik center button?

MeeBro is based on Qt/QML Demo: doc.qt.io/qt–4.8/qt–demos–declarative–webbrowser–example.html

Also I think that this link can be helpful: doc.qt.io/qt-4.8/qml-webview.html

dtech dtech · Accepted Answer · 2015-04-03T21:18:10

You can implement a fake cursor, something like this:

#include <QTest>
#include <QGuiApplication>

    class FakeCursor : public QObject {
      Q_OBJECT
      Q_PROPERTY(QPoint pos READ pos WRITE setPos NOTIFY posChanged)
      Q_PROPERTY(bool visible READ visible NOTIFY visibleChanged)
      enum Direction { Up = 0, Down, Left, Right };
      QPoint _pos;
      qreal step;
      bool _visible;
    signals:
      void posChanged();
      void visibleChanged();
    public:
      FakeCursor() : step(1), _visible(true) {}

      void setPos(QPoint p) {
        if (p != _pos) {
            _pos = p;
            emit posChanged();
          }
      }
      bool visible() const { return _visible; }
      QPoint pos() const { return _pos; }

    public slots:
      void move(int d) {
        switch (d) {
          case Up: _pos.ry() -= step; break;
          case Down: _pos.ry() += step; break;
          case Left: _pos.rx() -= step; break;
          case Right: _pos.rx() += step; break;
          }
        emit posChanged();
      }
      void setStep(qreal s) { if (s) step = s; }
      void toggleVisible() { _visible = !_visible; emit visibleChanged(); }
      void click() {
        QWindow * w = QGuiApplication::allWindows()[0];
        QTest::touchEvent(w, 0).press(0, _pos, w).release(0, _pos, w);
        // try this instead if the touchevent doesn't work
        // QTest::mouseClick(QGuiApplication::allWindows()[0], Qt::LeftButton, Qt::NoModifier, _pos);
      }
    };

Then you instantiate and register it to QML in main():

  FakeCursor cur;
  engine.rootContext()->setContextProperty("Cursor", &cur);

And then you can create a cursor element on top of everything in QML:

Rectangle {
    width: 4
    height: 4
    radius: 2
    color: "red"
    x: Cursor.pos.x
    y: Cursor.pos.y
    visible: Cursor.visible
}

Which you can control with the Keys attached property. In the example below it is set to use the keyboard arrows and spacebar, you change those to your phone's controls:

Item {
    focus: true
    Keys.onPressed: {
        switch (event.key) {
        case Qt.Key_Up: Cursor.move(0); break;
        case Qt.Key_Down : Cursor.move(1); break;
        case Qt.Key_Left: Cursor.move(2); break;
        case Qt.Key_Right: Cursor.move(3); break;
        case Qt.Key_Space : Cursor.click(); break;
        }
    }
    Component.onCompleted: {
        Cursor.setStep(2) // to set the speed
        // Cursor.toggleVisible() // to show/hide it
        // Cursor.pos = Qt.point(50,50) // to move it quickly to a needed position
    }
}

You also need to add QT += testlib to your project file. If simulating the touch event doesn't work, try commenting it out and use the commented mouse click event. You may also have to change some QtQuick classes, because this example is with Qt5, I don't have Qt4.

How add mouse/cursor to QML app for non-touch phone?

1 Answers