Wednesday, 31 July 2019

Create a Basic Graphical User Interface (GUI)


Launch PyQt5Designer from Terminal in PyCharm. Create a new file 'appGUI(filename).ui'. It looks like as below:


Now, I create a basic graphical user interface as a sample GUI.

  1. Drag a Label, for the title of the app, from Widget Box ==> Display Widgets ==> Label and drop it to the MainWindow. Similarly, drag and drop another Label for caption 'Enter Text' below the title label.
  2. We need an Input box, for text input. Drag Line Edit from Widget Box ==> Input Widgets ==> Line Edit and drop it next to cation 'Enter Text'.
  3. Lastly, a button added to the MainWindow. Drag a Push Button from Widget Box ==> Buttons ==> Push Button and drop it to below the Line Edit.
Starting from the title of the graphical user interface, now, we set the title text, customize its size and style. Double click on the first Label to edit text, and enter 'Application Graphical User Interface' text. Then click on the title, and set properties in the Property Editor. First of all, set the objectName value as 'gui_title' from QObject section as illustrated by the green arrow on top in the figure below. Similarly, we set the font from QWidget as shown in the lower green arrow. I set Font size from QWidget ==> font section, known as Point Size in Qt, to 14 and checked the CheckBox next to Bold and pressed the enter key.


In the case of the second label, I set the 'Enter Text' caption by double-clicking this label. The objectName of this label is the same as set by default. 

Similarly, for the push button, I entered 'Click Me' caption of the button. The objectName of this button is 'clickButton'. 

For instance, the objectName of all the widgets used to access these controls in the Python file. Therefore, the objectNames should be meaningful for every widget. 

This is the basic graphical user interface with few widgets. Next step is how to access these in the Python file? and perform some action on button click. 

No comments:

Post a Comment