Week 14 - Interfacing

This week, I struggled on where I should even start. After trying to ue micro python with Thonny and javascript with Node, I eventually took the advice of my a coder I knew and tried out DJango. After that failed, I used the expert network map to find the most referenced person which led me to Nikki Stancampiano, my savior. Through the excellent documentation, I used Processing(Download Here) and the arduino IDE to turn a Seeed RP2040 Builtin in Neopixel on using an interface.

Step by step on interfacing bc I struggled so much

  1. Install Processing and open it as well as arduino IDE.

  2. We can start by creating the arduino IDE code to turn on the LED or your output. I recommend you use the code format I have below rather than starting from scratch because this code lets us grab the serial emitted from the interface. Simply input the correct code for your output in the flashLED() function and send it to your board. You might also have to adjust some port stuff at the top.


const int ledPin1 = LED_BUILTIN;
int ledState = LOW;
int buttonState = 0;

void setup() {
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() {
    // ENTER CODE THAT SHOULD BE RUN WHEN INTERFACE CLICKED HERE!!!

}
  1. After changing and uploading the arduino IDE code, we can get started on using processing for an interface. Below is a code created by Nikki Stancampiano that I changed a bit. I recommend you start by copying the code and then play with size limitations, text, window size, ect. like I did.

Use Arduino IDE to get what port the board is on( For "port = new Serial(this, "COM7", 9600);")**

import processing.serial.*;

Serial port;
Button b;

void setup() {
size(200, 100);
// Modify the port name based on your system (check in Arduino IDE)
port = new Serial(this, "/dev/cu.usbmodem14101", 9600);

// Create a button
b = new Button(width/2 - 50, height/2 - 25, 100, 50, "Toggle LED");
}

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() {
    rect(x, y, w, h);
    fill(255);
    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");
    }
}
}

}
  1. Now run the interface with the run button and when you click the button, the letter "H" is sent to the board which then receives it and runs whatever you put in flashLED(). Ur Done!!!!

My Codes

Code Files

Arduino IDE Code

#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);

}

Processing Code (Interface)

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, "COM7", 9600);

// Create a button
b = new Button(width/2 - 100, height/2 - 50, 200, 100, "Click Here For LED Party");
}

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("Ziggurat-Black", 16);
    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 Working Interface

Group Work

Click Here for Group Assignment

Reflection

This week taught me a lot! I learned the wide and complex different ways of creating interfaces, the struggles of libraries being discontinued in python, learned how to create a button interface and change the appearance, size, text, ect. and more. I can't wait to learn sliders and implement them into my final project.