pycon logo

PyCon 2011 Atlanta

March 9th–17th

Log in or Sign Up

Creating GUI Applications in Python using Qt II

log in to bookmark this presentaton

Novice / Tutorial
March 10th 1:20 p.m. – 4:40 p.m.
This tutorial is intended for Python programmers with limited GUI programming experience with PyQt. The course is designed as a follow-on course. By the end of the course students will have an understanding of building main GUI applications, creating tables and lists widgets, using the Qt MVC for complex tables and lists, and using the item-based graphics.


Below is an outline of the material to be presented during the class.  The
examples listed (unless otherwise noted) are developed while in class to show
the process and progression of GUI development.

- QListWidget Example (15 min)

  - Creating a simple GUI presenting a directory list with unique icons for
    files and directories.

- QTableWidget Example (15 min)

  - Converting the QListWidget example into a table with columns for the file
    name, attributes, and size.
  - Modify the example to support column sorting
  - Discuss limitations of the widget (no commas in the file size, no color
    coded rows, no validation logic for editable fields)

- QTableView Example (20 min)

  - Discussion of Qt's approach to MVC

    - QTableView
    - QListView
    - QTreeView

  - Rewrite the QTableWidget but provide column sorting and row highlighting.
    Include radio buttons to color rows greater than 1K, 10K, 100K, or 1M.

- QTreeView Example (25 min)

  - Discussion of the non-MVC, QTreeWidget class.
  - Present and walk through completed example
  - Discuss the problems of implementing a file dialog as a tree using the
    QTreeWidget class.  The entire structure must be loaded into memory.
  - Rewrite the QTableView example but not restrict the data to a single
    directory.  Basically, we will create a file dialog common on most GUI

- Break (20 min)

- Introduction of final example (5 min)

  - The final example we will develop an application that permits the user
    to load a .png or .jpg image and determine the RGB value and location of
    a specific pixel within the image.

- A discussion of QObject and events (5 min)

  - How will QGraphicsRectItem receive slot events to move itself if it doesn't
    inherit from QObject?

- Image inspector design using Designer (10 min)

  - Design with the class a dialog which will contain a QGraphicsView for the
    main image, a QSpinBox for zoom control, a QLabel for the zoomed image, and
    a QGroupBox to contain and RGB field and X/Y position.

- Implementing the dialog code

  - Initial functionality (20 min)

    - Add the code to populate the main QGraphicsView's scene
    - Add the selection box to the main scene
    - Incorporate movement to the selection box
    - Bound the selection box to the dimensions of the scene's image

  - Creating the zoom QPixmap (20 min)

    - Copy a portion of the image using the zoom control value which specifies
      the height/width of the selection area
    - Draw an exploded, pixelated, view of the image in the QPixmap
    - Connect the zoom control's signals to a slot controlling the contents of
      the QPixmap
    - Add mouse handlers to highlight the selected pixel and populate its
      RGB and location information

- Implementing the main application (15 min)

  - Layout the application menus in Designer

    - File-->Open menu
    - File-->Exit menu
    - Image-->Pixel inspector menu
    - Help-->About menu

  - Application functionality

    - Connect the pixel inspector to the menu signal
    - Create a About popup and connect it to the application

- Summary