Python Forum

Full Version: Modern looking GUI
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
(Jan-11-2019, 12:23 AM)Larz60+ Wrote: [ -> ]Qt is a fine GUI 'system' I do use it myself. My only concern is the commercial side of the product. I've been at this a very long time, and have seen, not free, (as nothing was free back in the late 60's and early 70's), but inexpensive products, eventually become upgrade or leave, with upgrade being price prohibitive for a small company. So I do use it, but not for anything that I intend to sell myself.

Python is now officially supported by the Qt company, they call it PySide2 or Qt for Python. It is released under LGPL so I think that would allow free commercial use.


(Jan-10-2019, 09:56 PM)Cuz Wrote: [ -> ]@Alfalfa
I checked out those apps and I think we're slowly getting there :D VLC for Win 10 is looking way better. Especially using CSS looks promising. Would you by any chance know any intelligible materials I could use to learn more on combining CSS with PyQt5?

@All
I feel like I didn't express what I want to achieve clearly enough. You can have GUI that looks like this:

[Image: maxresdefault.jpg]


You can definetly do something similar with PyQt. Here is an example I made for a draggable frameless window:
https://gitlab.com/snippets/1793843


Then with a simple layout and CSS:

#!/usr/bin/python3
import sys
from PyQt5 import QtCore, QtGui, QtWidgets


CSS = \
{
    'QWidget':
    {
        'background-color': '#333333',
    },
    'QLabel#label':
    {
        'color': '#888888',
        'background-color': '#444444',
        'font-weight': 'bold',
    },
    'QLabel#label:active':
    {
        'color': '#1d90cd',
    },
    'QPushButton#button':
    {
        'color': '#888888',
        'background-color': '#444444',
        'font-weight': 'bold',
        'border': 'none',
        'padding': '5px',
    },
    'QPushButton#button:active':
    {
        'color': '#ffffff',
    },
    'QPushButton#button:hover':
    {
        'color': '#1d90cd',
    }
}

def dictToCSS(dictionnary):
    stylesheet = ""
    for item in dictionnary:
        stylesheet += item + "\n{\n"
        for attribute in dictionnary[item]:
            stylesheet += "  " + attribute + ": " + dictionnary[item][attribute] + ";\n"
        stylesheet += "}\n"
    return stylesheet


class Main(QtWidgets.QMainWindow):
    def __init__(self, parent):
        super().__init__()
        self.setWindowFlags(QtCore.Qt.FramelessWindowHint | QtCore.Qt.WindowStaysOnTopHint)
        self.setStyleSheet(dictToCSS(CSS))
        self.resize(200, 150)
        self.ui = QtWidgets.QWidget(self)
        self.setCentralWidget(self.ui)

        self.ui.button = QtWidgets.QPushButton("Close")
        self.ui.button.setObjectName("button")
        self.ui.button.clicked.connect(self.close)
        self.ui.button.setFocusPolicy(QtCore.Qt.NoFocus)

        self.ui.label = QtWidgets.QLabel("Hello World")
        self.ui.label.setObjectName("label")
        self.ui.label.setAlignment(QtCore.Qt.AlignCenter)

        self.ui.layout = QtWidgets.QVBoxLayout()
        self.ui.layout.setContentsMargins(50, 50, 50, 50)
        self.ui.layout.addWidget(self.ui.button)
        self.ui.layout.addWidget(self.ui.label)
        self.ui.setLayout(self.ui.layout)

        self.show()

    def mouseMoveEvent(self, event):
        # Enable mouse dragging
        if event.buttons() == QtCore.Qt.LeftButton:
            self.move(event.globalPos() - self.dragPosition)
            event.accept()

    def mousePressEvent(self, event):
        # Enable mouse dragging
        if event.button() == QtCore.Qt.LeftButton:
            self.dragPosition = event.globalPos() - self.frameGeometry().topLeft()
            event.accept()

    def keyPressEvent(self, event):
        # Escape key close the window
        if event.key() == QtCore.Qt.Key_Escape:
            self.close()
        QtWidgets.QMainWindow.keyPressEvent(self, event)

    def paintEvent(self, event):
        # Draw a one pixel border
        borderColor = QtGui.QColor("black")
        bgColor = QtGui.QColor(self.palette().color(QtGui.QPalette.Background))
        painter = QtGui.QPainter(self)
        painter.setPen(QtCore.Qt.NoPen)
        painter.setBrush(QtGui.QBrush(borderColor))
        painter.drawRect(0, 0, self.width(), self.height())
        painter.setBrush(QtGui.QBrush(bgColor))
        painter.drawRect(1, 1, self.width()-2, self.height()-2)


if __name__== '__main__':
    app = QtWidgets.QApplication([])
    gui = Main(app)
    sys.exit(app.exec_())
You may also use image or border-image to customize buttons and labels:
Quote: image: url('img1.svg');
border-image: url('img2.svg');
(Jan-10-2019, 09:56 PM)Cuz Wrote: [ -> ][Image: maxresdefault.jpg]
or like this:

For this style of UI take a look at PySciter
Quote:Alfalfa wrote:
Python is now officially supported by the Qt company, they call it PySide2 or Qt for Python
Yes, I was aware of that, but it doesn't eliminate my cautiousness. Once burnt, you have a greater respect for fire.
This looks quite modern :) https://github.com/gmarull/qtmodern
@Larz60+
That looks better, but I think I'll stick with Qt for now.

@metulburr
And I think now what you've said really wraps it up pretty accurately. Those are just details, that can be changed if you're persistent enough. I'll try to think like that more often :)

@Alfalfa
Big kudos for the code, I'll try to learn from it :)

@Weave
I stumbled upon it few days ago, but I'm concerned I couldn't find too much good info on how to use it, and I'm just a newbie who wouldn't be able to just dive in it and understand right away.

@Standard_user
Looks way better. Thanks for that!

@All - I'm gonna repeat myself, but once again I'm heppy seeing how helpful is the python community (no one called me stupid so far :D). I will just start from scratch and approach it similarly to how artists start with the painting. Make a sketch and then replace one element after another until you're satisfied.
Pages: 1 2