14. Interface and Application Programming

For this week´s assigment, we are controlling a physical output using a graphical user interface, specifically using QT designer. You can download this software using this link.

We will also need to install python on our computer, and add the following command to your CMD terminal: pip install PyQt6 pyserial

For more information about interfaces, check out the Interface and Application Programming Fab Ibero Puebla´s Page

What I will try to do is change the color of an RGB led by the user´s input on the interface. This led works by sending a PWM signal to the 3 legs, depending on the signal on each one, it has a different color.

Let´s start with creating our interface. Opening Qt Designer, we open a main window option. On the left side menu, we have all the visual options we can add to our interface. For me, I will start by adding 3 sliders, each representing one of the red, green and blue values for the LED, and a label next to it to indicate which color is which.

We can change the properties of the text and sliders by selecting them, and a menu on the right side should appear. Let´s change the lable properties first: Click on the label you want to edit and look for the "text" option, click on it and a button with 3 dots should appear, click on it. And a menu like this should appear:

In my case, I changed the size from 8 to 16, changed it to bold, and the color to red. And I did that with the 2 remaining labels.

On the case of the sliders, I changed the size by selecting it and dragging one of the corners, and changed it´s value. Since I´m sending 3 different PWM values, and each one has a maximum of 255, that what I changed it to.

And lastly, I added an additional 3 labels to the right side of the sliders to indicate the value each one has

Now, we save the file, it should have a .ui extension. But we need to change that extension to a python one. What I did is go on you CMD, and direct it to the folder where you have your .ui file, and put the following command:

python -m PyQt6.uic.pyuic -o ui_rgb.py rgb.ui

(Change the name to your file name)

Now, open that file in whatever code editor you prefer, I choose Visual Studio Code. Alongside with that, create a new python file, and name it something like app, or whatever you prefer.

On that new python file, we add the following code, that was given to us by a professor:

Over here, you can put whatever code you need to make your app work, in my case, I just read the values from the sliders and send it via serial to self so the XIAORP2040 can interact with it.

On the Arduino IDE, I uploaded the following code the my XIAO RP2040 to change the value of the LED depending on the uncoming data

This is what the LED looks like when interacting with the interface