In this video lesson we introduce you to creating Graphical User Interfaces (GUI) to control your arduino project over WiFi using PyQt5. For this first introduction, we show you how to create the PyQt5 Widget on your PC using Python. Then your homework will be to control your arduino using the widget over WiFi. For your convenience, the code we developed in the lesson is presented below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
from PyQt5.QtWidgets import * from PyQt5.QtCore import * import sys app = QApplication([]) window = QMainWindow() window.setWindowTitle('Welcome to GUI World') window.setGeometry(100,100,500,300) widgetContainer = QWidget() window.setCentralWidget(widgetContainer) mainLayout = QVBoxLayout(widgetContainer) label = QLabel("Welcome to PyQt5!") label.setAlignment(Qt.AlignCenter) label.setStyleSheet("font-size: 24px; color: blue; padding: 10px;") label.setFixedHeight(50) mainLayout.addWidget(label) pushButtonLayout = QHBoxLayout() mainLayout.addLayout(pushButtonLayout) pushButtonRed = QPushButton("Blink Red!") pushButtonRed.setStyleSheet("background-color: red; color: white; font-size: 24px; padding:10;") pushButtonRed.setFixedSize(150,50) def pushButtonRedClicked(): label.setText("Blink Red!") label.setStyleSheet(" font-size: 24px;color: red; padding:10;") pushButtonRed.clicked.connect(pushButtonRedClicked) pushButtonLayout.addWidget(pushButtonRed) pushButtonGreen = QPushButton("Blink Green!") pushButtonGreen.setStyleSheet("background-color: green; color: white; font-size: 24px; padding:10;") pushButtonGreen.setFixedSize(150,50) def pushButtonGreenClicked(): label.setText("Blink Green!") label.setStyleSheet(" font-size: 24px;color: green; padding:10;") pushButtonGreen.clicked.connect(pushButtonGreenClicked) pushButtonLayout.addWidget(pushButtonGreen) pushButtonBlue = QPushButton("Blink Blue!") pushButtonBlue.setStyleSheet("background-color: blue; color: white; font-size: 24px; padding:10;") pushButtonBlue.setFixedSize(150,50) def pushButtonBlueClicked(): label.setText("Blink Blue!") label.setStyleSheet(" font-size: 24px;color: blue; padding:10;") pushButtonBlue.clicked.connect(pushButtonBlueClicked) pushButtonLayout.addWidget(pushButtonBlue) toggleButtonLayout = QHBoxLayout() mainLayout.addLayout(toggleButtonLayout) toggleButtonRed = QPushButton("Toggle Red") toggleButtonRed.setCheckable(True) toggleButtonRed.setStyleSheet("background-color: red; color: white; font-size: 18px; padding:10;") toggleButtonRed.setFixedSize(150,50) def toggleRed(checked): if checked: label.setText("Red Toggle ON") label.setStyleSheet(" font-size: 24px;color: red; padding:10;") if not checked: label.setText("Red Toggle OFF") label.setStyleSheet(" font-size: 24px;color: red; padding:10;") toggleButtonRed.toggled.connect(toggleRed) toggleButtonLayout.addWidget(toggleButtonRed) toggleButtonGreen = QPushButton("Toggle Green") toggleButtonGreen.setCheckable(True) toggleButtonGreen.setStyleSheet("background-color: green; color: white; font-size: 18px; padding:10;") toggleButtonGreen.setFixedSize(150,50) def toggleGreen(checked): if checked: label.setText("Green Toggle ON") label.setStyleSheet(" font-size: 24px;color: green; padding:10;") if not checked: label.setText("Green Toggle OFF") label.setStyleSheet(" font-size: 24px;color: green; padding:10;") toggleButtonGreen.toggled.connect(toggleGreen) toggleButtonLayout.addWidget(toggleButtonGreen) toggleButtonBlue = QPushButton("Toggle Blue") toggleButtonBlue.setCheckable(True) toggleButtonBlue.setStyleSheet("background-color: blue; color: white; font-size: 18px; padding:10;") toggleButtonBlue.setFixedSize(150,50) def toggleBlue(checked): if checked: label.setText("Blue Toggle ON") label.setStyleSheet(" font-size: 24px;color: blue; padding:10;") if not checked: label.setText("Blue Toggle OFF") label.setStyleSheet(" font-size: 24px;color: bllue; padding:10;") toggleButtonBlue.toggled.connect(toggleBlue) toggleButtonLayout.addWidget(toggleButtonBlue) mainLayout.addStretch() window.show() sys.exit(app.exec_()) |