Table View

TableView Workflow Documentation

This document outlines the workflow for displaying data in a TableView, with a special emphasis on the unique method used to display images within table cells. Using image in TableView was one of the trickiest things i faced in this project.

🖼️ Displaying Images in TableView

The application utilizes custom widgets and delegates to enhance the functionality and appearance of the TableView. A notable feature is the method to display images in the table view, specifically the license plate images in the LPR system. This process involves several steps and custom functions, detailed below.

Step 1: Creating Image Labels

The create_image_label function is used to generate a QLabel with a QPixmap containing the image to be displayed. This label is then set to scale its contents and fixed to a specific size, ensuring consistent presentation within the table:

def create_image_label(image):
    imageLabel = QLabel()
    imageLabel.setScaledContents(True)
    imageLabel.setFixedSize(200, 44)
    imageLabel.setPixmap(image)
    return imageLabel

Step 2: Populating the Table

When populating the table with data, each row that requires an image display will use the create_image_label function. The resulting QLabel is then added to the table cell as a widget using setCellWidget. This approach allows for rich content, such as images, to be displayed directly within the table:

Image = QImage()
Image.load(dfReadEnteries.iloc[each_row][4])
QcroppedPlate = QPixmap.fromImage(Image)

item = create_image_label(QcroppedPlate)
self.tableWidget.setCellWidget(each_row, 4, item)

Step 3: Handling User Interaction

To enhance user experience, the application also handles user interactions with the displayed images. Double-clicking on an image label triggers an event that opens the image in a larger view. This functionality is facilitated by connecting the label's mousePressEvent to a custom handler that displays the image in a QDialog:

item.mousePressEvent = functools.partial(on_label_double_click, source_object=item)

def on_label_double_click(event, source_object=None):
    w = QDialog()
    w.setFixedSize(600, 132)
    imageLabel = QLabel(w)
    imageLabel.setScaledContents(True)
    imageLabel.setFixedSize(600, 132)
    imageLabel.setPixmap(source_object.pixmap())
    w.exec()

📝 Conclusion

This workflow demonstrates the application's ability to effectively display images within a TableView, providing a visually rich and interactive data presentation. The use of custom labels and event handling enhances the usability and functionality of the TableView, making it a powerful tool for displaying complex data, such as license plate images, in the LPR system.