I want to create a similar looking UI using QML as in the link below, that was my question on using Qcompleter in pyqt5 , pyqt5 autocomplete QLineEdit - Google places autocomplete . How can we implement the same model in Qt Quick, i cant seem to use the models in TextField of QML as i get the below error
Using the previous model it is only necessary to create the GUI, in this case use a ListView + Popup implementing the logic of selection:
main.py
import os
import sys
import json
from PyQt5 import QtCore, QtGui, QtNetwork, QtQml
API_KEY = "<API_KEY>"
class SuggestionPlaceModel(QtGui.QStandardItemModel):
finished = QtCore.pyqtSignal()
error = QtCore.pyqtSignal(str)
countChanged = QtCore.pyqtSignal()
def __init__(self, parent=None):
super(SuggestionPlaceModel, self).__init__(parent)
self._manager = QtNetwork.QNetworkAccessManager(self)
self._reply = None
def count(self):
return self.rowCount()
count = QtCore.pyqtProperty(int, fget=count, notify=countChanged)
#QtCore.pyqtSlot(str)
def search(self, text):
self.clear()
self.countChanged.emit()
if self._reply is not None:
self._reply.abort()
if text:
r = self.create_request(text)
self._reply = self._manager.get(r)
self._reply.finished.connect(self.on_finished)
loop = QtCore.QEventLoop()
self.finished.connect(loop.quit)
loop.exec_()
def create_request(self, text):
url = QtCore.QUrl("https://maps.googleapis.com/maps/api/place/autocomplete/json")
query = QtCore.QUrlQuery()
query.addQueryItem("key", API_KEY)
query.addQueryItem("input", text)
query.addQueryItem("types", "geocode")
query.addQueryItem("language", "en")
url.setQuery(query)
request = QtNetwork.QNetworkRequest(url)
return request
#QtCore.pyqtSlot()
def on_finished(self):
reply = self.sender()
if reply.error() == QtNetwork.QNetworkReply.NoError:
data = json.loads(reply.readAll().data())
if data['status'] == 'OK':
for prediction in data['predictions']:
self.appendRow(QtGui.QStandardItem(prediction['description']))
self.error.emit(data['status'])
self.countChanged.emit()
self.finished.emit()
reply.deleteLater()
self._reply = None
if __name__ == '__main__':
app = QtGui.QGuiApplication(sys.argv)
QtQml.qmlRegisterType(SuggestionPlaceModel, "PlaceModel", 1, 0, "SuggestionPlaceModel")
engine = QtQml.QQmlApplicationEngine()
qml_filename = os.path.join(os.path.dirname(__file__), 'main.qml')
engine.load(QtCore.QUrl.fromLocalFile(qml_filename))
if not engine.rootObjects():
sys.exit(-1)
sys.exit(app.exec_())
main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import PlaceModel 1.0
ApplicationWindow {
width: 400
height: 400
visible: true
QtObject {
id: internal
property bool finished: false
property bool busy: false
}
SuggestionPlaceModel{
id: suggestion_model
onFinished: {
internal.busy = false
if(count == 0) internal.finished = true
}
}
TextField {
anchors.centerIn: parent
id: textfield
onTextChanged: {
internal.busy = true
internal.finished = false
Qt.callLater(suggestion_model.search, text)
}
Popup {
id: popup
y: parent.height
visible: !internal.finished && textfield.length > 0
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
contentItem: Loader{
sourceComponent: internal.busy ? busy_component: lv_component
}
}
}
Component{
id: busy_component
BusyIndicator {
running: true
}
}
Component{
id: lv_component
ListView {
implicitWidth: contentItem.childrenRect.width
implicitHeight: contentHeight
model: suggestion_model
delegate: Text {
text: model.display
MouseArea{
id: mousearea
anchors.fill: parent
hoverEnabled: true
onClicked: {
textfield.text = model.display
internal.finished = true
}
}
}
}
}
}
Related
I'm kinda new to PySide2 and QML and I really need a way to replace all the points in an XYSeries at once. Since the QML item does not have a function that does so, I thought I had to create a custom class (that would inherits from QtCharts.QXYSeries), implement the function I need and then register the new type with PySide2.QtQml.qmlRegisterType, but I don't know how that should be done and I haven't been able to find an answer online (or at least one that I could understand).
So, to cut a long story short, what I need to know is if there's a way to change all the points of an XYSeries and how can it be done (e.g. creating a custom class and registering it, accessing the Item declarend in the .qml file from python and chaning its properties, etc...).
I know my question is really vague but I do not know where to look and what to do...
EDIT
I have a python class that acquires data from an instruments and generates an array of X and Y points. Since this arrays are made from at least 1000 points and since I need to have a refresh rate of at least 1Hz, it's impossible to do it adding one point at a time (I have an signal that sends the whole array to the qml interface and there, for the moment, I simply clear the series and add one XY couple at a time. It works but it's too damn slow).
One possible solution is to create a class that allows access to a QML object from Python, in this case I create the helper class that I export to QML through setContextProperty by linking the series with a qproperty.
main.py
import random
from PySide2 import QtCore, QtWidgets, QtQml
from PySide2.QtCharts import QtCharts
class Helper(QtCore.QObject):
serieChanged = QtCore.Signal()
def __init__(self, parent=None):
super(Helper, self).__init__(parent)
self._serie = None
def serie(self):
return self._serie
def setSerie(self, serie):
if self._serie == serie:
return
self._serie = serie
self.serieChanged.emit()
serie = QtCore.Property(QtCharts.QXYSeries, fget=serie, fset=setSerie, notify=serieChanged)
#QtCore.Slot(list)
def replace_points(self, points):
if self._serie is not None:
self._serie.replace(points)
class Provider(QtCore.QObject):
pointsChanged = QtCore.Signal(list)
def __init__(self, parent=None):
super(Provider, self).__init__(parent)
timer = QtCore.QTimer(
self,
interval=100,
timeout=self.generate_points
)
timer.start()
#QtCore.Slot()
def generate_points(self):
points = []
for i in range(101):
point = QtCore.QPointF(i, random.uniform(-10, 10))
points.append(point)
self.pointsChanged.emit(points)
if __name__ == '__main__':
import os
import sys
app = QtWidgets.QApplication(sys.argv)
helper = Helper()
provider = Provider()
provider.pointsChanged.connect(helper.replace_points)
engine = QtQml.QQmlApplicationEngine()
engine.rootContext().setContextProperty("helper", helper)
file = os.path.join(os.path.dirname(os.path.realpath(__file__)), "main.qml")
engine.load(QtCore.QUrl.fromLocalFile(file))
if not engine.rootObjects():
sys.exit(-1)
sys.exit(app.exec_())
main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
import QtCharts 2.3
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ChartView{
anchors.fill: parent
LineSeries{
id: serie
axisX: axisX
axisY: axisY
}
ValueAxis {
id: axisX
min: 0
max: 100
}
ValueAxis {
id: axisY
min: -10
max: 10
}
Component.onCompleted: helper.serie = serie
}
}
i have created a "Spectrum Analyser" Python project that is fully working, i hope it may be useful for some of you.
(In the real-life the "createserie" function may contain SCPI commands that would read actual data from any Spectrum Analyser, Oscilloscopes...)
This example demonstrates how to use QtQuick/QML, QtCharts and QThread together.
After clicking the "START" button the Qthread starts and enters a infinite loop (the loop can be terminated by clicking the "STOP" button).
In each loop some "dummy" random data (basically a "QXYSeries" of 1000 points) are generated and the plot is updated (it's actually very fast).
I am using a QThread so that the GUI remains anytime responsive.
I want to share this example because it took me a lot of time to write it and it was not that easy to find some good QML information online.
Main.py:
import sys
import os
# import time
import random
from PySide2.QtCore import Qt, QUrl, QThread, QPoint, QPointF, Slot, Signal, QObject, QProcess, Property, qInstallMessageHandler, QtInfoMsg, QtWarningMsg, QtCriticalMsg, QtFatalMsg
from PySide2.QtQuick import QQuickView
from PySide2.QtWidgets import QApplication, QMainWindow, QMessageBox
# from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine
from PySide2.QtCharts import QtCharts
# import pdb
print(chr(27) + "[2J")
def qt_message_handler(mode, context, message):
if mode == QtInfoMsg:
mode = 'Info'
elif mode == QtWarningMsg:
mode = 'Warning'
elif mode == QtCriticalMsg:
mode = 'critical'
elif mode == QtFatalMsg:
mode = 'fatal'
else:
mode = 'Debug'
print("%s: %s (%s:%d, %s)" % (mode, message, context.file, context.line, context.file))
class Worker1(QObject):
set_val = Signal(QtCharts.QXYSeries)
finished = Signal()
def __init__(self, serie, parent=None):
QObject.__init__(self, parent)
self._serie = serie
self._isRunning = True
def run(self):
measure(self)
def stop(self):
self._isRunning = False
def measure(self): # Called inside Thread1
while 1:
if self._isRunning == True:
createserie(self)
self.set_val.emit(self._serie)
# time.sleep(0.002)
else:
print("QUITING LOOP")
break
self.finished.emit()
return
def createserie(self):
points = []
for i in range(1001):
points.append(QPointF(i/1000, random.random()))
self._serie.replace(points)
class Backend(QObject):
setval = Signal(QtCharts.QXYSeries)
def __init__(self, parent=None):
QObject.__init__(self, parent)
self._serie = None
#Slot(QtCharts.QXYSeries) # expose QML serie to Python
def exposeserie(self, serie):
self._serie = serie
print(serie)
print("QML serie exposed to Python")
#Slot(str)
def startthread(self, text):
self.WorkerThread = QThread()
self.worker = Worker1(self._serie)
self.WorkerThread.started.connect(self.worker.run)
self.worker.finished.connect(self.end)
self.worker.set_val.connect(self.setval)
self.worker.moveToThread(self.WorkerThread) # Move the Worker object to the Thread object
self.WorkerThread.start()
#Slot(str)
def stopthread(self, text):
self.worker.stop()
print("CLOSING THREAD")
def end(self):
self.WorkerThread.quit()
self.WorkerThread.wait()
msgBox = QMessageBox()
msgBox.setText("THREAD CLOSED")
msgBox.exec()
class MainWindow(QObject):
def __init__(self, parent = None):
# Initialization of the superclass
super(MainWindow, self).__init__(parent)
qInstallMessageHandler(qt_message_handler)
self.backend = Backend()
# Expose the Python object to QML
self.engine = QQmlApplicationEngine()
self.context = self.engine.rootContext()
self.context.setContextProperty("backend", self.backend)
# Load the GUI
self.engine.load(os.path.join(os.path.dirname(__file__), "SpecPXA_QML.qml"))
if not self.engine.rootObjects():
sys.exit(-1)
self.win = self.engine.rootObjects()[0]
# Execute a function if "Start" button clicked
startbutton = self.win.findChild(QObject, "startbutton")
startbutton.startclicked.connect(self.startclicked)
# Execute a function if "Stop" button clicked
stopbutton = self.win.findChild(QObject, "stopbutton")
stopbutton.stopclicked.connect(self.stopclicked)
def startclicked(self):
print("START")
self.backend.startthread("test")
def stopclicked(self):
print("STOP")
self.backend.stopthread("test")
if __name__ == "__main__":
if not QApplication.instance():
app = QApplication(sys.argv)
else:
app = QApplication.instance()
app.setStyle('Fusion') # 'Breeze', 'Oxygen', 'QtCurve', 'Windows', 'Fusion'
w = MainWindow()
sys.exit(app.exec_())
and SpecPXA_QML.qml:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Dialogs 1.2
import QtCharts 2.3
ApplicationWindow {
width: 1200
height: 700
visible: true
title: qsTr("Hello World")
property var xySeries;
// MessageDialog {
// id: messageDialogQuit
// title: "Question:"
// icon: StandardIcon.Question
// text: "Quit program?"
// standardButtons: StandardButton.Yes |StandardButton.No
// // Component.onCompleted: visible = true
// onYes: {
// Qt.quit()
// close.accepted = true
// }
// onNo: {
// close.accepted = false
// }
// }
// onClosing: {
// close.accepted = true
// onTriggered: messageDialogQuit.open()
// }
MenuBar {
id: menuBar
width: Window.width
Menu {
title: qsTr("&File")
Action { text: qsTr("&New...") }
Action { text: qsTr("&Open...") }
Action { text: qsTr("&Save") }
Action { text: qsTr("Save &As...") }
MenuSeparator { }
Action { text: qsTr("&Quit") }
}
Menu {
title: qsTr("&Edit")
Action { text: qsTr("Cu&t") }
Action { text: qsTr("&Copy") }
Action { text: qsTr("&Paste") }
}
Menu {
title: qsTr("&Help")
Action { text: qsTr("&About") }
}
}
SplitView {
id: splitView
y: menuBar.height
width: Window.width
height: Window.height-(menuBar.height+infoBar.height)
orientation: Qt.Horizontal
Rectangle {
id: leftitem
height: Window.height
implicitWidth: 200
color: "red"
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.leftMargin: 0
anchors.bottomMargin: 0
anchors.topMargin: 0
Button {
//id: startbutton
signal startclicked
objectName: "startbutton"
y: 40
height: 40
text: qsTr("Start")
anchors.left: parent.left
anchors.right: parent.right
checkable: false
anchors.rightMargin: 30
anchors.leftMargin: 30
onClicked: startclicked("START")
//onClicked: backend.text = "Button was pressed"
}
Button {
//id: stopbutton
signal stopclicked
objectName: "stopbutton"
y: 100
height: 40
text: qsTr("Stop")
anchors.left: parent.left
anchors.right: parent.right
checked: false
checkable: false
anchors.rightMargin: 30
anchors.leftMargin: 30
onClicked: stopclicked("STOP")
}
}
Rectangle {
id: rightitem
height: Window.height
color: "green"
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.topMargin: 0
anchors.rightMargin: 0
anchors.bottomMargin: 0
Rectangle {
id: rectangle
color: "#ffffff"
anchors.fill: parent
anchors.rightMargin: 30
anchors.leftMargin: 30
anchors.bottomMargin: 30
anchors.topMargin: 30
ChartView {
id: line
anchors.fill: parent
ValueAxis {
id: axisX
min: 0
max: 1
}
ValueAxis {
id: axisY
min: 0
max: 1
}
// LineSeries {
// id: xySeries
// name: "my_Serie"
// axisX: axisX
// axisY: axisY
// useOpenGL: true
// XYPoint { x: 0.0; y: 0.0 }
// XYPoint { x: 1.1; y: 2.1 }
// XYPoint { x: 1.9; y: 3.3 }
// XYPoint { x: 2.1; y: 2.1 }
// XYPoint { x: 2.9; y: 4.9 }
// XYPoint { x: 3.4; y: 3.0 }
// XYPoint { x: 4.1; y: 3.3 }
// }
Component.onCompleted: {
xySeries = line.createSeries(ChartView.SeriesTypeLine, "my_plot", axisX, axisY);
xySeries.useOpenGL = true
backend.exposeserie(xySeries) // expose the serie to Python (QML to Python)
}
}
}
}
}
MenuBar {
id: infoBar
x: 0
y: 440
width: Window.width
height: 30
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
}
Connections {
target: backend
function onSetval(serie) { // "serie" is calculated in python (Python to QML)
xySeries = serie; // progressbar.value = val
// console.log(serie);
}
}
}
Best Regards.
Olivier.
I am sort of stringing things together and it is slowly starting to make more sense. I get how to send signals etc. with a onClick.
Aim: GUI where depending on button clicked, it will read, and RFID card. This code will be kept and passed to database.
There are two buttons. One is open, the other is close. Either of these will open same RFID Python script to read the card. These scripts are all run in a stackView. Below is the card reader stackView Page. It loads perfectly fine from the buttons pressed on previous screen.
To navigate to the correct stackView, stackView.push(Qt.resolvedUrl("**GET URL FROM PYTHON**")).
So Depending on the button pressed on the previous page, it will load either Welcome QML or goodbye QML
Main QML
///For button OPEN
onClicked: {
backend.open() ///Here connect to the correct python def
stackView.push(Qt.resolvedUrl("ReadCard.qml")) ///Go to read card
}
/// For button CLOSE
onClicked: {
backend.close() ///Here connect to the correct python def
stackView.push(Qt.resolvedUrl("ReadCard.qml"))///Go to read card
}
Python: main.py
# Signal Set Data
readOpen = Signal(str)
scanOut = Signal(str)
#Slot()
def open(self):
# Read card code
# SQL Code
# Move to Welcome QML if the lock is opened.
self.readOpen.emit("Welcome.qml")
#Slot()
def close(self):
# Read card code
# SQL Code
# Move to Good-Bye QML when lock is closed.
self.scanOut.emit("GoodBye.qml")
print("This is where the code to clock out will go")
QML: reader.qml
import QtQuick 2.0
import QtQuick.Controls 2.15
import "../controls"
import QtQuick.Layouts 1.0
Item {
Rectangle {
id: rectangle
...Other properties...
Rectangle {
id: rectangleTop
...Other Properties...
}
Rectangle {
id: rectangleVisible
color: "#1d2128"
radius: 10
anchors.left: parent.left
anchors.right: parent.right
anchors.top: rectangleTop.bottom
anchors.bottom: parent.bottom
anchors.bottomMargin: 40
anchors.rightMargin: 50
anchors.leftMargin: 50
anchors.topMargin: 10
//The timer just used to simulate card read as no card reader connected yet
Timer {
id: timer
}
function delay(delayTime,cb) {
timer.interval = delayTime;
timer.repeat = false;
timer.triggered.connect(cb);
timer.start();
}
Component.onCompleted: delay(1000, function() {
stackView.push(Qt.resolvedUrl("URL FROM PYTHON"))
})
Text {
id: text1
x: 148
y: 119
width: 288
height: 109
color: "#ffffff"
text: qsTr("Scan your card")
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 36
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
Connections{
target: backend
}
}
So the big question is. How to get that URL from Python and feed it into the Qt.resolvedurl?
From what I understood is that the OP wants the StackView url to be handled from python, so a possible solution is to create a qproperty that places the url through a Connection:
import os
import random
import sys
from pathlib import Path
from PySide2.QtCore import Property, QCoreApplication, QObject, Qt, QUrl, Signal, Slot
from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine
CURRENT_DIRECTORY = Path(__file__).resolve().parent
class Manager(QObject):
url_changed = Signal(name="urlChanged")
def __init__(self, parent=None):
super().__init__(parent)
self._url = QUrl()
#Property(QUrl, notify=url_changed)
def url(self):
return self._url
def _update_url(self, url):
if self.url == url:
return
self._url = url
self.url_changed.emit()
#Slot()
def open(self):
self._update_url(QUrl("Welcome.qml"))
#Slot()
def close(self):
self._update_url(QUrl("GoodBye.qml"))
def main():
app = QGuiApplication(sys.argv)
manager = Manager()
engine = QQmlApplicationEngine()
engine.rootContext().setContextProperty("manager", manager)
filename = os.fspath(CURRENT_DIRECTORY / "main.qml")
url = QUrl.fromLocalFile(filename)
def handle_object_created(obj, obj_url):
if obj is None and url == obj_url:
QCoreApplication.exit(-1)
engine.objectCreated.connect(handle_object_created, Qt.QueuedConnection)
engine.load(url)
sys.exit(app.exec_())
if __name__ == "__main__":
main()
main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Qt is awesome!!!")
RowLayout {
id: row_layout
width: parent.width
Button {
text: "Open"
Layout.fillWidth: true
onClicked: manager.open()
}
Button {
text: "Close"
Layout.fillWidth: true
onClicked: manager.close()
}
}
StackView {
id: stack_view
anchors.top: row_layout.bottom
anchors.bottom: parent.bottom
width: parent.width
}
Connections {
function onUrlChanged() {
stack_view.pop();
stack_view.push(Qt.resolvedUrl(manager.url));
}
target: manager
}
}
Welcome.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Page {
Text {
text: "Welcome"
anchors.centerIn: parent
}
}
GoodBye.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Page {
Text {
text: "GoodBye"
anchors.centerIn: parent
}
}
I'm kinda new to PySide2 and QML and I really need a way to replace all the points in an XYSeries at once. Since the QML item does not have a function that does so, I thought I had to create a custom class (that would inherits from QtCharts.QXYSeries), implement the function I need and then register the new type with PySide2.QtQml.qmlRegisterType, but I don't know how that should be done and I haven't been able to find an answer online (or at least one that I could understand).
So, to cut a long story short, what I need to know is if there's a way to change all the points of an XYSeries and how can it be done (e.g. creating a custom class and registering it, accessing the Item declarend in the .qml file from python and chaning its properties, etc...).
I know my question is really vague but I do not know where to look and what to do...
EDIT
I have a python class that acquires data from an instruments and generates an array of X and Y points. Since this arrays are made from at least 1000 points and since I need to have a refresh rate of at least 1Hz, it's impossible to do it adding one point at a time (I have an signal that sends the whole array to the qml interface and there, for the moment, I simply clear the series and add one XY couple at a time. It works but it's too damn slow).
One possible solution is to create a class that allows access to a QML object from Python, in this case I create the helper class that I export to QML through setContextProperty by linking the series with a qproperty.
main.py
import random
from PySide2 import QtCore, QtWidgets, QtQml
from PySide2.QtCharts import QtCharts
class Helper(QtCore.QObject):
serieChanged = QtCore.Signal()
def __init__(self, parent=None):
super(Helper, self).__init__(parent)
self._serie = None
def serie(self):
return self._serie
def setSerie(self, serie):
if self._serie == serie:
return
self._serie = serie
self.serieChanged.emit()
serie = QtCore.Property(QtCharts.QXYSeries, fget=serie, fset=setSerie, notify=serieChanged)
#QtCore.Slot(list)
def replace_points(self, points):
if self._serie is not None:
self._serie.replace(points)
class Provider(QtCore.QObject):
pointsChanged = QtCore.Signal(list)
def __init__(self, parent=None):
super(Provider, self).__init__(parent)
timer = QtCore.QTimer(
self,
interval=100,
timeout=self.generate_points
)
timer.start()
#QtCore.Slot()
def generate_points(self):
points = []
for i in range(101):
point = QtCore.QPointF(i, random.uniform(-10, 10))
points.append(point)
self.pointsChanged.emit(points)
if __name__ == '__main__':
import os
import sys
app = QtWidgets.QApplication(sys.argv)
helper = Helper()
provider = Provider()
provider.pointsChanged.connect(helper.replace_points)
engine = QtQml.QQmlApplicationEngine()
engine.rootContext().setContextProperty("helper", helper)
file = os.path.join(os.path.dirname(os.path.realpath(__file__)), "main.qml")
engine.load(QtCore.QUrl.fromLocalFile(file))
if not engine.rootObjects():
sys.exit(-1)
sys.exit(app.exec_())
main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
import QtCharts 2.3
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ChartView{
anchors.fill: parent
LineSeries{
id: serie
axisX: axisX
axisY: axisY
}
ValueAxis {
id: axisX
min: 0
max: 100
}
ValueAxis {
id: axisY
min: -10
max: 10
}
Component.onCompleted: helper.serie = serie
}
}
i have created a "Spectrum Analyser" Python project that is fully working, i hope it may be useful for some of you.
(In the real-life the "createserie" function may contain SCPI commands that would read actual data from any Spectrum Analyser, Oscilloscopes...)
This example demonstrates how to use QtQuick/QML, QtCharts and QThread together.
After clicking the "START" button the Qthread starts and enters a infinite loop (the loop can be terminated by clicking the "STOP" button).
In each loop some "dummy" random data (basically a "QXYSeries" of 1000 points) are generated and the plot is updated (it's actually very fast).
I am using a QThread so that the GUI remains anytime responsive.
I want to share this example because it took me a lot of time to write it and it was not that easy to find some good QML information online.
Main.py:
import sys
import os
# import time
import random
from PySide2.QtCore import Qt, QUrl, QThread, QPoint, QPointF, Slot, Signal, QObject, QProcess, Property, qInstallMessageHandler, QtInfoMsg, QtWarningMsg, QtCriticalMsg, QtFatalMsg
from PySide2.QtQuick import QQuickView
from PySide2.QtWidgets import QApplication, QMainWindow, QMessageBox
# from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine
from PySide2.QtCharts import QtCharts
# import pdb
print(chr(27) + "[2J")
def qt_message_handler(mode, context, message):
if mode == QtInfoMsg:
mode = 'Info'
elif mode == QtWarningMsg:
mode = 'Warning'
elif mode == QtCriticalMsg:
mode = 'critical'
elif mode == QtFatalMsg:
mode = 'fatal'
else:
mode = 'Debug'
print("%s: %s (%s:%d, %s)" % (mode, message, context.file, context.line, context.file))
class Worker1(QObject):
set_val = Signal(QtCharts.QXYSeries)
finished = Signal()
def __init__(self, serie, parent=None):
QObject.__init__(self, parent)
self._serie = serie
self._isRunning = True
def run(self):
measure(self)
def stop(self):
self._isRunning = False
def measure(self): # Called inside Thread1
while 1:
if self._isRunning == True:
createserie(self)
self.set_val.emit(self._serie)
# time.sleep(0.002)
else:
print("QUITING LOOP")
break
self.finished.emit()
return
def createserie(self):
points = []
for i in range(1001):
points.append(QPointF(i/1000, random.random()))
self._serie.replace(points)
class Backend(QObject):
setval = Signal(QtCharts.QXYSeries)
def __init__(self, parent=None):
QObject.__init__(self, parent)
self._serie = None
#Slot(QtCharts.QXYSeries) # expose QML serie to Python
def exposeserie(self, serie):
self._serie = serie
print(serie)
print("QML serie exposed to Python")
#Slot(str)
def startthread(self, text):
self.WorkerThread = QThread()
self.worker = Worker1(self._serie)
self.WorkerThread.started.connect(self.worker.run)
self.worker.finished.connect(self.end)
self.worker.set_val.connect(self.setval)
self.worker.moveToThread(self.WorkerThread) # Move the Worker object to the Thread object
self.WorkerThread.start()
#Slot(str)
def stopthread(self, text):
self.worker.stop()
print("CLOSING THREAD")
def end(self):
self.WorkerThread.quit()
self.WorkerThread.wait()
msgBox = QMessageBox()
msgBox.setText("THREAD CLOSED")
msgBox.exec()
class MainWindow(QObject):
def __init__(self, parent = None):
# Initialization of the superclass
super(MainWindow, self).__init__(parent)
qInstallMessageHandler(qt_message_handler)
self.backend = Backend()
# Expose the Python object to QML
self.engine = QQmlApplicationEngine()
self.context = self.engine.rootContext()
self.context.setContextProperty("backend", self.backend)
# Load the GUI
self.engine.load(os.path.join(os.path.dirname(__file__), "SpecPXA_QML.qml"))
if not self.engine.rootObjects():
sys.exit(-1)
self.win = self.engine.rootObjects()[0]
# Execute a function if "Start" button clicked
startbutton = self.win.findChild(QObject, "startbutton")
startbutton.startclicked.connect(self.startclicked)
# Execute a function if "Stop" button clicked
stopbutton = self.win.findChild(QObject, "stopbutton")
stopbutton.stopclicked.connect(self.stopclicked)
def startclicked(self):
print("START")
self.backend.startthread("test")
def stopclicked(self):
print("STOP")
self.backend.stopthread("test")
if __name__ == "__main__":
if not QApplication.instance():
app = QApplication(sys.argv)
else:
app = QApplication.instance()
app.setStyle('Fusion') # 'Breeze', 'Oxygen', 'QtCurve', 'Windows', 'Fusion'
w = MainWindow()
sys.exit(app.exec_())
and SpecPXA_QML.qml:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Dialogs 1.2
import QtCharts 2.3
ApplicationWindow {
width: 1200
height: 700
visible: true
title: qsTr("Hello World")
property var xySeries;
// MessageDialog {
// id: messageDialogQuit
// title: "Question:"
// icon: StandardIcon.Question
// text: "Quit program?"
// standardButtons: StandardButton.Yes |StandardButton.No
// // Component.onCompleted: visible = true
// onYes: {
// Qt.quit()
// close.accepted = true
// }
// onNo: {
// close.accepted = false
// }
// }
// onClosing: {
// close.accepted = true
// onTriggered: messageDialogQuit.open()
// }
MenuBar {
id: menuBar
width: Window.width
Menu {
title: qsTr("&File")
Action { text: qsTr("&New...") }
Action { text: qsTr("&Open...") }
Action { text: qsTr("&Save") }
Action { text: qsTr("Save &As...") }
MenuSeparator { }
Action { text: qsTr("&Quit") }
}
Menu {
title: qsTr("&Edit")
Action { text: qsTr("Cu&t") }
Action { text: qsTr("&Copy") }
Action { text: qsTr("&Paste") }
}
Menu {
title: qsTr("&Help")
Action { text: qsTr("&About") }
}
}
SplitView {
id: splitView
y: menuBar.height
width: Window.width
height: Window.height-(menuBar.height+infoBar.height)
orientation: Qt.Horizontal
Rectangle {
id: leftitem
height: Window.height
implicitWidth: 200
color: "red"
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.leftMargin: 0
anchors.bottomMargin: 0
anchors.topMargin: 0
Button {
//id: startbutton
signal startclicked
objectName: "startbutton"
y: 40
height: 40
text: qsTr("Start")
anchors.left: parent.left
anchors.right: parent.right
checkable: false
anchors.rightMargin: 30
anchors.leftMargin: 30
onClicked: startclicked("START")
//onClicked: backend.text = "Button was pressed"
}
Button {
//id: stopbutton
signal stopclicked
objectName: "stopbutton"
y: 100
height: 40
text: qsTr("Stop")
anchors.left: parent.left
anchors.right: parent.right
checked: false
checkable: false
anchors.rightMargin: 30
anchors.leftMargin: 30
onClicked: stopclicked("STOP")
}
}
Rectangle {
id: rightitem
height: Window.height
color: "green"
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.topMargin: 0
anchors.rightMargin: 0
anchors.bottomMargin: 0
Rectangle {
id: rectangle
color: "#ffffff"
anchors.fill: parent
anchors.rightMargin: 30
anchors.leftMargin: 30
anchors.bottomMargin: 30
anchors.topMargin: 30
ChartView {
id: line
anchors.fill: parent
ValueAxis {
id: axisX
min: 0
max: 1
}
ValueAxis {
id: axisY
min: 0
max: 1
}
// LineSeries {
// id: xySeries
// name: "my_Serie"
// axisX: axisX
// axisY: axisY
// useOpenGL: true
// XYPoint { x: 0.0; y: 0.0 }
// XYPoint { x: 1.1; y: 2.1 }
// XYPoint { x: 1.9; y: 3.3 }
// XYPoint { x: 2.1; y: 2.1 }
// XYPoint { x: 2.9; y: 4.9 }
// XYPoint { x: 3.4; y: 3.0 }
// XYPoint { x: 4.1; y: 3.3 }
// }
Component.onCompleted: {
xySeries = line.createSeries(ChartView.SeriesTypeLine, "my_plot", axisX, axisY);
xySeries.useOpenGL = true
backend.exposeserie(xySeries) // expose the serie to Python (QML to Python)
}
}
}
}
}
MenuBar {
id: infoBar
x: 0
y: 440
width: Window.width
height: 30
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
}
Connections {
target: backend
function onSetval(serie) { // "serie" is calculated in python (Python to QML)
xySeries = serie; // progressbar.value = val
// console.log(serie);
}
}
}
Best Regards.
Olivier.
I'm kinda new to PySide2 and QML and I really need a way to replace all the points in an XYSeries at once. Since the QML item does not have a function that does so, I thought I had to create a custom class (that would inherits from QtCharts.QXYSeries), implement the function I need and then register the new type with PySide2.QtQml.qmlRegisterType, but I don't know how that should be done and I haven't been able to find an answer online (or at least one that I could understand).
So, to cut a long story short, what I need to know is if there's a way to change all the points of an XYSeries and how can it be done (e.g. creating a custom class and registering it, accessing the Item declarend in the .qml file from python and chaning its properties, etc...).
I know my question is really vague but I do not know where to look and what to do...
EDIT
I have a python class that acquires data from an instruments and generates an array of X and Y points. Since this arrays are made from at least 1000 points and since I need to have a refresh rate of at least 1Hz, it's impossible to do it adding one point at a time (I have an signal that sends the whole array to the qml interface and there, for the moment, I simply clear the series and add one XY couple at a time. It works but it's too damn slow).
One possible solution is to create a class that allows access to a QML object from Python, in this case I create the helper class that I export to QML through setContextProperty by linking the series with a qproperty.
main.py
import random
from PySide2 import QtCore, QtWidgets, QtQml
from PySide2.QtCharts import QtCharts
class Helper(QtCore.QObject):
serieChanged = QtCore.Signal()
def __init__(self, parent=None):
super(Helper, self).__init__(parent)
self._serie = None
def serie(self):
return self._serie
def setSerie(self, serie):
if self._serie == serie:
return
self._serie = serie
self.serieChanged.emit()
serie = QtCore.Property(QtCharts.QXYSeries, fget=serie, fset=setSerie, notify=serieChanged)
#QtCore.Slot(list)
def replace_points(self, points):
if self._serie is not None:
self._serie.replace(points)
class Provider(QtCore.QObject):
pointsChanged = QtCore.Signal(list)
def __init__(self, parent=None):
super(Provider, self).__init__(parent)
timer = QtCore.QTimer(
self,
interval=100,
timeout=self.generate_points
)
timer.start()
#QtCore.Slot()
def generate_points(self):
points = []
for i in range(101):
point = QtCore.QPointF(i, random.uniform(-10, 10))
points.append(point)
self.pointsChanged.emit(points)
if __name__ == '__main__':
import os
import sys
app = QtWidgets.QApplication(sys.argv)
helper = Helper()
provider = Provider()
provider.pointsChanged.connect(helper.replace_points)
engine = QtQml.QQmlApplicationEngine()
engine.rootContext().setContextProperty("helper", helper)
file = os.path.join(os.path.dirname(os.path.realpath(__file__)), "main.qml")
engine.load(QtCore.QUrl.fromLocalFile(file))
if not engine.rootObjects():
sys.exit(-1)
sys.exit(app.exec_())
main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
import QtCharts 2.3
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ChartView{
anchors.fill: parent
LineSeries{
id: serie
axisX: axisX
axisY: axisY
}
ValueAxis {
id: axisX
min: 0
max: 100
}
ValueAxis {
id: axisY
min: -10
max: 10
}
Component.onCompleted: helper.serie = serie
}
}
i have created a "Spectrum Analyser" Python project that is fully working, i hope it may be useful for some of you.
(In the real-life the "createserie" function may contain SCPI commands that would read actual data from any Spectrum Analyser, Oscilloscopes...)
This example demonstrates how to use QtQuick/QML, QtCharts and QThread together.
After clicking the "START" button the Qthread starts and enters a infinite loop (the loop can be terminated by clicking the "STOP" button).
In each loop some "dummy" random data (basically a "QXYSeries" of 1000 points) are generated and the plot is updated (it's actually very fast).
I am using a QThread so that the GUI remains anytime responsive.
I want to share this example because it took me a lot of time to write it and it was not that easy to find some good QML information online.
Main.py:
import sys
import os
# import time
import random
from PySide2.QtCore import Qt, QUrl, QThread, QPoint, QPointF, Slot, Signal, QObject, QProcess, Property, qInstallMessageHandler, QtInfoMsg, QtWarningMsg, QtCriticalMsg, QtFatalMsg
from PySide2.QtQuick import QQuickView
from PySide2.QtWidgets import QApplication, QMainWindow, QMessageBox
# from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine
from PySide2.QtCharts import QtCharts
# import pdb
print(chr(27) + "[2J")
def qt_message_handler(mode, context, message):
if mode == QtInfoMsg:
mode = 'Info'
elif mode == QtWarningMsg:
mode = 'Warning'
elif mode == QtCriticalMsg:
mode = 'critical'
elif mode == QtFatalMsg:
mode = 'fatal'
else:
mode = 'Debug'
print("%s: %s (%s:%d, %s)" % (mode, message, context.file, context.line, context.file))
class Worker1(QObject):
set_val = Signal(QtCharts.QXYSeries)
finished = Signal()
def __init__(self, serie, parent=None):
QObject.__init__(self, parent)
self._serie = serie
self._isRunning = True
def run(self):
measure(self)
def stop(self):
self._isRunning = False
def measure(self): # Called inside Thread1
while 1:
if self._isRunning == True:
createserie(self)
self.set_val.emit(self._serie)
# time.sleep(0.002)
else:
print("QUITING LOOP")
break
self.finished.emit()
return
def createserie(self):
points = []
for i in range(1001):
points.append(QPointF(i/1000, random.random()))
self._serie.replace(points)
class Backend(QObject):
setval = Signal(QtCharts.QXYSeries)
def __init__(self, parent=None):
QObject.__init__(self, parent)
self._serie = None
#Slot(QtCharts.QXYSeries) # expose QML serie to Python
def exposeserie(self, serie):
self._serie = serie
print(serie)
print("QML serie exposed to Python")
#Slot(str)
def startthread(self, text):
self.WorkerThread = QThread()
self.worker = Worker1(self._serie)
self.WorkerThread.started.connect(self.worker.run)
self.worker.finished.connect(self.end)
self.worker.set_val.connect(self.setval)
self.worker.moveToThread(self.WorkerThread) # Move the Worker object to the Thread object
self.WorkerThread.start()
#Slot(str)
def stopthread(self, text):
self.worker.stop()
print("CLOSING THREAD")
def end(self):
self.WorkerThread.quit()
self.WorkerThread.wait()
msgBox = QMessageBox()
msgBox.setText("THREAD CLOSED")
msgBox.exec()
class MainWindow(QObject):
def __init__(self, parent = None):
# Initialization of the superclass
super(MainWindow, self).__init__(parent)
qInstallMessageHandler(qt_message_handler)
self.backend = Backend()
# Expose the Python object to QML
self.engine = QQmlApplicationEngine()
self.context = self.engine.rootContext()
self.context.setContextProperty("backend", self.backend)
# Load the GUI
self.engine.load(os.path.join(os.path.dirname(__file__), "SpecPXA_QML.qml"))
if not self.engine.rootObjects():
sys.exit(-1)
self.win = self.engine.rootObjects()[0]
# Execute a function if "Start" button clicked
startbutton = self.win.findChild(QObject, "startbutton")
startbutton.startclicked.connect(self.startclicked)
# Execute a function if "Stop" button clicked
stopbutton = self.win.findChild(QObject, "stopbutton")
stopbutton.stopclicked.connect(self.stopclicked)
def startclicked(self):
print("START")
self.backend.startthread("test")
def stopclicked(self):
print("STOP")
self.backend.stopthread("test")
if __name__ == "__main__":
if not QApplication.instance():
app = QApplication(sys.argv)
else:
app = QApplication.instance()
app.setStyle('Fusion') # 'Breeze', 'Oxygen', 'QtCurve', 'Windows', 'Fusion'
w = MainWindow()
sys.exit(app.exec_())
and SpecPXA_QML.qml:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Dialogs 1.2
import QtCharts 2.3
ApplicationWindow {
width: 1200
height: 700
visible: true
title: qsTr("Hello World")
property var xySeries;
// MessageDialog {
// id: messageDialogQuit
// title: "Question:"
// icon: StandardIcon.Question
// text: "Quit program?"
// standardButtons: StandardButton.Yes |StandardButton.No
// // Component.onCompleted: visible = true
// onYes: {
// Qt.quit()
// close.accepted = true
// }
// onNo: {
// close.accepted = false
// }
// }
// onClosing: {
// close.accepted = true
// onTriggered: messageDialogQuit.open()
// }
MenuBar {
id: menuBar
width: Window.width
Menu {
title: qsTr("&File")
Action { text: qsTr("&New...") }
Action { text: qsTr("&Open...") }
Action { text: qsTr("&Save") }
Action { text: qsTr("Save &As...") }
MenuSeparator { }
Action { text: qsTr("&Quit") }
}
Menu {
title: qsTr("&Edit")
Action { text: qsTr("Cu&t") }
Action { text: qsTr("&Copy") }
Action { text: qsTr("&Paste") }
}
Menu {
title: qsTr("&Help")
Action { text: qsTr("&About") }
}
}
SplitView {
id: splitView
y: menuBar.height
width: Window.width
height: Window.height-(menuBar.height+infoBar.height)
orientation: Qt.Horizontal
Rectangle {
id: leftitem
height: Window.height
implicitWidth: 200
color: "red"
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.leftMargin: 0
anchors.bottomMargin: 0
anchors.topMargin: 0
Button {
//id: startbutton
signal startclicked
objectName: "startbutton"
y: 40
height: 40
text: qsTr("Start")
anchors.left: parent.left
anchors.right: parent.right
checkable: false
anchors.rightMargin: 30
anchors.leftMargin: 30
onClicked: startclicked("START")
//onClicked: backend.text = "Button was pressed"
}
Button {
//id: stopbutton
signal stopclicked
objectName: "stopbutton"
y: 100
height: 40
text: qsTr("Stop")
anchors.left: parent.left
anchors.right: parent.right
checked: false
checkable: false
anchors.rightMargin: 30
anchors.leftMargin: 30
onClicked: stopclicked("STOP")
}
}
Rectangle {
id: rightitem
height: Window.height
color: "green"
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.topMargin: 0
anchors.rightMargin: 0
anchors.bottomMargin: 0
Rectangle {
id: rectangle
color: "#ffffff"
anchors.fill: parent
anchors.rightMargin: 30
anchors.leftMargin: 30
anchors.bottomMargin: 30
anchors.topMargin: 30
ChartView {
id: line
anchors.fill: parent
ValueAxis {
id: axisX
min: 0
max: 1
}
ValueAxis {
id: axisY
min: 0
max: 1
}
// LineSeries {
// id: xySeries
// name: "my_Serie"
// axisX: axisX
// axisY: axisY
// useOpenGL: true
// XYPoint { x: 0.0; y: 0.0 }
// XYPoint { x: 1.1; y: 2.1 }
// XYPoint { x: 1.9; y: 3.3 }
// XYPoint { x: 2.1; y: 2.1 }
// XYPoint { x: 2.9; y: 4.9 }
// XYPoint { x: 3.4; y: 3.0 }
// XYPoint { x: 4.1; y: 3.3 }
// }
Component.onCompleted: {
xySeries = line.createSeries(ChartView.SeriesTypeLine, "my_plot", axisX, axisY);
xySeries.useOpenGL = true
backend.exposeserie(xySeries) // expose the serie to Python (QML to Python)
}
}
}
}
}
MenuBar {
id: infoBar
x: 0
y: 440
width: Window.width
height: 30
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
}
Connections {
target: backend
function onSetval(serie) { // "serie" is calculated in python (Python to QML)
xySeries = serie; // progressbar.value = val
// console.log(serie);
}
}
}
Best Regards.
Olivier.
I'm trying to access a FileDialog control from the python file that starts the QQmlApplication engine in order to retrieve the file path property. I have set up a signal in the .qml file, however I cannot access the file dialog by id in the python file to set up the slot. The findChild method in application.py returns None. Here is the code:
application.py
import sys
from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine, QQmlFileSelector
sys_argv = sys.argv
sys_argv += ['--style', 'material']
app = QGuiApplication(sys_argv)
window = QQmlApplicationEngine()
window.load("QML/main.qml")
fileDialog = window.findChild(QQmlFileSelector, "fileDialog")
print(fileDialog)
app.exec_()
Page1.qml
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Dialogs 1.2
Page {
width: 600
height: 400
header: Label {
text: qsTr("Prepare Data")
horizontalAlignment: Text.AlignHCenter
font.pixelSize: Qt.application.font.pixelSize * 2
padding: 10
}
Button {
text: qsTr("Load data")
anchors.centerIn: parent
onClicked: fileDialog.visible = true
padding: 10
}
signal folderSelected()
FileDialog {
id: fileDialog
selectFolder: true
title: qsTr("Select the data directory")
folder: shortcuts.home
onAccepted: {
parent.folderSelected()
}
}
}
main.qml
import QtQuick 2.0
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
ApplicationWindow{
visible: true
title: qsTr("Main window")
width: 1000
height: 800
Material.theme: Material.Light
Material.accent: Material.Orange
SwipeView {
id: swipeView
anchors.fill: parent
Page1 {
}
Page2 {
}
Page3 {
}
}
}
In an old answer explain in the section Pushing References to QML how to update some python object from QML, that methodology is the one recommended by Qt and it is the one that should be used now. With your current method you need to establish an objectname that can be problematic in many cases.
So the solution is to create a QObject that we export to QML and update the qproperty, this will emit a signal that we connect to a slot where we can do the logic that we want. On the other hand FileDialog returns a url, so the property must be a QUrl:
main.qml
import os
import sys
from PySide2 import QtCore, QtGui, QtQml
class FileManager(QtCore.QObject):
file_url_Changed = QtCore.Signal(QtCore.QUrl)
def __init__(self, parent=None):
super(FileManager, self).__init__(parent)
self._file_url = QtCore.QUrl()
def get_file_url(self):
return self._file_url
def set_file_url(self, file_url):
if self._file_url != file_url:
self._file_url = file_url
self.file_url_Changed.emit(self._file_url)
file_url = QtCore.Property(QtCore.QUrl, fget=get_file_url, fset=set_file_url, notify=file_url_Changed)
#QtCore.Slot(QtCore.QUrl)
def on_file_url_changed(file_url):
print(file_url.toLocalFile())
if __name__ == '__main__':
sys.argv += ['--style', 'material']
app = QtGui.QGuiApplication(sys.argv)
file_manager = FileManager()
file_manager.file_url_Changed.connect(on_file_url_changed)
engine = QtQml.QQmlApplicationEngine()
engine.rootContext().setContextProperty("file_manager", file_manager)
file = os.path.join(os.path.dirname(os.path.realpath(__file__)), "QML", "main.qml")
engine.load(QtCore.QUrl.fromLocalFile(file))
if not engine.rootObjects():
sys.exit(-1)
sys.exit(app.exec_())
Page1.qml
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Dialogs 1.2
Page {
width: 600
height: 400
header: Label {
text: qsTr("Prepare Data")
horizontalAlignment: Text.AlignHCenter
font.pixelSize: Qt.application.font.pixelSize * 2
padding: 10
}
Button {
text: qsTr("Load data")
anchors.centerIn: parent
onClicked: fileDialog.visible = true
padding: 10
}
FileDialog {
id: fileDialog
selectFolder: true
title: qsTr("Select the data directory")
folder: shortcuts.home
onAccepted: {
file_manager.file_url = fileDialog.fileUrl // <---
}
}
}