For More about Group Assignment
A GUI (Graphical User Interface) is a program that displays information and interactive elements like buttons, shapes, or images to the user. Its main goal is to create a visual environment to interact with hardware or software applications in a more intuitive way.
We used a custom board based on the Seeed XIAO microcontroller. The joystick is connected to analog pins A1 and A2 for X and Y axes, and a digital pin for the switch.
int X_Pos = 0;
int Y_Pos = 0;
int b;
void setup(){
Serial.begin(9600);
pinMode(D2, INPUT_PULLUP);
}
void loop(){
X_Pos = analogRead(A1);
Y_Pos = analogRead(A2);
Serial.print(X_Pos, DEC);
Serial.print(",");
Serial.print(Y_Pos, DEC);
Serial.print(",");
Serial.print(!b);
Serial.print("\n");
delay(10);
}
This code reads analog values from the joystick and prints them in decimal format, separated by commas. The Serial.print("\n") ensures each complete reading is sent on a new line, which helps during serial communication with Processing.
Processing is a flexible software sketchbook and language designed for visual arts and creative coding. It’s especially useful for creating graphical representations and can interact with hardware like Arduino via serial communication.
import processing.serial.*;
Serial port;
int x;
int y;
int Switch;
PFont f;
String portName;
String value;
void setup(){
size(512, 512);
port = new Serial(this, Serial.list()[0], 9600);
port.bufferUntil('\n');
f = createFont("Arial", 16, true);
textFont(f, 16);
}
The size() function sets up the canvas. Serial.list()[0] selects the connected serial port (usually the first one). port.bufferUntil('\n') tells Processing to read data until a newline, aligning with how data is sent from Arduino.
To visualize joystick movements (X, Y axes) and button press (switch) data from the Seeed XIAO in real-time using a graphical display built in Processing software.
size(512, 512);
Sets the window size of the GUI to 512x512 pixels. This is where all the shapes and text are drawn.
port = new Serial(this, Serial.list()[0], 9600);
port.bufferUntil('\n');
Establishes serial connection to the Arduino. bufferUntil('\n') waits until Arduino sends a complete line of data, ensuring clean parsing.
f = createFont("Arial", 16, true);
textFont(f, 16);
Sets a readable font to display joystick values (Analog X and Y) on the canvas.
void draw() {
clear(); // Clears previous frame
fill(255); // White fill color for ellipse
if (Switch == 1){
ellipse(x/2, y/2, 100, 100); // Bigger circle when button is pressed
} else {
ellipse(x/2, y/2, 25, 25); // Smaller circle when not pressed
}
text("AnalogX=" + (1023 - x) + " AnalogY=" + (1023 - y), 10, 20);
}
Dynamically draws a circle based on joystick input. Size of the circle changes depending on the joystick's button state. Text output displays real-time analog values.
void serialEvent(Serial port) {
value = port.readStringUntil('\n');
if (value != null) {
value = trim(value);
int[] values = int(splitTokens(value, ","));
x = values[0];
y = values[1];
Switch = values[2];
}
}
Parses the string data received from Arduino into integer values for:
x → Analog X positiony → Analog Y positionSwitch → Button state (1 = pressed, 0 = not pressed)A white circle moves around the canvas based on the joystick direction. Pressing the joystick button enlarges the circle. Numerical values for analog positions are shown in the top-left corner.
void draw(){
fill(0);
clear();
fill(255);
if (Switch == 1){
ellipse(x/2, y/2, 100, 100);
} else {
ellipse(x/2, y/2, 25, 25);
}
text("AnalogX=" + (1023 - x) + " AnalogY=" + (1023 - y), 10, 20);
}
The circle's size changes based on whether the joystick button is pressed. The coordinates of the ellipse follow the joystick’s X and Y movements. The text() function displays the analog values.
void serialEvent(Serial port) {
value = port.readStringUntil('\n');
if (value != null) {
value = trim(value);
int[] values = int(splitTokens(value, ","));
x = values[0];
y = values[1];
Switch = values[2];
}
}
This function reads incoming serial data, trims any whitespace, splits it using commas, and stores the joystick values in respective variables. This keeps the GUI updated with live joystick input.
This offers a simple yet powerful introduction to interfacing embedded hardware with visual interfaces. By combining Seeed XIAO with Processing, beginners can learn about real-time data communication, sensor integration, and graphical interaction—all essential skills in embedded systems and human-computer interaction.