Beginning PyQt A Hands-on Approach to GUI Programming — Joshua M. Willman Beginning PyQt A Hands-on Approach to GUI Programming Joshua M. Willman Beginning PyQt: A Hands-on Approach to GUI Programming Joshua M. Willman Hampton, VA, USA ISBN-13 (pbk): 978-1-4842-5856-9 ISBN-13 (electronic): 978-1-4842-5857-6 https://doi.org/10.1007/978-1-4842-5857-6 Copyright © 2020 by Joshua M. Willman This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Celestin Suresh John Development Editor: James Markham Coordinating Editor: Divya Modi Cover designed by eStudioCalamar Cover image designed by Pixabay Distributed to the book trade worldwide by Springer Science+Business Media New York, 1 New York Plaza, New York, NY 10004. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail [email protected], or visit http://www.apress.com/ rights-permissions. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book’s product page, located at www.apress.com/978-1-4842-5856-9. For more detailed information, please visit http://www.apress.com/source-code. Printed on acid-free paper To my daughter, Kalani. Pursue what inspires you. Table of Contents About the Author ���������������������������������������������������������������������������������������������������xiii About the Technical Reviewer ���������������������������������������������������������������������������������xv Acknowledgments �������������������������������������������������������������������������������������������������xvii Introduction ������������������������������������������������������������������������������������������������������������xix Chapter 1: Charting the Course ��������������������������������������������������������������������������������1 Who Should Read This Book ���������������������������������������������������������������������������������������������������������2 Introduction to User Interfaces �����������������������������������������������������������������������������������������������������2 What Is a Graphical User Interface? ����������������������������������������������������������������������������������������2 Concepts for Creating Good Interface Design ��������������������������������������������������������������������������3 The PyQt Framework ���������������������������������������������������������������������������������������������������������������������4 Why Choose PyQt? �������������������������������������������������������������������������������������������������������������������4 Requirements ��������������������������������������������������������������������������������������������������������������������������������5 Links to Source Code ��������������������������������������������������������������������������������������������������������������������5 How This Book Is Organized ����������������������������������������������������������������������������������������������������������6 Reader Feedback ��������������������������������������������������������������������������������������������������������������������������6 Chapter 2: Getting Started with PyQt������������������������������������������������������������������������7 Project 2�1 – User Profile GUI ��������������������������������������������������������������������������������������������������������8 Design the GUI Layout �������������������������������������������������������������������������������������������������������������9 Create an Empty Window ������������������������������������������������������������������������������������������������������10 The QLabel Widget �����������������������������������������������������������������������������������������������������������������13 User Profile GUI Solution �������������������������������������������������������������������������������������������������������16 Summary�������������������������������������������������������������������������������������������������������������������������������������20 v Table of ConTenTs Chapter 3: Adding More Functionality to Interfaces �����������������������������������������������21 Project 3�1 – Login GUI ����������������������������������������������������������������������������������������������������������������22 Design the Login GUI �������������������������������������������������������������������������������������������������������������23 The QPushButton Widget �������������������������������������������������������������������������������������������������������24 Events, Signals, and Slots �����������������������������������������������������������������������������������������������������27 The QLineEdit Widget�������������������������������������������������������������������������������������������������������������28 The QCheckBox Widget����������������������������������������������������������������������������������������������������������31 The QMessageBox Dialog Box �����������������������������������������������������������������������������������������������35 Login GUI Solution �����������������������������������������������������������������������������������������������������������������40 Project 3�2 – Create New User GUI ���������������������������������������������������������������������������������������������46 Creating a New User GUI Solution �����������������������������������������������������������������������������������������47 Summary�������������������������������������������������������������������������������������������������������������������������������������52 Chapter 4: Learning About Layout Management ����������������������������������������������������53 Choosing a Layout Manager��������������������������������������������������������������������������������������������������������54 Customizing the Layout ���������������������������������������������������������������������������������������������������������55 Absolute Positioning – Move( ) ����������������������������������������������������������������������������������������������������55 Project 4�1 – Basic Notepad GUI ��������������������������������������������������������������������������������������������56 The QTextEdit Widget �������������������������������������������������������������������������������������������������������������57 The QFileDialog Class ������������������������������������������������������������������������������������������������������������57 Basic Notepad GUI Solution ���������������������������������������������������������������������������������������������������58 The QHBoxLayout and QVBoxLayout Classes ������������������������������������������������������������������������������62 Project 4�2 – Survey GUI ��������������������������������������������������������������������������������������������������������62 The QButtonGroup Class ��������������������������������������������������������������������������������������������������������63 Survey GUI Solution ���������������������������������������������������������������������������������������������������������������64 The QFormLayout Class ��������������������������������������������������������������������������������������������������������������68 Project 4�3 – Application Form GUI ����������������������������������������������������������������������������������������68 The QSpinBox and QComboBox Widgets �������������������������������������������������������������������������������69 Application Form GUI Solution �����������������������������������������������������������������������������������������������73 vi Table of ConTenTs The QGridLayout Class ����������������������������������������������������������������������������������������������������������������77 Project 4�4 – To-Do List GUI ���������������������������������������������������������������������������������������������������78 To-Do List GUI Solution ����������������������������������������������������������������������������������������������������������79 Summary�������������������������������������������������������������������������������������������������������������������������������������83 Chapter 5: Menus, Toolbars, and More �������������������������������������������������������������������85 Create a Basic Menu �������������������������������������������������������������������������������������������������������������������86 Explanation ����������������������������������������������������������������������������������������������������������������������������88 Setting Icons with the QIcon Class ���������������������������������������������������������������������������������������������91 Explanation ����������������������������������������������������������������������������������������������������������������������������94 Project 5�1 – Rich Text Notepad GUI ��������������������������������������������������������������������������������������������95 Design the Rich Text Notepad GUI �����������������������������������������������������������������������������������������96 More Types of Dialog Boxes in PyQt ��������������������������������������������������������������������������������������������97 The QInputDialog Class ����������������������������������������������������������������������������������������������������������97 The QFontDialog Class �����������������������������������������������������������������������������������������������������������98 The QColorDialog Class ���������������������������������������������������������������������������������������������������������99 The About Dialog Box�����������������������������������������������������������������������������������������������������������101 Rich Text Notepad GUI Solution �������������������������������������������������������������������������������������������������101 Explanation ��������������������������������������������������������������������������������������������������������������������������109 Project 5�2 – Simple Photo Editor GUI ���������������������������������������������������������������������������������������110 Design the Photo Editor GUI �������������������������������������������������������������������������������������������������111 QDockWidget, QStatusBar, and More ����������������������������������������������������������������������������������������112 Explanation ��������������������������������������������������������������������������������������������������������������������������116 Photo Editor GUI Solution ����������������������������������������������������������������������������������������������������������120 Explanation ��������������������������������������������������������������������������������������������������������������������������131 Summary�����������������������������������������������������������������������������������������������������������������������������������134 Chapter 6: Styling Your GUIs ���������������������������������������������������������������������������������135 Changing GUI Appearances with Qt Style Sheets����������������������������������������������������������������������135 Customizing Individual Widget Properties ���������������������������������������������������������������������������136 Customizing the QApplication Style Sheet ��������������������������������������������������������������������������137 vii Table of ConTenTs Project 6�1 – Food Ordering GUI ������������������������������������������������������������������������������������������������138 Design the Food Ordering GUI ���������������������������������������������������������������������������������������������140 The QRadioButton Widget ����������������������������������������������������������������������������������������������������141 The QGroupBox Class ����������������������������������������������������������������������������������������������������������141 The QTabWidget Class ���������������������������������������������������������������������������������������������������������142 Food Ordering GUI Solution �������������������������������������������������������������������������������������������������������147 Explanation ��������������������������������������������������������������������������������������������������������������������������156 Event Handling in PyQt ��������������������������������������������������������������������������������������������������������������159 Explanation ��������������������������������������������������������������������������������������������������������������������������160 Creating Custom Signals �����������������������������������������������������������������������������������������������������������161 Explanation ��������������������������������������������������������������������������������������������������������������������������163 Summary�����������������������������������������������������������������������������������������������������������������������������������164 Chapter 7: Creating GUIs with Qt Designer �����������������������������������������������������������165 Getting Started with Qt Designer ����������������������������������������������������������������������������������������������166 Exploring Qt Designer’s User Interface ��������������������������������������������������������������������������������167 Qt Designer’s Editing Modes �����������������������������������������������������������������������������������������������173 Creating an Application in Qt Designer �������������������������������������������������������������������������������������174 Project 7�1 – Keypad GUI ����������������������������������������������������������������������������������������������������������175 Keypad GUI Solution ������������������������������������������������������������������������������������������������������������������176 Explanation ��������������������������������������������������������������������������������������������������������������������������190 Extra Tips for Using Qt Designer �����������������������������������������������������������������������������������������������200 Setting Up Main Windows and Menus ���������������������������������������������������������������������������������200 Display Images in Qt Designer ��������������������������������������������������������������������������������������������������202 Summary�����������������������������������������������������������������������������������������������������������������������������������203 Chapter 8: Working with the Clipboard ����������������������������������������������������������������205 The QClipboard Class ����������������������������������������������������������������������������������������������������������������205 Explanation ��������������������������������������������������������������������������������������������������������������������������209 Project 8�1 – Sticky Notes GUI ��������������������������������������������������������������������������������������������������210 Sticky Notes GUI Solution ����������������������������������������������������������������������������������������������������������212 Explanation ��������������������������������������������������������������������������������������������������������������������������216 viii Table of ConTenTs Drag and Drop in PyQt ���������������������������������������������������������������������������������������������������������������216 Explanation ��������������������������������������������������������������������������������������������������������������������������219 Explanation ��������������������������������������������������������������������������������������������������������������������������223 Summary�����������������������������������������������������������������������������������������������������������������������������������223 Chapter 9: Graphics and Animation in PyQt ���������������������������������������������������������225 Introduction to the QPainter Class ��������������������������������������������������������������������������������������������226 Explanation ��������������������������������������������������������������������������������������������������������������������������233 Project 9�1 – Painter GUI �����������������������������������������������������������������������������������������������������������240 Painter GUI Solution ������������������������������������������������������������������������������������������������������������������241 Explanation ��������������������������������������������������������������������������������������������������������������������������249 Project 9�2 – Animation with QPropertyAnimation ��������������������������������������������������������������������252 Animation Solution ��������������������������������������������������������������������������������������������������������������������253 Explanation ��������������������������������������������������������������������������������������������������������������������������256 Project 9�3 – RGB Slider Custom Widget �����������������������������������������������������������������������������������257 PyQt’s Image Handling Classes �������������������������������������������������������������������������������������������258 The QSlider Widget ��������������������������������������������������������������������������������������������������������������259 RGB Slider Solution �������������������������������������������������������������������������������������������������������������������260 Explanation ��������������������������������������������������������������������������������������������������������������������������267 RGB Slider Demo �����������������������������������������������������������������������������������������������������������������������270 Explanation ��������������������������������������������������������������������������������������������������������������������������272 Summary�����������������������������������������������������������������������������������������������������������������������������������273 Chapter 10: Introduction to Handling Databases ��������������������������������������������������275 The QTableWidget Class ������������������������������������������������������������������������������������������������������������276 Explanation ��������������������������������������������������������������������������������������������������������������������������282 Introduction to Model/View Programming ��������������������������������������������������������������������������������285 The Components of the Model/View Architecture ���������������������������������������������������������������285 PyQt’s Model/View Classes �������������������������������������������������������������������������������������������������286 Explanation ��������������������������������������������������������������������������������������������������������������������������290 Working with SQL Databases in PyQt ����������������������������������������������������������������������������������������291 What Is SQL? �����������������������������������������������������������������������������������������������������������������������291 ix Table of ConTenTs Project 10�1 – Account Management GUI ���������������������������������������������������������������������������������294 Working with QtSql ��������������������������������������������������������������������������������������������������������������295 Example Queries Using QSqlQuery ��������������������������������������������������������������������������������������300 Working with QSqlTableModel ���������������������������������������������������������������������������������������������303 Working with QSqlRelationalTableModel �����������������������������������������������������������������������������306 Account Management GUI Solution �������������������������������������������������������������������������������������������310 Explanation ��������������������������������������������������������������������������������������������������������������������������315 Summary�����������������������������������������������������������������������������������������������������������������������������������316 Chapter 11: Managing Threads ����������������������������������������������������������������������������319 Introduction to Threading ����������������������������������������������������������������������������������������������������������319 Threading in PyQt ����������������������������������������������������������������������������������������������������������������320 Methods for Processing Long Events in PyQt ����������������������������������������������������������������������321 Project 11�1 – File Renaming GUI ���������������������������������������������������������������������������������������������322 The QProgressBar Widget ����������������������������������������������������������������������������������������������������323 File Renaming GUI Solution �������������������������������������������������������������������������������������������������������323 Explanation ��������������������������������������������������������������������������������������������������������������������������328 Summary�����������������������������������������������������������������������������������������������������������������������������������329 Chapter 12: Extra Projects ������������������������������������������������������������������������������������331 Project 12�1 – Directory Viewer GUI ������������������������������������������������������������������������������������������332 Explanation ��������������������������������������������������������������������������������������������������������������������������335 Project 12�2 – Camera GUI ��������������������������������������������������������������������������������������������������������336 Explanation ��������������������������������������������������������������������������������������������������������������������������341 Project 12�3 – Simple Clock GUI �����������������������������������������������������������������������������������������������342 Explanation ��������������������������������������������������������������������������������������������������������������������������345 Project 12�4 – Calendar GUI ������������������������������������������������������������������������������������������������������346 Explanation ��������������������������������������������������������������������������������������������������������������������������351 Project 12�5 – Hangman GUI �����������������������������������������������������������������������������������������������������352 Explanation ��������������������������������������������������������������������������������������������������������������������������362 Project 12�6 – Web Browser GUI �����������������������������������������������������������������������������������������������364 Explanation ��������������������������������������������������������������������������������������������������������������������������373 Summary�����������������������������������������������������������������������������������������������������������������������������������376 x