Multiple Page on Python and QML - python

I’m beginner on programming in python and qml and I'm doing a project
My project need to have many UI forms I’m using qml to create these UI
Lets say we have Form A,B,C and when application load I need it to open Form A and form A contain button which I click and open Form B and Form A close, Form B it have button which I click it open form C and that form B close… Plis help me on these project
main.py
import sys
from PyQt5.QtCore import QObject, QUrl, Qt
from PyQt5.QtWidgets import QApplication
from PyQt5.QtQml import QQmlApplicationEngine
if __name__ == "__main__":
app = QApplication(sys.argv)
engine = QQmlApplicationEngine()
ctx = engine.rootContext()
ctx.setContextProperty("main", engine)
ctx2 = engine.rootContext()
ctx2.setContextProperty("main", engine)
engine.load('form1.qml')
win = engine.rootObjects()[0]
def pageC():
engine.load('form3.qml')
win2 = engine.rootObjects()[0]
button1 = win2.findChild(QObject, "form3")
button1.clicked.connect(pageC)
win2.show()
def newPage():
engine.load('form2.qml')
win = engine.rootObjects()[0]
win.show()
button1=win.findChild(QObject, "form2")
button1.clicked.connect(newPage)
win.show()
sys.exit(app.exec_())
form1.qml
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.5
Window {
visible: true
width: 200
height: 200
title: qsTr("Hello World")
maximumHeight: 200
minimumHeight: 200
maximumWidth: 200
minimumWidth: 200
Button {
id: button1
objectName: "form2"
x: 22
y: 71
width: 157
height: 59
text: qsTr("Page a")
onClicked: callPageB()
}
}
form2.qml
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.5
Window {
visible: true
width: 200
height: 200
title: qsTr("Hello World")
maximumHeight: 200
minimumHeight: 200
maximumWidth: 200
minimumWidth: 200
Button {
id: button1
objectName: "form3"
x: 22
y: 71
width: 157
height: 59
text: qsTr("Page B")
onClicked: callPageC()
}
}
form3.qml
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.5
Window {
visible: true
width: 200
height: 200
title: qsTr("Hello World")
maximumHeight: 200
minimumHeight: 200
maximumWidth: 200
minimumWidth: 200
Button {
id: button1
x: 22
y: 71
width: 157
height: 59
text: qsTr("Page C")
}
}

When adding qmls to QQmlApplicationEngine we can get through rootObjects(), so to do this I simply created the following class, but there are certain restrictions, each button inside the Window should have the objectName as the name of the file and must Be the children of Window:
example.qml:
Window {
...
Button {
objectName: "example"
}
...
}
In the next part this class with the name of your qmls.
class Engine(QQmlApplicationEngine):
counter = 0
def __init__(self, qmls, parent=None):
QQmlApplicationEngine.__init__(self, parent)
[self.load("{}.qml".format(qml)) for qml in qmls]
for i, root in enumerate(self.rootObjects()):
if root != self.rootObjects()[0]:
root.close()
if root != self.rootObjects()[-1]:
button= root.findChild(QObject, qmls[i])
button.clicked.connect(self.closeAndOpen)
def closeAndOpen(self):
self.rootObjects()[self.counter].close()
self.counter += 1
self.rootObjects()[self.counter].show()
if __name__ == "__main__":
app = QApplication(sys.argv)
engine = Engine(['form1', 'form2', 'form3'])
sys.exit(app.exec_())

Related

Address text element on .qml

I would like to change a text in my gui. I can address the ListView element for which I have found a solution.
I would also like to address the text element arbitrarily and, for example, replace the text.
Also, I can't manage to address another ListView element with different content.
Here is my little program. Please excuse my English too
main.py
import sys
import vensoft_main
from time import sleep
import urllib.request
from pathlib import Path
from PySide6 import QtCore, QtWidgets, QtGui
from PySide6.QtQuick import QQuickView
from PySide6.QtCore import QStringListModel, QUrl
from PySide6.QtGui import QGuiApplication
from PySide6.QtWidgets import QApplication
import json
import sys
from typing import Text
import urllib.request
import json
import pandas as pd
import random
if __name__ == '__main__':
# get our data
url = "file:///Users/joerg/Documents/python/Rohertrag/rohertrag_fenster/output_heute.json"
response = urllib.request.urlopen(url)
data = json.loads(response.read().decode('utf-8'))
# Format and sort the data
data_list = list(data.values())
# Set up the application window
app = QGuiApplication(sys.argv)
view = QQuickView()
view.setResizeMode(QQuickView.SizeRootObjectToView)
view.update()
# Expose the list to the Qml code
my_model = QStringListModel()
my_model.setStringList(data_list)
view.setInitialProperties({"myModel": my_model})
# Load the QML file
qml_file = Path(__file__).parent / "view.qml"
view.setSource(QUrl.fromLocalFile(qml_file.resolve()))
# Show the window
if view.status() == QQuickView.Error:
sys.exit(-1)
view.show()
view.update()
# execute and cleanup
app.exec()
del view
new.qml
import QtQuick
import QtQuick.Controls
Page {
width: 640
height: 480
Rectangle {
id: root
anchors.fill: parent
ListView {
id: view_1
anchors.fill: parent
anchors.margins: 25
anchors.bottomMargin: 230
anchors.rightMargin: 375
model: manager.model
delegate: Text {
anchors.leftMargin: 50
font.pointSize: 15
horizontalAlignment: Text.AlignHCenter
text: display
}
}
Text {
id: text1
x: 486
y: 46
width: 127
height: 118
text: manager.text
font.pixelSize: 12
}
ListView {
id: view_2
anchors.fill: parent
anchors.margins: 25
anchors.leftMargin: 25
anchors.topMargin: 238
anchors.rightMargin: 375
delegate: Text {
text: display
horizontalAlignment: Text.AlignHCenter
anchors.leftMargin: 50
font.pointSize: 15
}
anchors.bottomMargin: 17
model: manager.model
}
Text {
id: text2
x: 479
y: 272
width: 127
height: 118
text: manager.text
font.pixelSize: 12
}
}
header: Label {
color: "#15af15"
text: qsTr("Wie ist den der Umsatz Heute?")
font.pointSize: 17
font.bold: true
font.family: "Arial"
renderType: Text.NativeRendering
horizontalAlignment: Text.AlignHCenter
padding: 10
}
}
Less is more, you don't need to place unnecessary imports, also you don't need data from external resources, a simple list is enough.
If you want to manipulate the QML view from python then it is better to create a QObject that has data as properties and export it to QML.
import sys
from pathlib import Path
from PySide6.QtCore import (
Property,
QDateTime,
QObject,
QStringListModel,
QTimer,
QUrl,
Signal,
)
from PySide6.QtQuick import QQuickView
from PySide6.QtGui import QGuiApplication
class Manager(QObject):
text_changed = Signal(name="textChanged")
def __init__(self, parent=None):
super().__init__(parent)
self._model = QStringListModel()
self._text = ""
#Property(QObject, constant=True)
def model(self):
return self._model
#Property(str, notify=text_changed)
def text(self):
return self._text
#text.setter
def text(self, text):
if self.text == text:
return
self._text = text
self.text_changed.emit()
def main():
# get our data
data_list = ["foo", "bar", "baz"]
manager = Manager()
# Set up the application window
app = QGuiApplication(sys.argv)
view = QQuickView()
view.rootContext().setContextProperty("manager", manager)
view.setResizeMode(QQuickView.SizeRootObjectToView)
manager.model.setStringList(data_list)
manager.text = "text"
qml_file = Path(__file__).parent / "view.qml"
view.setSource(QUrl.fromLocalFile(qml_file.resolve()))
if view.status() == QQuickView.Error:
sys.exit(-1)
view.show()
def handle_timeout():
text = QDateTime.currentDateTime().toString()
manager.text = text
timer = QTimer(interval=1000, timeout=handle_timeout)
timer.start()
app.exec()
del view
if __name__ == "__main__":
main()
import QtQuick
import QtQuick.Controls
Page {
width: 640
height: 480
Rectangle {
id: root
anchors.fill: parent
ListView {
id: view_1
anchors.fill: parent
anchors.margins: 25
anchors.rightMargin: 375
model: manager.model
delegate: Text {
anchors.leftMargin: 50
font.pointSize: 15
horizontalAlignment: Text.AlignHCenter
text: display
}
}
Text {
id: text1
x: 486
y: 46
width: 127
height: 201
text: manager.text
font.pixelSize: 12
}
}
header: Label {
color: "#15af15"
text: qsTr("Wie ist den der Umsatz Heute?")
font.pointSize: 17
font.bold: true
font.family: "Arial"
renderType: Text.NativeRendering
horizontalAlignment: Text.AlignHCenter
padding: 10
}
}

Send signal from Python to Compononent.onCompleted

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
}
}

QtQuick Controls 2 Style: Material.background and Universal.background NOT working

I want to change background of Universal style, so buttons color would match the other stuff, but background property does not working:/ Other properties (accent, foreground, and theme) work as it should. Also on the default style I can change colors of my buttons using palette.button: "#color", but I want to use Universal style on which palette.button: "#color" also does not working
My code:
main.qml:
import QtQuick 2.13
import QtQuick.Window 2.13
import QtQuick.Controls.Universal 2.0
import QtQuick.Controls 2.13
Window {
width: 640
height: 480
visible: true
color: "#786969"
title: qsTr("Hello World")
Universal.accent: "Black" //ok
Universal.background: "Blue" //NOT OK
Universal.foreground: "Yellow" //ok
Universal.theme: Universal.Dark //ok
Button {
id: button
x: 270
y: 138
text: qsTr("Button")
}
CheckBox {
id: checkBox
x: 272
y: 200
text: qsTr("Check Box")
}
Slider {
id: slider
x: 220
y: 264
value: 0.5
}
Switch {
id: switch1
x: 267
y: 334
text: qsTr("Switch")
}
}
main.py:
import sys
import os
from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine
from PySide2.QtQuickControls2 import QQuickStyle
if __name__ == "__main__":
app = QGuiApplication(sys.argv)
QQuickStyle.setStyle("Universal")
engine = QQmlApplicationEngine()
engine.load(os.path.join(os.path.dirname(__file__), "main.qml"))
if not engine.rootObjects():
sys.exit(-1)
sys.exit(app.exec_())
Printscreen:

QML slider value using pyqt

I am trying to make QML form for controlling a Servo. So I made a QML form using the QT creator and loaded it using PYQT. From the QML form, I am trying to read a slider value to control the servo. Every time I try to move the slider it says:
AttributeError: 'NoneType' object has no attribute 'value' Aborted
(core dumped)
Here is my pyqt code:
import os
import sys
from PyQt5 import QtCore, QtGui, QtQml
dir_path = os.path.dirname(os.path.realpath(__file__))
class MainWindow(QtQml.QQmlApplicationEngine):
def __init__(self):
super(QtQml.QQmlApplicationEngine, self).__init__()
self.load(QtCore.QUrl.fromLocalFile(os.path.join(dir_path, "QML-1.0.qml")))
self.rootContext().setContextProperty("MainWindow", self)
self.timer = QtCore.QTimer(self)
self.timer.timeout.connect(self.run)
self.timer.start(10)
if self.rootObjects():
# Inherit items from the GUI
self.window = self.rootObjects()[0]
self.text = self.window.findChild(QtCore.QObject, "textField")
self.slider = self.window.findChild(QtCore.QObject, "slider")
def run(self):
print (type(self.slider))
pass
#QtCore.pyqtProperty(int)
def rangeValue(self):
x = self.slider.value()
print x
return 10
if __name__ == '__main__':
app = QtGui.QGuiApplication(sys.argv)
window = MainWindow()
sys.exit(app.exec_())
And here is my qml code:
import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 2.0
import QtQuick.Controls.Universal 2.0
import QtGraphicalEffects 1.0
ApplicationWindow {
id: root
width: 900
height: 300
opacity: 1
title: "window"
visible: true
//visibility: Window.FullScreen
visibility: Window.Maximized
Dial {
id: dial
x: 77
y: 60
width: 102
height: 103
wheelEnabled: true
}
Slider {
id: slider
x: 28
y: 220
value: 0.5
onValueChanged: MainWindow.rangeValue(value)
}
Label {
id: label
x: 64
y: 16
width: 128
height: 24
text: qsTr("Servo-1")
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
Any help would be appreciated.
Thanks
It seems that you are trying to access a QML element from python which is considered a bad practice so I will not explain where the cause of the error is but I will propose a more stable and recommended solution: Create a QObject, export it to QML and update those properties from QML towards python.
import os
import sys
from PyQt5 import QtCore, QtGui, QtQml
DIR_PATH = os.path.dirname(os.path.realpath(__file__))
class ServoController(QtCore.QObject):
valueChanged = QtCore.pyqtSignal()
def __init__(self, parent=None):
super(ServoController, self).__init__(parent)
self._value = 0
self.valueChanged.connect(self.process_value)
#QtCore.pyqtProperty(float, notify=valueChanged)
def value(self):
return self._value
#value.setter
def value(self, v):
self._value = v
self.valueChanged.emit()
def process_value(self):
print(self.value)
def main():
app = QtGui.QGuiApplication(sys.argv)
engine = QtQml.QQmlApplicationEngine()
servo_controller = ServoController()
engine.rootContext().setContextProperty("servo_controller", servo_controller)
url = QtCore.QUrl.fromLocalFile(os.path.join(DIR_PATH, "QML-1.0.qml"))
engine.load(url)
def on_object_created(obj, objUrl):
if obj is None and url == objUrl:
QtCore.QCoreApplication.exit(-1)
engine.objectCreated.connect(on_object_created, QtCore.Qt.QueuedConnection)
sys.exit(app.exec_())
if __name__ == "__main__":
main()
import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 2.0
import QtQuick.Controls.Universal 2.0
import QtGraphicalEffects 1.0
ApplicationWindow {
id: root
width: 900
height: 300
opacity: 1
title: "window"
visible: true
//visibility: Window.FullScreen
visibility: Window.Maximized
Dial {
id: dial
x: 77
y: 60
width: 102
height: 103
wheelEnabled: true
}
Slider {
id: slider
x: 28
y: 220
value: 0.5
onValueChanged: servo_controller.value = value
Component.onCompleted: servo_controller.value = value
}
Label {
id: label
x: 64
y: 16
width: 128
height: 24
text: qsTr("Servo-1")
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
In the previous code I created the ServoController class whose function is to map the properties of QML to python such as the value of the slider and call the function process_value when that value changes.
In QML I update the ServoController property when the value of the slider changes and at startup.

How to access QML\QtQuick controls from PySide?

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 // <---
}
}
}

Categories

Resources