Group Assignment on Interface and application programming
Group members
Week 14 – Interface and application programming (Group Work)
This week's group assignment:
- Compare as many tool options as possible.
- Document your work on the group work page and reflect on your individual page what you learned.
PyQt5
We started by following Akseli's documentation for making a graphical user interface (GUI) for blinking an LED on a microcontroller with a button on a GUI on a PC. It is using PyQt5, which is a set of Python bindings for Qt5.
First, we installed PySerial python package to be able to do serial communication with a microcontroller by typing "pip install pyserial" in terminal of VScode.
Then, we created a Python virtual environment in the VS Code terminal "python -m venv .week14_virtual_env" (this should have been done first)
The virtual environment should be then activated with "..week14_virtual_env\Scripts\Activate.ps1"
Then we installed the pyqt5 python package: "pip install pyqt5"
We then used Akseli's python code serial-led.py (see end of this page) on the PC side. This program creates a GUI with a toggleable "LED" button. The COM port can be selected (the correct one can be chosen as usual, connecting/disconnecting the microcontroller and observing which port appears or disappears). After connecting, the program sends '1' over serial when LED button is turned on and '0' when turned off. It also periodically reads serial data from the microcontroller: If it receives LED,0,1, it updates the button to say "LED is on" and "LED is off" if it receives LED,0,0.
For the RP2040 microcontroller we used serial-led.ino (see end of this page), which continuously checks the serial input. If it receives '1', it turns on the NeoPixel and sends LED,0,1 over serial. If it receives '0', it turns off the NeoPixel, and sends LED,0,0 over serial.
Processing
Next, we followed Gleb's example using Processing, which is a flexible software sketchbook and a language for learning how to code. Some downsides of Processing are, that it is quite static (windows resizing difficult), and it is difficult to make responsive programs.
This time, we used an ESP32-C3 microcontroller on a PCB which had a button connected to pin 1. We uploaded serialInterfaceEmptyArduino.ino (see end of this page) on the microcontroller. This program sends 0,1 over the serial port to the PC when the button is pressed, and it includes debounce logic to only interpret button presses over 50 ms length as real button presses.
On the PC side we used Processing code (zipped in file serialInterfaceEmptyProcessing.zip at the end of this page). This program makes a GUI with a circle in the center of the window. It connects to the microcontroller via serial port and changes the circle's color randomly when a message starting with number 0 is received via serial input.
When doing the demo it seemed to work correctly, but in hindsight, looking at the code, there seems to be an option in the code to also turn on the LED on the PCB when the button is pressed, but this would require adding a few more lines of code to complete the feature.
WebSocket
We went to random nerd tutorials and searched websocket in which we found this particular example in which you can control LED using a web page. We first downloaded the littleFs online and created a folder called plug-in in which we stored it. Then downloaded all the files and opened the arduino one. We first pressed ctrl + shift+ P and used the little Fs one to upload the website to the esp32.
In our first try it didn't work and we found some mistakes with the code. After some tweaking with the code we made some changes:
ledcSetup(ledChannel1, freq, resolution); ledcAttachPin(ledPin1, ledChannel1); ledcSetup(ledChannel2, freq, resolution); ledcAttachPin(ledPin2, ledChannel2); ledcSetup(ledChannel3, freq, resolution); ledcAttachPin(ledPin3, ledChannel3);
ledcWrite(ledChannel1, 128); ledcWrite(ledChannel2, 128); ledcWrite(ledChannel3, 128);
and then uploaded the sketch again. The code was now working and the leds lit up and we could control the brightness from the website.
Summary
- Explored three interface options: PyQt5, Processing and WebSocket
- Used serial communication to interact with microcontrollers
- Processing is quite easy for GUIs
- PyQt5 provides better flexibility and GUI responsiveness
- Successfully controlled LED brightness via a web interface on the ESP32