ඔබ තවමත් Widane Forums සාමාජිකයෙක් නෙවෙයි ද..?

Widane Forums හි සියළුම ලිපිවල ඇති සියළුම Links වෙත පිවිසීමට නම් ලියාපදිංචිවීම අනිවාර්යයි.
ඔබගේ සියලුම තාක්ෂණික ගැටළු සඳහා විසඳුම් සොගැනීමට වගේම දැනුම බෙදාගැනීම සඳහා මෙහි ඉඩකඩ වෙන්කර තිබෙනවා.
ඉතින් ඇයි තවත් බලාගෙන ඉන්නේ ඉක්මනින් ලියාපදිංචිවී ඔබගේ දැනුම වැඩිකරගන්න.

Register Here




[Tut] Python වලින් GUI එකක්???
#1
Shocked 
This is a citations from foreign source so copyright belongs to first author.

සින්හලට translate කරන්න කම්මෑලි එක නිසා English tutorial එක ගෙඩිය පිටින්ම දෑම්මා. පොඩි අවුලකට තියෙන්නෙ මෙ එක කරල තියෙන්නෙ Linux  Developers Cool ලට විතයි Windows Developers ලට දුක තමා ඉතින්  Tongue  (අසරන Windows usersල වෙනුවෙන් ව්නඩියක නිශ්ශඩතව්යක තියන්න).
 
Quote:This tutorial is aimed at beginners just starting out with PyQt/PySide and Qt Designer, it will cover very basic usage of PyQt in combination with Qt Designer.
The tutorial will guide you, step by step, towards creating a very simple app that lists all files in the selected directory.
Prerequisites
You need PyQt and Qt Designer installed, and of course python.
I'll be using PyQt4 with python 2.7.10 but there are no major differences between PyQt and PySide or python 3 versions of those, so if you already have PyQt5 or PySide installed there is no need to downgrade/switch.
If you don't have anything installed you can get PyQt for Windows here:
[Only registered and activated users can see links Click here to register]
It comes with Qt Designer bundled.
For OS X you can download the PyQt via [Only registered and activated users can see links Click here to register]:
Code:
$ brew install pyqt
And QtCreator (which contains Qt Designer) here: [Only registered and activated users can see links Click here to register]
On Linux the packages required are probably in your distro repositories, if you're on Ubuntu/Debian you can run:
Code:
$ apt-get install python-qt4 pyqt4-dev-tools qt4-designer
After you're done installing requirements on your operating system open terminal/command prompt and make sure you can run
Code:
pyuic4
command it should show:
Code:
$ pyuic4
Error: one input ui-file must be specified
If you get "command not found" or something along those lines try googling on how to solve it for your operating system and pyqt version.
If you're on windows you most likely don't have
Code:
C:\Python27\Scripts
(replace
Code:
27
with your python version) in your
Code:
PATH
.
To see how to solve that look at [Only registered and activated users can see links Click here to register]
Design
Basics
Now that we've got everything that we need installed let's first start with simple design.
Open up Qt Designer and you should see a new form dialog, pick a "Main Window" and click "Create"
[Image: designer_new_form.jpg]
After that you should get a new form that you can resize, drop objects from widget box on etc. Make yourself familiar with the interface, it's pretty simple.
Once we got that we'll resize our main window a bit, since we don't need it that large, and we'll also remove the automatically added menu and status bar since we don't plan on using them in this tutorial.
All the form elements that your design has, and their hierarchy, are listed (by default) on the right side of the Qt Designer window under "Object Inspector". You can easily remove objects by right clicking on them in that window or just by selecting them on your main form and pressing
Code:
DEL
key on your keyboard.
For now we'll just resize our form and delete menu and status bar.
[Image: Selection_008.jpg]
Once we do that we have an (almost) empty form. The only object still left is "centralwidget" but we need it so we won't change anything about it.
Now drag and drop from the "Widget Box" in Qt Designer a "List Widget" (not List View) widget and a "Push Button", drop them anywhere on the main form.
Layouts
Instead of using fixed positions and sizes of the elements in your application you should be using layouts. Fixed positions and sizes will look good on your end (at least until you resize the window) but you can never be sure that they'll look exactly the same on other machines and/or operating systems.
Layouts are basically containers for your widgets which will keep them in certain positions in relation to other elements, they'll also resize as the main window size changes. There are many features that you can set for both widgets and layouts but I won't go in depth a lot about them.
Let's design our form first without using layouts. Drag and resize the list and button on the main form so that they look something like this:
[Image: no_layout.jpg]
Now in Qt Designer menu click "View" then pick the "Preview" option, you should get the something like the screenshot above. It looks good right? But watch what happens when we increase our window size:
[Image: no_layout_resize.jpg]
Our objects stay in same positions and have same sizes even though the main form changed size, and even though the button is almost invisible. That's why you should use layouts more often than not when designing things. Of course in some instances you will want fixed width, or minimum/maximum width of an object. But generally speaking you should be using layouts in your application.
The main window already supports having layouts, so we don't need to add any new ones to our form. Simply right click on the "Main Window" in "Object Inspector" and pick "Layout">"Lay out vertically". You can also right click in the empty space on your main form and choose the same option like this:
[Image: change_layout.jpg]
Your elements should be in the same order they were when you changed the layout, but in case they aren't you can simply drag and drop them to the location you want.
Since we've used vertical layout all elements we add will be in vertical order. You can combine layouts to get the desired look you want. For example: Horizontal layout with 2 buttons in Vertical layout will look like this:
[Image: double_layout.jpg]
If you have trouble placing an element by dragging it in main form you can also drag and drop it in Object Inspector window.
Finishing Touches
Now that we've used vertical layout our elements are aligned properly. The only thing left to do is (optional, but recommended) change name of the elements and the text they display.
In simple app like this with only a list and a button element changing names isn't mandatory since it's easy to use anyway, but properly naming elements is something that you should get used to doing.
We can change most of the element properties that we'd normally change in the "Property Editor" part of the Qt Designer.
Hint: You can resize, remove, or add elements to the Qt Designer interface that you use often to improve your work-flow. You can add hidden/closed parts of the interface via "View" menu option. I personally only have Object Inspector and Property Editor on the right side of Qt Designer.
Click on the button you added to the form. Now in Property Editor you should see all properties associated with that element, at this time we're just interested in "objectName" and "text" in "QAbstractButton" section. You can minimize the sections in Property Editor by clicking the title of the section.
Change "objectName" to "btnBrowse" and "text" to "Pick a folder".
It should look like this:
[Image: button_properties.jpg]
Object name of the list is "listWidget" which is good enough for in this case.
Save the design as
Code:
design.ui
in your project folder which can be wherever you want.
Design to Python code
While it's possible to use
Code:
.ui
files directly from python code, I found the method of converting the
Code:
.ui
code to python file that we can import and use, easier.
To convert the file we use
Code:
pyuic4
command from terminal/command prompt that should have been installed when you've installed PyQt. If you get an error please Google on how to use the command
Code:
pyuic
on your operating system.
To convert the design file to python code saved as
Code:
design.py
, use
Code:
cd
command to change to the directory holding the
Code:
design.ui
file and simply run:
Code:
$ pyuic4 design.ui -o design.py
If you want to specify full path for either input or output file you can do that like this:
Code:
$ pyuic4 path/to/design.ui -o output/path/to/design.py
Writing the code
Now that we have the
Code:
design.py
file with the necessary design part of the application we can create our main application code and logic.
Create a file
Code:
main.py
in the same folder as your
Code:
design.py
file.
Using the design
For the application we'll need the following python modules imported:
Code:
from PyQt4 import QtGui
import sys
We also need the design code we created in the previous steps so add this too:
Code:
import design
Since the design file will be completely overwritten each time we change something in the design and recreate it we will not be writing any code in it, instead we'll create a new class e.g.
Code:
ExampleApp
that we'll combine with the design code so that we can use all of its features, like this:
Code:
class ExampleApp(QtGui.QMainWindow, design.Ui_MainWindow):
   def __init__(self, parent=None):
       super(ExampleApp, self).__init__(parent)
       self.setupUi(self)
In that class we'll interact with the GUI elements, add connections and everything else we need. But first we'll need to initialize that class on our code startup, we'll handle the class instance creation and other stuff in our
Code:
main()
function:
Code:
def main():
   app = QtGui.QApplication(sys.argv)
   form = ExampleApp()
   form.show()
   app.exec_()
And to execute that main function we'll use well known:
Code:
if __name__ == '__main__':
   main()
In the end our whole
Code:
main.py
file looks like this (with short explanations of the code):
Code:
from PyQt4 import QtGui # Import the PyQt4 module we'll need
import sys # We need sys so that we can pass argv to QApplication

import design # This file holds our MainWindow and all design related things
             # it also keeps events etc that we defined in Qt Designer

class ExampleApp(QtGui.QMainWindow, design.Ui_MainWindow):
   def __init__(self):
       # Explaining super is out of the scope of this article
       # So please google it if you're not familar with it
       # Simple reason why we use it here is that it allows us to
       # access variables, methods etc in the design.py file
       super(self.__class__, self).__init__()
       self.setupUi(self)  # This is defined in design.py file automatically
                           # It sets up layout and widgets that are defined


def main():
   app = QtGui.QApplication(sys.argv)  # A new instance of QApplication
   form = ExampleApp()                 # We set the form to be our ExampleApp (design)
   form.show()                         # Show the form
   app.exec_()                         # and execute the app


if __name__ == '__main__':              # if we're running file directly and not importing it
   main()                              # run the main function
Running that will bring up our app running completely from python code!
But clicking button isn't doing anything, so we need to implement those features ourselves.
Implementing functions
(All of the following code is written inside the
Code:
ExampleApp
class)
Let's start with the "Pick a folder" button.
To connect a button event, such as clicked, to a function we use the following code:
Code:
self.btnBrowse.clicked.connect(self.browse_folder)
And add it to the
Code:
__ini__
method of our
Code:
ExampleApp
class so that it's set up when the application starts.
Explanation of that line of code:
Code:
self.btnBrowse
- btnBrowse is the name of the object we defined in Qt Designer.
Code:
self
is self exaplanatory and means that it belongs to current class.
Code:
clicked
- the event we want to connect. Various elements have various events, for example list widgets have
Code:
itemSelectionChanged
etc.
Code:
connect()
- used to specify with what we want to connect it with. In our example:
Code:
self.browse_folder
- simply a function name that we'll write inside our
Code:
ExampleApp
class:
For getting the directory browser dialog we can use the built in
Code:
QtGui.QFileDialog.getExistingDirectory
method like this:
Code:
directory = QtGui.QFileDialog.getExistingDirectory(self,"Pick a folder")
If the user picks a directory the
Code:
directory
variable will be equal to absolute path of the selected directory, otherwise it's
Code:
None
. To avoid running our code any further if the user cancels the folder browse dialog we'll use
Code:
if directory:
statement.
To list the directory contents we'll need to add
Code:
os
to our imports:
Code:
import os
and to get current file list we can use
Code:
os.listdir(path)
.
For adding items to the listWidget we use
Code:
addItem()
method on it, and to clear all existing items simply use
Code:
self.listWidget.clear()
In the end our
Code:
browse_folder
function looks something like this:
Code:
def browse_folder(self):
   self.listWidget.clear()
   directory = QtGui.QFileDialog.getExistingDirectory(self,
                                                      "Pick a folder")

   if directory:
       for file_name in os.listdir(directory):
           self.listWidget.addItem(file_name)
Now you can run your app by typing
Code:
python main.py
and you should get the layout you desgined and picking the folder will populate list with folder items.
[Image: finished-app.jpg]
Finished main.py
Code:
from PyQt4 import QtGui  # Import the PyQt4 module we'll need
import sys  # We need sys so that we can pass argv to QApplication

import design  # This file holds our MainWindow and all design related things

# it also keeps events etc that we defined in Qt Designer
import os  # For listing directory methods


class ExampleApp(QtGui.QMainWindow, design.Ui_MainWindow):
   def __init__(self):
       # Explaining super is out of the scope of this article
       # So please google it if you're not familar with it
       # Simple reason why we use it here is that it allows us to
       # access variables, methods etc in the design.py file
       super(self.__class__, self).__init__()
       self.setupUi(self)  # This is defined in design.py file automatically
       # It sets up layout and widgets that are defined
       self.btnBrowse.clicked.connect(self.browse_folder)  # When the button is pressed
                                                           # Execute browse_folder function

   def browse_folder(self):
       self.listWidget.clear() # In case there are any existing elements in the list
       directory = QtGui.QFileDialog.getExistingDirectory(self,
                                                          "Pick a folder")
       # execute getExistingDirectory dialog and set the directory variable to be equal
       # to the user selected directory

       if directory: # if user didn't pick a directory don't continue
           for file_name in os.listdir(directory): # for all files, if any, in the directory
               self.listWidget.addItem(file_name)  # add file to the listWidget


def main():
   app = QtGui.QApplication(sys.argv)  # A new instance of QApplication
   form = ExampleApp()  # We set the form to be our ExampleApp (design)
   form.show()  # Show the form
   app.exec_()  # and execute the app


if __name__ == '__main__':  # if we're running file directly and not importing it
   main()  # run the main function
That's the basic logic of using Qt Designer and PyQt to design and develop a GUI application.
You can safely edit your design and re-run the
Code:
pyuic4
command without fear of your main code getting lost or overwritten.
Final notes
All the code in this example is done in the main UI thread, which is often a bad idea - especially if you have something that takes time to finish. For example if the
Code:
listdir
function took long time our UI would be frozen the whole time. In one of the future tutorials I'll cover PyQt threading, this one is focused on just the bare basics without too much unnecessary things. But please keep in mind that anything that doing stuff in main UI thread is generally a bad idea.
All the code and files used can be found in this gist: [Only registered and activated users can see links Click here to register]
Useful links:
Python Inheritance SO thread: [Only registered and activated users can see links Click here to register]
PyQt reference guide: [Only registered and activated users can see links Click here to register]
PyQt class reference: [Only registered and activated users can see links Click here to register]

Original Source - [Only registered and activated users can see links Click here to register]
#2
TFS Wink
|+| Knowledge |+| Discipline |+| Patience |+|

Area Master 
(Founder & Info. Sec. Analyst)

Widane Forums
Contact Me: [email protected]
Admin Queries: [email protected]
General Queries: [email protected] 
Reply
#3
(11-22-2018, 03:53 PM)Area Master Wrote: TFS Wink

ඔයා විතරයි අප්පා හිත හෑදෙන්න හරි මොනව හරි කියලා යන්නෙ. Undecided Undecided Undecided

මන් ඉතින් මෙක සින්හලෙන් ලිව්වත් ඔච්චරම තමා අප්පා..............
Reply
#4
(11-22-2018, 05:12 PM)xe-non Wrote: ඔයා විතරයි අප්පා හිත හෑදෙන්න හරි මොනව හරි කියලා යන්නෙ. Undecided Undecided Undecided

මන් ඉතින් මෙක සින්හලෙන් ලිව්වත් ඔච්චර තමා අප්පා..............

Lol he he Big Grin
|+| Knowledge |+| Discipline |+| Patience |+|

Area Master 
(Founder & Info. Sec. Analyst)

Widane Forums
Contact Me: [email protected]
Admin Queries: [email protected]
General Queries: [email protected] 
Reply
#5
TFS mcn, windows walata mokuthma nadda

Anøn LK 
(Admin & Moderate Officer)

Widane Forums
Contact Me: [email protected]
Admin Queries: [email protected]
General Queries: [email protected] 
Reply
#6
TFS bro.. Smile
<>
.:: [Induwara Uthsara] :: [රතු කුරුල්ලා] ::.
Idea  [Only registered and activated users can see links Click here to register] Idea
 Idea [Only registered and activated users can see links Click here to register]  Idea
</>
Reply
#7
(11-22-2018, 06:27 PM)Anøn LK Wrote: TFS mcn, windows walata mokuthma nadda

windows walata thiyennawa but sahenna loku katak kranna oni setup krganna ,linux wla wge command line eken okkom tika ekaparma setup krganna ba windows walin
Reply
#8
එල එල

Elite_x 
(Admin & Marketing Officer)

Widane Forums
Contact Me: [email protected]
Admin Queries: [email protected]
General Queries: [email protected] 
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
Information [EduMate] Download - Udemy - Python Programming Full Course (Basics,OOP,Modules,PyQt) [1.04 GB] Mahasona 4 156 07-04-2019, 06:46 AM
Last Post: Area Master
Photo AL Python Sinhala 2019 - Full Coverage of Syllabus | ALL in 1 | AL ICT | ideaPack lk 2 141 07-01-2019, 09:27 AM
Last Post: Induwara Uthsara
  Python Easy Projects Bimsara Sandaruwan 3 966 11-02-2018, 09:30 AM
Last Post: Induwara Uthsara
  [Tut] Adf.ly bot in python ph03n1x 3 1,337 10-31-2018, 06:27 PM
Last Post: Sl Cyber King
  [Tut] Learn Python - part 3 ph03n1x 4 1,183 10-29-2018, 08:47 AM
Last Post: Induwara Uthsara
  [Tut] Let's Learn Python ph03n1x 5 1,246 10-29-2018, 08:46 AM
Last Post: Induwara Uthsara
  [Tut] Learn Python - part 4 ph03n1x 2 878 10-28-2018, 02:42 PM
Last Post: Induwara Uthsara
  [Tut] Learn Python - part 2 ph03n1x 2 944 10-28-2018, 01:29 PM
Last Post: Induwara Uthsara



Users browsing this thread: 1 Guest(s)