Use PyQt5 to Create a Graphical User Interface for Arduino Project Over WiFi

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.

# ====================================================================
# DISCLAIMER:
# This code is provided as-is for educational and experimental 
# purposes only. The author makes no representations or warranties of 
# any kind concerning the safety, suitability, or accuracy of this 
# code. Use at your own risk. The author assumes no liability for any 
# damages, system failures, security breaches, or network issues 
# resulting from the use or implementation of this script.
# ====================================================================

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_())

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

# ====================================================================

# DISCLAIMER:

# This code is provided as-is for educational and experimental

# purposes only. The author makes no representations or warranties of

# any kind concerning the safety, suitability, or accuracy of this

# code. Use at your own risk. The author assumes no liability for any

# damages, system failures, security breaches, or network issues

# resulting from the use or implementation of this script.

# ====================================================================

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_())

Technology Tutorials

Use PyQt5 to Create a Graphical User Interface for Arduino Project Over WiFi

Making The World a Better Place One High Tech Project at a Time. Enjoy!