add an example

Author: Jovan Mitrevski

README.md

@@ -9,8 +9,6 @@ In order to use matplotlib plots with QtQuick, do the following:
 1. In your QML files, instantiate an object with the QML type defined above. Its `objectName` property specifies the name of the object that can be found in the QML engine. It can be retrieved in python with `win.findChild(QtCore.QObject, "spectFigure")`, for example, where `"spectFigure"` is the `objectName` in this case.
 1. One can then pass this object as needed. This is the FigureCanvasQtQuickAgg object. The figure can be found in its `figure` property.
 
-The test in the `tests` directory gives a simple example of how to use this backend.
-
 For interactive plots, if you want to use the toolbar, to the `Bridge` class add slots like:
 
 ```python
@@ -65,5 +63,8 @@ and provide the callbacks, for example:
             self.setSlice()
 ```
 
-
 Please let me know if you have any suggestions or better ways I should do this.
+
+## Examples
+
+The example in the `examples` directory gives a simple example of how to use this backend, including interactions.

examples/__init__.py

@@ -0,0 +1,115 @@
+#!/usr/bin/env python
+"""
+An example of using the backend
+"""
+import sys
+from pathlib import Path
+
+import numpy as np
+from matplotlib_backend_qtquick.backend_qtquick import (
+    NavigationToolbar2QtQuick)
+from matplotlib_backend_qtquick.backend_qtquickagg import (
+    FigureCanvasQtQuickAgg)
+from matplotlib_backend_qtquick.qt_compat import QtGui, QtQml, QtCore
+
+
+class DisplayBridge(QtCore.QObject):
+    """ A bridge class to interact with the plot in python
+    """
+    coordinatesChanged = QtCore.Signal(str)
+
+    def __init__(self, parent=None):
+        super().__init__(parent)
+
+        # The figure and toolbar
+        self.figure = None
+        self.toolbar = None
+
+        # this is used to display the coordinates of the mouse in the window
+        self._coordinates = ""
+
+    def updateWithCanvas(self, canvas):
+        """ initialize with the canvas for the figure
+        """
+        self.figure = canvas.figure
+        self.toolbar = NavigationToolbar2QtQuick(canvas=canvas)
+
+        # make a small plot
+        self.axes = self.figure.add_subplot(111)
+        self.axes.grid(True)
+
+        x = np.linspace(0, 2*np.pi, 100)
+        y = np.sin(x)
+
+        self.axes.plot(x, y)
+        canvas.draw_idle()
+
+        # connect for displaying the coordinates
+        self.figure.canvas.mpl_connect('motion_notify_event', self.on_motion)
+ 
+    # define the coordinates property
+    # (I have had problems using the @QtCore.Property directy in the past)
+    def getCoordinates(self):
+        return self._coordinates
+    
+    def setCoordinates(self, coordinates):
+        self._coordinates = coordinates
+        self.coordinatesChanged.emit(self._coordinates)
+    
+    coordinates = QtCore.Property(str, getCoordinates, setCoordinates,
+                                  notify=coordinatesChanged)
+
+    # The toolbar commands
+    @QtCore.Slot()
+    def pan(self, *args):
+        """Activate the pan tool."""
+        self.toolbar.pan(*args)
+
+    @QtCore.Slot()
+    def zoom(self, *args):
+        """activate zoom tool."""
+        self.toolbar.zoom(*args)
+
+    @QtCore.Slot()
+    def home(self, *args):
+        self.toolbar.home(*args)
+
+    @QtCore.Slot()
+    def back(self, *args):
+        self.toolbar.back(*args)
+
+    @QtCore.Slot()
+    def forward(self, *args):
+        self.toolbar.forward(*args)
+
+    def on_motion(self, event):
+        """
+        Update the coordinates on the display
+        """
+        if event.inaxes == self.axes:
+            self.coordinates = f"({event.xdata:.2f}, {event.ydata:.2f})"
+
+if __name__ == "__main__":
+    QtCore.QCoreApplication.setAttribute(QtCore.Qt.AA_EnableHighDpiScaling)
+    app = QtGui.QGuiApplication(sys.argv)
+    engine = QtQml.QQmlApplicationEngine()
+
+    # instantate the display bridge
+    displayBridge = DisplayBridge()
+
+    # Expose the Python object to QML
+    context = engine.rootContext()
+    context.setContextProperty("displayBridge", displayBridge)
+
+    # matplotlib stuff
+    QtQml.qmlRegisterType(FigureCanvasQtQuickAgg, "Backend", 1, 0, "FigureCanvas")
+
+    # Load the QML file
+    qmlFile = Path(Path.cwd(), Path(__file__).parent, "main.qml")
+    engine.load(QtCore.QUrl.fromLocalFile(str(qmlFile)))
+
+    win = engine.rootObjects()[0]
+    displayBridge.updateWithCanvas(win.findChild(QtCore.QObject, "figure"))
+
+    # execute and cleanup
+    app.exec_()

examples/main.py

@@ -0,0 +1,81 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Window 2.12
+import QtQuick.Layouts 1.12
+
+import Backend 1.0
+
+ApplicationWindow {
+    id: mainWindow
+    visible: true
+    width: 800
+    height: 600
+    title: qsTr("QtQuick backend test")
+
+    
+    FigureCanvas {
+        id: mplView
+        objectName : "figure"
+        dpi_ratio: Screen.devicePixelRatio
+	    anchors.fill: parent
+    }
+
+    footer: ToolBar {
+        RowLayout {
+            ToolButton {
+                text: qsTr("home")
+                onClicked: {
+                    displayBridge.home();
+                }
+            }
+
+            Button {
+                text: qsTr("back")
+                onClicked: {
+                    displayBridge.back();
+                }
+            }
+
+            Button {
+                text: qsTr("forward")
+                onClicked: {
+                    displayBridge.forward();
+                }
+            }
+
+            ToolSeparator{}
+
+            Button {
+                id: pan
+                text: qsTr("pan")
+                checkable: true
+                onClicked: {
+                    if (zoom.checked) {
+                        zoom.checked = false;
+                    }
+                    displayBridge.pan();
+                }
+            }
+
+            Button {
+                id: zoom
+                text: qsTr("zoom")
+                checkable: true
+                onClicked: {
+                    if (pan.checked) {
+                        // toggle pan off
+                        pan.checked = false;
+                    }
+                    displayBridge.zoom();
+                }
+            }
+            ToolSeparator {}
+            TextInput {
+                id: location
+                readOnly: true
+                text: displayBridge.coordinates
+            }
+        }
+    }
+
+}

examples/main.qml

@@ -5,7 +5,7 @@
 
 setuptools.setup(
     name="matplotlib_backend_qtquick",
-    version="0.0.6",
+    version="0.0.7",
     author="Jovan Mitrevski",
     author_email="j.p.mitrevski@gmail.com",
     description="A QtQuick backend for matplotlib",