WEEK 14 Interface and Application Programming

•G•R•O•U•P• •A•S•S•I•G•N•M•E•N•T•

All group assignments can be found on the official website of FAB LAB BENFICA

DIFFERENT INTERFACES & APPLICATIONS

As I’m the only student and coding is not my strong part I focused on PROCESSING

To understand the scope and examples of this assignment, I reviewed older documentation:

• Fab Lab Barcelona Processing Docs (2021)
• HackMD Notes on Arduino ↔ Processing
• Fab Academy 2024 BCN Group Assignment

And here’s a table comparing the applications:

Tool	Type	Language/Platform	GUI Support	Hardware Interaction	Ease of Use	Web Support	Mobile Support	3D/AR/VR Support	Notes
Processing	Programming IDE & Language	Java-based	Basic GUI	Yes (Serial, etc.)	Medium	Limited	No	Limited (via libraries)	Good for quick visual tests
P5.js	JavaScript Library	JavaScript	Canvas/Web	Yes (WebSerial)	Easy	Yes	Yes (via browser)	Limited (WebGL)	Web version of Processing
Blender	3D Software & API	Python (API)	Full 3D GUI	No (not natively)	Medium-Hard	No	No	Yes (strong)	Great for 3D modeling and animation
MIT App Inventor	Mobile App Builder (GUI)	Block-based / Java	Yes	Yes (via Bluetooth)	Very Easy	No	Yes (Android only)	No	Great for beginners and mobile interfaces
A-Frame	Web-based AR/VR framework	HTML + JavaScript	Web	No (not directly)	Easy-Medium	Yes	Yes (browser)	Yes (WebVR/WebXR)	Simple VR and AR scenes on web
Node-RED	Flow-based Programming Tool	JavaScript (backend)	Yes (Flow UI)	Yes (MQTT, Serial)	Easy	Yes (Dashboard)	Limited (web apps)	No	Good for IoT, sensor/actuator logic
Serial Communication	Protocol/Method	Varies (Python, JS, etc.)	No UI	Yes	Medium	Via bridge	No	No	Key to connect microcontrollers
Flutter	Mobile & Web App Framework	Dart	Yes	Yes (via plugins)	Medium	Yes	Yes (Android/iOS)	Limited (via 3rd party)	Fast dev for mobile/web apps
MediaPipe	ML & Computer Vision Library	C++, Python, JS	No (raw output)	No direct serial	Medium-Hard	Yes (JS)	Yes	Yes (face/pose tracking)	Used for CV interactions
React	Web App Framework	JavaScript (JSX)	Yes (custom)	No direct (needs bridge)	Medium	Yes	Yes (via wrappers like React Native)	Limited (3D via Three.js)	Component-based UI design

PROCESSING

I used Arduino Uno board with a potentiometer. You can check more how to connect it here

• I also added a pull down resistor between the signal and ground for a less noisy reading.

In ARDUINO IDE there are some examples that contain ready to copy code for Processing:

Just select this part and paste it in the Processing window:

When you press PLAY you can see available ports:

My Arduino board is on COM10 which means I have to put [2] in the code line:

myPort = new Serial(this, Serial.list()[2], 9600);

VIDEO SIMULATION

•I•N•D•I•V•I•D•U•A•L• •A•S•S•I•G•N•M•E•N•T•

TREADMILL PCB & CODE

I will use the PCB board that I designed for the Treadmill with the hall sensor from WEEK_09 INPUT DEVICES

Here’s the code I uploaded to the Xiao:

#define HALL_SENSOR_PIN D6
#define LED_PIN D7
#define BUTTON_PIN D9

void setup() {
pinMode(HALL_SENSOR_PIN, INPUT);
pinMode(BUTTON_PIN, INPUT);
pinMode(LED_PIN, OUTPUT);

Serial.begin(115200);  // Start Serial Monitor
}

void loop() {
int sensorState = digitalRead(HALL_SENSOR_PIN);  // Read Hall sensor
int buttonState = digitalRead(BUTTON_PIN);      // Read button state

if (sensorState == LOW || buttonState == LOW) {
digitalWrite(LED_PIN,HIGH);  // Turn LED ON
Serial.println("LED ON");
} else {
digitalWrite(LED_PIN, LOW);   // Turn LED OFF
Serial.println("LED OFF");
}

// Print sensor and button states for debugging
Serial.print("Hall Sensor: ");
Serial.println(sensorState == LOW ? "ON" : "OFF");

Serial.print("Button: ");
Serial.println(buttonState == LOW ? "PRESSED" : "NOT PRESSED");

delay(300);  // Small delay to avoid spam in Serial Monitor
}

PROCESSING

I asked ChatGPT to help me with the Processing part:

Prompts:

• “I would like to make in processing, that every time the sensor detects an impulse or a button is pressed the cat.png image I have, rotates”
• “add notations on each line of the code on the side explaining what’s up”

PROCESSING CODE:

import processing.serial.*;  // Import the Serial library to communicate with Arduino

Serial myPort;               // Declare a Serial object for communication
PImage img;                  // Declare an image object to hold the .png image
float angle = 0;             // Angle of rotation for the image
boolean rotateImage = false; // Boolean flag to track whether image should rotate

void setup() {
  size(800, 800);            // Set the size of the display window to 800x800 pixels
  img = loadImage("cat.png"); // Load the image file (must be in sketch folder)
  img.resize(200, 200);       // Resize the image to 200x200 pixels

  println(Serial.list());     // Print a list of available serial ports to the console

  // Choose the correct serial port from the list (index [2] in this case)
  // This should match the port your Arduino/XIAO is connected to
  String portName = Serial.list()[2];
  myPort = new Serial(this, portName, 115200); // Open the serial port at 115200 baud
  myPort.bufferUntil('\n');   // Tell Processing to read incoming data until it sees a newline '\n'
}

void draw() {
  background(255);           // Clear the background with white color every frame

  pushMatrix();              // Save the current transformation matrix
  translate(width/2, height/2); // Move the origin (0,0) to the center of the screen

  if (rotateImage) {         // If the flag is true (sensor/button is active)
    angle += 0.05;           // Increase the rotation angle a bit (controls speed of rotation)
  }

  rotate(angle);             // Apply the rotation transformation
  imageMode(CENTER);         // Draw the image centered on the origin
  image(img, 0, 0);          // Draw the image at the rotated origin (screen center)
  popMatrix();               // Restore the original transformation matrix
}

void serialEvent(Serial myPort) {
  // This function is automatically called when new serial data is available

  String inData = trim(myPort.readStringUntil('\n')); // Read incoming serial data up to newline and trim spaces
  println("Received: " + inData);                     // Print the received message to the console

  // If Arduino sent "LED ON", start rotating the image
  if (inData.equals("LED ON")) {
    rotateImage = true;
  }
  // If Arduino sent "LED OFF", stop rotating the image
  else if (inData.equals("LED OFF")) {
    rotateImage = false;
  }
}

VIDEO SIMULATION

FILES:

• ImageRotation.zip

•C•H•E•C•K•L•I•S•T•

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 for the embedded board that you made. that interfaces a user with an input and/or output device(s)

Learning outcomes:

• Implement a User Interface (UI) using programming and explore protocols to communicate with a microcontroller board that you designed and made.

Have you answered these questions?

• Linked to the group assignment page.
• Documented your process.
• Explained the UI that you made and how you did it.
• Explained how your application communicates with your embedded microcontroller board.
• Explained any problems you encountered and how you fixed them.
• Included original source code (or a screenshot of the app code if that's not possible).
• Included a ‘hero shot’ of your application running & communicating with your board.