HMI Application with Raspberry Pi and PyQT: Part 2 Layout

In Part 1 of this tutorial, we discussed how to create a simple HMI (Human Machine Interface) app using PyQt and Raspberry Pi. In Part 2, we will focus on creating the layout of our HMI app using PyQt’s layout management.

Layout management is essential for creating a user-friendly and visually appealing HMI app. It allows you to organize and arrange the widgets in your app in a structured and consistent way. PyQt provides several layout classes that you can use to achieve different layouts, such as QVBoxLayout, QHBoxLayout, QGridLayout, and QFormLayout.

Let’s start by creating a new Python file for our layout design. Open your favorite text editor or IDE and create a new file named ‘hmi_app_layout.py’. You can copy and paste the code from Part 1 of this tutorial to get started.

First, we need to import the necessary modules and classes from PyQt:

from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout

Next, we need to create the main window of our HMI app and set its title and size. We will also create a QVBoxLayout to organize the widgets vertically:

class HMIApp(QWidget):
    def __init__(self):
        super().__init__()

        self.setWindowTitle('HMI App')
        self.setGeometry(100, 100, 400, 300)

        layout = QVBoxLayout()
        self.setLayout(layout)

Now, let’s add some widgets to our layout. We will add a QLabel, two QPushButtons, and a QSpacerItem to create some space between the buttons:

class HMIApp(QWidget):
    def __init__(self):
        super().__init__()

        self.setWindowTitle('HMI App')
        self.setGeometry(100, 100, 400, 300)

        layout = QVBoxLayout()
        self.setLayout(layout)

        button1 = QPushButton('Button 1')
        layout.addWidget(button1)

        button2 = QPushButton('Button 2')
        layout.addWidget(button2)

        spacer = QSpacerItem(20, 40)
        layout.addItem(spacer)

Now, we need to move the code that we wrote in Part 1 for setting up the app and running it into a separate function called ‘run_app’:

class HMIApp(QWidget):
    def __init__(self):
        super().__init__()

        self.setWindowTitle('HMI App')
        self.setGeometry(100, 100, 400, 300)

        layout = QVBoxLayout()
        self.setLayout(layout)

        button1 = QPushButton('Button 1')
        layout.addWidget(button1)

        button2 = QPushButton('Button 2')
        layout.addWidget(button2)

        spacer = QSpacerItem(20, 40)
        layout.addItem(spacer)

    def run_app(self):
        app = QApplication([])
        self.show()
        app.exec_()

Finally, let’s create an instance of our HMIApp class and run the app:

if __name__ == '__main__':
    hmi_app = HMIApp()
    hmi_app.run_app()

Run the script by executing the command ‘python hmi_app_layout.py’ in your terminal. You should see the main window of your HMI app with two buttons arranged vertically.

In this tutorial, we learned how to use PyQt’s layout management to organize the widgets in our HMI app. You can customize the layout further by using different layout classes and adding more widgets to create a more complex and interactive user interface. Experiment with different layouts and widgets to create a unique and engaging HMI app for your Raspberry Pi project.