Image Transition: Visualizing Screen Switching

  • Image Transition: Learn how to visualize screen transitions using images.

  • The principle for image transition remains the same as screen transition. The difference is that each page includes an image (set on a QLabel via QPixmap).

  • The create_page function takes an image path and button text as input to create a page. This function uses the provided image path to create a QPixmap object and sets it on a QLabel widget to display the image.

Listing 9 scripts/PYQT2/03_toggle_screens/main.py
 1import sys
 2from PyQt5.QtGui import QPixmap
 3from PyQt5.QtWidgets import QApplication, QMainWindow, QPushButton, QVBoxLayout, QWidget, QStackedWidget, QLabel
 4
 5class MainWindow(QMainWindow):
 6    def __init__(self):
 7        super(MainWindow, self).__init__()
 8
 9        # Create the stacked widget
10        self.stack = QStackedWidget()
11
12        # Create some sample pages with images
13        self.page1 = self.create_page("images/twinkle_bocchi.png", "Go to Ai")
14        self.page2 = self.create_page("images/twinkle_ai.jpg", "Go to Anay")
15        self.page3 = self.create_page("images/twinkle_anya.jpg", "Go to Bocchi")
16
17        # Add pages to the stacked widget
18        self.stack.addWidget(self.page1)
19        self.stack.addWidget(self.page2)
20        self.stack.addWidget(self.page3)
21
22        # Set the current widget to be page 1
23        self.stack.setCurrentWidget(self.page1)
24
25        # Set the stacked widget as the central widget of the window
26        self.setCentralWidget(self.stack)
27
28    def create_page(self, image_path, button_text):
29        page = QWidget()
30        layout = QVBoxLayout(page)
31
32        pixmap = QPixmap(image_path)
33        image_label = QLabel(page)
34        image_label.setPixmap(pixmap)
35        layout.addWidget(image_label)
36
37        btn = QPushButton(button_text, page)
38        layout.addWidget(btn)
39
40        if button_text == "Go to Bocchi":
41            btn.clicked.connect(lambda: self.stack.setCurrentWidget(self.page1))
42        elif button_text == "Go to Ai":
43            btn.clicked.connect(lambda: self.stack.setCurrentWidget(self.page2))
44        elif button_text == "Go to Anay":
45            btn.clicked.connect(lambda: self.stack.setCurrentWidget(self.page3))
46
47        return page
48
49if __name__ == '__main__':
50    app = QApplication(sys.argv)
51    mainWin = MainWindow()
52    mainWin.show()
53    sys.exit(app.exec_())

  • Lambda functions are used to define the slot connected upon a button click. This method ensures a button click can transition to a specific page.

  • Displaying Images: A QPixmap object is created to load the image, which is then set on a QLabel widget for display.

  • Lambda Functions: In PyQt, lambda functions can be utilized to pass arguments to a specific function or to define a simple logic during a signal-slot connection.

Detailed Analysis

  1. Creating the stacked widget:

    self.stack = QStackedWidget()

  2. Creating pages with images: Use the create_page method to create a page with an image and a button.

    self.page1 = self.create_page("images/twinkle_bocchi.png", "Go to Ai")

  3. Loading and displaying images: Use QPixmap to load the image and set it on a QLabel for display.

    pixmap = QPixmap(image_path)
...
image_label.setPixmap(pixmap)

  4. Connecting button click events: Lambda functions are used to connect each button to the logic that switches to its respective page.

    btn.clicked.connect(lambda: self.stack.setCurrentWidget(self.page1))