IoT Projects Part 2: PyQt5 Desktop Dashboard

Introduction

In this second part of our IoT project series, we'll dive deep into the desktop dashboard application built with PyQt5. This sophisticated interface serves as the central control hub for managing multiple IoT projects, providing users with an intuitive way to interact with various sensors and devices through MQTT communication.

Qt Designer Structure Overview

The desktop dashboard is built using Qt Designer, which provides a visual approach to creating the user interface. The hierarchical structure of our application, as shown in the project tree, demonstrates a well-organized and scalable design pattern.

Main Window Architecture

The application follows a structured hierarchy starting with the MainWindow object as the root container.

This design pattern ensures proper widget management and maintains a clean separation of concerns.

Core Container Structure

MainWindow
├── centralwidget
│   ├── drop_shadow_frame
│   │   ├── TitleBar
│   │   ├── content_bar
│   │      └── stackedWidget
│   └── Author

The centralwidget serves as the primary container, housing all interface elements within a drop_shadow_frame that provides the application's modern visual appearance. The shadow frame contains three main sections:

• TitleBar: Contains window controls (minimize, maximize, close) and application branding
• content_bar: Houses navigation elements and secondary controls
• stackedWidget: The core component that manages different application screens

Screen Management System

The heart of the dashboard lies in its stackedWidget, which efficiently manages multiple application screens. This approach allows for seamless navigation between different IoT projects while maintaining optimal memory usage and performance.

Available Screens

The dashboard implements a comprehensive screen system, with each screen dedicated to specific functionality:

• screen_home - The main landing page providing overview and navigation options
• screen_project - Project selection interface displaying available IoT modules
• screen_button - LED and Button control interface for basic digital I/O operations
• screen_wather - Water level monitoring and control system
• screen_water - Additional water-related sensor management
• screen_load_cell - Load cell and weight measurement interface
• screen_accelo - Accelerometer and gyroscope data visualization
• screen_gas_sensor - Gas sensor monitoring for environmental safety

Code Structure Analysis

Screen Navigation Implementation

The main application logic implements a robust screen management system through the MainWindow class. Each screen corresponds to a specific IoT project, with dedicated navigation methods ensuring clean transitions between interfaces.

def GotoScreen(self, index):
    self.ui.stackedWidget.setCurrentIndex(index)

This simple yet effective method handles all screen transitions, with predefined constants representing each screen index.

Project-Specific Controllers

Each IoT project has its dedicated controller class that gets instantiated when navigating to the corresponding screen:

• LED_and_Button: Manages basic digital I/O operations
• Tem_hum_Sensor: Handles temperature and humidity monitoring
• WaterLevelControllerWindow: Controls water level sensing systems
• LOADCELL: Manages weight and force measurements
• AccelerometerGyroscopeController: Processes motion and orientation data
• GasSensorController: Monitors air quality and gas detection

Dynamic Project Management

The application implements a smart project lifecycle management system:

def deactivate_current_project(self):
    if self.current_project and hasattr(self.current_project, "deactivate"):
        self.current_project.deactivate()
    self.current_project = None

This ensures that when switching between projects, the previous project's resources are properly cleaned up, preventing memory leaks and ensuring optimal performance.

Screen-to-Project Mapping

Each navigation method follows a consistent pattern:

def goToScreenButton(self):
    self.GotoScreen(screen_button)
    self.current_project = LED_and_Button(self.mqtt_client, self.ui)

This approach ensures that:

• The appropriate screen is displayed
• The corresponding project controller is instantiated
• MQTT communication is properly established
• UI elements are correctly bound to functionality

User Interface Design Philosophy

Frameless Window Design

The application implements a modern, frameless window design using:

self.setWindowFlags(QtCore.Qt.FramelessWindowHint)

This creates a sleek, professional appearance while maintaining full functionality through custom title bar controls.

Responsive Layout Management

The dashboard adapts to different window states with dynamic margin and spacing adjustments:

def toggle_maximize(self):
    if self.isMaximized():
        self.showNormal()
        self.adjust_titlebar_margin(self.normal_left_margin)
        self.set_titlebar_spacing(self.normal_spacing)
    else:
        self.showMaximized()
        self.adjust_titlebar_margin(self.maximized_left_margin)
        self.set_titlebar_spacing(self.maximized_spacing)

• Normal view: Optimized for standard desktop usage
• Maximized view: Adjusted margins for full-screen experience

Interactive Elements

The interface includes several interactive components:

• Virtual Keyboard: For touch-screen compatibility
• MQTT Connection Controls: Real-time broker connection management
• Project Navigation: Intuitive access to all IoT modules
• Dynamic Content Areas: Contextual information display

Technical Benefits

Modular Architecture

The screen-based approach provides several advantages:

• Scalability: Easy addition of new IoT projects
• Maintainability: Isolated functionality for each module
• Resource Efficiency: Only active screens consume resources
• User Experience: Smooth transitions and responsive interface

MQTT Integration

Each project seamlessly integrates with MQTT communication, enabling real-time data exchange with IoT devices. The centralized MqttClient instance ensures consistent communication protocols across all projects.

Conclusion

In this article, we explored the comprehensive structure of our PyQt5 desktop dashboard, from the Qt Designer widget hierarchy to the screen management system implementation. We examined how the stackedWidget architecture enables seamless navigation between different IoT project interfaces, and analyzed the code patterns that make this dashboard both scalable and maintainable.

In the next part of this series, IoT Projects Part 3: MQTT Broker Setup with Mosquitto, we'll explore how to configure and deploy the MQTT communication backbone that enables real-time data exchange between the dashboard and IoT devices.

That's all!

If you have any questions or suggestions, don’t hesitate to leave a comment below.