15. Interface and application programming¶
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.
Individual Assignment¶
- Write an application that interfaces a user with an input and/or output device(s) on a board that you made.
Getting Started¶
Just to preface, I struggled a lot with this week until I found Collin Kanofsky and Nicole Stancampiano’s documentation, so huge thanks to them for their help!
Creating the Interface¶
The first step I took for this week’s assignment was to download Processing, which can be found here. Processing is a simple application which allows people with limited programming knowledge to create interfaces, which is why I chose it. As for the code I used to create an interface, I modified the code Nicole Stancampiano displayed in her documentation which creates a button on the screen. The way this works is, if that button is clicked by a cursor, it sends a signal to Arduino by using “port.write(‘H’)”. When this ‘H’ is received by the board, the output device of the board will activate. The code I wrote in Arduino IDE will be shown later. For now, the interfacing code that I used is shown below.
import processing.serial.*;
Serial port;
Button b;
void setup() {
size(400, 200);
// Modify the port name based on your system (check in Arduino IDE)
port = new Serial(this, "COM7", 9600);
// Create a button
b = new Button(width/2 - 100, height/2 - 50, 200, 100, "Activate");
}
void draw() {
// Nothing to draw here
}
void mousePressed() {
// Check if the mouse is pressed over the button
b.clicked();
}
class Button {
float x, y, w, h;
String label;
Button(float x, float y, float w, float h, String label) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.label = label;
drawButton();
}
void drawButton() {
PFont f;
f = createFont("Calibri", 20);
rect(x, y, w, h);
fill(0);
textFont(f);
textAlign(CENTER, CENTER);
text(label, x + w/2, y + h/2);
}
void clicked() {
println("Button Clicked");
if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h) {
if (port != null) {
port.write('H'); // Send 'H' to Arduino
println("Sent command 'H' to Arduino");
}
}
}
}
One important thing to note about the code above is that the Pfont f, textFont(f), and f = … parts of the code allow you to display a message on the button(in this case, “Activate”, which is defined in the b = … part of the code).
Arduino Code¶
At the same time as when the code in Processing was being created, I was deciding what board to use as the output. I eventually settled on the Quentorres board I made early on in Fab Academy, and I planned to blink 2 of its LEDs (alternating) after clicking on the button from the interface. To do this, I first created a new file in Arduino IDE. After seeing how Collin Kanofsky got his interfacing week assignment to work, I learned what I had to do to make my code run successfully (namely the void loop() portion of the program). The finished code is shown below.
#include <Adafruit_NeoPixel.h>
int ledState = LOW;
void setup() {
pinMode(0, OUTPUT);
pinMode(1, OUTPUT);
Serial.begin(9600);
Serial.println("Arduino is ready");
}
void loop() {
if (Serial.available() > 0) {
char command = Serial.read();
Serial.print("Received command: ");
Serial.println(command);
if (command == 'H') {
ledState = !ledState; // Toggle LED state
flashLED();
}
}
}
void flashLED() {
Serial.println("Flashing LED");
digitalWrite(0, HIGH);
delay(500);
digitalWrite(1, HIGH);
delay(500);
digitalWrite(0, LOW);
delay(500);
digitalWrite(1, LOW);
delay(500);
digitalWrite(0, HIGH);
delay(500);
digitalWrite(1, HIGH);
delay(500);
digitalWrite(0, LOW);
delay(500);
digitalWrite(1, LOW);
delay(500);
}
Problems Encountered¶
Although I was sure this code would work, when I actually began trying to upload it to my board, I kept encountering an error telling me that UPDI initialization had failed. After trying to figure out why this was happening for a few minutes, I settled on a possible explanation. Because I had turned my Xiao RP2040 into a programmer, I might no longer be able to upload code to it in the same way as with other chips. To test this theory, I opened file explorer and held down the ‘B’ and ‘R’ buttons on the chip so that it would appear under “This PC” on my computer. After doing this, I went back to Arduino IDE, and, sure enough, a port different to the one I was originally using now popped up. Instead of displaying “COM7” as an available port like before, Arduino IDE was now displaying “UF2_Board” as a port. After choosing this port, the code was uploaded successfully!
Running the Code¶
Now that I had successfully uploaded the code to my Xiao RP2040, I went back to processing and clicked on the start button to run the interfacing code. The video below shows my board successfully interfacing with my computer.
Group Assignment¶
Add later.
Reflection¶
I feel like I learned a lot from this week, both from the struggles I experienced before finding Processing and when trying to figure out how to work with a Xiao RP2040 that had been turned into a programmer. I also learned how to adjust the different parts of my interface, such as the size of the button, what text it would display, what signal it would send out to my board, and more! My files for this week can be found here