14. 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.
Download Design Files¶
Click here to download my design files folder
Group Work Reflection¶
to come :)
Research¶
I wasn’t quite sure what to do to start this week. The video helped, however, I was still a bit confounded on where to start and what I could even realistically do. I checked out many of my peer’s documentation and eventually decided that Collin Kanofsky’s documentation made the most sense to me and seem most plausible. I am not very versitile in software and things of such sort so I wasn’t very confident in my abilities going into this week.
I downloaded the software Processing and started by exploring some of their examples. From their, I read through another Fab Academy Student’s Documentation, Nicole Stancampiano.
I then used ChatGPT to experiment with coding in Processing and had it write this cool code that made a bunch of circles appear on the screen when you clicked a button on the screen:
import processing.serial.*;
Serial port;
Button b;
void setup() {
size(600, 400);
// Modify the port name based on your system (check in Arduino IDE)
// Commenting out serial initialization for the sake of simplicity in this example
// port = new Serial(this, "/dev/cu.usbmodem11301", 9600);
// Create a button
b = new Button(width/2 - 100, height/2 - 50, 200, 100, "Click for Fun");
}
void draw() {
// Display random circles when button is clicked
if (b.isClicked()) {
background(random(255), random(255), random(255)); // Change background color
for (int i = 0; i < 50; i++) {
float x = random(width);
float y = random(height);
float diameter = random(10, 100);
fill(random(255), random(255), random(255)); // Random circle color
ellipse(x, y, diameter, diameter);
}
}
// Draw the button
b.drawButton();
}
void mousePressed() {
// Check if the mouse is pressed over the button
b.clicked();
}
class Button {
float x, y, w, h;
String label;
boolean clicked = false;
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;
}
void drawButton() {
PFont f;
f = createFont("Arial", 24);
rectMode(CENTER);
rect(x, y, w, h, 10);
fill(255);
textFont(f);
textAlign(CENTER, CENTER);
fill(0);
text(label, x, y);
}
void clicked() {
if (mouseX > x - w/2 && mouseX < x + w/2 && mouseY > y - h/2 && mouseY < y + h/2) {
clicked = true;
} else {
clicked = false;
}
}
boolean isClicked() {
return clicked;
}
}
Feeling a bit more comftorable with what lied ahead of me, I decided to experiment with the codes Collin and Nicole Stancampiano used.
Hardware¶
For this week, I used a XIAO-RP2040 and the board I designed and made in Week 11: Input Devices.
Coding¶
I then used ChatGPT to help me understand Collin Kanofsky’s interfacing code
ChatGPT said:
This code is a simple Processing sketch that interfaces with an Arduino or any other microcontroller connected via a serial port. Let's break it down step by step:
1. Import Serial Library: `import processing.serial.*;`
This line imports the serial library, which provides functionality for communicating with serial ports.
2. Declare Serial Port Object: `Serial port;`
This line declares a variable `port` of type `Serial`, which will be used to communicate with the serial port.
3. Declare Button Object: `Button b;`
This line declares a variable `b` of type `Button`, which represents a clickable button in the sketch.
4. Setup Function: `void setup()`
This function is called once when the sketch starts. It initializes the sketch, sets the canvas size, and initializes the serial port object.
5. Initialize Serial Port: `port = new Serial(this, "/dev/cu.usbmodem11301", 9600);`
This line initializes the serial port object `port` with the specified port name ("/dev/cu.usbmodem11301" in this case) and baud rate (9600).
6. Create Button: `b = new Button(width/2 - 100, height/2 - 50, 200, 100, "Click for Blinks");`
This line creates a new button object `b` with the specified position, dimensions, and label.
7. Draw Function: `void draw()`
This function is called continuously in a loop after `setup()`. In this sketch, it's empty because we don't need to draw anything continuously.
8. Mouse Pressed Event: `void mousePressed()`
This function is called whenever the mouse is pressed. It checks if the mouse is pressed over the button and calls the `clicked()` method of the button object.
9. Button Class: `class Button`
This is a nested class that represents a clickable button. It has properties like position, dimensions, and label.
10. Constructor: `Button(float x, float y, float w, float h, String label)`
This is the constructor of the `Button` class. It initializes the button with the specified parameters and draws it on the canvas.
11. drawButton() Method: `void drawButton()`
This method draws the button on the canvas using the `rect()` and `text()` functions.
12. clicked() Method: `void clicked()`
This method is called when the button is clicked. It checks if the mouse coordinates are within the button boundaries and sends a command ('H') to the Arduino via the serial port if the conditions are met.
This sketch essentially creates a graphical interface with a clickable button. When the button is clicked, it sends a command to an Arduino or similar microcontroller via the serial port to trigger some action, like blinking an LED.
From here, I uploaded the following code to my Seeed Studio XIAO-RP2040 in Arduino:
#include <Adafruit_NeoPixel.h>
int Power = NEOPIXEL_POWER;
int PIN = PIN_NEOPIXEL;
#define NUMPIXELS 1
Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);
const int ledPin1 = LED_BUILTIN;
int ledState = LOW;
int buttonState = 0;
void setup() {
pixels.begin();
pinMode(Power,OUTPUT);
digitalWrite(Power, HIGH);
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");
pixels.clear();
pixels.setPixelColor(0, pixels.Color(255, 0, 0)); // Red
delay(500);
pixels.show();
delay(500);
pixels.clear();
pixels.setPixelColor(0, pixels.Color(0, 255, 0)); // Green
delay(500);
pixels.show();
delay(500);
pixels.clear();
pixels.setPixelColor(0, pixels.Color(0, 0, 255)); // Blue
delay(500);
pixels.show();
delay(500);
pixels.clear();
pixels.setPixelColor(0, pixels.Color(0, 0, 0)); // OFF (black tecnically)
delay(500);
pixels.show();
delay(500);
}
Then, I used ChatGPT’s information to help me understand and edit the code and came up with the following interfacing blink code:
import processing.serial.*;
// The serial port
Serial myPort;
Serial port;
Button b;
void setup() {
size(300, 200);
// Modify the port name based on your system (check in Arduino IDE)
port = new Serial(this, "/dev/cu.usbmodem11301", 9600);
// Create a button
b = new Button(width/2 - 100, height/2 - 50, 200, 100, "Click for Blinks");
}
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("arial", 24);
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");
}
}
}
}
Video of the interfacing:
Reflection¶
This week mainly served as a reminder to me to not look down upon myself too much. Even as someone who definetly struggles with software-related things, I was able to complete this weeks assignment. Also, I was reminded of the wonderful powers of Artificial Intelligence (when used properly and prompted well).
References¶
https://fabacademy.org/2024/labs/charlotte/students/collin-kanofsky/Week%2014/
https://processing.org/reference/PFont.html
https://fabacademy.org/2023/labs/vancouver/students/nicole-stancampiano/assignments/week14.html