Week 14: Interface and Application Programming

Before starting

Interface and Application Programming (IAP) is a process in which software interfaces and applications are designed, developed, and integrated to allow communication between users, devices, and computer systems. It is used to create graphical user interfaces (GUIs), automate tasks, exchange data between different platforms, and control hardware through software. In industry, interface and application programming plays a crucial role in the development of control systems, industrial automation, monitoring platforms, mobile and desktop applications, and Internet of Things (IoT) solutions.

Interface and Application Programming

‹ ›

UI

User Interfaces (UI) are the collection of visual and interactive elements that enable communication between a person and a computer system. Their main purpose is to allow users to interact with an application in an intuitive, efficient, and user-friendly manner. A user interface may include buttons, text boxes, menus, scroll bars, images, windows, icons, sliders, and other graphical components that allow users to enter information, display data, or perform actions within a software application.

In software development, UIs are essential because they define the user experience when interacting with a program. A well-designed interface improves usability, minimizes errors, and makes tasks easier to accomplish. In industrial environments, user interfaces are commonly used to monitor processes, control machinery, display real-time sensor data, and configure operating parameters for automated systems and equipment.

Qt Designer

In this case, the Qt Designer application was used. Qt Designer is a visual development tool that is part of the Qt framework and allows users to create graphical user interfaces (GUIs) through a drag and drop environment without the need to manually write the interface code. It provides a wide variety of widgets, layouts, containers, and design tools that simplify the creation of professional desktop applications.

Once the interface is designed, it can be integrated with programming languages such as Python through frameworks like PyQt or PySide, enabling developers to add functionality and interaction to the graphical elements.

Creating a New Interface

When the application is opened, a start screen appears that allows the user to create a new interface file. Different templates are available, such as Main Window, Widget, Dialog without Buttons, Dialog with Buttons Bottom, and other predefined interface types. Each template is designed for a specific purpose and provides a suitable base structure depending on the application's requirements.

Qt Designer Workspace

After selecting the desired file type, the main design workspace is displayed. On the left side, there is a panel containing all the tools and components that can be added to the interface. These include layouts, containers, buttons, input widgets, display widgets, item widgets, spacers, and many other graphical elements.

At the center of the screen is the design area, which represents the application's interface. This is where the user can drag and drop components, organize them visually, and create the desired layout.

On the right side, several configuration panels are available, including the Object Inspector, which displays the hierarchy of interface elements, and the Property Editor, which allows users to modify the characteristics of each selected component, such as size, position, color, text, fonts, and behavior.

Interface Design

Using the widgets, layouts, and containers available in the left-side toolbox, the following interface was created as the basis for the project. These elements were arranged according to the application's requirements to provide an organized and user-friendly graphical environment.

Stylesheets and Custom Appearance

Focusing on the Object Inspector located on the right side of the workspace, if the user right clicks on MainWindow (the main container) and selects Change StyleSheet... , it is possible to access the Qt stylesheet editor. Qt stylesheets are based on CSS syntax and allow developers to customize the appearance of interface elements such as buttons, labels, text boxes, sliders, and windows.

The stylesheet editor provides predefined style options, including color schemes, gradients, borders, and other visual effects. These styles can be selected directly or modified manually to create a customized appearance that improves the application's aesthetics and user experience.

Example 1:

Example 2:

Saving and Editing the UI File

Advantages of Editing the UI File Manually

<widget class="QMainWindow"
        name="MainWindow">

<property name="geometry">
 <rect>
  <x>0</x>
  <y>0</y>
  <width>616</width>
  <height>600</height>
 </rect>
</property>

<property name="windowTitle">
 <string>MainWindow</string>
</property>

QMainWindow{
    background-color:#232544;
}

QPushButton{
    background-color:#2f3155;
    color:white;
    border:none;
    border-radius:12px;
    padding:8px;
}

QPushButton:hover{
    background-color:#3a3d6b;
}

QTextEdit{
    background-color:#2d3052;
    border:2px solid #3e4166;
    border-radius:25px;
    padding:15px;
    color:white;
    font-size:20px;
}

QSlider::groove:vertical {
    background: #45476a;
    width: 10px;
    border-radius: 5px;
}

QSlider::handle:vertical {
    background: white;
    border: 2px solid #f5b642;
    height: 20px;
    margin: -2px;
    border-radius: 10px;
}

QSlider::sub-page:vertical {
    background: #f5b642;
    border-radius: 5px;
}

<widget class="QWidget"
        name="centralwidget">

<widget class="QTextEdit"
        name="textEdit">

 <property name="geometry">
  <rect>
   <x>90</x>
   <y>90</y>
   <width>261</width>
   <height>171</height>
  </rect>
 </property>

</widget>

<widget class="QWidget"
        name="horizontalLayoutWidget">

<layout class="QHBoxLayout"
        name="horizontalLayout">

<widget class="QSlider"
        name="verticalSlider">

<property name="minimum">
 <number>0</number>
</property>

<property name="maximum">
 <number>100</number>
</property>

<property name="value">
 <number>100</number>
</property>

<property name="orientation">
 <enum>Qt::Vertical</enum>
</property>

<widget class="QPushButton"
        name="pushButton">

 <property name="text">
  <string>PushButton</string>
 </property>

</widget>

<widget class="QMenuBar"
        name="menubar">

<widget class="QStatusBar"
        name="statusbar"/>

    # Form implementation generated
    # from reading ui file 'week14.ui'

    # Created by:
    # PyQt6 UI code generator 6.11.0

    # WARNING:
    # Any manual changes made to this
    # file will be lost when pyuic6
    # is run again.
    

from PyQt6 import
QtCore,
QtGui,
QtWidgets

class Ui_MainWindow(object):

    def setupUi(
        self,
        MainWindow
    ):

MainWindow.setObjectName(
    "MainWindow"
)

MainWindow.resize(
    616,
    600
)

MainWindow.setStyleSheet(
    "QMainWindow{...}"
)

self.centralwidget =
QtWidgets.QWidget(
    parent=MainWindow
)

self.centralwidget
.setObjectName(
    "centralwidget"
)

self.textEdit =
QtWidgets.QTextEdit(
    parent=self.centralwidget
)

self.textEdit.setGeometry(
    QtCore.QRect(
        90,
        90,
        261,
        171
    )
)

self.horizontalLayoutWidget =
QtWidgets.QWidget(
    parent=self.centralwidget
)

self.horizontalLayout =
QtWidgets.QHBoxLayout(
    self.horizontalLayoutWidget
)

self.verticalSlider
.setMinimum(0)

self.verticalSlider
.setMaximum(100)

self.verticalSlider
.setProperty(
    "value",
    100
)

self.verticalSlider
.setOrientation(
    QtCore.Qt.
    Orientation.Vertical
)

self.pushButton =
QtWidgets.QPushButton(
    parent=
    self.verticalLayoutWidget
)

self.verticalLayout
.addWidget(
    self.pushButton
)

def retranslateUi(
    self,
    MainWindow
):

    _translate =
    QtCore.
    QCoreApplication.
    translate

if __name__ == "__main__":

    app =
    QtWidgets.QApplication(
        sys.argv
    )

    MainWindow =
    QtWidgets.QMainWindow()

    ui =
    Ui_MainWindow()

    ui.setupUi(
        MainWindow
    )

    MainWindow.show()

    sys.exit(
        app.exec()
    )

Terminal

mkdir project_name

This command creates a new directory where the entire project will be stored. Keeping all project files inside a dedicated folder helps maintain organization and simplifies dependency management, version control, and file distribution.

dir

Displays the contents of the current directory. It allows developers to verify existing files and folders, confirm their current location within the file system, and ensure that project files have been created correctly.

python -m venv venv

Creates a Python virtual environment named venv. A virtual environment provides an isolated workspace containing its own Python interpreter and installed packages, preventing conflicts with other projects or system-wide installations.

venv\Scripts\activate

Activates the virtual environment. Once activated, all Python packages installed through pip will be stored inside the project environment rather than affecting the global Python installation. This ensures portability and reproducibility of the project.

pip install PyQt6

Installs the PyQt6 framework, which provides Python bindings for the Qt graphical user interface library. It is important to activate the virtual environment before executing this command, as pip installs packages into the currently active environment. This guarantees that all required dependencies remain associated with the project.

pip freeze

Lists all Python packages currently installed in the active virtual environment, including their exact version numbers. This is useful for verifying dependencies and documenting the software environment used by the project.

pip freeze > requirements.txt

Creates a text file named requirements.txt containing every installed package and its version number. This file allows other developers to recreate the exact same environment by installing all listed dependencies with a single command.

pyuic6 -x input.ui -o output.py

Converts a Qt Designer .ui file into an equivalent Python source file. The generated file contains all instructions required to recreate the graphical interface programmatically. This command must be executed each time the .ui file is modified so that the Python representation remains synchronized with the graphical design.

pip install pyserial

Installs the PySerial library, which provides serial communication capabilities in Python. This package is essential for exchanging data between the graphical application and external hardware devices such as microcontrollers, development boards, sensors, and embedded systems through COM ports.

copy con main.py

Creates a new Python source file named main.py, which is typically used to implement the application's functionality and business logic. Keeping custom code inside main.py is recommended because the generated output.py file may be overwritten every time the .ui file is converted again using pyuic6. Separating interface generation from application logic improves maintainability and prevents accidental loss of code.

Main.py:

import sys
import serial

from PyQt6.QtWidgets import (
    QApplication,
    QMainWindow,
    QColorDialog
)

from PyQt6.QtGui import QColor

from fronted import Ui_MainWindow

class MainWindow(QMainWindow):

def __init__(self):
    super().__init__()

    self.ui = Ui_MainWindow()
    self.ui.setupUi(self)

    self.setWindowTitle(
        "Control RGB NeoPixel"
    )

self.serial_port = None

try:

    self.serial_port =
    serial.Serial(
        port="COM9",
        baudrate=115200,
        timeout=1
    )

except Exception as e:

    print(
        "No se pudo abrir COM9:",
        e
    )

self.current_color =
QColor(
    255,
    0,
    0
)

self.brightness = 100

self.ui.verticalSlider
.setMinimum(0)

self.ui.verticalSlider
.setMaximum(100)

self.ui.verticalSlider
.setValue(100)

self.ui.verticalSlider
.valueChanged.connect(
    self.brightness_changed
)

self.ui.pushButton
.clicked.connect(
    self.open_color_picker
)

def open_color_picker(self):

    dialog =
    QColorDialog(self)

    dialog.setCurrentColor(
        self.current_color
    )

    dialog.currentColorChanged
    .connect(
        self.color_changed
    )

    dialog.exec()

def color_changed(
    self,
    color
):

    self.current_color =
    color

    self.send_current_color()

def brightness_changed(
    self,
    value
):

    self.brightness =
    value

    self.send_current_color()

r = int(
    self.current_color.red()
    * self.brightness / 100
)

g = int(
    self.current_color.green()
    * self.brightness / 100
)

b = int(
    self.current_color.blue()
    * self.brightness / 100
)

self.ui.textEdit
.setPlainText(

    f"R = {r}\n"
    f"G = {g}\n"
    f"B = {b}"

)

self.ui.textEdit
.setStyleSheet(

f"""
background-color:
rgb({r},{g},{b});

color:white;

font-size:16px;
"""

)

message =
f"{r},{g},{b}\n"

self.serial_port.write(
    message.encode()
)

app =
QApplication(
    sys.argv
)

window =
MainWindow()

window.show()

sys.exit(
    app.exec()
)

Arduino

NeoPixels are individually addressable RGB LEDs, allowing each LED to display a different color and brightness level while sharing a single data line. In this implementation, the graphical interface developed with PyQt6 sends RGB values through serial communication to the XIAO ESP32-C6. The microcontroller then processes the received data and updates the NeoPixels in real time, enabling immediate color and brightness changes directly from the desktop application.

#include <Adafruit_NeoPixel.h>

#define LED_PIN D5
#define NUMPIXELS 2

Adafruit_NeoPixel pixels(
    NUMPIXELS,
    LED_PIN,
    NEO_GRB + NEO_KHZ800
);

void setup()
{
    Serial.begin(115200);

    pixels.begin();
    pixels.clear();
    pixels.show();
}

void loop()
{
    if (Serial.available())
    {
        String line = Serial.readStringUntil('\n');

        int r, g, b;

        if (
            sscanf(
                line.c_str(),
                "%d,%d,%d",
                &r,
                &g,
                &b
            ) == 3
        )
        {
            for (int i = 0; i < NUMPIXELS; i++)
            {
                pixels.setPixelColor(
                    i,
                    pixels.Color(r, g, b)
                );
            }

            pixels.show();
        }
    }
}

#include <Adafruit_NeoPixel.h>

#define LED_PIN D5
#define NUMPIXELS 2

Adafruit_NeoPixel pixels(
    NUMPIXELS,
    LED_PIN,
    NEO_GRB + NEO_KHZ800
);

void setup()
{
    Serial.begin(115200);

    pixels.begin();
    pixels.clear();
    pixels.show();
}

if (Serial.available())
{
    String line =
        Serial.readStringUntil('\n');
}

255,0,0

int r, g, b;

sscanf(
    line.c_str(),
    "%d,%d,%d",
    &r,
    &g,
    &b
);

for (int i = 0; i < NUMPIXELS; i++)
{
    pixels.setPixelColor(
        i,
        pixels.Color(r, g, b)
    );
}

pixels.show();

Results

Download files