chevron_left chevron_right
Login Register invert_colors photo_library


Stay updated and chat with others! - Join the Discord!
Thread Rating:
  • 0 Vote(s) - 0 Average


Simple PyQt5 GUI example with QSS Styling filter_list
Author
Message
Simple PyQt5 GUI example with QSS Styling #1
Hello All,

I started reading about PyQt I decide to try the framework. Till now I had only worked with Java Swing. But after trying I seriously think that I might forget using Java Swing. I loved using PyQt5 since it is very easy and quite powerful, fast, and flexible. It does have more GUI features than Java (I don't know but with my experience in Java, I find Qt to be more mature.)

Since I have moved to Python 3.4 and hence decided to use the latest version and that is PyQt5 instead of PyQt4.

Today I will give you a little snippet that I wrote just as a part of learning the framework. I can't tell much about the efficiency of my code since I have very less experience with Python and Qt. So, if someone more experienced will comment or criticize my code then I am always open and would be very happy as well.

To develop this little GUI I used GridLayout and so the GUI and its widgets are adjustable with the base window. I used QSS to design the gui with colors.

QSS : Its a variant of CSS with most of the properties intersecting with CSS styles and specially designed to work and design the Qt guis and widgets. But instead of HTML tags we use the Widgets class name for styling them, like :- QWidget, QLineEdit, QLabel, QPushButton etc. etc.

QSS is a feature which I loved the most since everything else was pretty much the same with Java Swings.

ScreenShot :

[Image: H7uLJPu.png]


QSS File Code :-


Code:
QWidget {
    background-color: #222222;
}

QLineEdit {
    background-color: aliceblue;
    color: #618b38;
    font-style: italic;
    font-weight: bold;
}

QLabel {
    background-color: #222222;
    color: #618b38;
}

QPushButton {
    background-color: #8b0000;
    color: #ffffff;
    border-radius: 5px;
    border-style: none;
    height: 25px;
}




Code For GUI (Open the Spoiler)


Spoiler:

Code:
from PyQt5 import QtCore, QtWidgets

__author__ = "Psycho_Coder"


# noinspection PyUnresolvedReferences
class MainUiWindow(object):

    def __init__(self):

        #Main Window
        self.centralwidget = QtWidgets.QWidget(MainWindow)

        """
        Using Grid Layouts for Widgets Alignment
        """
        #Grid Layout for Main Grid Layout
        self.maingrid_layout = QtWidgets.QGridLayout(self.centralwidget)

        #Grid Layout for Result Section Layout
        self.resultgird = QtWidgets.QGridLayout()

        #Grid Layout for Information section
        self.infogrid = QtWidgets.QGridLayout()

        #Grid Layout for holding all the widgets in place
        self.outergrid = QtWidgets.QGridLayout()

        #Button to clear all test input
        self.clearall = QtWidgets.QPushButton(self.centralwidget)

        #Button to show the final result by append
        self.showres = QtWidgets.QPushButton(self.centralwidget)

        #Horizontal layout to hold the result section horizontally
        self.horizontal_layout = QtWidgets.QHBoxLayout()

        """
        Show results widgets
        """
        self.fullname = QtWidgets.QLabel(self.centralwidget)
        self.result = QtWidgets.QLabel(self.centralwidget)

        """
        Get Names info section
        """
        self.firstname = QtWidgets.QLabel(self.centralwidget)
        self.lastname = QtWidgets.QLabel(self.centralwidget)

        #TextBox to get user input
        self.fname = QtWidgets.QLineEdit(self.centralwidget)
        self.lname = QtWidgets.QLineEdit(self.centralwidget)

    def init_gui(self, MainWindow):

        MainWindow.setObjectName("MainWindow")

        MainWindow.setStyleSheet(open("style.qss", "r").read())
        MainWindow.setAutoFillBackground(True)
        MainWindow.resize(328, 166)

        self.centralwidget.setObjectName("centralwidget")

        self.maingrid_layout.setObjectName("maingrid_layout")
        self.outergrid.setObjectName("outergrid")
        self.infogrid.setObjectName("infogrid")

        self.firstname.setObjectName("firstname")
        self.infogrid.addWidget(self.firstname, 0, 0, 1, 1)

        self.fname.setObjectName("fname")
        self.infogrid.addWidget(self.fname, 0, 1, 1, 1)

        self.lastname.setObjectName("lastname")
        self.infogrid.addWidget(self.lastname, 1, 0, 1, 1)

        self.lname.setObjectName("lname")
        self.infogrid.addWidget(self.lname, 1, 1, 1, 1)

        self.outergrid.addLayout(self.infogrid, 0, 0, 1, 1)

        self.fullname.setObjectName("fullname")

        self.result.setMaximumSize(QtCore.QSize(140, 16777215))
        self.result.setObjectName("result")

        self.resultgird.setObjectName("resultgird")
        self.resultgird.addWidget(self.fullname, 0, 0, 1, 1)
        self.resultgird.addWidget(self.result, 0, 1, 1, 1)

        self.outergrid.addLayout(self.resultgird, 1, 0, 1, 1)

        self.showres.setObjectName("showres")
        self.clearall.setObjectName("clearall")

        self.horizontal_layout.setObjectName("horizontal_layout")
        self.horizontal_layout.addWidget(self.showres)
        self.horizontal_layout.addWidget(self.clearall)

        self.outergrid.addLayout(self.horizontal_layout, 2, 0, 1, 1)
        self.maingrid_layout.addLayout(self.outergrid, 0, 0, 1, 1)

        MainWindow.setCentralWidget(self.centralwidget)

        self.retranslate_gui(MainWindow)

        #Add signals of clear to LineEdit widgets to clear the texts
        self.clearall.clicked.connect(self.result.clear)
        self.clearall.clicked.connect(self.lname.clear)
        self.clearall.clicked.connect(self.fname.clear)
        self.showres.clicked.connect(self.__name)

        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def __name(self):
        name = self.fname.text() + " " + self.lname.text()
        self.result.setText("<font color=\"#ffffff\"><b><u>" + name + "</u></b></font>")

    def retranslate_gui(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        
        MainWindow.setWindowTitle(_translate("MainWindow", "Name Concatenation"))
        self.lastname.setText(_translate("MainWindow", "Last Name :"))
        self.firstname.setText(_translate("MainWindow", "First Name :"))
        self.fullname.setText(_translate("MainWindow", "Concatenated Name :-"))
        self.result.setText(_translate("MainWindow", "<Name>"))
        self.showres.setText(_translate("MainWindow", "Show Name!"))
        self.clearall.setText(_translate("MainWindow", "Clear All"))

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    ui = MainUiWindow()
    ui.init_gui(MainWindow)

    MainWindow.show()
    sys.exit(app.exec_())



Since I am not a designer and so I can't design it more. There are many CSS experts so consult with them when making something by your own. I did as much as I could and to me it looked very pretty :epic:

I hope you like this short snippet (not short I guess :trollSmile and probably you learnt a bit by observation how to design GUIs and use layouts properly and how the hierarchy should be followed.


EDIT:

Source

http://blog-psychocoder.blogspot.in/2014...ample.html



Thank you,
Sincerely,
Psycho_Coder

[Image: OilyCostlyEwe.gif]

Reply

RE: Simple PyQt5 GUI example with QSS Styling #2
That is cool as tits....

But in all seriousness any good links to QSS docs?

Also, broken link http://www.hackcommunity.com/images/hcbl.../Troll.png
(This post was last modified: 08-18-2014, 08:44 PM by zimba.)
[Image: iQ3pcQu.png]
BTC Address: 1DCKgDaWcmc9dxBkhe9qrTQtrQpoFUzXdn

Reply

RE: Simple PyQt5 GUI example with QSS Styling #3
(08-18-2014, 08:43 PM)h3r0 Wrote: Also, broken link http://www.hackcommunity.com/images/hcbl.../Troll.png

It's working my end. Try clearing your cache etc.
If you need help feel free to PM me
[Image: klfpJD]
Probitcoin
Freebitcoin
BTC clicks
bitcoin wallet:
1FBPAanbs3rJU9BUpobpDJc9hHUaCaC25N

Reply

RE: Simple PyQt5 GUI example with QSS Styling #4
(08-18-2014, 09:24 PM)chmod Wrote:
(08-18-2014, 08:43 PM)h3r0 Wrote: Also, broken link http://www.hackcommunity.com/images/hcbl.../Troll.png

It's working my end. Try clearing your cache etc.

Yupp clearing cache worked, I probably should have checked that first.
[Image: iQ3pcQu.png]
BTC Address: 1DCKgDaWcmc9dxBkhe9qrTQtrQpoFUzXdn

Reply

RE: Simple PyQt5 GUI example with QSS Styling #5
Very helpful turorial, PyQt is a very powerful library probably the best to use with Python when its about more demanding applications.
Great job @Psycho_Coder
MASTERING OTHERS IS STRENGTH, MASTERING YOURSELF IS TRUE POWER.

[Image: qJweLN6.jpg]

Reply

RE: Simple PyQt5 GUI example with QSS Styling #6
(08-18-2014, 11:26 PM)L0aD1nG Wrote: Very helpful turorial, PyQt is a very powerful library probably the best to use with Python when its about more demanding applications.
Great job @Psycho_Coder

Thank you.

PyQt is a version of the Qt Framework to work with Python specifically. It was originally designed for working with C++. Its a platform independent GUI framework.

When used with C++ it gets very fast.
[Image: OilyCostlyEwe.gif]

Reply

RE: Simple PyQt5 GUI example with QSS Styling #7
(08-18-2014, 08:43 PM)h3r0 Wrote: That is cool as tits....

But in all seriousness any good links to QSS docs?

Also, broken link http://www.hackcommunity.com/images/hcbl.../Troll.png

I still love tits more and much more :epic:
[Image: OilyCostlyEwe.gif]

Reply

RE: Simple PyQt5 GUI example with QSS Styling #8
Man it was hard when I tried with C++ Tongue Looks fairly easy with python, Nice work mate!
My Blog: http://www.procurity.wordpress.com
Donations: 1HLjiSbnWMpeQU46eUVCrYdbkrtduX7snG

Reply

RE: Simple PyQt5 GUI example with QSS Styling #9
Man it was hard when I tried with C++ Tongue Looks fairly easy with python, Nice work mate!
My Blog: http://www.procurity.wordpress.com
Donations: 1HLjiSbnWMpeQU46eUVCrYdbkrtduX7snG

Reply

RE: Simple PyQt5 GUI example with QSS Styling #10
(08-19-2014, 03:10 AM)Psycho_Coder Wrote:
(08-18-2014, 11:26 PM)L0aD1nG Wrote: Very helpful turorial, PyQt is a very powerful library probably the best to use with Python when its about more demanding applications.
Great job @Psycho_Coder

Thank you.

PyQt is a version of the Qt Framework to work with Python specifically. It was originally designed for working with C++. Its a platform independent GUI framework.

When used with C++ it gets very fast.

I know I 've used it in Python too.Also made some tries on C++ with Qt Creator but noobish ones.C++ is in the most cases very fast dude.

EDIT : Also I didn't know about qss and how to combine them on PyQt... Do you know if I can do the same with PyQt4 man?
(This post was last modified: 08-19-2014, 10:54 AM by krozz.)
MASTERING OTHERS IS STRENGTH, MASTERING YOURSELF IS TRUE POWER.

[Image: qJweLN6.jpg]

Reply






Users browsing this thread: 1 Guest(s)