Photoshop Question posted in
The official user guide can be found here.

How to turn QLineEdit background into a Progress Bar – Photoshop

The code creates a single dialog with QLineEdit and a QPushButton.
When the button is clicked I would like the QLineEdit to turn into a progress bar that would show a progress of the process triggered with the push of the button. When the process is completed the QLineEdit should get back to its normal “LineEdit” look. How to achieve this?

enter image description here

Here is the Photoshop-ed idea:

enter image description here

A progress bar could be a thin line at the bottom of QLineEdit:
enter image description here

from PyQt4 import QtCore, QtGui
import time

class Dialog(QtGui.QDialog):
    def __init__(self, parent=None):
        QtGui.QDialog .__init__(self, parent)
        mainLayout = QtGui.QVBoxLayout()
        lineEdit = QtGui.QLineEdit('ITEM 001')
        mainLayout.addWidget(lineEdit)
        button = QtGui.QPushButton('Push Button')
        button.clicked.connect(self.buttonClicked)
        mainLayout.addWidget(button)
        self.setLayout(mainLayout)

    def buttonClicked(self):
        print 'button clicked'
        for i in range(3):
            time.sleep(1)
            print '...processing %s'%i

if __name__ == '__main__':
    app = QtGui.QApplication([])
    window = Dialog()
    window.resize(300, 50)
    window.show()
    app.exec_()
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In PyQt4 the QLinearGradient gets a horizontal orientation. While PySide it seems handles it like it is a vertical gradient. The code creates a QLineEdit with its background color set via palette.setBrush(QPalette.Base, QBrush(QLinearGradient)). Button push raises the progress bar value by 10%.

    enter image description here

    from PyQt4 import QtCore, QtGui
import time


class Dialog(QtGui.QDialog):
    value = 0.001
    def __init__(self, parent=None):
        QtGui.QDialog .__init__(self, parent)
        mainLayout = QtGui.QVBoxLayout()

        self.lineedit = QtGui.QLineEdit()
        self.setValues()
        mainLayout.addWidget(self.lineedit)
        button = QtGui.QPushButton('Calculate')
        button.clicked.connect(self.buttonClicked)
        mainLayout.addWidget(button)
        self.setLayout(mainLayout)

    def setValues(self):
        self.lineedit.setText('progress %s'%self.value)
        palette = self.lineedit.palette()
        QRectF = QtCore.QRectF(self.lineedit.rect())
        gradient = QtGui.QLinearGradient(QRectF.topLeft(), QRectF.topRight())
        gradient.setColorAt(self.value-0.001, QtGui.QColor('#f99e41'))
        gradient.setColorAt(self.value, QtGui.QColor('#ffffff'))
        gradient.setColorAt(self.value+0.001, QtGui.QColor('#ffffff'))
        palette.setBrush(QtGui.QPalette.Base, QtGui.QBrush(gradient))
        self.lineedit.setPalette(palette)

    def buttonClicked(self):
        if self.value >0.9:
            self.value = 0.001
        else:
            self.value=self.value+0.1

        self.setValues()
        time.sleep(1)

if __name__ == '__main__':
    app = QtGui.QApplication([])
    window = Dialog()
    window.resize(300, 50)
    window.show()
    app.exec_()

    For PySide where the gradient might be horizontal:

    import PySide.QtCore as QtCore
import PySide.QtGui as QtGui

class Dialog(QtGui.QDialog):
    value = 1.00
    def __init__(self, parent=None):
        QtGui.QDialog .__init__(self, parent)
        mainLayout = QtGui.QVBoxLayout()

        self.lineedit = QtGui.QLineEdit()
        self.setValues()
        mainLayout.addWidget(self.lineedit)
        button = QtGui.QPushButton('Calculate')
        button.clicked.connect(self.buttonClicked)
        mainLayout.addWidget(button)
        self.setLayout(mainLayout)

    def setValues(self):
        self.lineedit.setText('progress %s'%self.value)
        palette = self.lineedit.palette()
        QRectF = QtCore.QRectF(self.lineedit.rect())
        gradient = QtGui.QLinearGradient(QRectF.topLeft(), QRectF.topRight())
        gradient.setColorAt(self.value-0.001, QtGui.QColor('#ffffff'))
        gradient.setColorAt(self.value, QtGui.QColor('#f99e41'))
        gradient.setColorAt(self.value+0.001, QtGui.QColor('#f99e41'))
        palette.setBrush(QtGui.QPalette.Base, QtGui.QBrush(gradient))
        self.lineedit.setPalette(palette)

    def buttonClicked(self):
        if self.value <0.1:
            self.value = 1.00
        else:
            self.value=self.value-0.1

        self.setValues()


if __name__ == '__main__':
    app = QtGui.QApplication([])
    window = Dialog()
    window.resize(300, 50)
window.show()
app.exec_()

  2. 0 
    if progress < 99:
    percent = progress / 100
    self.lineedit.setStyleSheet('background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 #1bb77b, stop: ' + str(percent) + ' #1bb77b, stop: ' + str(percent+ 0.001) + ' rgba(0, 0, 0, 0), stop: 1 white)')

else:
    self.lineedit.setStyleSheet('background-color: white')
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search