Akram Baklouti
Akram Baklouti

Reputation: 77

How to change the .qml extension to a .ui to use it in pyqt5 application

I create the design of my app with qt designer and then transform every window to a python file using the command pyuic5 example.ui -o example.py in able to get a Ui_Form class and call it in my program. So every thing is working but now we have changed our design and we get a qml files. My question is how to work with this qml files without changing the concepts of the app. Is there a method like the pyuic5 (to get the Ui_Form class) to transform the qml and use it in pyqt5.

This is an example of the old app:

from main_screen import Ui_Form as Ui_main_screen
class MainScreen(QWidget, Ui_main_screen):
    teachButton = False
    manageButton = False
    utilitiesButton = False
    adminButton = False
    helpButton = False
    systemButton = False
    inspectionButton = False
    modelSelected = None
    def __init__(self):
        super(MainScreen, self).__init__()
        #QWidget.__init__(self)
        self.setupUi(self)
        self.trans = QTranslator(self)

        self.toLanguage()
        self.product()
        self.Menu() .....

As you can see, I imported the Ui_Form into the MainScreen class. Now i want to do the same with the qml file

import QtQuick 2.7
Item {
    width:904
    height:678
    Image {
        id: background
        source: "images/background.png"
        x: 0
        y: 1
        opacity: 1
    }
    Image {
        id: logo
        source: "images/logo.png"
        x: 691
        y: 34
        opacity: 1
    }
    Image {
        id: teach
        source: "images/teach.png"
        x: 717
        y: 154
        opacity: 1
    }
    Image {
        id: administration
        source: "images/administration.png"
        x: 711
        y: 410
        opacity: 0.49803921568627
    }
    Image {
        id: system
        source: "images/system.png"
        x: 708
        y: 468
        opacity: 0.49803921568627
    }
    Image {
        id: utilities
        source: "images/utilities.png"
        x: 711
        y: 353
        opacity: 0.49803921568627
    }
    Image {
        id: help
        source: "images/help.png"
        x: 712
        y: 524
        opacity: 0.49803921568627
    }
    Image {
        id: teachinf_wizard
        source: "images/teachinf_wizard.png"
        x: 740
        y: 196
        opacity: 1
    }
    Image {
        id: inspection
        source: "images/inspection.png"
        x: 713
        y: 295
        opacity: 0.49803921568627
    }
    Image {
        id: manage
        source: "images/manage.png"
        x: 714
        y: 239
        opacity: 1
    }
}

So how to get something like Ui_Form class with qml file

Upvotes: 1

Views: 656

Answers (1)

eyllanesc
eyllanesc

Reputation: 244282

Short Answer:

No it can not be done.

Long Answer:

The .ui are just a set of instructions on how the qwidgets should be displayed, on the other hand, qml is a programming language since they indicate how the objects interact.

The closest thing to what you want is to be able to embed the qml into a QWidget, using for example QQuickWidget:

import os
import sys
import os
from pathlib import Path


from PyQt5.QtCore import QUrl
from PyQt5.QtWidgets import QApplication
from PyQt5.QtQuickWidgets import QQuickWidget


CURRENT_DIRECTORY = Path(__file__).resolve().parent


def main():

    app = QApplication(sys.argv)

    widget = QQuickWidget(resizeMode=QQuickWidget.ResizeMode.SizeRootObjectToView)
    filename = os.fspath(CURRENT_DIRECTORY / "main.qml")
    url = QUrl.fromLocalFile(filename)
    widget.setSource(url)
    widget.show()

    sys.exit(app.exec_())


if __name__ == "__main__":
    main()

Upvotes: 3

Related Questions